东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

乐动官方客服

15830799767
联系方式
全国服务热线: 15830799767

咨询热线:15858372790
联系人:王辉
地址:泰州市海陵区工业园

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

来源:乐动官方客服   发布时间:2020-01-20   点击量:129

有三类人不适合此篇文章:

"喜欢站在道德制高点的圣母婊" -- 适合去教堂"无理取闹的键盘侠" -- 国际新闻版块欢迎你去"有一定基础但又喜欢逼逼的人"得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的这种傻瓜文,简直浪费老子的时间!

对于以上三类人,走吧,这里不是你来装逼的地方.你们也不值得看老子花那么多时间去汇总的水文.

前言

关于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 = 60for (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.integer1) }))}

我们再来看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文章

基于Vue2.0实现后台系统权限控制

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏 衷心的表示感谢

相关产品

COPYRIGHTS©2017 乐动官方客服 ALL RIGHTS RESERVED 备案号:129