mock.js

悠悠小仙仙

一.Mock.js是什么?

目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的接口也许并没有写完, 作为前端的我们也就没有办法获取数据. 所以 前端工程师就需要自己按照接口文档模拟后端人员提供的数据, 以此进行页面的开发.

这个时候, Mock.js的作用就体现出来了, 在数据量较大的情况下, 我们不用一个一个的编写数据, 只需要根据接口文档将数据的格式填入, Mock.js就能够自动的按需生成大量的模拟数据. 且Mock.js提供了大量的数据类型, 包括文本, 数字, 布尔值, 日期, 邮箱, 链接, 图片, 颜色等.

本文就简单的介绍一下Mock.js提供的语法, 并介绍一下我平时在项目中是如何使用Mock.js去更方便的进行开发的.

二. 下载和引入Mock.js

1. 下载Mock.js

Mock.js提供多种下载方式, 本文以目前国内最常用的npm举例, 只需要在命令行输入npm install mockjs
即可完成Mock.js的下载.

2. 引入Mock.js

Mock.js暴露了一个全局的Mock对象, 我们只需要将Mock对象引入到文件中, 调用Mock对象的方法即可

CommonJS的引入方式

1. //CommonJS引入
   
2. let Mock = require('mockjs)
   
3. //调用Mock.mock()方法模拟数据
   
4. let data = Mock.mock({
   
5. 'list|1-10': [{
   
6.   'id|+1': 1
   
7. }]
   
8. });
   
9. console.log(data);

复制代码

ES6的引入方式

1. 
   
2. //ES6的引入方式
   
3. import Mock from 'mockjs'
   
4. 
   
5. let data = Mock.mock({
   
6. 'list|1-10': [{
   
7.   'id|+1': 1
   
8. }]
   
9. });
   
10. console.log(data);

复制代码

三.Mock.js的简单语法

Mock对象提供了4个方法, 分别是Mock.mock(), Mock.setup(), Mock.valid, Mock.toJSONSchema(), 一个工具库Mock.Random. 其中我们经常使用到的就是Mock.mock()和Mock.Random.

1. Mock.js的规范

第二部分引入Mock.js的代码中的以下部分就可以体现Mock.js的语法规范

1. 'list|1-10': [{
   
2.   'id|+1': 1
   
3. }]

复制代码

上面的代码被称为数据模板, 用于告诉Mock.js生成什么样的数据, 其中数据模板中的每个属性由三部分构成: 属性名, 生成规则, 属性值:

list为数据模板中的属性名;
1-10为生成规则(表示生成最少1个, 最多10个重复数据)
[{'id|+1': 1}]是属性值, 属性值中可以嵌套使用属性名和生成规则.
2. Mock.mock()

Mock.mock()方法是用来根据数据模板生成模拟数据, 我常用到的是以下两种传参方式:

Mock.mock(template): 根据数据模板template生成模拟数据

1. let data = Mock.mock({
   
2. data: {
   
3.   'products|10-20': [{
   
4.     name: '手机',
   
5.     price: 1000
   
6.   }]
   
7. }
   
8. })
   
9. console.log(data);

复制代码

Mock.mock(url, template): 拦截请求地址为url的ajax请求, 并根据数据模板template生成模拟数据

1. let data = Mock.mock('api/products' , {
   
2. data: {
   
3.   'products|10-20': [{
   
4.     name: '手机',
   
5.     price: 1000
   
6.   }]
   
7. }
   
8. })
   
9. 
   
10. //使用jquery Ajax发送请求
    
11. $.ajax({
    
12.   url: 'api/products',
    
13.   type: 'GET',
    
14.   success: function(res) {
    
15.     console.log(res);
    
16.   }
    
17. })

复制代码

3. Mock.Random

Mock.Random是Mock.js提供一个工具类, 用于生成常用的几种数据.

生成布尔值

1. 
   
2. //使用@占位符的方式
   
3. let data = Mock.mock({
   
4.     data: {
   
5.       boolean: '@boolean'
   
6.     }
   
7.   })
   
8.   console.log(data);
   
9.   
   
10. //使用Mock.Random调用函数的方式
    
11.   let data = Mock.mock({
    
12.     data: {
    
13.       boolean: Mock.Random.boolean()
    
14.     }
    
15.   })
    
16.   console.log(data);

复制代码

;
生成日期

1. let data = Mock.mock({
   
2.     data: {
   
3.     //用于生成高度自定义的图片地址
   
4.       imgURL: Mock.Random.image()
   
5.     }
   
6.   })
   
7.   console.log(data)

复制代码

生成名字

1. let data = Mock.mock({
   
2.     data: {
   
3.       //生成一个英文名字
   
4.       name: Mock.Random.name(),
   
5.       //生成一个中文名字
   
6.       chineseName: Mock.Random.cname()
   
7.     }
   
8.   })
   
9.   console.log(data);

复制代码

四.在Vue项目中使用Mock.js

以模拟一个登陆接口的数据为例:

1. 单独写一个mockData.js文件作为虚拟数据的生成文件.

1. //mockData.js
   
2. 
   
3. import Mock from 'mockjs'
   
4. 
   
5. let Random = Mock.Random;
   
6. 
   
7. 
   
8. //用户登陆信息
   
9. let userInfo = Mock.mock({
   
10.   data: {
    
11.     responseCode: 200,
    
12.     responseMessage: 'success',
    
13.     userMessage: {
    
14.       email: Random.email(),
    
15.       'id|1-10': 1,
    
16.       realName: Random.cname(),
    
17.       roleCodes: 'admin',
    
18.       username: Random.first()
    
19.     }
    
20.   }
    
21. })
    
22. 
    
23. 
    
24. 
    
25. let mockData = {
    
26.   userInfo: userInfo
    
27. }
    
28. 
    
29. export default mockData;
    

复制代码

2. 使用vuex去控制是否使用mock.js的数据

1. // src/store/index.js
   
2. 
   
3. import Vue from 'vue'
   
4. import Vuex from 'vuex'
   
5. import mutations from './mutations'
   
6. import actions from './actions'
   
7. 
   
8. Vue.use(Vuex);
   
9. 
   
10. const state = {
    
11.   //使用模拟数据, 只是开发时使用, 如果不是开发时, 请务必设置为false
    
12.   useMock: true
    
13. }
    
14. 
    
15. export default new Vuex.Store({
    
16.   state,
    
17.   mutations,
    
18.   actions
    
19. })
    

复制代码

可以看出在Login.vue的fetchUserInfo()方法中, 如果userMock为true, 将使用的是mock.js中的模拟数据; 如果useMock为false, 使用的是通过Ajax请求的数据. 这么写的好处是, 你只需要在vuex中修改一下, 就可以控制所有请求接口函数中是使用Ajax请求数据, 还是使用模拟数据. 这样在进行和后台联调的时候, 就可以自由的切换数据了!