Mock二三事

目前为止，我对mock的方案总共有四种，接下来全部叙述一遍，以后看情况采用不同的方案：

1. json-server

这个是目前我知道的用的比较多的一个Mock的方法，如果没用next.js，umi这些，那么我们用这个会比较方便的就能进行数据的Mock,用起来很简单。在根目录上新建一个mock的文件夹,然后新建配置文件json-server.json（作为配置文件）用来mock数据的xxx.json文件。这里给出我在项目中用的mock文件。

json-server.json

{
  "port": 53000,
  "watch": true,
  "read-only": false,
  "no-cors": false,
  "no-gzip": false
}

xxx.json


{
  "line_charts": {  //默认为GET 请求
    "status": 0,
    "extData": [
      {
        "note": 30,
        "connect": 20,
        "scanDate": "2021-12-03"
      },
      {
        "note": 10,
        "connect": 10,
        "scanDate": "2021-12-04"
      }
    ]
  },
 
  "POST typeCondition": { //这是响应的请求
    "status": 0,
    "extData": [
      {
        "label": "美妆",
        "tagId": 1
      },
      {
        "label": "生活记录",
        "tagId": 2
      },
    ]
  }
}

然后全局安装mock

yarn global add json-server 

启动当前xxx.json文件即可。注意此时它会自动读取配置文件json-server.json

2.postman等接口工具

在postman这个窗口旁边新建一个Mock-server

随便写几个

然后看见collection这个，就有了

这个也能在网页上访问，极其方便

3.mock在webpack中配置，自己模拟

网上抄了一个webpack-middle-mock，然后在webpack中配置好使用。各种文件的配置如下： 首先下载插件

yarn add webpack-mock-middleware -D

然后在webpack中修改Devserver的配置,我这里用的craco.js

const mock = require('./mock/mock')

module.export = {
    devServer:{
        before:(app)=>{
            mock(app);
        }
    }
}

//package.json

"start": "craco  start",
"start:mock": "craco  start --mock ",

然后在根目录创建文件如下:

mock.js是总的配置文件，其他两个是对应的写死的接口和自己灵活生成的接口，这里分别给出对应的代码.

// mock.js
const eMock = require('webpack-mock-middleware')
let isMock = false
process.argv.forEach(item=>{
    if (item.indexOf('mock') > -1) isMock = true
})
module.exports = app => {
    if (isMock) {
        app.all('/api/*', function(req, res, next) {
            console.log('---', req.path)
            eMock(req, res, next)
        })
    }
}

// mock/api/user.js
module.exports = {
    data: [
        {
            username: 'Eric a',
            age: 10000
        },
        {
            username: 'Eric b',
            age: 10000
        },
        {
            username: 'Eric c',
            age: 10000
        }
    ],
    code: 200,
    message: '操作成功'
};

// mock/api/queryuser.js
module.exports = req => {
    // TODO 此处可以通过传参，动态组织返回数据
    // 此处有三个参数req,res,next, 具体查看epress文档
    let query = req.query;
    // 此处可以接收参数
    console.log(query);
    let data = [
        {
            id: 1,
            name: 'Eric a'
        },
        {
            id: 2,
            name: 'Eric b'
        }
    ];
    let filterRes = data.filter(itm => itm.id == query.id);
    return {
        code: 200,
        data: filterRes,
        message: filterRes.length ? '获取成功' : '暂无数据'
    };
};
然后请求即可，注意这种默认接口名为localhost,在请求的时候只需要写文件名即可。比如我想请求user.js的参数，那么url就写'/api/user',此时就会发起请求

4.自己找个接口模拟的网站，比如Doclever，Yapi

这里直接给出Yapi的写法，其他类似。 首先创建一个新的接口。

写完之后点击高级mock,出现如图页面

然后就出现了，此时我们只需要写http://yapi.xxx.com/mock/你的yapi项目名称/当前请求的名称 (yapi.xxx.com为你的yapi的项目的名称,自己去看即可),就能发起请求了