什么是mock-server

模拟服务器（百度翻译）

为什么要搭建mock-server

为了更好的分工合作，让前端能在不依赖后端环境的情况下进行开发，其中一种手段就是为前端开发者提供一个 web 容器，这个本地环境就是 mock-server。

目前很多前端 mock 数据的方案的基本流程都是使用 node.js 来模拟 http 请求，配置 router 返回 mock 数据。

一个比较好的 mock-server 该有的能力：

1. 与线上环境一致的接口地址，每次构建前端代码时不需要修改调用接口的代码
2. 所改即所得，具有热更新的能力，每次增加 /修改 mock 接口时不需要重启 mock 服务，更不用重启前端构建服务
3. 能配合 Webpack
4. mock 数据可以由工具生成不需要自己手动写
5. 能模拟 POST、GET 请求
6. 简单（包括：文件结构简单、编写代码简单）

如何使用mock-server

前端代码和接口服务独立

devServer中：将/api/*重定向为http://${host}:3000

proxy: {
  '/api/*': {
    target: `http://${host}:3000`,
    secure: false,
  },
}

解决问题	技术选型	状态
server	express
开发热更新	nodemon
mock数据不需要自己写	LowDB	待定
文件结构简单清晰		待定

sequenceDiagram
participant web as web(http://localhost:8000/)
participant devServer
participant mockServer as mockServer(http://localhost:3000/)
participant javaApi

note over web:axios.get('/api/realApi')
web->>devServer: request
devServer->>mockServer: proxy (/api/realApi -> http://localhost:3000/realApi)
note over mockServer: 已配置mock接口直接返回
mockServer->>web: resData
note over mockServer: 未配置mock接口
mockServer->> javaApi: proxy
javaApi->>web: resData