第一步：安装mockjs

npm install mockjs -s

第二步： 在main.js 中引入mock

// 引入mock
// import Mock from "./mock"
// 生产环境拦截（不是生产环境的时候引入mock）
if(process.env.NODE_ENV !== 'production')require("./mock");

第三步： 在src文件夹中创建 mock文件夹，然后在里面创建 index.js文件和respose文件夹再在里面创建： user.js

mock.png

• user.js中的代码

import Mock from "..";

export const getInfo = (options) => {
    // console.log(options)
    // console.log("kk")
    // return {
    //     name: "lr"
    // }
// 这个就是模板

    const template = {
        'str|2-4':"lison"
    }
    return Mock.mock(template)
}

• index.js中的代码

import Mock from "mockjs";
import { getInfo } from "./response/user"
// Mock.mock("你要拦截的url","什么方式来调用接口",执行的方法 )
// 使用正则表达式获得地址
// Mock.mock("/\/getPortalList/","get",getInfo )
// Mock.mock("/\/getPortalList/","get",{name:'loi',age: "12"} )
Mock.mock("url","get",getInfo )
export default Mock;

• 这样就能在请求的时候，拦截要请求的地址了，从而使用本地的数据渲染数据了。

import Mock from "mockjs"

export const getData = () => {

    // var arry = ["是","否"];

    // const template = {
    // //    lis: ['str|2-4': "li123", '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],
    //     'str|2-4': "li123",
    //     'regexp1': /^\d{8,10}$/,
    //         'name|1': arry


    // }
    // return Mock.mock(template);




    // mock随机数据
    const Random = Mock.Random;
    let chartDatasskc = [];
    var arry = ["是", "否"];

    for (let i = 0; i < 10; i++) {

        let newArticleObject = {
            "name": Random.cname(),//随机生成中文名字
            'qq': /^\d{8,10}$/,
            "mtime": Random.datetime(),//随机生成日期时间

            "stars": Random.natural(0, 5),//随机生成1-5的数字
            "add": Random.region(),
            'name|1': arry


        }
        chartDatasskc.push(newArticleObject)
    }
    return Mock.mock(chartDatasskc);