华硕a42j拆机,荆州房产信息网,雪地里的星星图片
前言
关于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 ) )
这里的参数都是可选：
关键点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+mock.js模拟登录和表格的增删改查功能，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论