记录一下mock在vue3中的使用:
环境:vue3+vite2+TypeScript
首先,在开发环境安装mock
npm i vite-plugin-mock -D
npm i mockjs -D
接着,创建文件夹mock(与src平级)和 index.ts
在vite.config.ts中配置mock
plugins: [
viteMockServe({
mockPath: 'mock',// mock文件路径
localEnabled: true,// 使用本地mock
}),
],
mock常用规则
{
// 'name|rule': value,
'name|min-max': 'value', //通过重复 'value' 生成一个字符串,重复次数大于等于 min,小于等于 max
'name|count': 'value', //通过重复 'value' 生成一个字符串,重复次数等于 count
'name|+1': 100, //属性值自动加 1,初始值为 100
'name|1-100': 100, //生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型
'name|1-100.1-10': 100, //生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位
'name|1': value, //随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2。
'name|min-max': value, //随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
'name|min-max': {}, //从属性值 {} 中随机选取 min 到 max 个属性。
'name|count': {}, //从属性值 {} 中随机选取 count 个属性。
'name|1': [{}, {} ...], //从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值
'name|min-max': [{}, {} ...], //通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max
'name|count': [{}, {} ...], //通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count
'name': function(){} //执行函数 function(){},取其返回值作为最终的属性值
// 生成市:@city()
// 生成县:@county()
// 生成url:@url()
// 生成姓名:@cname()
// 生成汉字:@cword(2,5)
// 生成标题:@ctitle(2,5)
// 生成句子:@csentence(2,5)
// 生成段落:@cparagraph(3)
// 生成图片:@img(100x100)
// 生成颜色:@imgcolor()
// 生成日期:@date(yy-mm-dd)
// 生成时间:@time(hh-mm-ss)
// 生成自增:@increment(1)
// 生成自然数:@natural(1,100)
// 生成整数:@integer(1,100)
// 生成小数:@float(1,100,2,3)
}
mock/index.ts 个人模版
import { MockMethod } from 'vite-plugin-mock';
import Mock from 'mockjs';
export default [
{
url: '/api/getFormList',
method: 'get',
response: () => ({
code: 200,
message:"成功",
data: {
...Mock.mock({
"formList|1-100": [
{
id: "CG2022@natural(100000, 999999)T",
achievementName: "成果征集表_@date(yyyyMMdd)@time(hhMMss)",
achievementContractPerson: "@cname()",
jobTitle: "@cword(2, 5)",
"achievementContractPhone|1": ["133@natural(10000000, 99999999)"],
achievementContractEmail: "@natural(1000000000, 9999999999)@qq.com",
department: "@cword(5, 10)部",
jobNumber: "@natural(1000000, 9000000)",
"technicalMaturity|1": ["基本原理", "应用方案", "原理样机", "工程样机", "产业化阶段"],
technicalClassification: "@cword(20, 100)",
achievementIntroduce: "@cword(20, 100)",
keyTechnologies: "@cword(20, 100)",
fieldMarket: "@cword(20, 100)",
achievementPrice: "@float(1,100,1,3)万元",
"transformWay|1": ["技术转让", "技术开发", "技术咨询", "技术服务", "技术入股"],
createUser: "@cname()",
createTime: "@date(yyyyMMdd)@time(hhMMss)",
updateUser: "@cname()",
updateTime: "@date(yyyyMMdd)@time(hhMMss)"
}
]
}),
},
}),
}
] as MockMethod[];
随后,正常axios请求即可
响应结果:
{
"code": 200,
"message": "成功",
"data": {
"formList": [
{
"id": "CG2022650968T",
"achievementName": "成果征集表_20190624020841",
"achievementContractPerson": "贾勇",
"jobTitle": "属议",
"achievementContractPhone": "13325808741",
"achievementContractEmail": "5410452940@qq.com",
"department": "研海技些难何治条市部",
"jobNumber": 4622585,
"technicalMaturity": "产业化阶段",
"technicalClassification": "查土两展你三更见电外",
"achievementIntroduce": "非需极热严革则程九总变管则究算算五引第养金国况集军精因",
"keyTechnologies": "料养清断深候团至质热三住九",
"fieldMarket": "具者引立建法理子示他百消",
"achievementPrice": "63.758万元",
"transformWay": "技术咨询",
"createUser": "于洋",
"createTime": "20190822001035",
"updateUser": "文秀英",
"updateTime": "20180803100447"
},
{
"id": "CG2022482015T",
"achievementName": "成果征集表_19951115050318",
"achievementContractPerson": "马涛",
"jobTitle": "每深局价",
"achievementContractPhone": "19842905059",
"achievementContractEmail": "9103794720@qq.com",
"department": "办法者三无期民列学部",
"jobNumber": 7497728,
"technicalMaturity": "基本原理",
"technicalClassification": "第周识它治物内京般集集部作候事何你得斗",
"achievementIntroduce": "军步类共性展省代听采现华常内车本你中看定中们制金",
"keyTechnologies": "取场里列现走革空光自第论进观观说度低安至叫选近完",
"fieldMarket": "要中文质我第高实识活时运边权但确行斗油万比往",
"achievementPrice": "26.34万元",
"transformWay": "技术开发",
"createUser": "郭敏",
"createTime": "20130506090151",
"updateUser": "郑明",
"updateTime": "20220419071249"
}
]
}
}