【Vue】插件:三、mockjs 安装及使用教程

生成随机数据，拦截 Ajax 请求

• 前后端分离-让前端攻城师独立于后端进行开发。
• 增加单元测试的真实性-通过随机数据，模拟各种场景。
• 开发无侵入-不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 用法简单-符合直觉的接口。
• 数据类型丰富-支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展-支持支持扩展更多数据类型，支持自定义函数和正则。

一、安装

---

npm install mockjs

官方API地址
官方示例地址

二、使用

---

1.mockjs基础配置

新建index.js文件用于mockjs的配置

├── mock
│   └── index.js

index.js文件内容如下:

import Mock from 'mockjs';
// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
// if (process.env.NODE_ENV !== 'production') {
// 使用同步加载依赖
// 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
console.log('mock mounting');
require('./services/user');
Mock.setup({
    timeout: 800 // 设置延迟时间
});
console.log('mock mounted');
// }

2.模拟一个用户登录接口

新建user.js文件

├── mock
│   ├── services
│   │   └── user.js
│   └── index.js

user.js文件内容如下:

let Mock = require('mockjs');

let login = (req) => {
    return {
        'success': true,
        'msg': '登录成功',
        'errorCode': 0,
        'data': {
            'username': 'admin',
            'password': '123456',
        }
    };
};
Mock.mock('/user/login', 'post', login);

3.main.js中全局使用

import '@/mock'// 引入mock.js

4. Entry.vue