MockJs简单使用

Mock的作用

• 拦截axios请求
• 模拟假数据
• 前后端分离

Mock的安装与引入

#安装
npm install mockjs --save-dev
#引入
main.js
/* 引入mock */
require("./mock/mock")

Mock的使用

创建Mock.js

#创建Mock.js
import Mock from "mockjs";
const Random = Mock.Random;//生成随机数据的工具类
let data=[];//存放的随机生成的数据
let size=[
  '300x250', '250x250', '240x400', '336x280', 
  '180x150', '720x300', '468x60', '234x60', 
  '88x31', '120x90', '120x60', '120x240', 
  '125x125', '728x90', '160x600', '120x600', 
] ;//定义随机数据
for(let i=0;i<10;i++){//定义随机生成数据的个数
  let template={
    "Date":Random.date(),//生成随机时间
    "Name":Random.name(),//生成姓名
    "Url":Random.url(),//生成web地址
    "Image":Random.image(size[Math.floor(Math.random(0,1)*17)],"#02adea",'hello')
  }
  data.push(template)
}
Mock.mock('/data/index','get',data)//根据接口请求模拟数据

Mock拦截

#封装请求api
......
// 封装axios的get请求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}
 
export default {
  mockdata(url, params) {
    return fetch(url, params);
  }
}

组件使用Mock

//导入文件 api文件为封装的axios文件，未在main.js中全局导入
import api from "./../api/index";
api.mockdata("/data/index").then((res) => {
    console.log(res);
});

数据展示