Vue+Mock.js模拟登录和表格的增删改查功能
作者:nxmin 时间:2024-05-29 22:20:04
前言
关于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+Mock.js模拟登录和表格的增删改查功能网站的支持!
来源:https://www.cnblogs.com/nxmin/p/9372548.html
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
在Java程序中使用数据库的新方法
关于字符集和Unicode的相关知识[译]
![](https://img.aspxhome.com/file/UploadPic/20103/13/01-36s.png)
深入浅析JavaScript中的arguments对象(强力推荐)
pycharm配置当鼠标悬停时快速提示方法参数
![](https://img.aspxhome.com/file/2023/1/69601_0s.jpg)
Python编程OpenCV和Numpy图像处理库实现图片去水印
![](https://img.aspxhome.com/file/2023/5/76165_0s.png)
python opencv实现影像拼接
![](https://img.aspxhome.com/file/2023/3/127853_0s.jpg)
ASP函数验证带小数点数字格式
Python使用pickle模块存储数据报错解决示例代码
pandas中.loc和.iloc以及.at和.iat的区别说明
pycharm 无法加载文件activate.ps1的原因分析及解决方法
![](https://img.aspxhome.com/file/2023/6/115696_0s.jpg)
python绘制地震散点图
![](https://img.aspxhome.com/file/2023/5/82545_0s.jpg)
opencv 图像滤波(均值,方框,高斯,中值)
![](https://img.aspxhome.com/file/2023/9/82529_0s.jpg)
Python虚拟机栈帧对象及获取源码学习
![](https://img.aspxhome.com/file/2023/9/113019_0s.jpg)
解决Pytorch自定义层出现多Variable共享内存错误问题
asp如何调用DLL来加快服务器的执行速度?
执行python脚本并传入json数据格式参数方式
![](https://img.aspxhome.com/file/2023/3/87873_0s.png)
C#使用checkedListBox1控件链接数据库的方法示例
![](https://img.aspxhome.com/file/2023/8/94578_0s.jpg)
纯JS实现AJAX局部刷新功能
Access数据库操作中出现的怪现象
Python之os模块案例详解
![](https://img.aspxhome.com/file/2023/6/90376_0s.png)