mock模拟的数据能增删改查吗_Vue+Mock.js模拟登录和表格的增删改查功能

前言

关于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()

这里的参数都是可选：

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 部分构成：属性名、生成规则、属性值：

生成规则 的 含义 需要依赖 属性值的类型 才能确定。

属性值 中可以含有 @占位符。

属性值 还指定了最终值的初始值和类型。

举个栗子：

栗子1：

结果：

//星星数量为3

{

"string": "★★★"

}

栗子2：

结果

{

"number": 8

}

其他设置

模拟登录

当调用登录接口user/loign时候会自动对应到loginByUsername这个函数执行这个函数，

这个函数会返回是否登录成功数据。返回成功的数据，就是登录成功了，否则相反。

mock模拟登录ok

接下来介绍模拟表格增删改查。

其实也是差不多的

就是返回条件查询后的集合假数据而已，假数据是mock.js模拟的。

先循环添加60个假用户

我们再来看getUserList这个函数，就是返回分页条件查询的假数据。

{

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

至此整合完毕 源码地址

总结

以上所述是小编给大家介绍的Vue+Mock.js模拟登录和表格的增删改查功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。