介绍

mock 是什么呢? 他是模拟接口请求的数据，并且可以随机生成测试数据，当后端还未好使，我们可以与后端沟通变量的名称，之后再靠 mock 来模拟数据，实现开发，但后端好了，直接替换接口就行了~~

文档请参考： mock

mock服务

mock 是模拟的接口，所以在正式打包后，mock 数据是无法使用，那么如果在开发时候不用mock数据，该怎么处理呢？

命令 npm run start:no-mock 就行

独立的mock服务

我们知道，有的时候 mock 数据 是可以和真实的 Api 请求并存的

但在打包后 mock 是无法使用的，那么能否启动一个 mock 服务呢？然后通过 nginx 代理到这个mock服务呢？

官方给出了一种方法： umi-serve

安装命令 yarn add global umi-serve

为了方便起见

我们可以再 package.json 中的 script 中加入 "serve":"umi-serve" 即可

下次启动 umi-serve 服务，只需在控制台中输入：npm run serve ，即可。

示例

接下来讲讲 Mock 如何在 Ant Design Pro V5 中的使用

所有的文件都在 mock 这个文件下书写

这里就不进行详细的解释了，总之通过 res.send 发送数据就行了

GET 请求

  1.   'GET /api/form/queryDetail': async (req: Request, res: Response) => {
  2.     const { detail } = req.query;
  3.     if (detail === 'introduce') {
  4.       res.send(
  5.         resData({
  6.           list: introduce,
  7.           anchorList: introduceAnchorList
  8.         }
  9.       ))
  10.     } 
  12.     res.send({
  13.       code: 400,
  14.       detail,
  15.       message: '请输入参数'
  16.     })
  17.   },

POST 请求

  1.   'POST /api/domesy/queryDetail': async (req: Request, res: Response) => {
  2.     const { detail } = req.query
  3.     if(detail === 'welcome') {
  4.       res.send(
  5.         resData({
  6.           list: welcome,
  7.           anchorList: welcomeAnchorList
  8.         }
  9.       ))
  10.       return
  11.     }
  13.     res.send({
  14.       code: 400,
  15.       detail,
  16.       message: '请输入参数'
  17.     })
  18.   },