vue-cli3中mockJs的使用

mock:

作用：生成随机数据，拦截AJAX请求

安装：npm install mockjs

核心：

Mock.mock()

Mock.Random()随机生成数据

 

安装完成后，在src目录下新建mock文件夹，创建mock/index.js作为配置文件

import Mock from "mockjs";


//设置200-2000毫秒延时请求数据
Mock.setup({
  timeout: "200-2000"
});

在main.js中引入mock,

import "./mock/index";

接下来可以在mock文件夹下通过创建模拟文件的方式来模拟数据，如创建home.js模拟首页数据的加载

import Mock from "mockjs";

export default {
  getHomeData: () => {
    return {
      code: 20000, //选个20000来区别mock数据和正常数据
      data: {
        videoData: [
          {
            name: "SpringBoot",
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: "Vue",
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: "Laravel",
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: "applet",
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: "Es6",
            value: Mock.Random.float(1000, 10000, 0, 2)
          }
        ]
      }
    };
  },

  getStaticData: () => {
    let list = [];
    for (let i = 0; i < 7; i++) {
      list.push(
        Mock.mock({
          vue: Mock.Random.float(1000, 5000, 0, 2),
          wechat: Mock.Random.float(1000, 5000, 0, 2),
          ES6: Mock.Random.float(1000, 5000, 0, 2),
          Redis: Mock.Random.float(1000, 5000, 0, 2),
          React: Mock.Random.float(1000, 5000, 0, 2),
          springboot: Mock.Random.float(1000, 5000, 0, 2)
        })
      );
    }
    return {
      code: 20000, //选个20000来区别mock数据和正常数据
      data: {
        book: list
      }
    };
  }
};

 

文件创建后需要配置拦截，打开mock/index.js,补充拦截代码

import Mock from "mockjs";
import homeApi from "./home";

//设置200-2000毫秒延时请求数据
Mock.setup({
  timeout: "200-2000"
});

//首页相关
//拦截的/home/getData
Mock.mock(/\/home\/getHomeData/, "get", homeApi.getHomeData);

Mock.mock(/\/home\/getStaticData/, "get", homeApi.getStaticData);