Mockjs 模拟后台接口数据的简单使用-vueMock 可以进行生成随机数据，模拟后端接口数据，从而实现开发时，前后端

Mock 可以进行生成随机数据，模拟后端接口数据，从而实现开发时，前后端分离，提高效率。

1、安装

npm i mockjs -S

2、引入

在src文件目录下，新建mock.js文件并引入：

const Mock = require('mockjs')

之后，在main.js文件中加载mock.js
``
require(./mock.js)

3、简单使用

格式： Mock.mock ("请求的URL地址", {"数据对象"}) Mock.mock(url, method, dataTemplate)

4. 语法规范

mockjs的语法规范包括两部分：

数据模板定义规范
数据占位符定义规范

数据模板定义规范

数据模板中的属性由三个部分组成：属性名，生成规则，属性值

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

Notice:

1. 属性名和生成规则之间用 | 分割。  
2. 生成规则是可选  
3. 生成规则有7种格式：  
 （1）'name|min-max': value  
 （2）'name|count': value  
 （3）'name|min-max.dmin-dmax': value  
 （4）'name|min-max.dcount': value  
 （5）'name|count.dmin-dmax': value  
 （6）'name|count.dcount': value  
 （7）'name|+step': value  
4. 生成规则的含义需要依赖属性值得类型才能确定。  
5. 属性值中可以含有'@占位符'  
6. 属性值还指定了最终值得初始值和类型。

（1）属性值是字符串String

1. name|min-max: string  
通过重复string生成一个字符串，重复次数大于等于min，小于等于max。这里的重复是指对初始化string的重复次数。  
  
2. name|count: string  
通过重复string生成一个字符串，重复次数等于count。

（2）属性值是数字Number

1. name|+1 : number  
属性值自动加1， 初始值为number  
  
2. name|min-max: number  
生成一个大于等于min，小于等于max的整数。  
  
3. name|min-max.dmin-dmax: number  
生成一个浮点数，整数部分大于等于min，小于等于max，小数部分保留dmin到dmax位。  
Mock.mock({  
 'number1|1-100.1-10': 1,  
 'number2|123.1-10': 1,  
 'number3|123.3': 1,  
 'number4|123.10': 1.123  
})  
// =>  
{  
 "number1": 12.92,  
 "number2": 123.51,  
 "number3": 123.777,  
 "number4": 123.1231091814  
}

（3）属性值是布尔类型Boolean

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

（4）属性值是对象Object

1. name|count: object  
从属性值object中随机选取count个属性  
  
2. name|min-max: object  
从属性值object中随机选取min到max个属性

(5) 属性值是数组Array

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

(6) 属性值是函数Function

'name': function  
  
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

(7) 属性值是正则表达式RegExp

1. name: regexp  
根据正则表达式regexp反向生成可以匹配他的字符串。用于生成自定义格式的字符串。  
Mock.mock({  
 'regexp1': /[a-z][A-Z][0-9]/,  
 'regexp2': /\w\W\s\S\d\D/,  
 'regexp3': /\d{5,10}/  
})  
// =>  
{  
 "regexp1": "pJ7",  
 "regexp2": "F)\fp1G",  
 "regexp3": "561659409"  
}

数据占位符定义规范DPD

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符格式：

@占位符  
@占位符(参数 [, 参数])

Notice：

用@来标识其后的字符串是占位符。
占位符引用的是Mock.Random中的方法。
通过Mock.Random.extend()来扩展自定义占位符。
占位符也可以引用数据模板中的属性。
占位符会有限引用数据模板中的属性。
占位符支持相对路径和绝对路径。

5. Vue 项目- 使用Mock 模拟后端接口数据

1.创建 mock/attendances.js

// 两种方式: 导入mock模块
// const Mock = require('mockjs')
import Mock from 'mockjs'

// Mock.mock(url, method, dataTemplate)
Mock.mock('/api/mock/attendances', 'get', {
  code: 10000,
  message: '操作成功！',
  success: true,
  data: {
    total: 100,
    'rows|100': [
      {
        'departmentId|1000000000000000008-1999999999999999999': 1,
        'departmentName|1': ['总裁办', '行政部', '人事部', '财务部', '技术部'],
        id: '1063705989926227968',
        mobile: /^1[385][1-9]\d{8}/, // 手机号
        username: '@cname', // @cname 随机生成中文名
        'workNumber|1001-1999': 1,
        'attendanceRecord|31': [
          {
            'adtStatu|1-6': 1,
            'day|+1': 20200301,
            departmentId: '1175310929766055936',
            'id|1000000000000000008-1999999999999999999': 1,
            jobStatu: 0,
            userId: '1063705989926227968'
          }
        ]
      }
    ]
  }
})

在main.js中引入

import '@/mock/attendances' // mock 数据生成后端考勤列表的数据接口

3.封装接口并获取数据

封装接口

// 获取考勤列表 mock 随机生成数据
export function getMockAttendancesList() {
  return request({
    url: '/mock/attendances'
  })
}

获取数据

<script>
import { getAttendancesList, getMockAttendancesList } from '@/api/attendances'
export default {
  created() {
    this.getMockAttendancesList()
  },
  methods: {
  
    async getMockAttendancesList() {
      const res = await getMockAttendancesList({ page: 1, pagesize: 10 })
      console.log(res)
    },
   
  }
}
</script>

mock模拟后端数据.PNG

6. 根据mock 语法(时间,邮箱,手机号,链接,地址,颜色)

const Mock = require('mockjs')
const Random = Mock.Random
const data = Mock.mock({
  'list|4': [{
    'id|+1': 1,
    'number|1-10': 7,
    // 英文姓名
    'name': '@name',
    // 颜色
    'color': '@color',
    // 英文标题
    'title': '@title',
    // 链接
    'url': '@url("http")',
    // 邮箱
    'email': '@email',
    // 图片
    'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),
    // 时间
    'date': '@date("yyyy-MM-dd HH:mm:ss")',
    'date2': '@dateTime',
    // 汉字
    'ctitle': '@ctitle(8)',
    // 汉字姓名
    'canme': '@cname()',
    // 地址
    'cadd': '@province' + '@city' + '@county',
    // 手机号
    'phone': /^1[385][1-9]\d{8}/
  }]
})
console.log(JSON.stringify(data))
console.log('打印data: ', data)

控制台打印结果:

S打印data.PNG

Mockjs 模拟后台接口数据的简单使用-vue