51Testing软件测试论坛

标题: mock.js [打印本页]
作者: 悠悠小仙仙    时间: 2019-4-1 15:28
标题: 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的引入方式

  2. //ES6的引入方式
  3. import Mock from 'mockjs'

  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. })

  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提供一个工具类, 用于生成常用的几种数据.

生成布尔值

  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

  3. import Mock from 'mockjs'

  5. let Random = Mock.Random;


  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. })



  25. let mockData = {
  26.   userInfo: userInfo
  27. }

  29. export default mockData;
复制代码

2. 使用vuex去控制是否使用mock.js的数据
  1. // src/store/index.js

  3. import Vue from 'vue'
  4. import Vuex from 'vuex'
  5. import mutations from './mutations'
  6. import actions from './actions'

  8. Vue.use(Vuex);

  10. const state = {
  11.   //使用模拟数据, 只是开发时使用, 如果不是开发时, 请务必设置为false
  12.   useMock: true
  13. }

  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请求数据, 还是使用模拟数据. 这样在进行和后台联调的时候, 就可以自由的切换数据了!



欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2