社区后台数据mock解决方案

宋飞翔

2018年06月22日

  • NEI常用功能介绍
     
  • 社区后台原有本地mock方式
     
  • 结合NEI的数据mock方案
     
  • 线上/测试环境代理到本地debug
     
  • 演示
     
  • 总结展望

在NEI上约定接口

新建接口

添加/导入请求数据和响应结果

手动添加

数据模型导入

JSON导入

在线接口导入

JavaBean导入

生成规则

NEI使用规范

NEI构建工具(server.config.js)

Mock.js

社区后台原有本地mock方案

缺点：

  1. 需要手动维护接口和mock文件的对应关系；
  2. 需要手动添加mock文件和数据；
  3. mock方式单一，只能使用本地mock，而不能使用nei线上提供的mock数据、也不能使用线上或测试环境数据。

结合NEI的数据mock方案

1. 使用NEI提供的在线mock数据

2. 结合原有本地mock中间件和NEI提供的
    mock数据

3. 代理到线上/测试环境

1. 使用NEI提供的在线mock数据

2. 本地mock

3. 代理到线上/测试环境

// mock/proxy.config.js
const proxy = require('http-proxy-middleware')

const proxyTarget = 'http://content-kl.netease.com'
const proxyTable = [
    proxy('/api', {
        target: proxyTarget,
        changeOrigin: true,
    }),
    proxy('/community', {
        target: proxyTarget,
        changeOrigin: true,
    })
]

module.exports = {
    // 代理环境配置
    proxyTable
}
// build/dev-server.js
const { proxyTable } = require(path.resolve(__dirname, './../mock/proxy.config.js'))
app.use(proxyTable)

线上/测试环境代理到本地debug

proxy-local

@娄涛

当拿到一个需求后...

/test/blacklist

1. 定义接口

NEI

2. 前后端并行开发

4. 联调

使用nei线上数据/本地mock数据

3. 前端自测

使用测试环境数据

5. 冒烟、提测

6. 测试环境/线上问题

测试环境冒烟

阶段

需要的mock数据或资源

本地资源

总结展望

1. 合理正确使用NEI能有效提高开发效率
    和开发体验

2. 提高可移植性 => NPM
    提高可用性 => 进一步封装
​    持续迭代

谢谢观看

Made with Slides.com