[TOC]
>[success] # Mock简明文档
下面是一个 **mock** 的一个精简的一个小文档可以便于查看
>[success] ## 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 }
----
>[success] ## 语法规范
>[success] ### 数据模板定义
> 数据模板中每个属性由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
*属性值*中可以包含@占位符
*属性值*还指定了最终值的初始值和类型
>[success] #### 1.属性值是字符串
1. 'name|min-max': string
> 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
2. 'name|count': string
> 通过重复 string 生成一个字符串，重复次数等于 count
>[success] #### 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 位
>[success] #### 3.属性值是布尔值
1. 'name|1': boolean
> 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
2. 'name|min-max': value
> 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)
>[success] #### 4.属性值是对象
1. 'name|count': object
> 从属性值 object 中随机选取 count 个属性
2. 'name|min-max': object
> 从属性值 object 中随机选取 min 到 max 个属性
>[success] #### 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
>[success] #### 6.属性值是函数
1. 'name': function
> 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象
>[success] #### 7.属性值是正则表达式
1. 'name': regexp
> 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
>[success] ### 数据占位符定义
1. 用 @ 来标识其后的字符串是 占位符
2. 占位符 引用的是 Mock.Random 中的方法
3. 通过 Mock.Random.extend() 来扩展自定义占位符
4. 占位符 也可以引用 数据模板 中的属性
5. 占位符 会优先引用 数据模板 中的属性
6. 占位符 支持 相对路径 和 绝对路径
----
>[success] ## Mock.setup()
> 配置Ajax请求的行为，暂时支持的配置项有timeout
```javascript
Mock.setup({
timeout: 500
})
Mock.setup({
timeout: '100-600'
})
```
----
>[success] ## 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" }
```
>[success] ### Mock.Random提供的完整方法（占位符）:
Type | Method
:------- | :-------
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image | image, dataImage
Color | color
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name | first, last, name, cfirst, clast, cname
Web | url, domain, email, ip, tld
Address | area(region, province, city(bool), county(bool), zip), region
Helper | capitalize(首字母大写), upper(大写), lower(小写), pick(从数组任取一个), shuffle(打乱数组元素顺序)
Miscellaneous | guid, id
>[success] #### Basic
1. Random.boolean(min?, max?, current? )
2. Random.natural(min?, max? )
3. Random.integer(min?, max? )
4. Random.float( min?, max?, dmin?, dmax? )
5. Random.character( pool? ) // pool => lower/upper/number/symbol
6. Random.string( pool?, min?, max? ) // pool => lower/upper/number/symbol
7. Random.range( start?, stop, step? )
>[success] #### Date
1. Random.date( format? )
Format | Description | Example
:---- | :---- | :----
yyyy | A full numeric representation of a year, 4 digits | 1999 or 2003
yy | A two digit representation of a year | 99 or 03
y | A two digit representation of a year | 99 or 03
MM | Numeric representation of a month, with leading zeros | 01 to 12
M | Numeric representation of a month, without leading zeros | 1 to 12
dd | Day of the month, 2 digits with leading zeros | 01 to 31
d | Day of the month without leading zeros | 1 to 31
HH | 24-hour format of an hour with leading zeros | 00 to 23
H | 24-hour format of an hour without leading zeros | 0 to 23
hh | 12-hour format of an hour without leading zeros | 01 to 12
h | 12-hour format of an hour with leading zeros | 1 to 12
mm | Minutes, with leading zeros | 00 to 59
m | Minutes, without leading zeros | 0 to 59
ss | Seconds, with leading zeros | 00 to 59
s | Seconds, without leading zeros | 0 to 59
SS | Milliseconds, with leading zeros | 000 to 999
S | Milliseconds, without leading zeros | 0 to 999
A | Uppercase Ante meridiem and Post meridiem | AM or PM
a | Lowercase Ante meridiem and Post meridiem | am or pm
T | Milliseconds, since 1970-1-1 00:00:00 UTC | 759883437303
2. Random.time( format? )
3. Random.datetime( format? )
4. Random.now( unit?, format? ) // unit => year、month、week、day、hour、minute、second、week
>[success] #### Image
>[success] ##### Random.image()
1. Random.image()
2. Random.image( size )
3. Random.image( size, background )
4. Random.image( size, background, text )
5. Random.image( size, background, foreground, text )
6. Random.image( size, background, foreground, format, text )
>[success] ##### Random.dataImage()
1. Random.dataImage()
2. Random.dataImage( size )
3. Random.dataImage( size, text )
>[success] #### Color
1. Random.color() // => #3538B2
2. Random.hex() // => #3538B2
3. Random.rgb() // => rgb(242, 198, 121)
4. Random.rgba() // => rgba(242, 198, 121, 0.13)
5. Random.hsl() // => hsl(345, 82, 71)
>[success] #### Text
1. Random.paragraph( min?, max? )
2. Random.cparagraph( min?, max? )
3. Random.sentence( min?, max? )
4. Random.csentence( min?, max? )
5. Random.word( min?, max? )
6. Random.cword( pool?, min?, max? )
7. Random.title( min?, max? )
8. Random.ctitle( min?, max? )
>[success] #### Name
1. Random.first()
2. Random.last()
3. Random.name( middle? )
4. Random.cfirst()
5. Random.clast()
6. Random.cname()
>[success] #### Web
1. Random.url( protocol?, host? )
2. Random.protocol()
3. Random.domain() // 域名
4. Random.tld() // 顶级域名
5. Random.email( domain? )
6. Random.ip()
>[success] #### Address
1. Random.region()
2. Random.province()
3. Random.city( prefix? )
4. Random.county( prefix? )
5. Random.zip()
>[success] #### Helper
1. Random.capitalize( word )
2. Random.upper( str )
3. Random.lower( str )
4. Random.pick( arr )
5. Random.shuffle( arr )
>[success] #### Miscellaneous
1. Random.guid()
2. Random.id()
3. Random.increment( step? )
----
>[success] ### 扩展
```javascript
Random.extend({
fruit () {
const fruit = ['apple', 'peach', 'lemon']
return this.pick(fruit)
}
})
Random.fruit() // => 'peach'
Mock.mock('@fruit') // => 'lemon'
Mock.mock({
fruit: '@fruit' // => 'peach'
})
```
>[success] ### Mock.valid()
>[success] #### Mock.valid( template, data )
>[success] ### Mock.toJSONSchema()
>[success] #### Mock.toJSONSchema( template )
- vue 26课
- Vue-cli3.0项目搭建
- Vue-ui 创建cli3.0项目
- Vue-ui 界面详解
- 项目目录详解
- public文件夹
- favicon.ico
- index.html
- src文件夹
- api文件夹
- assets文件夹
- components文件夹
- config文件夹
- directive文件夹
- lib文件夹
- mock文件夹
- mock简明文档
- router文件夹
- store文件夹
- views文件夹
- App.vue
- main.js
- .browserslistrc
- .editorconfig
- .eslintrc.js
- .gitignore
- babel.config.js
- package-lock.json
- package.json
- postcss.config.js
- README.en.md
- README.md
- vue.config.js
- Vue Router
- 路由详解（一）----基础篇
- 路由详解（二）----进阶篇
- Vuex
- Bus
- Vuex-基础-state&getter
- Vuex-基础-mutation&action/module
- Vuex-进阶
- Ajax请求
- 解决跨域问题
- 封装axios
- Mock.js模拟Ajax响应
- 组件封装
- 从数字渐变组件谈第三方JS库使用
- 从SplitPane组件谈Vue中如何【操作】DOM
- 渲染函数和JSX快速掌握
- 递归组件的使用
- 登陆/登出以及JWT认证
- 响应式布局
- 可收缩多级菜单的实现
- vue杂项
- vue递归组件
- vue-cli3.0多环境打包配置
- Vue+Canvas实现图片剪切
- vue3系统入门与项目实战
- Vue语法初探
- 初学编写 HelloWorld 和 Counter
- 编写字符串反转和内容隐藏功能
- 编写TodoList功能了解循环与双向绑定
- 组件概念初探，对 TodoList 进行组件代码拆分
- Vue基础语法
- Vue 中应用和组件的基础概念
- 理解 Vue 中的生命周期函数
- 常用模版语法讲解
- 数据，方法，计算属性和侦听器
- 样式绑定语法
- 条件渲染
- 列表循环渲染
- 事件绑定
- 表单中双向绑定指令的使用
- 探索组件的理念
- 组件的定义及复用性，局部组件和全局组件
- 组件间传值及传值校验
- 单向数据流的理解
- Non-Props 属性是什么
- 父子组件间如何通过事件进行通信
- 组件间双向绑定高级内容
- 使用匿名插槽和具名插槽解决组件内容传递问题
- 作用域插槽
- 动态组件和异步组件
- 基础语法知识点查缺补漏
- Vue 中的动画
- 使用 Vue 实现基础的 CSS 过渡与动画效果
- 使用 transition 标签实现单元素组件的过渡和动画效果
- 组件和元素切换动画的实现
- 列表动画
- 状态动画
- Vue 中的高级语法
- Mixin 混入的基础语法
- 开发实现 Vue 中的自定义指令
- Teleport 传送门功能
- 更加底层的 render 函数
- 插件的定义和使用
- 数据校验插件开发实例
- Composition API
- Setup 函数的使用
- ref，reactive 响应式引用的用法和原理
- toRef 以及 context 参数
- 使用 Composition API 开发TodoList
- computed方法生成计算属性
- watch 和 watchEffect 的使用和差异性
- 生命周期函数的新写法
- Provide,Inject,模版 Ref 的用法
- Vue 项目开发配套工具讲解
- VueCLI 的使用和单文件组件
- 使用单文件组件编写 TodoList
- Vue-Router 路由的理解和使用
- VueX 的语法详解
- CompositionAPI 中如何使用 VueX
- 使用 axios 发送ajax 请求
- Vue3.0(正式版) + TS
- 你好 Typescript： 进入类型的世界
- 什么是 Typescript
- 为什么要学习 Typescript
- 安装 Typescript
- 原始数据类型和 Any 类型
- 数组和元组
- Interface- 接口初探
- 函数
- 类型推论 联合类型和 类型断言
- class - 类 初次见面
- 类和接口 - 完美搭档
- 枚举（Enum）
- 泛型（Generics） 第一部分
- 泛型（Generics） 第二部分 - 约束泛型
- 泛型第三部分 - 泛型在类和接口中的使用
- 类型别名，字面量 和 交叉类型
- 声明文件
- 内置类型
- 总结