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

前言

关于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 ) )

这里的参数都是可选：

关键点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接口，对应的函数是loginByUsernameMock.mock(///user//login/, 'post', loginByUsername)

当调用登录接口user/loign时候会自动对应到loginByUsername这个函数执行这个函数，