vue-cli——mockjs增删改查小案例

mockjs可以帮我们生成随机数据，拦截ajax请求
安装npm intall mockjs -D(开发依赖，不参与打包。默认-S)
新建文件src->mock->index.js
在mian.js中引入 impot './mock'

mock页面

1、生成随机数据
Mock.mock方法生成随机数据，里面写对象里面是数据，数据里面是对象
一次mock方法可以生成很多数据，mock方法返回的是对象，直接结构出设置的list数据
@name返回英文姓名
@cname返回姓名
@datetima返回日期事件
@integer（20-80）返回是数字
800随机生成1-800中的数组
2、拦截ajax请求
就是发送请求时会被mock拦截，转向这个假的omck数据。
拦下了你要请求的数据把mock的数据给你
查看是否拦截成功可在控制台network->feach/XHR
mock()方法的参数：请求地址，请求方式，回调函数
options对象的属性包括：
url是完整的请求地址
type是请求类型post、get
body是post请求的请求体
get请求的参数最终会拼在url后面，所以随机数据的地址要写正则

//  mockjs提供了两个功能：1.生成随机数据 2.拦截 Ajax 请求
// 导入mockjs
import Mock from "mockjs";

// 设置请求延迟时间
Mock.setup({
  //延迟时间200毫秒
  timeout: 200,
});

// 生成一个数组数据
const { subjects,grades } = Mock.mock({
  "grades|3":[
      {
        "GradeId|+1":1,
        "GradeName":"@cname"
      }
  ],
  //随机生成一个10到20条的数组
  "subjects|5-10": [
    {
      "SubjectId|+1": 1,
      SubjectName: "@ctitle(10,15)",
      ClassHour: "@integer(20,80)",
      GradeId:"@integer(1,3)"
    },
  ],
});
Subjects.forEach(i => {
    i.Grade = {
        GradeId: i.GradeId,
        GradeName: Grades.find(r => r.GradeId === i.GradeId).GradeName
这里是给Subjects每个对象添加一个属性为Grade的对象
    }
})
// 拦截添加请求
Mock.mock(/http:\/\/www.bingjs.com:81\/Subject\/GetAll/, "get", () => {
    return Subjects;   这里的return返回的是随机生成的数据
});
Mock.mock(/http:\/\/www.bingjs.com:81\/Subject\/GetSubjectById/, "get", ({ url }) => {结构出options中的url
get的params中请求的数据可以通过options中的url获取，进行分割得到请求的数据
    let id = url.split('?')[1].split('=')[1]
    let obj = Subjects.find(r => r.SubjectId == id)
    return obj;
});
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\/Update/, "post", (options) => {
    let { subjectId, subjectName, classHour, gradeId } = JSON.parse(options.body)
    let obj = Subjects.find(r => r.SubjectId == subjectId)
    obj.SubjectName = subjectName
    obj.ClassHour = classHour
    obj.GradeId = gradeId
    obj.Grade = {
        GradeId: gradeId,
        GradeName: Grades.find(r => r.GradeId === gradeId).GradeName
    }

    return true;
});
Mock.mock(/http:\/\/www.bingjs.com:81\/Subject\/Add/, "post", (options) => {
axios直接用对象post过来的数据是字符串，必须要用JSON.pase()转为对象
    let obj = JSON.parse(options.body)    
    let subject = {
        SubjectId: Subjects[Subjects.length - 1].SubjectId + 1,
        SubjectName: obj.subjectName,

        ClassHour: obj.classHour,
        GradeId: obj.gradeId
    }
    subject.Grade = {
        GradeId: obj.gradeId,
        GradeName: Grades.find(r => r.GradeId === obj.gradeId).GradeName
    }
    Subjects.push(subject)

    return true;
});
Mock.mock(/http:\/\/www.bingjs.com:81\/Grade\/GetAll/, "get", () => {
    return Grades;
});