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

2023-09-09 19:04:06 139

前言

关于mockjs，官网描述的是

1.前后端分离

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

3.数据类型丰富

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

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

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

第一步先安装mock.js

npminstallmockjs--save-dev

第二步使用mock.js

importMockfrom'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个假用户

letList=[]
constcount=60
for(leti=0;i
我们再来看getUserList这个函数，就是返回分页条件查询的假数据。
getUserList:config=>{
const{name,page=1,limit=20}=param2Obj(config.url)
constmockList=List.filter(user=>{
if(name&&user.name.indexOf(name)===-1)returnfalse
returntrue
})
constpageList=mockList.filter((item,index)=>index=limit*(page-1))
return{
code:0,
data:{
total:mockList.length,
users:pageList
}
}
}
关于增加，删除和修改都只需要返回一个数据message="操作成功"即可。
第三步在main.js里面引入刚刚我们写好的src/mock/index.js
import'./mock'//simulationdata路径index.js可省略
至此整合完毕源码地址
总结
以上所述是小编给大家介绍的Vue+Mock.js模拟登录和表格的增删改查功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

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

热门推荐

随机推荐