手把手讲解Vue + Element UI实现后台管理系统（四）：mockjs模拟接口的使用

一、什么是mock.js

Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据，提升开发效率。

二、安装和使用

安装

npm install -D mockjs

搭建mock环境

首先在根目录新建mock目录，并在目录中信建一个index.js文件和modules文件夹。

index.js为mock接口处理文件
modules为mock数据

index.js代码如下：

// index.js
import Mock from "mockjs";
import {userList} from "./modules/user";

// 1. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
// 2. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
fnCreate(userList, true);

/**
 * 创建mock模拟数据
 * @param {*} mod 模块
 * @param {*} isOpen 是否开启?
 */
function fnCreate(mod, isOpen = true) {
  if (isOpen) {
    for (var key in mod) {
      ((res) => {
        if (res.isOpen !== false) {
          Mock.mock(new RegExp(res.url), res.type, (opts) => {
            opts["data"] = opts.body ? JSON.parse(opts.body) : null;
            delete opts.body;
            console.log("\n");
            console.log("%cmock拦截, 请求: ", "color:blue", opts);
            console.log("%cmock拦截, 响应: ", "color:blue", res.data);
            return res.data;
          });
        }
      })(mod[key]() || {});
    }
  }
}

modules下面的user.js代码：

const userList = {
  url: "/user/list",
  type: "get",
  response: () => {
    return {
      code: 20000,
      data: [
        {
          id: 1,
          username: "zhoujielun",
          password: "123456",
        },
        {
          id: 2,
          username: "guojingming",
          password: "666666",
        },
      ],
    };
  },
};

const userList1 = {
  url: "/user/list1",
  type: "get",
  response: () => {
    return {
      code: 20000,
      data: [
        {
          id: 1,
          username: "zhoujielun",
          password: "123456",
        },
        {
          id: 2,
          username: "guojingming",
          password: "666666",
        },
      ],
    };
  },
};

module.exports = [userList, userList1];

使用

需要使用的组件先引用mock/index.js

import mock from "@/mock/index.js";

然后通过封装的接口请求组件调用：

this.$http.userList().then(resp=>{
    debugger
})