[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) 第二部分 - 約束泛型
- 泛型第三部分 - 泛型在類和接口中的使用
- 類型別名,字面量 和 交叉類型
- 聲明文件
- 內置類型
- 總結