前言

关于mockjs，官网描述的是

1.前后端分离

2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

3.数据类型丰富

4.通过随机数据，模拟各种场景。

5 项目不背锅（等后端给接口的话可能会背锅）

等等优点，最后一条我加的。

第一步先安装mock.js

npm install mockjs --save-dev

第二步使用 mock.js

import Mock from 'mockjs'

哪里用就在哪里引入。我是在项目src/mock/index.js里面使用mock.js

详细请看官方文档

关键点1：Mock.mock()

Mock.mock( rurl?, rtype?, template|function( options ) )

这里的参数都是可选：

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

表示用于生成响应数据的函数。

关键点2：模板生成语法：

举个栗子：
栗子1：

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
 "string|3": "★"
})

结果：

//星星数量为3
{
 "string": "★★★"
}

栗子2：

// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
 "num|1-100": 100
})

结果

{
 "number": 8
}

其他设置

// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留

Mock.setup({
 timeout: '300-600'
})

模拟登录

// 模拟登录user/login接口，对应的函数是loginByUsername

Mock.mock(/\/user\/login/, 'post', loginByUsername)

当调用登录接口user/loign时候会自动对应到loginByUsername这个函数执行这个函数，
这个函数会返回是否登录成功数据。返回成功的数据，就是登录成功了，否则相反。

mock模拟登录ok

接下来介绍模拟表格增删改查。
其实也是差不多的

// 用户相关
Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口
Mock.mock(/\/user\/remove/, 'get', deleteUser) //模拟删除用户信息接口
Mock.mock(/\/user\/add/, 'get', createUser) //模拟添加用户信息接口
Mock.mock(/\/user\/edit/, 'get', updateUser) //模拟编辑用户信息接口

就是返回条件查询后的集合假数据而已，假数据是mock.js模拟的。

先循环添加60个假用户

let List = []
const count = 60

for (let i = 0; i < count; i++) {
 List.push(Mock.mock({
 id: Mock.Random.guid(),
 name: Mock.Random.cname(),
 addr: Mock.mock('@county(true)'),
 'age|18-60': 1,
 birth: Mock.Random.date(),
 sex: Mock.Random.integer(0, 1)
 }))
}

我们再来看getUserList这个函数，就是返回分页条件查询的假数据。

 getUserList: config => {
 const { name, page = 1, limit = 20 } = param2Obj(config.url)

 const mockList = List.filter(user => {
 if (name && user.name.indexOf(name) === -1) return false
 return true
 })

 const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))

 return {
 code: 0,
 data: {
 total: mockList.length,
 users: pageList
 }
 }
 }

关于增加，删除和修改都只需要返回一个数据message="操作成功"即可。

第三步在main.js里面引入刚刚我们写好的src/mock/index.js

import './mock' // simulation data 路径index.js可省略

至此整合完毕

相关文章：

MVC模式实现登录以及增删改查之登录

XML 增、删、改和查示例

相关视频：

PHP用户注册登录系统视频教程