82.项目中使用mock

1.引入mock

npm install mockjs

2.项目中新建mock目录，新建index.js
3.定义接口和接口返回值，使用mock时用数据占位符来做展示会比较方便一点

//引入mock
const Mock = require('mockjs')
//构造返回内容
Mock.mock('/api/queryTypeList', {
  ret: 0,
  data: {
    result: Mock.mock({
      'array|10': [
        {
          label: '@word()',
          value: '@integer(60, 100)'
        }
      ]
    }),
    message: '操作成功',
    status: true,
    statusCode: 'SYS000'
  }
})

4.调用
在使用的vue文件中引入 import '../../../mock/typeList/index'

const url = '/api/queryTypeList'
      axios
        .get(url)
        .then(res => {
          console.log(res)
        })
        .catch(error => {})

返回结果见下图

image.png

正常项目中使用的时候会用一个全局变量来判断区分是测试环境还是本地环境。虽然可以使用代理进行调用远程数据接口，在后端还没给出接口的时候使用mock做列表的展示还是比较方便的。
mock语法参考