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中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
收藏的一个php小偷的核心程序
2007/04/09 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
Js基础学习资料
2010/11/23 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
详解Vue2的diff算法
2021/01/06 Vue.js
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python 学习笔记
2008/12/27 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
应聘教师自荐信
2013/10/12 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
庐山导游词
2015/02/03 职场文书
乒乓球比赛通知
2015/04/27 职场文书
春节晚会开场白
2015/05/29 职场文书
赢在中国观后感
2015/06/02 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技