前端根据后端结构生成数据联调,不必等后端全部完成,等后端完成后把mock关闭即可,高效节约对接时间。
用法:
1.安装mock
yarn add mockjs vite-plugin-mock
2.配置引入位置 vite.config.js
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
...,
viteMockServe({
mockPath: './src/mock', // 解析mock的位置
localEnabled: true // 是否开启开发环境
})
]
})
3.生成数据
import Mock from 'mockjs'
export default [
{
url: '/mock/business/workerOrder/list',
// 这个url是要生成的数据接口地址,封装的axios请求,加上/mock即可
method: 'get',
response: () => {
return Mock.mock({ // 生成数据结构根据后端协商
'list|1-10': [
{
'id|+1': 1
}
]
})
}
}
]
** 具体生成数据规范参考官网 Mock.js
4.使用请求封装的api接口即可
import { listWorkerOrder } from '../api/info'
const getList = () => {
listWorkerOrder().then(res => {
console.log({ res })
})
}
5.本地关闭mock
6.防止忘了关闭mock,引起线上问题