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 相关文章推荐
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
angular十大常见问题
Mar 07 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
详解JSON Web Token 入门教程
Jul 30 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
再说下636单管机
2021/03/02 无线电
php 正则匹配函数体
2009/08/25 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python 判断网络连通的实现方法
2018/04/22 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2019 入党申请书范文
2019/07/10 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
关于Python使用turtle库画任意图的问题
2022/04/01 Python