1.安装
npm i mockjs
其他辅助安装
npm i json5
npm i axios
2.语法规范
该部分出自b站李炎恢视频,有兴趣可以去看
1. Mock.js 的语法规范包括两个部分:数据模板定义规范和数据占位定义规范; 2. 数据模板定义的规范包含 3 个部分:属性名、生成规则和属性值
//'属性名|生成规则':属性值
'name|rule':value
1.字符串/数值(7种)
生成规则 | 说明 | 示例 |
min-max | 生成 min ~ max 之间的字符串 | 'list|1-10' |
count | 生成 count 个字符串 | 'list|5' |
min-max.dmin-dmax | 生成 min ~ max之间的浮点数, 小数点位数在 dmin ~ dmax 之间 | 'id|1-10.1-3' : 1 |
count.dcount | 生成 count 个字符串, 小数点位数为 dcount | 'id|8.2' : 1 |
min-max.dcount | //同上 | |
count.dmin-dmax | //同上 | |
+step | 每次进行累加一个值 | 'id|+1' : 1 |
2.布尔值/对象/数组
生成规则 | 说明 | 示例 |
布尔值 | 生成布尔值,1/2 概率 true | true 'flag|1' : true |
布尔值 min-max | 生成布尔值, 概率为 min/(min + max) | 'flag|1-10' : true |
对象 count | 从对象中随机抽取 count 个属性 | 'obj|2' : obj |
对象 min-max | 从对象中随机抽取 min-max 属性 | 'obj|1-3' : obj |
数组 1 | 获取 1 次数组 | 'arr|1' : arr |
数组 count | 重复 count 次组成新数组 | 'arr|2' : arr |
数组+ | 累加 | arr|+1' : arr |
数组 min-max | 重复 min-max 次组成新数组 | 'arr|1-2' : arr |
3.函数和正则表达式
生成规则 | 说明 | 示例 |
函数 | 支持函数 | 'fn|1' : function |
正则 | 支持正则 | reg|1' : /[a-z]/ |
4.常用随机占位符
Type | Method |
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
3.随机数据拓展
mock.Random.extend({
//随机占位符命名
cstore(){
return this.pick([
'应用商店',
'水果店',
'小吃店',
'快餐店',
'理发店'
]);
}
});
console.log('cstore:',Mock.mock('@cstore'));
4.在vue中使用mockjs
1.创建mock服务
//mock/userinfo.json5
// npm i json5 解决json文件中不能注释的问题 在vscode中需要配合 JSON5 syntax 插件使用
{
id: '@id',
name: '@cname',
email: '@email',
data: '@date',
avatar: "@image('200x200','pink','#fff','avatar')",
description: '@paragraph',
url: '@url',
ip: '@ip'
}
//mock/index.js
const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
const Mock = require('mockjs');
// 读取json文件
function getJsonFile(filePath){
const json = fs.readFileSync(path.join(__dirname, filePath),'utf-8');
return JSON5.parse(json);
}
// 返回一个函数
module.exports = function(app){
if(process.env.Mock == 'true'){
// 监听http请求
app.get('/user/userinfo',function(rep,res){
// 每次响应请求时读取 mock data的json文件
const json = getJsonFile('./userinfo.json5');
// 将json传入mock方法生成数据
res.json(Mock.mock(json));
});
}
}
2.在vue.config.js中引入
module.exports = {
devServer: {
before: require('./mock/index.js')
}
};
加入自定义环境变量
//.env.development
MOCK=true
3.在组件中调用
//views/HelloWorld.vue
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted(){
axios.get('/user/userinfo')
.then(res => {
console.log(res.data);
})
.catch(err => {});
}
}