Mock.js使用

---

介绍

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();
}