Vue3 Mockjs安装及使用
安装
安装不成功时添加–force,强制安装
npm install mockjs --force
在项目中使用Mock.js
1.在src目录下创建mock目录,定义mock主文件index.js
2.在main.js引入mock文件,方便在其他文件中使用
import "@/mockjs/index";
3.Mock.js的index文件
// 引用 Mock
// const Mock = require('mockjs')
import Mock from 'mockjs' // 不能使用require时,使用import
export const userData = Mock.mock("/data/list", "get", {
// 属性 list 的值是一个数组,随机生成 1 到 10 个元素
"list|1-10": [
{
// 随机生成1-10个★
"string|1-10": "★",
// 随机生成1-100之间的任意整数
"number|1-100": 1,
// 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。
"floatNumber|1-100.1-10": 1,
// 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
"boolean|1": true,
// 随机生成一个布尔值,值为 false 的概率是 2 / (2 + 5),值为 true 的概率是 5 / (2 + 5)。
'bool|2-5': false,
// 从属性值 object 中随机选取 2-4 个属性
"object|2-4": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
// 通过重复属性值 array 生成一个新数组,重复次数为 2
"array|2": [
"AMD",
"CMD",
"UMD"
],
// 执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。
'foo': '哇哈哈哈哈',
'name': function () {
return this.foo
},
// 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
'regexp': /\d{5,10}/,
},
],
"oldData|2-3": [{
"id|1": [1, 2, 3],
"name|1": ["姓名1", "姓名2", "姓名4", "姓名3", "姓名5"],
"address|1": ["地址1", "地址2", "地址4", "地址3", "地址5"],
"add|1": ["0", "1"]
}],
"newData|2-3": [{
"id|1": [1, 2, 3],
"name|1": ["姓名1", "姓名2", "姓名4", "姓名3", "姓名5"],
"address|1": ["地址1", "地址2", "地址4", "地址3", "地址5"],
"add|1": ["0", "1"]
}],
code: 200,
message: 'ok',
});
4.父组使用数据
getData() {
axios.get("/data/list").then(res => {
console.log(res.data);
this.oldData = res.data.oldData;
this.newData = res.data.newData;
}).catch(error => {
console.log(error);
})
}
getData();