Mock.js模拟登录和表格的增删改查功能

第一步先安装mock.js

npm install mockjs --save-dev

第二步使用 mock.js

import Mock from 'mockjs'

关键点1：Mock.mock()

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

这里的参数都是可选：

• rurl(可选)。

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

• rtype(可选)。

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

• template(可选)。

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

• function(options)(可选)。

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

• options：指向本次请求的 Ajax 选项集。

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

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则 有 7 种格式：
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value`

先循环添加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
   }
  }
 }