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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python Socket之客户端和服务端握手详解
2017/09/18 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python用什么编辑器进行项目开发
2020/06/17 Python
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
生产车间标语
2014/06/11 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
谢师宴答谢词
2015/01/05 职场文书
2019销售早会主持词
2019/06/27 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android