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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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根据年月获取季度的方法
2014/03/31 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python动态加载变量示例分享
2014/02/17 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
财务会计人员求职的自我评价
2014/01/13 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
通知函格式范文
2015/04/27 职场文书
学校推普周活动总结
2015/05/07 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android