Mock.js 官網

目錄

1. 開始安裝

1.1 Node（CommonJS）

1.2 CMD方式

?2. 語法規范

2.1?數據模板定義規范 DTD

2.1.1. 屬性值是字符串?String

2.1.2. 屬性值是數字?Number

2.1.3. 屬性值是布爾型?Boolean

2.1.4. 屬性值是對象?Object

2.1.5. 屬性值是數組?Array

2.1.6. 屬性值是函數?Function

2.1.7. 屬性值是正則表達式?RegExp

2.2 數據占位符定義規范 DPD

---

1. 開始安裝

1.1 Node（CommonJS）

npm install mockjs --save-dev // 使用 Mock var Mock = require('mockjs') var data = Mock.mock({// 屬性 list 的值是一個數組，其中含有 1 到 10 個元素'list|1-10': [{// 屬性 id 是一個自增數，起始值為 1，每次增 1'id|+1': 1}] }) // 輸出結果 console.log(JSON.stringify(data, null, 4))

1.2 CMD方式

因為 Sea.js 社區尚未提供 webpack 插件，所以 Mock.js 暫不完整支持通過 Sea.js 加載。一種變通的方式是，依然通通過 Sea.js 配置和加載 Mock.js，然后訪問全局變量 Mock。

// 配置 Mock 路徑 seajs.config({alias: {mock: 'http://mockjs.com/dist/mock.js'} }) // 加載 Mock seajs.use('mock', function(__PLACEHOLDER) {// 使用 Mock（全局變量）var data = Mock.mock({'list|1-10': [{'id|+1': 1}]});document.body.innerHTML +='<pre>' +JSON.stringify(data, null, 4) +'</pre>' })

npm install --save 、--save-dev 、-D、-S 的區別與NODE_ENV的配置_jwl_willon的博客-CSDN博客_npm save備注：&lt;=&gt; 意為等價于；1、npm install &lt;=&gt; npm i?????--save? ?&lt;=&gt; -S??? ??????--save-dev? &lt;=&gt; -D?????? npm run start &lt;=&gt; npm start? // 對應"scripts"里的"start"命令??????少敲幾下鍵https://blog.csdn.net/jwl_willon/article/details/81054978

npm安裝包時 --save 和 --save-dev 的區別 - Yuan-yiming - 博客園以npm?安裝?vue為例 1.npm install?vue: 會把vue包安裝到node_modules目錄中； 不會修改package.json文件； 之后運行nphttps://www.cnblogs.com/yuanyiming/p/10735513.html

---

?2. 語法規范

Mock.js 的語法規范包括兩部分：

數據模板定義規范（Data Template Definition，DTD）。

數據占位符定義規范（Data Placeholder Definition，DPD）。

2.1?數據模板定義規范 DTD

數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值：

// 屬性名 name // 生成規則 rule // 屬性值 value 'name|rule': value

注意：

• 屬性名?和?生成規則?之間用豎線?|?分隔。
• 生成規則?是可選的。
• 生成規則?有 7 種格式：
• 'name|min-max': value
• 'name|count': value
• 'name|min-max.dmin-dmax': value
• 'name|min-max.dcount': value
• 'name|count.dmin-dmax': value
• 'name|count.dcount': value
• 'name|+step': value
• 生成規則?的 含義 需要依賴?屬性值的類型?才能確定。
• 屬性值?中可以含有?@占位符。
• 屬性值?還指定了最終值的初始值和類型。

?生成規則和示例：

2.1.1. 屬性值是字符串?String

'name|min-max': string

通過重復?string?生成一個字符串，重復次數大于等于?min，小于等于?max。

'name|count': string

通過重復?string?生成一個字符串，重復次數等于?count。

2.1.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 }

2.1.3. 屬性值是布爾型?Boolean

'name|1': boolean

隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。

'name|min-max': value

隨機生成一個布爾值，值為?value?的概率是?min / (min + max)，值為?!value?的概率是?max / (min + max)。

2.1.4. 屬性值是對象?Object

'name|count': object

從屬性值?object?中隨機選取?count?個屬性。

'name|min-max': object

從屬性值?object?中隨機選取?min?到?max?個屬性。

2.1.5. 屬性值是數組?Array

'name|1': array

從屬性值?array?中隨機選取 1 個元素，作為最終值。

'name|+1': array

從屬性值?array?中順序選取 1 個元素，作為最終值。

'name|min-max': array

通過重復屬性值?array?生成一個新數組，重復次數大于等于?min，小于等于?max。

'name|count': array

通過重復屬性值?array?生成一個新數組，重復次數為?count。

2.1.6. 屬性值是函數?Function

'name': function

執行函數?function，取其返回值作為最終的屬性值，函數的上下文為屬性?'name'?所在的對象。

2.1.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" }

2.2 數據占位符定義規范 DPD

占位符?只是在屬性值字符串中占個位置，并不出現在最終的屬性值中。

占位符?的格式為：

@占位符 @占位符(參數 [, 參數])

注意：

用?@?來標識其后的字符串是?占位符。

占位符?引用的是?Mock.Random?中的方法。

通過?Mock.Random.extend()?來擴展自定義占位符。

占位符?也可以引用?數據模板?中的屬性。

占位符?會優先引用?數據模板?中的屬性。

占位符?支持?相對路徑?和?絕對路徑。

Mock.mock({name: {first: '@FIRST',middle: '@FIRST',last: '@LAST',full: '@first @middle @last'} }) // => {"name": {"first": "Charles","middle": "Brenda","last": "Lopez","full": "Charles Brenda Lopez"} }

---

mockJs文檔（二）?

vue中配置mock.js_zj25xy11的博客-CSDN博客_vue配置mock1.在vue項目中安裝mockjsnpm install mockjs --save-dev2.配置文件在根目錄下建mock文件夾3.index.jsconst Mock =require('mockjs')const fs = require('fs')const path = require('path')// 用于被index.js進行調用function getJsonFile (filePath) { // 讀取指定的json文件 const json =https://blog.csdn.net/zj25xy11/article/details/108074160mock.js請求報404_藍色的落葉的博客-CSDN博客_mock請求404如果沒有在main.js中引入** import “./mock/index” ** ，就會顯示如上圖這種情況如下是mock.js簡單的用法npm install mockjs --save-dev注意：若是沒有安裝axios，需 npm install axios --saveimport "./mock/index"List item...https://blog.csdn.net/qq_38502227/article/details/102587251

總結

以上是生活随笔為你收集整理的mockJs文档（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。