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


Posted in Javascript onJuly 26, 2018

前言

关于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模拟登录和表格的增删改查功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS trim去空格的最佳实践
Oct 30 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
Vue头像处理方案小结
Jul 26 #Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 #Javascript
vue router 配置路由的方法
Jul 26 #Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 #Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
两种php实现图片上传的方法
2016/01/22 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python访问抓取网页常用命令总结
2017/04/11 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python字符串格式化方式解析
2019/10/19 Python
Python实现数值积分方式
2019/11/20 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python tornado上传文件的功能
2020/03/26 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
环境科学毕业生自荐信
2013/11/21 职场文书
优秀演讲稿范文
2013/12/29 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
办理护照工作证明
2014/10/10 职场文书
2015年度保密工作总结
2015/04/24 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技