mock.js的简单使用

mock.js的简单使用

官网参考地址：http://mockjs.com/
如果对 mock.js 语法不是很了解的话，可以先参考这篇文章 https://blog.csdn.net/lemon_LiFu/article/details/116608241

一、什么是mock.js

Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发

二、为什么使用mock.js

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

• 我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
• 使用json-server模拟，但不能随机生成所需数据
• 使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

三、mock.js优点

1.前后端分离
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可

四、简单示例

在这里我举的例子是 vue 项目中如何使用 mock.js

• 安装 mock.js

npm install mockjs --save-dev

• mock.js

在 src 目录下面创建 mockjs 的文件夹，在该文件下创建 mock.js 的文件，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例

//引入mockjs
import Mock from 'mockjs'

//使用mockjs模拟数据
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
    "ret":0,
    "data": {
       "mtime": "@datetime",	//随机生成日期时间
       "score|1-800": 800,		//随机生成1-800的数字
       "rank|1-100":  100,		//随机生成1-100的数字
       "stars|1-5": 5,			//随机生成1-5的数字
       "nickname": "@cname",	//随机生成中文名字
     }
});

data 里的属性看不懂，需要详细看语法规范请参考本文第八点

• 在 main.js 中引入该文件

import './mockjs/mock.js'

• xxx.vue 文件中调用 mock.js 中模拟的数据接口，这时返回的 response 就是 mock.js 中用 Mock.mock(‘url’,data）中设置的data了

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			initData() {
				let url = '/api/msdk/proxy/query_common_credit'
				this.$http.get(url).then(res => {
					
				}).catch(err => {
					
				})
			}
		}
	}
</script>

五、拦截数据的方法Mock.mock()

这里我举例最常用的格式
Mock.mock(url, data);
url 用正则写，这样 get 请求传参时，也能拦截数据了。

//引入mockjs
import Mock from 'mockjs'

//使用mockjs模拟数据
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
    "ret":0,
    "data": {
       "mtime": "@datetime",	//随机生成日期时间
       "score|1-800": 800,		//随机生成1-800的数字
       "rank|1-100":  100,		//随机生成1-100的数字
       "stars|1-5": 5,			//随机生成1-5的数字
       "nickname": "@cname",	//随机生成中文名字
     }
});

六、设置延时请求到数据

不设置延时很有可能遇到坑，这里需要留意，因为真实的请求是需要时间的，mock不设置延时则是马上拿到数据返回，这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。

//延时 400s 请求到数据
Mock.setup({
    timeout: 400
})

//延时 200-600 毫秒请求到数据
Mock.setup({
    timeout: '200-600'
})

七、Mock.mock()方法中定义data返回的格式

1.属性值是字符串 String

• 'name|min-max': string

  通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max

• 'name|count': string

  通过重复 string 生成一个字符串，重复次数等于 count

2.属性值是数字 Number

• 'name|+1': number

  属性值自动加 1，初始值为 number

• 'name|min-max': number

  生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型

• '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

• 'name|1': boolean

  随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2

• 'name|min-max': value

  随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)

4.属性值是对象 Object

• 'name|count': object

  从属性值 object 中随机选取 count 个属性

• 'name|min-max': object

  从属性值 object 中随机选取 min 到 max 个属性

5.属性值是数组 Array

• 'name|1': array

  从属性值 array 中随机选取 1 个元素，作为最终值

• 'name|+1': array

  从属性值 array 中顺序选取 1 个元素，作为最终值

• 'name|min-max': array

  通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max

• 'name|count': array

  通过重复属性值 array 生成一个新数组，重复次数为 count

6.属性值是函数 Function

• 'name': function

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

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

• '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"
  }
  

八、Mock.Random生成各种随机数据

Mock.Random 提供的完整方法（占位符）如下：

• Basic (基本数据类)

  用法	中文介绍	输出结果
  @range(1, 10, 2)	一个整型数组	[1, 3, 5, 7, 9]
  @string()	一个随机字符串	pJjDUe
  @character()	一个随机字符	P
  @float(60, 100, 3, 5)	一个随机的浮点数	70.6849
  @integer(1, 100)	一个随机的整数	96
  @natural(1, 100)	一个随机的自然数（大于等于 0 的整数）	77
  @boolean	一个随机的布尔值	true

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Basic

• date (时间类型)

  用法	中文介绍	输出结果
  @date()	一个随机的日期字符串	2002-10-23
  @time()	一个随机的时间字符串	00:14:47
  @datetime()	一个随机的日期和时间字符串	1977-11-17 03:50:15
  @now()	当前的日期和时间字符串	2014-04-29 20:08:38

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Date

• image (图片类型)

  用法	中文介绍	输出结果
  @image()	生成一个随机的图片地址	http://dummyimage.com/125x125
  @dataImage()	生成一段随机的 Base64 图片编码

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Image

• color (颜色类型)

  用法	中文介绍	输出结果
  @color()	随机生成一个有吸引力的颜色，格式为 ‘#RRGGBB’	#3538B2
  @hex()	随机生成一个有吸引力的颜色，格式为 ‘#RRGGBB’	#3538B2
  @rgb()	随机生成一个有吸引力的颜色，格式为 ‘rgb(r, g, b)’	rgb(242, 198, 121)
  @rgba()	随机生成一个有吸引力的颜色，格式为 ‘rgba(r, g, b, a)’	rgba(242, 198, 121, 0.13)
  @hsl()	随机生成一个有吸引力的颜色，格式为 ‘hsl(h, s, l)’	hsl(345, 82, 71)

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Color

• text (文案类型)

  用法	中文介绍	输出结果
  @paragraph()	随机生成一段文本	Dlpec hnwvovvnq slfehkf zimy qpxqgy vwrbi mok wozddpol umkek nffjcmk gnqhhvm ztqkvjm kvukg dqubvqn xqbmoda. Vdkceijr fhhyemx hgkruvxuvr kuez wmkfv lusfksuj oewvvf cyw tfpo jswpseupm ypybap kwbofwg uuwn rvoxti ydpeeerf.
  @cparagraph()	随机生成一段中文文本	去话起时为无子议气根复即传月广。题林里油步不约认山形两标命导社干。
  @sentence()	随机生成一个句子，第一个单词的首字母大写	Jovasojt qopupwh plciewh dryir zsqsvlkga yeam.
  @csentence()	随机生成一段中文文本	第任人九同段形位第律认得
  @word()	随机生成一个单词	fxpocl
  @cword()	随机生成一个汉字	干
  @title()	随机生成一句标题，其中每个单词的首字母大写	Rduqzr Muwlmmlg Siekwvo Ktn Nkl Orn
  @ctitle()	随机生成一句中文标题	证构动必作

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Text

• name (姓名类型)

  用法	中文介绍	输出结果
  @first()	随机生成一个常见的英文名	Nancy
  @last()	随机生成一个常见的英文姓	Martinez
  @name()	随机生成一个常见的英文姓名	Larry Wilson
  @cfirst()	随机生成一个常见的中文名	曹
  @clast()	随机生成一个常见的中文姓	艳
  @cname()	随机生成一个常见的中文姓名	袁军

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Name

• address (地址类型)

  用法	中文介绍	输出结果
  @region()	随机生成一个（中国）大区	华北
  @province()	随机生成一个（中国）省（或直辖市、自治区、特别行政区）	黑龙江省
  @city()	随机生成一个（中国）市	唐山市
  @county()	随机生成一个（中国）县	上杭县
  @zip()	随机生成一个邮政编码（六位数字）	908812

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Address

• Helper

  用法	中文介绍	输出结果
  @capitalize(‘hello’)	把字符串的第一个字母转换为大写	Hello
  @upper(‘hello’)	把字符串转换为大写	HELLO
  @lower(‘HELLO’)	把字符串转换为小写	hello
  @pick([‘a’, ‘e’, ‘i’, ‘o’, ‘u’])	从数组中随机选取一个元素，并返回	o
  @shuffle([‘a’, ‘e’, ‘i’, ‘o’, ‘u’])	打乱数组中元素的顺序，并返回	[“o”, “u”, “e”, “i”, “a”]

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Helper

• Miscellaneous (其他类型)

  用法	中文介绍	输出结果
  @guid()	随机生成一个 GUID	662C63B4-FD43-66F4-3328-C54E3FF0D56E
  @id()	随机生成一个 18 位身份证	420000200710091854
  @increment()	生成一个全局的自增整数	1

  详细API请参考官方文档：https://github.com/nuysoft/Mock/wiki/Miscellaneous

九、简单使用

在本文最后在给大家举个简单的例子吧

Mock.mock(/(\/api\/)([a-z]{2,4})(\/proxy\/query_common_credit_detail)/, {
    "err":0,
    "data|1-3": [{
    	id|+1:	101,
      	name: "@cname",
      	birthday: "@date('yyyy-MM-dd')",
      	city: "@city(true)"
    }]
  });

生成的数据结构：

data: [{
	id: 101,
	name: '嬴政',
	birthday: '2018-09-12',
	city: '福建省 漳州市'
},
{
	id: 102,
	name: '武则天',
	birthday: '1999-07-28',
	city: '湖南省 长沙市'
}]