文章目录
介绍
Mock.js是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。
一、使用
1. 安装
npm install mockjs -D
2. 新建mockjs文件
可以在
src目录下新建mock文件夹，新建index.js文件。在index.js文件中建立虚拟数据。
3. 使用mockjs虚拟数据
如果需要使用虚拟数据，就在
main.js入口文件中导入mockjs文件。
// 导入mockjs
import './mock/index.js'
二、建立虚拟数据（mockjs文件）
1、导入mockjs
import Mock from "mockjs";
2、设置请求延迟时间
Mock.setup( settings )：配置拦截Ajax请求时的行为。
Mock.setup({
// 延迟时间200毫秒
timeout: 200,
});
3、生成随机数据
Mock.mock( template )：根据数据模板生成模拟数据.template表示数据模板，可以是对象或字符串。数据模板中的每个属性由3部分构成：属性名、生成规则、属性值。'name|rule':value：属性名name、生成规则rule、属性值value。属性名 和 生成规则 之间用竖线 | 分隔。'name|min-max':array：当属性值是数组Array。通过重复属性值array生成一个新数组，重复次数大于等于min，小于等于max。'name|+1':number：当属性值是数字Number。属性值自动加1，初始值为number。
占位符：用@来标识其后的字符串是 占位符。占位符 引用的是Mock.Random中的方法。
@cname：随机生成一个常见的中文姓名。@ctitle( min, max )：随机生成一句中文标题。默认值为 3 到 7 之间的随机数。@integer( min, max )：返回一个随机的整数。min是最小值，max是最大值。
常用语法
- “id”:“@id”
- “star|1-2”:“★” 字符串重复一道2次
- “price|100-200.2-3” 小数点2-3位
- “data|10”:[{name:“名称”}] 数组的内容重复10遍
- “live|1”:true,随机返回true,false
- “tel”:/13 \d{9}/,
- “des”:function(){ return this.start+this.price}
- “name”:“@cname” 表示中文名称
- “address”:“@country(true)” 地址
- “ip”:“@ip”,
- “description”:“@cparagraph(1, 3)” 随机段落2-3行
- “pic”:@dataImage(‘200x100’,‘色块图片’)`
// 生成subjects、grades数据
const {
subjects, grades } = Mock.mock({
"grades|3": [{
// 属性 GradeId 是一个自增数，起始值为 1，每次增 1
'GradeId|+1': 1,
// @cname 随机生成一个常见的中文姓名。
"GradeName": '@cname'
}],
// 随机生成一个5到10条的数组
// 属性 subjects 的值是一个数组，其中含有 5 到 10 个元素
"subjects|5-10": [{
'SubjectId|+1': 1,
// @ctitle 随机生成一句中文标题。
SubjectName: '@ctitle(10,15)',
// @integer( min, max )返回一个随机的整数。min最小值,max最大值
ClassHour: '@integer(22,80)',
GradeId: '@integer(1,3)',
}]
});
// 给课程数组添加年级信息
subjects.forEach(r => {
// 给每个课程信息，添加一个年级的完整信息
r.Grade = {
GradeId: r.GradeId,
GradeName: grades.find(g => g.GradeId == r.GradeId).GradeName
}
});
4、拦截请求
Mock.mock( rurl, rtype, function( options ) )：记录用于生成响应数据的函数。当拦截到匹配rurl和rtype的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。
rurl：表示需要拦截的URL，可以是URL字符串或URL正则。例如/\/domain\/list\.json/、'/domian/list.json'。rtype：表示需要拦截的Ajax请求类型。例如GET、POST、PUT、DELETE等。function(options)：表示用于生成响应数据的函数。options对象的属性包括url（完整的请求地址）、type（请求类型）、body（post请求的请求体）。
// 拦截查询所有年级信息的请求
Mock.mock('http://www.bingjs.com:81/Grade/GetAll', "get", () => {
return grades;
});
// 拦截查询所有课程信息的请求
Mock.mock('http://www.bingjs.com:81/Subject/GetAll', "get", () => {
return subjects;
});
// 拦截添加请求
Mock.mock('http://www.bingjs.com:81/Subject/Add', "post", (options) => {
// 获取参数数据
let obj = JSON.parse(options.body)
let subject = {
// 课程编号
SubjectId: Date.now(),
SubjectName: obj.subjectName,
ClassHour: obj.classHour,
GradeId: obj.gradeId
}
subject.Grade = Mock.mock({
GradeId: subject.GradeId,
GradeName: grades.find(g => g.GradeId == subject.GradeId).GradeName
})
subjects.push(subject)
return true
});
// 拦截删除请求
Mock.mock('http://www.bingjs.com:81/Subject/Delete', "post", (options) => {
// 获取课程编号
let subjectId = JSON.parse(options.body)
// 获取课程在数组中的位置
let index = subjects.findIndex(r => r.SubjectId == subjectId)
// 删除
subjects.splice(index, 1)
return true
});
// 拦截查询单个课程信息请求
Mock.mock(/^http:\/\/www.bingjs.com:81\/Subject\/GetSubjectById/, "get", (options) => {
// 获取课程编号
let id = options.url.split("?")[1].split("=")[1]
// 根据课程编号查询指定的课程信息
let subject = subjects.find(r => r.SubjectId == id)
return subject
})
// 拦截修改课程信息请求
Mock.mock('http://www.bingjs.com:81/Subject/Update', "post", (options) => {
let {
subjectId, subjectName, classHour, gradeId } = JSON.parse(options.body)
let index = subjects.findIndex(r=>r.SubjectId==subjectId)
subjects[index].SubjectName = subjectName
subjects[index].ClassHour = classHour
subjects[index].GradeId = gradeId
subjects[index].Grade.GradeId = gradeId
subjects[index].Grade.GradeName=grades.find(g => g.GradeId == gradeId).GradeName
return true
});
三、发送请求
此时，前台向后台发送请求，会获取到mokejs虚拟数据，而不是真实的后台数据。
data() {
return {
// 课程数组
Subjects: [],
// 年级数组
Grades: [],
// 编辑框是否为添加状态
isAdd: true,
// 课程对象
subject: {
subjectId: 0,
subjectName: "",
classHour: 0,
gradeId: 1,
},
// 是否显示编辑框窗口
isShow: false,
};
},
methods: {
// 获取课程信息
async getSubjects() {
let {
data } = await axios.get("http://www.bingjs.com:81/Subject/GetAll");
this.Subjects = data;
},
// 获取年级信息
async getGrades() {
let {
data } = await axios.get("http://www.bingjs.com:81/Grade/GetAll");
this.Grades = data;
},
// 添加课程
async addSubject() {
let {
data } = await axios.post("http://www.bingjs.com:81/Subject/Add", this.subject);
if (data) {
alert("添加成功");
// 重新加载列表数据
this.getSubjects();
// 关闭添加窗口
this.isShow = false;
// 清空表单数据
this.subject = {
subjectId: 0,
subjectName: "",
classHour: 0,
gradeId: 1,
};
}
},
// 删除课程
async delSubject(SubjectId) {
if (!confirm("确定要删除吗")) return;
let {
data } = await axios.post(
"http://www.bingjs.com:81/Subject/Delete",
SubjectId
);
if (data) {
alert("删除成功");
this.getSubjects();
}
},
// 获取单个课程信息
async getOneSubject(SubjectId) {
let {
data } = await axios.get( "http://www.bingjs.com:81/Subject/GetSubjectById",{
params: {
subjectId: SubjectId } });
this.subject.subjectId = SubjectId;
this.subject.subjectName = data.SubjectName;
this.subject.classHour = data.ClassHour;
this.subject.gradeId = data.GradeId;
this.isAdd = false;
this.isShow = true;
},
// 修改课程信息
async updateSubject() {
let {
data } = await axios.post("http://www.bingjs.com:81/Subject/Update",
{
subjectId: this.subject.subjectId,
subjectName: this.subject.subjectName,
classHour: this.subject.classHour,
gradeId: this.subject.gradeId,
}
);
if (data) {
alert("修改成功");
this.getSubjects();
this.isAdd = true;
this.isShow = false;
}
},
},
created() {
this.getSubjects();
this.getGrades();
}