Mock.js 使用教程

Mock.js

二话不说，官方文档双手奉上。

Mock 通过可以自定义数据，同时也能拦截 AJAX 请求。

对快速生成测试数据，提供便利。

本文章主要讲解的是 Mock.js 在 Vue 中基本用法。

• 安装

npm install mockjs

• 生成随机 Mock 数据

// 引入 Mock
import Mock, { mock, Random } from "mockjs";
// 引入所需常量
import {
  // 随机用户对象数量最小值
  USER_COUNT_MIN,
  // 随机用户对象数量最大值
  USER_COUNT_MAX,
  // 随机用户年龄最小值
  USER_AGE_MIN,
  // 随机用户年龄最大值
  USER_AGE_MAX
} from "@/const";

/**
 * 生成返回 Mock 规则的用户列表对象
 * @returns {Object} 用户列表对象
 */
function getUserList() {
  let userList = generUserRandom(USER_COUNT_MIN, USER_COUNT_MAX, USER_AGE_MIN, USER_AGE_MAX);
  const users = 
    Mock.mock({
      userList: JSON.parse(JSON.stringify(userList))
    });
  return users;
}

/**
 * 用户类
 * @constructor
 * @param {String} name 用户名
 * @param {String} age 年龄
 */
function User(name, age) {
  this.setName(name);
  this.setAge(age);
}
User.prototype.getName = function() {
  return this.name;
};
User.prototype.setName = function(newName) {
  this.name = newName;
};
User.prototype.getAge = function() {
  return this.age;
};
User.prototype.setAge = function(newAge) {
  this.age = newAge;
};

/**
 * 创建并返回随机用户数组
 * @param {Number} userCountMin 随机用户对象数量最小值
 * @param {Number} userCountMax 随机用户对象数量最大值
 * @param {Number} ageMin 随机用户年龄最小值
 * @param {Number} ageMax 随机用户年龄最大值
 * @returns {Array} 用户对象数组
 */
function generUserRandom(userCountMin, userCountMax, ageMin, ageMax) {
  let userCount = Math.floor(Math.random() * userCountMax + userCountMin);
  let userList = [];
  for (let i = 0; i < userCount; i++) {
    const user = new User();
    user.setName(Random.cfirst() + Random.cname());
    user.setAge(Math.floor(Math.random() * ageMax + ageMin));
    userList.push(user);
  }
  return userList;
}

• 配置请求

// Mock.mock(请求URL，请求方式，Mock对象)
Mock.mock("http://localhost:8080/getUserList", "get", getUserList);

• 使用 Mock

在 main.js 入口文件中添加如下代码：

getUserList().then(res => {
  console.log("请求-getUserList()", res);
  console.log(res.data);
});

getUserList() 方法是返回 Promise 的 http 请求（具体见后面的补充）。

返回数据：

请求-getUserList() {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

{userList: Array(9)
0: {name: "杜涛", age: 16}
1: {name: "贺桂英", age: 17}
2: {name: "孙丽", age: 17}
3: {name: "彭锺敏", age: 7}
4: {name: "高明", age: 15}
5: {name: "赵平", age: 14}
6: {name: "阎艳", age: 4}
7: {name: "孟静", age: 5}
8: {name: "李磊", age: 12}}

补充

• axios 配置

  // 引入 axios
  import axios from "axios";
  import { Message } from "element-ui";
  
  function request(options) {
    return new Promise((resolve, reject) => {
      // 创建 axios 实例
      const instance = axios.create({
        baseURL: "http://localhost:8080",
        timeout: 100
      });
      // 请求拦截器
      instance.interceptors.request.use(
        config => {
          console.log(config);
          return config;
        },
        error => {
          console.log(error);
          // return error;
          Message.error(error);
        }
      );
      // 响应拦截器
      instance.interceptors.response.use(
        data => {
          console.log("response", data);
          return data;
        },
        error => {
          console.log(error);
          Message.error(error);
        }
      );
  
      instance(options)
        .then(res => {
          resolve(res);
        })
        .catch(error => {
          reject(error);
        });
    });
  }
  
  export default request;
  
  

• getUserList() 方法

import request from "./index";

function getUserList() {
  return request({
    url: "/getUserList"
  });
}

export { 
  getUserList
};