一、mockjs官网
mock.js
二、使用步骤
1.安装mock
npm install mockjs
2.安装完成后,在main.js中引入
// 导入静态文件给全局使用
require(’./mock/mock.js’)
3.封装mock,在该路径下\src\mock\mock.js,创建mock.js。这里的路径和文件可以自己命名。
4.封装mock.js的代码:
import Mock from 'mockjs';
import jsonData from './jsonData.js';//数据文件,可以自己定义
console.log(jsonData)
// Mock.Random是一个工具类,用于生成各种随机数据
const Random = Mock.Random;
let data2 = [] // 用于接受生成数据的数组
let size = [
'300x250', '250x250', '240x400', '336x280',
'180x150', '720x300', '468x60', '234x60',
'88x31', '120x90', '120x60', '120x240',
'125x125', '728x90', '160x600', '120x600',
'300x600'
] // 定义随机值
for (let i = 0; i < 10; i++) { //生成10个对象放到数组中
let template = {
'Boolean': Random.boolean, // 可以生成基本数据类型
'Natural': Random.natural(1, 100), // 生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符串,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 6), // 生成一个随机数组
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
'Color': Random.color(), // 生成一个颜色随机值
'Paragraph': Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成web地址
'Address': Random.province() // 生成地址
}
data2.push(template)
}
// 设置拦截ajax请求的相应时间 延时200-2000毫秒
Mock.setup({
timeout: '200-1000'
});
// // // post请求,带参数,参数会在data中返回,会返回url,type,body三个参数,可以把data打印出来看看
Mock.mock('/api/Admission/TitleValueList', 'post', function (param) {
console.log(param);
param.body=JSON.parse(param.body)
console.log(param.body.id);
console.log(param.body.name);
if (param.body.id != "" && param.body.name != "") {
return {
code: '1',
msg: 'success',
data: {
msg: '请求成功'
}
}
} else {
return {
code: '0',
msg: 'error',
data: {
msg: '参数不全'
}
}
}
})
//post请求,Mock.mock('链接', '请求方式get、post',返回内容)
Mock.mock('/api/Admission/getselect', 'post', { code: 1 })
Mock.mock('/api/GroupLeaderDo/compareGroupAreaAndMemberAreaInTemplate', 'get', { respon: jsonData.systemData })
5.在使用的页面中调用,如test.vue
<template>
<div></div>
</template>
<script>
export default {
data() {
return {};
},
created() {
// this.getTreeData();
// this.compareGroupAreaAndMemberAreaInTemplate();
this.TitleValueList();
},
methods: {
getTreeData() {
this.$post("/api/Admission/getselect", { code: 1 }).then((res) => {
console.log(res);
});
},
compareGroupAreaAndMemberAreaInTemplate() {
this.$get("/api/GroupLeaderDo/compareGroupAreaAndMemberAreaInTemplate").then((res) => {
console.log(res);
});
},
TitleValueList() {
const param = {
id:'123',
name:'test'
}
this.$post("/api/Admission/TitleValueList",param).then((res) => {
console.log(res);
});
},
},
};
</script>