•Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务，
•Easy Mock 支持基于 Swagger 创建项目，以节省手动创建接口的时间；
•简单点说：Easy Mock就是一个在线创建mock的服务平台，帮你省去你 配置、安装、起服务、维护、多人协作Mock数据不互通等一系列繁琐的操作， 它能在不用1秒钟的时间内给你所要的一切。
详细使用方法，包含新建项目，基础语法，数据占位符，Swagger等介绍和使用，请参考详细文档
easy-mock，在本项目中的使用：
1.按照官方文档，创建个人项目vue-touzi-admin；
根据项目需要，创建的接口有：用户登录接口："/user/login";获取用户信息接口："/user/info";用户登出接口："/user/logout";获取所有用户列表接口："/user/getUserList";如图：
登录接口在easy-mock端编写的逻辑如下：
{ code: function({ _req }) { if (_req.body.username === "admin" || _req.body.username === "editor" && _req.body.password === "123456") { return 200 } else { return -1 } }, message: function({ _req }) { if (_req.body.username !== "admin" || _req.body.username !== "editor") { return "账号或密码有误！" } }, data: function({ _req }) { if (_req.body.username == "admin" && _req.body.password === "123456") { return { code: 0, roles: ['admin'], token: 'admin', introduction: '我是超级管理员', name: 'Super Admin' } } else if (_req.body.username === 'editor' && _req.body.password === "123456") { return { code: 0, roles: ['editor'], token: 'editor', introduction: '我是编辑', name: 'Normal Editor' } } else { return "账号或密码有误！" } } }
1.webpack中，开发环境和生产环境地址配置；生产环境，NODE_ENV: '"production"'；如下：
module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_BASE_URL: '"https://easy-mock.com/mock/5cd03667adb0973be6a3d8d1/api"', })
3.接口封装实例；如下：
import request from '@/utils/axios' export function login(username, password) { return request({ url: process.env.API_BASE_URL+'/user/login', method: 'post', data: { username, password } }) }
mockjs使用
使用背景：
在使用easy-mock模拟数据的过程中，发现其对表格固定数据不能实现增删改等功能，因而选择了使用mockjs;
介绍及功能：
Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
1.根据数据模板生成模拟数据，通过mockjs提供的方法,你可以轻松地创造大量随机的文本,数字,布尔值,日期,邮箱,链接,图片,颜色等.
2.模拟 Ajax 请求，生成并返回模拟数据，mockjs可以进行强大的ajax拦截.能判断请求类型,获取到url,请求参数等.然后可以返回mock的假数据,或者你自己编好的json文件.功能强大易上手.
3.基于 HTML 模板生成模拟数据
mockjs在本项目中使用：
1.安装mockjs
npm install mockjs --save-dev
2.创建mock文件夹结构并定义相关的功能模块；如图：
mockjs/index.js，负责定义相关的mock接口，如下： import Mock from 'mockjs' import tableAPI from './money' // 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留 Mock.setup({ timeout: '300-600' }) // 资金相关 Mock.mock(/\/money\/get/, 'get', tableAPI.getMoneyList) Mock.mock(/\/money\/remove/, 'get', tableAPI.deleteMoney) Mock.mock(/\/money\/batchremove/, 'get', tableAPI.batchremoveMoney) Mock.mock(/\/money\/add/, 'get', tableAPI.createMoney) Mock.mock(/\/money\/edit/, 'get', tableAPI.updateMoney)
mockjs/money.js，则定义相关的函数，实现模拟数据的业务逻辑，比如资金流水数据的增删改查等；数据的生成规则请参照mockjs官网文档，上面有详细的语法说明；
3.在main.js中引入定义好的mockjs;如下：
import './mockjs' //引用mock
4.mockjs,api接口封装；
src/api/money.js中，进行了统一的接口封装，在页面中调用对应函数，即可获取到相应的模拟数据。代码如下：