前后端分离 Mock数据
前后端分离开发中,当后端 API 没有完成时,前端无法继续调试。为了前后端能并行开发,前端需要一套 API 的接口环境,这个就是 Mock API 。下面的图,对开发流程进行了很好的顺理。如果没有 Mock 数据的环节,前后端的联调会消耗非常多的时间。
1. 何为 Mock ,模拟也
通常,后端提供的 API 文档,不能满足前端调试需求。在合作开发的过程中,最好能提供,一个模拟的 API 数据请求接口。有几种方法可以模拟接口调用:1 . 手工 Mock 数据。手工填写模拟数据,保存为 json,本地运行一个 HttpServer,模拟 API 调用返回数据。缺点是,无法生成批量的数据,不具有随机性,路由不方便管理。如果,本地不运行HttpServer服务,前端直接使用静态 json,上线前还需要变更URL。2 . 前端 Mock。劫持 Ajax , 通过拦截 Ajax请求,返回一定格式的假数据。缺点是,需要引入 mock-api.js文件,每个页面都需要一个对应的 mock-api.js 的文件,管理好这些 mock-api.js 会有一定挑战。3 . 后端 Mock。- 使用类似 swagger 的工具。根据工具定义的模板规则,配置接口信息,生成 Mock 数据。缺点是操作比较复杂,需要后端人员的配合。
- Mock-server。在本地运行一个静态服务,将接口请求,转换为 json 静态文件或者生成规则的请求。
- 基于 HTML 模板生成模拟数据
- 拦截并模拟 ajax 请求
- 支持 CORS 和 JSONP 跨域请求。
- 自定义路由。
- 支持中间件。
- 模块化。
- 排序参数: _sort, _order。
- 操作符: _gte大于,_lte小于, _ne非, _like模糊查询
- https://github.com/lifesinger/blog/issues/184
- https://github.com/typicode/json-server
- http://elijahmanor.com/angry-birds-of-javascript-green-bird-mocking/
- https://www.npmjs.com/package/json-server