【前端】利用apifox mock数据。项目中自动请求已经写好的接口，否则请求mock接口

前言

如今市面上有许多mock数据的方法，在查阅资料后我首先去使用了mock.js （因为我觉得通过敲代码的方式去实现会“浪漫”得多），但是mock.js在network上查看不了，并且比较费时。后面索性投入apifox的怀抱了。

api初使用

创建第一个接口

首先新建团队和项目

微信图片_20220409143634.png

其次在项目中添加接口，你可以配置接口名称以及所在的分组，注意要选择mock服务

QQ截图20220409143828.png

在高级mock中新建期望，利用mock.js的语法去创建数据格式

期望.png

具体语法要求详见mock.js官网

至此，你就拥有了一个自定义的接口，在浏览器中打开试试吧。

在运行中点击发送查看数据返回

到这一步你就不用再去靠后端帮你造数据了，那么在项目中有些接口已经写完了，有些接口需要你自己mock。如何让项目去自动去判断呢。

你需要在需要mock的数据前缀加一个mock标识，代表这是mock的数据，去请求mock接口。

例如

export const getInfo = request.get('/mock/user/list')

普通接口长这样

export const getNews = request.get('/api/ok');

然后在vue.config中写两个转发对象，如果碰见mock开头去请求mock接口，否则请求已写好的api接口

    proxy: {
      '/mock': {
        target: 'http://127.0.0.1:4523/mock/814284',
        changeOrigin: true,
        ws: true,
        '^/mock': '/'
      },
      '/api': {
        target: 'http://localhost:3000/', 
        ws: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }

同样的你需要在apifox的接口修改下前缀，也改成mock，否则会出现404

这样就完事啦