💡采用mockJs进行模拟数据，模拟各种场景（get、post）生成接口
一、 安装依赖mockjs、vite-plugin-mock
npm i mockjs vite-plugin-mock --save-dev
二、 vite.config.ts 文件中配置vite-plugin-mock的使用
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins:[
vue(),
viteMockServe({
mockPath: './mock/', // 设置模拟数据的存储文件夹
supportTs: true, // 是否读取ts文件模块
logger: true, // 是否在控制台显示请求日志
localEnabled: true, //设置是否启用本地mock文件
prodEnabled: true //设置打包是否启用 mock 功能
})
]
})
三、 在根目录下创建mock文件夹
项目文件夹下新建mock/index.ts，用于存放本地mock文件
import type { MockMethod } from 'vite-plugin-mock'
import Mock from 'mockjs'
const mock: Array = [
{
url:'/api/getData',
method:'get',
response: () => {
return {
status: 200,
message: 'success',
data: {
......
}
}
}
},
....
]
export default mock
四、 编写api接口调用文件
src文件夹下新建utils/request.ts
import axios from 'axios'
const service = axios.create({
baseURL: '/',
timeout: 100000
})
export default service
src文件夹下新建api/index.ts
import request from '@/utils/request'
export const getDataApi = (params?: any) =>
request({ url: '/api/getData', method: 'get', params: params })
...
...
五、 业务页面调用
import { getDataApi } from '@/api/index.ts'
let getData = () => {
getDataApi().then((res: any) => {
let resData = res.data.data
})
}
getData()
六、 （注意事项）打包时需要打包MOCK文件
如果不配置，打包后的链接请求都会404
方法一：在main.ts文件添加配置
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import mock from '../mock/'
// mock 生产环境时打包
if (process.env.NODE_ENV === 'production') {
createProdMockServer(mock)
}
方法二：在mock文件夹下创建mock/mockProdServer.js
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import mock from './mock/'
export function setUpProdMockServer(){
createProdMockServer(mock)
}
vite.config.ts 的 mock配置项内
prodEnabled: true,
injectCode: `
import { setUpProdMockServer } from './mock/mockProdServer';
setupProdMockServer();
`
如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.ts这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.ts不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.ts
七、 Mock的用法规则
1. 属性值是字符串 String
// (1)'name|min-max': string
// 随机生成1-10个a
// obj = { string:'aaa' }
let obj = Mock.mock({
'string|1-10':'a'
})
// (2)'name|count': string
// 指定生成个a
// obj = { string:'aaaaa' }
let obj = Mock.mock({
'string|5':'a'
})
2. 属性值是数字 Number
// (1)'name|+1': number
// 属性自动加1,初始值为number
// (2)'name|min-max': number
// 随机生成大于1,小于10的整数，number仅用于确认类型
// obj = { id:8 }
let obj = Mock.mock({
'id|1-10':1
})
// (3)'name|min-max.dmin-dmax': number
// 生成一个浮点数，整数部分大于等于1,小于等于100，小数部分保留1-8位，number仅用于确认类型
// obj = { num:44.555 }
let obj = Mock.mock({
'num|1-100.1-8':1
})
3. 属性值是布尔值 Boolean
// (1)'name|1': boolaen
// 随机生成布尔值，true/false，概率各占一半
// obj = { flag:true }
let obj = Mock.mock({
'flag|1':true
})
// (2)'name|min-max': boolaen
// 随机生成布尔值，值为为boolaen 的概率是min/(min+max),当前true的概率为1/3
// obj = { flag:true }
let obj = Mock.mock({
'flag|1-2':true
})
4. 属性值是对象 Object
// (1)'name|min-max': object
// 从属性object 中随机选取1-3个属性
// obj = { curObj:{ a:1,b:2 } }
let obj = Mock.mock({
'curObj|1-3':{
a:1,
b:2,
c:3
}
})
// (2)'name|count': object
// 从属性object 中随机选取3个属性
// obj = { curObj:{ a:1,b:2,c:3 } }
let obj = Mock.mock({
'curObj|3':{
a:1,
b:2,
c:3
}
})
5. 属性值是对象 Array
// (1)'name|min-max': array
// 随机生成属性值为array，长度1-3的数组
// obj = { arr:[{ id:1 }, { id:2 }}
let obj = Mock.mock({
'arr|1-3':[{
'id|+1':1
}]
})
// (2)'name|count': array
// 生成属性值为array，长度3的数组
// obj = { arr:[{ id:1 }, { id:2 }, { id:3 }}
let obj = Mock.mock({
'arr|3':{
'id|+1':1
}
})
6. 属性值是正则表达式 RegExp
// (1)'name': regexp
// obj={regexp:1234567}
let obj = Mock.mock({
'regexp':/\d{5,10}
})
7. Mock.Random
let Random = Mock.Random
Random.email()
8. 实例
let obj = Mock.mock({
'arr|1-20':[
{
'index|+1': 1,
'num|1-100.1-2':1
'status|1': ['进行中', '暂停中', '已完成'],
'string|1': 'ABCD' + Random.integer(0, 99),
}
]
})
