mock方案

mockjs

Mock数据 easy-mock 基于 mockjs
http://mockjs.com/

mockjs 文档

http://mockjs.com/examples.html

本地node服务

1. 本地 node服务器，推荐 json-server
2. 测试服务器，window.fetch请求后端接口
3. 请求拦截，代表 mock.js
4. 代码侵入
   1. 直接在代码中写mock数据，活着请求本地的 json文件

在线mock假数据

1. http://jsonplaceholder.typicode.com/
2. 获取 users列表 http://jsonplaceholder.typicode.com/users
3. https://proapi.azurewebsites.net/github/issues

json-server

1. json-server 打造 mock server环境，前后端分离开发 https://github.com/typicode/json-server
2. 自定义程度高，模拟 restful API增删查改
3. 暂定传入的数据结构，根据这些数据渲染页面
4. 缺点
   1. 与测试服务器对比，无法随着后端API的修改而自动更改

npm install json-server --save-dev
// package.json
"script": {
  "mock": "json-server --watch db.json --port3030"
}
npm run mock
npm run start
/items
/items/id Get,Put, Delete
/items/month=2018090-23&sort=name Get

json-server配置

1. 项目目录新建__json_server__ 文件夹

   /__json_server__
    /.gitkeep
   /db.json

2. package.json 设置 scripts命令和 proxy代理

3. 运行json-server npm run json-server

{
  "scripts": {
    "json-server": "json-server db.json --static ./__json_server__ --watch",
    "json-server": "json-server db.json --static ./__json_server__/ --watch --port 3001 --middlewares ./__json-server__/middleware.js",
  },
  "proxy": "http://localhost:3030"
}

1. db.json

{
  users: {},
  employee: [
    {
      "title": "请别人喝茶",
      "price": 300,
      "date": "2018-11-15",
      "monthCategory": "2018-11",
      "id": "_qryggm533",
      "cid": "3",
      "timestamp": 1534291200000
    },
  ],
  category: {
    "1": {
      "name": "工资",
      "icon": "money",
      "id": "10",
      "type": "income"
    }
  },
  items: [
    {
      "name": "旅行",
      "iconName": "ios-plane",
      "id": "1",
      "type": "outcome"
    },
    {
      "name": "餐饮",
      "iconName": "ios-restaurant",
      "id": "2",
      "type": "outcome"
    },
    {
      "name": "工资",
      "iconName": "ios-card",
      "id": "10",
      "type": "income"
    },
  ]
}

restful-api

1. REST API 参考 https://restfulapi.net/
2. URI代表资源对象
3. METHOD代表行为，对服务器端资源进行操作

GET /users 获取列表
GET /user/3 详情
POST /user 增加
PUT /user/3 全部替换
PATCH /user/3 修改一部分属性
DELETE /user/3 删除

json-server-router

1. 常见的路由方式，--routes命令自定义路由

过滤

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

分页

GET /posts?_page=7
GET /posts?_page=7&_limit=20

排序

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

react-mock

export default {
  'GET /api/getList': {
    data: [100, 200, 300]
  },
  'GET /api/getListAsync': (req, res) => {
    console.log(req, res)
    setTimeout(() => {
      res.json({
        data: Array(10).fill(req.query.value * 2)
      })
    }, 1000)
  }
}

测试服务器框架

1. 搭建测试服务器的框架/工具/程序库
   1. swagger RESTful 风格的 Web 服务框架 https://swagger.io/
   2. rap https://github.com/thx/RAP
   3. moco https://github.com/dreamhead/moco
   4. yapi https://github.com/YMFE/yapi
2. 优点
   1. 配置功能强大，接口管理与mock一体，后端修改mock自动更新
3. 缺点
   1. 配置复杂，依赖后端代码生成的，受制于后端
   2. 一般作为大型团队的基础设施出现

swagger

1. RESTful 风格的 Web 服务框架 https://swagger.io/
2. Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务
3. swagger参考资料 https://www.oschina.net/p/swagger
4. swagger的作用
   1. restful API文档在线自动更新
   2. 直接运行，在线测试API
   3. 支持多种语言（java、PHP等）

rap

https://github.com/thx/RAP

moco

1. github文档 https://github.com/dreamhead/moco
2. moco参考资料 https://www.oschina.net/p/moco

yapi

https://github.com/YMFE/yapi

mock请求拦截

1. 代表 mock.js
   1. Mock案例 http://mockjs.com/examples.html
   2. 重写了 httpRequest的属性
2. 好处
   1. 与前端分离
   2. 可以生成随机数据
3. 缺点
   1. 数据都是动态生成的假数据
   2. 无法真实地模拟 增删查改
   3. 只支持 ajax，不支持 fetch
      1. ajax和 fetch的区别

const mockData = {
  code: 0,
  message: 'ok'，
  'data|10': [
      'id|+1'： 6,
    'name': @name6,
  ]
}
Mock.mock(/\/api\/list/, 'get', mockData)

faker.js

1. faker文档 https://github.com/Marak/faker.js
2. faker案例 http://marak.github.io/faker.js/

npm install faker -D
yarn add faker
mock 文件夹下添加db.json
json-server mock/db.json  // 运行 Faker

代码侵入

本地写死的静态数据
缺点

1. 与真实的 Server环境切换麻烦，侵入代码太局限，工程尽量自动化
2. 对接接口，这些数据就需要删除，mock效果不好