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

Tony_Zby 发布于2019-08-05 14:32 / 1513人阅读

摘要：表示需要拦截的请求类型。表示数据模板，可以是对象或字符串。表示用于生成响应数据的函数。指向本次请求的选项集。生成规则是可选的。返回成功的数据，就是登录成功了，否则相反。模拟登录接下来介绍模拟表格增删改查。

前言

关于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学习大佬群493671066，美女多多。老司机快上车，来不及解释了。 溜了溜了 作者相关Vue文章

基于Vue2.0实现后台系统权限控制

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏衷心的表示感谢

云服务器专线服务 linux的增删改查 jsp的增删改查教程登录增删改查 php的增删改查实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58074.html

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

摘要：表示需要拦截的请求类型。表示数据模板，可以是对象或字符串。表示用于生成响应数据的函数。指向本次请求的选项集。生成规则是可选的。返回成功的数据，就是登录成功了，否则相反。模拟登录接下来介绍模拟表格增删改查。前言关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据，模拟各种场景。 5...

coordinate35 2019-08-23 10:25 评论0 收藏0
迈出全栈第一步，vue+node+mysql独立完成前后端分离的增删改查流程

摘要：本使用创建本地服务器，在就能完成全部流程，并不需要线上服务器。路径要与后端接口一致。后端返回成功后，前端数据中对应的元素也要删掉，更新视图。控制器里拿一个方法出来说一下吧，完整的代码都在。读取操作完成后调用释放连接。写在前面本文只是本人学习过程的一个记录，并不是什么非常严谨的教程，希望和大家一起共同进步。也希望大家能指出我的问题。适合有一定基础，志在全栈的前端初学者学习，从点击按钮...

pakolagij 2019-07-31 16:52 评论0 收藏0
迈出全栈第一步，vue+node+mysql独立完成前后端分离的增删改查流程

摘要：本使用创建本地服务器，在就能完成全部流程，并不需要线上服务器。路径要与后端接口一致。后端返回成功后，前端数据中对应的元素也要删掉，更新视图。控制器里拿一个方法出来说一下吧，完整的代码都在。读取操作完成后调用释放连接。写在前面本文只是本人学习过程的一个记录，并不是什么非常严谨的教程，希望和大家一起共同进步。也希望大家能指出我的问题。适合有一定基础，志在全栈的前端初学者学习，从点击按钮...

fsmStudy 2019-08-20 16:10 评论0 收藏0
如何自学前端框架？

摘要：百度手册，拿来看一遍，大概了解，指令都能做什么，当然了，看一遍肯定离上项目差的很远。在以上的学习步骤中，有不懂的可以单独查百度，我就不解释了本人是web前端工程师，下面是我的自学经历，没人带，只有靠自己。从不知道vue，到上项目，项目上线，大概是一个月的时间，上线的项目说大也不大，说小也不小，一套上线的商城app。给大家传授一些学习的过程，欢迎大家来提意见，嘻嘻，不多说废话，直接开始...

import. 2019-08-01 18:23 评论0 收藏0
如何自学前端框架？

摘要：百度手册，拿来看一遍，大概了解，指令都能做什么，当然了，看一遍肯定离上项目差的很远。在以上的学习步骤中，有不懂的可以单独查百度，我就不解释了本人是web前端工程师，下面是我的自学经历，没人带，只有靠自己。从不知道vue，到上项目，项目上线，大概是一个月的时间，上线的项目说大也不大，说小也不小，一套上线的商城app。给大家传授一些学习的过程，欢迎大家来提意见，嘻嘻，不多说废话，直接开始...

Elle 2019-08-26 17:03 评论0 收藏0