有范云协作

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

包勇明 / @huntbao

简介

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

http://youfan.netease.com

演示项目

使用有范云协作开发 Todo App

课程内容及目标

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

接口管理平台 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