mockjs 实战使用

[TOC]
#作用
- mockjs 可以直接拦截ajax请求，直接帮你返回模拟的响应数据
- 在前端模拟数据，省去服务端
- 不需要修改axios原有的代码，直接通过拦截的方式完成任务（不需要时直接注释掉）
	
	
#安装:
	// 官网 www.mockjs.com；文档：github.com/nuysoft/Mock/wiki
	npm install mockjs

#应用
## 简单构造
```NodeJs
	import Mock from 'mockjs'
	
	// VUE
	{
		...
		mounted () {
			// 1.简单使用
			let pp = Mock.mock({a: 111, b: 222}) // 返回 {a: 111, b: 222}
			
			
			// 2.编程式构造数据
			let pp2 = Mock.mock({ 
				'data|1-10':[{
					'id|+1': 2,       // 从2自增的数字
					'name': '@string' // @string 占位符随机生成一串字符串
				}]
			})
			console.log(pp2.data)
			/*
			返回：随机返回个数
			{
			  data: [
				{id: 2}
				{id: 3}
				// ...
				{id: 11}
			  ]
			}
			
			## 占位符
			@string // 随机字符串
			@boolean // 随机布尔
			
			@first // 随机英文名
			*/
		}
		...
	}
```

## 拦截请求模拟返回
例：
```nodejs
	// 1.Mock部分...
	import Mock from 'mockjs'
	
	Mock.mock(
		'http://www.test_aaa.com/getStreets',
		'post',
		(data) => {
			// 获取请求信息
			let params = data
			console.log(params)
			// 输出：{url: 'http://www.test_aaa.com/getStreets', type: 'POST', body: "{sid:'111'}"}
			
			
			// 模拟响应值
			return {id: 111, name: 'nnn'}
		}
	)

// 2.请求部分...
	axios.post(
		'http://www.test_aaa.com/getStreets',
		{sid: '111'}
	).then(res => {
		console.log(res.data)
		// 返回 {id: 111, name: 'nnn'}
	}).catch(err => {
		console.log('捕获错误：' + err)
	})
	// ...
```

## Mock 函数
### Mock.Random
```javascript
	import Mock from 'mockjs'
	
	const Random = Mock.Random
	
	// 1. 内置函数
	console.log(Random.name()) // 随机英文名
	console.log(Random.cname()) // 随机中文名
	console.log(Random.city()) // 随机中文名
	console.log(Random.datetime('yyy-MM-dd HH:mm:ss')) 
								// 随机时间
	console.log(Random.csentence(3,6))
							// 3-6个长度的随机中文字符串
							
	// 2. 自定义内容
	Random.extend({
		bookName() {
			return this.pick(['三国演义', '水浒传', '红楼梦', '孙子兵法'])
		}
	})
	console.log(Random.bookName())
```
##拓展
以上读者操作一遍便可理解mock的精髓所在，其他的如mock验证有兴趣可以到官网读一遍，笔者认为既然是模拟数据花大量的时间去做模拟验证的部分是得不偿失的，除非有特别的要求读者可加入些验证的工作来丰富你的模拟响应
### Mock.valid()