媒介
关于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 ) )这里的参数都是可选：
- 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`
- 天生划定规矩 的 寄义 须要依靠 属性值的范例 才肯定。
- 属性值 中能够含有 @占位符。
- 属性值 还指定了最终值的初始值和范例。
举个栗子：
栗子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可省略至此整合终了 源码地点
Vue进修大佬群493671066，玉人多多。老司机快上车，来不及诠释了。
溜了溜了
作者相干Vue文章
打赏 衷心的示意感谢
