Mock.js是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時(shí)獨(dú)立開發(fā)。我們可以使用真實(shí)的url，mockjs可以攔截ajax請(qǐng)求，返回設(shè)定好的數(shù)據(jù)。
mockjs提供了兩個(gè)功能：1.生成隨機(jī)數(shù)據(jù) 2.攔截 Ajax 請(qǐng)求

1.安裝

npm install mockjs -D (mockjs只用于開發(fā)階段，無需一起打包，所以此處-D)

2.在src下新建mock文件夾，創(chuàng)建index.js文件

3.建立虛擬數(shù)據(jù)（mockjs下index.js文件）

三部曲=>>>導(dǎo)入，設(shè)置請(qǐng)求延遲時(shí)間，生成一個(gè)數(shù)組數(shù)據(jù)

// 導(dǎo)入mockjs
import Mock from "mockjs";

// 設(shè)置請(qǐng)求延遲時(shí)間
Mock.setup({
    // 延遲時(shí)間200毫秒
    timeout: 200,
});

// 生成一個(gè)數(shù)組數(shù)據(jù)
const {subjects,grades} = Mock.mock({
    //隨機(jī)生成一個(gè)10到20條的數(shù)組
    "subjects|5-10": [
        {
            'SubjectId|+1': 1,
            SubjectName: '@ctitle(10,15)',
            ClassHour: '@integer(20,80)',
            GradeId:'@integer(1,3)'
        }
    ],
    "grades|3": [
        {
            'GradeId|+1': 1,
            "GradeName": '@cname(2,4)'
        }
    ]
});

// 給課程數(shù)組添加年級(jí)信息
subjects.forEach(r => {
    // 給每個(gè)課程信息，添加一個(gè)年級(jí)的完整信息
    r.Grade ={
        GradeId:r.GradeId,
        GradeName:grades.find(g=>g.GradeId===r.GradeId).GradeName
    }
});