9.Vue技术栈开发实战-使用Mock模拟Ajax请求

https://github.com/lison16/vue-cource/blob/master/src/mock/mock.doc.md

用mock.js对ajax请求作出拦截，并响应

拦截ajax请求，并且作出响应
mockJs的用法，详细介绍

响应模拟

精简版的文档

在这里引进了mock并导出

把Mock在main.js内引入，但是生产环境，我们不希望mock拦截，只需要在开发环境拦截。

不是生产环境才引入mock

我们之前在home页，做了一个接口的调用

我们是在api/user.js里面定义了这个方法

现在对使用Mock对这个请求进行拦截。
使用Mock.mock方法拦截请求。

第一个参数可以是个字符串也可以是个正则表达式，如果写字符串的话，需要把完整的路径都写上。

第二个参数可以写类型，post还是get，当然也可以省略。

最后一个参数是拦截请求后，用哪个方法来处理
mock下创建response文件夹

接收一个参数，我们把这个参数打印出来。

把user内定义的方法，引进来。当拦截到请求就会调用user内定义的方法

点击请求数据

详细介绍mock的使用方法

## Mock.mock()
- Mock.mock( requestUrl?, requestType?, template|function(options) )
- Mock.mock( template )
- Mock.mock( requestUrl, template )
- Mock.mock( requestUrl, requestType, template )
- Mock.mock( requestUrl, requestType, function(options) )
> requestUrl: 要拦截的URL，字符串或正则表达式<br>
equestType: 要拦截的请求类型，get/post/put/delete/options...<br>
template: 数据模板<br>
function(options)：生成响应数据的函数，options --> { url, type, body }

正则拦截

返回结果可以直接用模板

数据模板

### 数据模板定义
> 数据模板中每个属性由3部分组成： **属性名|生成规则：属性值**
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.dcout': value
7. 'name|+step': value
*属性值*中可以包含@占位符
*属性值*还指定了最终值的初始值和类型

#### 1.属性值是字符串
1. 'name|min-max': string
> 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
2. 'name|count': string
> 通过重复 string 生成一个字符串，重复次数等于 count

引进mock，使用模板，它可以是一个字符串，也可以是一个对象。

调用mock的mock方法并把模板传进去。并返回

重复lison最小3遍最多4遍

重复了3遍lison

加上参数，只需要拦截post请求，要不然上面输出来了多次

这样就响应了一次，重复了3遍

拼接5次

为了方便我们看，把data打印出来

.属性值是数字

#### 2.属性值是数字
1. 'name|+1': number
  > 属性值自动加 1，初始值为 number
2. 'name|min-max': number
  > 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型
3. 'name|min-max.dmin-dmax': number
  > 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位

每次输出的值，age都会加2，while循环了3次。

返回一个4到10的数字，每次都随即返回的

小数位是3到10的数字小数位是2位到5位

布尔值类型

#### 3.属性值是布尔值
1. 'name|1': boolean
> 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
2. 'name|min-max': value
> 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)
bool是2分之一的概率。
bool2的概率是十分之一是true ，十分之九是false。 1除以1+9

属性值是对象

#### 4.属性值是对象
1. 'name|count': object
> 从属性值 object 中随机选取 count 个属性
2. 'name|min-max': object
> 从属性值 object 中随机选取 min 到 max 个属性

返回的结果随即抽取2个

1到2个

5.属性值是数组

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

重复这个数组，2到4次

重复数组两次

6.属性值是函数

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

7.属性值是正则表达式

#### 7.属性值是正则表达式
1. 'name': regexp
> 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串

第一个是1到9的数字，第二个是a到z的字母

数据占位符定义

### 数据占位符定义
1. 用 @ 来标识其后的字符串是占位符
2. 占位符引用的是 Mock.Random 中的方法
3. 通过 Mock.Random.extend() 来扩展自定义占位符
4. 占位符也可以引用数据模板中的属性
5. 占位符会优先引用数据模板中的属性
6. 占位符支持相对路径和绝对路径
----
## Mock.setup()
> 配置Ajax请求的行为，暂时支持的配置项有timeout
```javascript
  Mock.setup({
    timeout: 500
  })
  Mock.setup({
    timeout: '100-600'
  })
```
----
请求明显有个延迟

Mock.Random

## Mock.Random
```javascript
  const Random = Mock.Random
  Random.email() // => sd.sdf@oksd.com
  Mock.mock('@email') // => sd.sdf@oksd.com
  Mock.mock({ email: 'sd.sdf@oksd.com' }) // => { email: "sd.sdf@oksd.com" }
```
生成随即的Email字段

再来请求一次，邮箱的格式又变了。每次的变化都不一样

Mock.mock生成邮箱的方式

可使用的占位符如下

Basic

Random.boolean(min?, max?, current? )
Random.natural(min?, max? )
Random.integer(min?, max? )
Random.float( min?, max?, dmin?, dmax? )
Random.character( pool? ) // pool => lower/upper/number/symbol 生成字符串
Random.string( pool?, min?, max? ) // pool => lower/upper/number/symbol
Random.range( start?, stop, step? )

s每个元素之间相差1，

3开始到10，每个元素先相差2

Random.Date

Random.time

Random.dattime

日期+时间

Random.now

Random.image()

在Home.vue内加一个img的标签

传入尺寸100x200

第二个参数是图片的颜色。

在图片上显示的文字

文字的颜色

传入图片的格式

Base64的图片

Color

Random.color() // => #3538B2
Random.hex() // => #3538B2
Random.rgb() // => rgb(242, 198, 121)
Random.rgba() // => rgba(242, 198, 121, 0.13)
Random.hsl() // => hsl(345, 82, 71)

页面上给按钮绑定一个color属性

定义数据

请求数据后，获取color

Text

Random.paragraph( min?, max? ):英文段落
Random.cparagraph( min?, max? )：中文段落
Random.sentence( min?, max? )
Random.csentence( min?, max? )：中文句子，里面有几个中文句子
Random.word( min?, max? )：返回英文的单词，
Random.cword( pool?, min?, max? )：中文词
Random.title( min?, max? )：英文标题
Random.ctitle( min?, max? ):中文标题

定义一段次，最少取2个最多取5个

Name

Random.first()
Random.last()
Random.name( middle? )
Random.cfirst()：中文的姓
Random.clast()：中文名字
Random.cname()：中文名

Web

Random.url( protocol?, host? )：随机的url
Random.protocol()：协议 http 还是https
Random.domain() // 域名
Random.tld() // 顶级域名
Random.email( domain? )
Random.ip()

Address

返回中国的大区

返回随机的省份

随机的地市，如果设置为true那么连同城市也一起返回。

county 镇一级别的。

邮政编码

Helper

Random.capitalize( word )：英文单词首字母大写
Random.upper( str )
Random.lower( str )
Random.pick( arr )
Random.shuffle( arr )

数组，顺序打乱

Miscellaneous杂项

Random.guid()
Random.id()
Random.increment( step? )

扩展

Random.extend({
  fruit () {
    const fruit = ['apple', 'peach', 'lemon']
    return this.pick(fruit)
  }
})
Random.fruit() // => 'peach'
Mock.mock('@fruit')  // => 'lemon'
Mock.mock({
  fruit: '@fruit' // => 'peach'
})

使用Random.extend来扩展。

假设定义一个水果的列表。pick是从数组中抽取任意一项，

占位符的形式

Valid

返回传入的模板是否符合规则

把定义的模板转换成JSONSchema的形式