有范云协作介绍

有范云协作

让项目的协作姿势更有范儿！

包勇明 / @huntbao

简介

一套集规范、工具、平台于一体的工程化解决方案

http://youfan.netease.com

演示项目

使用有范云协作开发 Todo App

课程内容及目标

通过演示项目, 掌握以下工具的使用:

• 接口管理平台 NEI
• 构建工具 NEI-toolkit
• 本地模拟容器 Puer
• 接口测试工具 Phosphorus

接口管理平台 NEI 介绍

• 项目组/项目
• 用户组
• 页面管理
• 资源库
  • 异步接口
  • 数据类型
  • 模板资源
  • API 接口
• 标签系统
• 共享资源
• 项目文档

Todo App 分析: 产品划分

• Official site
• Web App
• Mobile App
• 其他子产品, 比如运营后台

Todo Web App 分析: 页面

• 登录页面
  • /login
• 主页面
  • /main
  • NEI 中的单页应用如何管理?

Todo Web App 分析: 数据类型

• 用户对象: User^简化版
  ```json { "id": "{用户id}", "name": "{用户名称}" } ```
• todo 对象: Todo^简化版
  ```json { "id": "{todo id}", "text": "{todo 内容}", "completed": "{是否完成}" } ```

Todo Web App 分析: 接口

获取 todo 列表:

• 地址: /api/todos/
• 方法: GET
• 输入: 无
• 输出:
  ```json { "code": "{响应状态码}", "message": "{响应消息}", "result": "Array{Todo}" } ```

Todo Web App 分析: 接口

添加单个 todo:

• 地址: /api/todos/
• 方法: POST
• 输入:
  ```json { "text": "{todo 内容}" } ```
• 输出:
  ```json { "code": "{响应状态码}", "message": "{响应消息}", "result": "{Todo}" } ```

Todo Web App 分析: 接口

更新单个 todo 的内容:

• 地址: /api/todos/:todoId
• 方法: PUT
• 输入:
  ```json { "text": "{新的 todo 内容}" } ```
• 输出:
  ```json { "code": "{响应状态码}", "message": "{响应消息}", "result": "{Todo}" } ```

Todo Web App 分析: 接口

批量更新 todo 的完成状态:

• 地址: /api/todos/
• 方法: PUT
• 输入:
  ```json { "completed": "{是否完成}", "ids": "Array{todoId}" } ```
• 输出:
  ```json { "code": "{响应状态码}", "message": "{响应消息}", "result": "Array{Todo}" } ```

Todo Web App 分析: 接口

删除单个 todo:

• 地址: /api/todos/:todoId
• 方法: DELETE
• 输入: 无
• 输出:
  ```json { "code": "{响应状态码}", "message": "{响应消息}", "result": "{Todo}" } ```

NEI 操作演示

构建工具 NEI-toolkit

将 NEI 上定义好的规范（异步接口、数据类型、模板）翻译成指定语言的程序代码。目前支持的工程类型有：

• Web
  • Java
  • 不断增加中...
• Android
• iOS

构建工具 NEI-toolkit

生成本地模拟容器 Puer 的配置文件：puer.js

```js var engine = {}; engine.ftl = (require('../src/main/webapp/src/javascript/lib/express-freemarker/index.js'))(); module.exports = { "port": 8002, "engine": engine, "dir": "../src/main/webapp/", "views": "../src/main/webapp/WEB-INF/views/", "offline": false, "rules": "./route.js" }; ```

NEI-toolkit: 生成 Todo Web 工程

```bash // 1. 生成工程 nei build 11443 -p ./todoweb /* 11443 是 todo 项目的 id */ // 2. 安装依赖 cd todoweb/src/main/webapp/ bower install cd src/javascript/lib/express-freemarker/ npm install ```

运行 Todo Web

`方式一: 双击运行文件`

双击 deploy 目录下的运行文件, 例如 OS X 下是 server.command 文件

`方式二: 命令行`

```bash puer -c nei.11443/puer.js mcss -w 1 -c src/main/webapp/mcss.json ```

运行 Todo Web

Todo Web 项目中定义了两张页面, 路径是 `/login` 和 `/index`，所以它们的访问地址是: ```html http://localhost:8002/login http://localhost:8002/index ```

前端开发调试要点

• 修改 mock 数据要方便
• 切换服务器地址要方便

调试 Todo Web

`(1)使用本地 mock 数据:`

测试数据默认从 NEI 获取，util.js: ```js var ROOT = { API:'http://nei.hz.netease.com/api/parameter/getTestData?api&type=%s&id=%s' } ``` 将 puer.js 中的 `offline` 改为 `true`: ```js module.exports = { "offline": true //使用本地 mock 数据 } ``` >注：更改配置文件后，需要重启服务

调试 Todo Web

`(2)修改本地 mock 数据:`

修改 mock 数据文件, 例如 todo 列表文件: ```bash /src/main/webapp/src/mock/get/api/todos.json ``` 无需刷新页面, 就能即时看到修改变化

调试 Todo Web

`(3)连接服务器`

修改 route.js, 所有请求使用所要连接的服务器地址: ```bash module.exports = { "ALL /api/*": "http://localhost:3000", // 本地起的服务器, 其他同事的服务器, 测试服务器, 线上服务器等 //"DELETE /api/todo/:todoId":u.p(15763,"delete/api/todo/todoId"), //"GET /api/todos":u.p(15759,"get/api/todos"), //"POST /api/todos":u.p(15760,"post/api/todos"), //"PUT /api/todos":u.p(15762,"put/api/todos"), //"PUT /api/todos/:todoId":u.p(15761,"put/api/todos/todoId"), "GET /index":u.r(0,[{"i":11032,"p":"pages/index"}]), "GET /login":u.r(0,[{"i":11031,"p":"pages/login"}]) }; ``` >刷新页面就能看到变化, 不需要重启服务

接口测试工具 Phosphorus

一款类似 Postman 的接口测试工具, 无缝对接有范云协作

项目地址: https://github.com/huntbao/phosphorus

Phosphorus 操作演示

Thank You

Q & A

包勇明 / @huntbao