【mock / 本地服务】

本地服务

http-server、serve

npm i http-server -g 
npm i serve -g

启动命令

http-server -p 8080
serve dist

---

mock

代码侵入

直接在代码中写死 Mock 数据，或请求本地的 JSON 文件；
不建议：因为和真实 Server 环境的切换非常麻烦，一切需要侵入代码切换环境的行为都是不好的。

请求拦截

优点：与前端代码分离，可生成随机数据
缺点：数据都是动态生成的假数据，无法真实模拟增删改查的情况，只支持 ajax，不支持 fetch。

代表：Mock.js

Mock.mock(/\\/api\\/visitor\\/list/, 'get', {
  code: 2000,
  msg: 'ok',
  'data|10': [
    {
      'id|+1': 6,
      'name': '@csentence(5)',
      'tag': '@integer(6, 9)-@integer(10, 14)岁 @cword("零有", 1)基础',
      'lesson_image': "<https://images.pexels.com/3737094/pexels-photo-3737094.jpeg>",
      'lesson_package': 'L1基础指令课',
      'done': '@integer(10000, 99999)',
    }
  ]
})

接口管理工具

代表：swagger.io/

优点：配置功能强大，接口管理与 Mock 一体，后端修改接口 Mock 也跟着更改，可靠。
缺点：配置复杂，依赖后端，可能会出现后端不愿意出手，或者等配置完了，接口也开发出来了的情况。 一般会作为大团队的基础建设而存在， 没有这个条件的话慎重考虑。

本地 node 服务器

代表：json-server

全局

npm i json-server -g

项目中

yarn add json-server@0.17.4 -D

创建 __mock__ 文件夹 / db.json ，启动服务（postman 测试）

"scripts": {
  "json": "json-server __mock__/db.json --watch",
}

优点：

• 配置简单，json-server 甚至可以 0 代码 30 秒启动一个 REST API Server；
• 自定义程度高，一切尽在掌控中；
• 增删改查真实模拟。

缺点：与接口管理工具相比无法随着后端 API 的修改而自动修改。