Vue 中使用MockJS

一、为什么使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口

二、mock优点

1.前后端分离

2.可随机生成大量的数据

3.用法简单

4.数据类型丰富

5.可扩展数据类型

6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

三、mock使用

1.安装

npm install mock

2.创建mock 文件夹，在文件夹中创建index.js ,home.js 文件

3.在main.js 中引入

Import './mock'

4.在index.js 中拦截http 请求

例:http 请求如下：

export const getJournal = data => {
    return request({
        url: "/adminAPI/journal/getAllJournals",
        method: 'get',
        params: data
    });
};

index.js 代码如下

import Mock from 'mockjs'
import homeApi from './home'
Mock.mock(/\/api\/journal\/getAllJournals/, 'get', homeApi.getJournal)

5.在main.js 中返回模拟数据

import Mock from 'mockjs'
getJournal: (params) => {
    let param = params.url.split('?')[1].split('&');
    let pageSize = param[7].split('=')[1]
    let currentPage = param[6].split('=')[1]
    let data = [];
    let total = 92;
    for (var index = 0; index < pageSize; index++) {
        let dataOne = Mock.mock({
            'journalId': index + 1,
            'journalName': '@title',
            'imageName': '@title',
            'imageUrl': '@image',
            'pdfUrl': "@url",
            'pdfName': '@title',
            'num': '@title',
            'publish|1': [1, 0],
            'created': '@date',
            'updated': '@date',
            'createdby': '@name',
            'updateby': '@name',
        })
        data.push(dataOne)
    }
    return {
        "code": 1,
        message,
        data,
        "pageIndex": currentPage,
        "pageSize": pageSize,
        "count": total
    }
},

四.解释说明

1.mockjs 占位符（也可以使用Mock.Random 工具类替代）

占位符	含义
@image	随机生成图片地址
@string	随机返回字符串
@integer	随机返回整型
@date	随机返回日期
@title	随机返回标题
@cword(100)	随机返回文本内容,参数为字数
@name	随机返回英文人名
@cname	随机返回中文名称
@cfirst	随机返回中文姓氏
@Last	随机返回 英文姓氏
@url	随机返回url地址
@ip	随机返回ip 地址
@email	随机返回邮箱
@region	随机返回区域
@county	随机返回省市县

2.规则

1. 构成

   'name|rule': value：属性名、生成规则、属性值
   

2. 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
   

3. 属性值是字符串String

   'name|min-max': string
   // 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
   'name|count': string
   // 通过重复 string 生成一个字符串，重复次数等于 count。
   
   

4. 属性值是数字 Number

   'name|+1': number
   // 属性值自动加 1，初始值为 number。
   'name|min-max': number
   生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
   'name|min-max.dmin-dmax': number
   // 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位
   
   

5. 属性值是布尔型 Boolean

   'name|1': boolean
   // 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
   'name|min-max': value
   // 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
   
   

6. 属性值是对象 Object

   'name|count': object
   // 从属性值 object 中随机选取 count 个属性。
   'name|min-max': object
   // 从属性值 object 中随机选取 min 到 max 个属性
   
   

7. 属性值是数组 Array

   'name|1': array
   // 从属性值 array 中随机选取 1 个元素，作为最终值。
   'name|+1': array
   // 从属性值 array 中顺序选取 1 个元素，作为最终值。
   'name|min-max': array
   // 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
   'name|count': array通过重复属性值 array 生成一个新数组，重复次数为 count
   
   

8. 属性值是函数 Function

   'name': function(){console.log(this)}
   // 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。
   
   

9. 属性值是正则表达式 RegExp

   'name': regexp
   // 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。