使用Mock.js進行獨立于后端的前端開發(fā)

chinafgj 發(fā)布于2019-08-21 10:37 / 2059人閱讀

摘要：隨機生成一個布爾值，值為的概率是，值為的概率是。屬性值是數(shù)組執(zhí)行函數(shù)，取其返回值作為最終的屬性值，上下文為所在的對象。表示需要攔截的請求類型。表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。參數(shù)指向本次請求的選項集。覆蓋攔截請求，目前內(nèi)置支持。

概述 Mock.js實現(xiàn)的功能

基于 數(shù)據(jù)模板 生成數(shù)據(jù)

基于 HTML模板 生成數(shù)據(jù)

攔截并模擬 Ajax請求

用法 瀏覽器：

返回值:

{
"list": [
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
    ]
}

JQuery：

配置模擬數(shù)據(jù)：

Mock.mock("http://g.cn", {
    "name"     : "@name",
    "age|1-100": 100,
    "color"    : "@color"
});

發(fā)送Ajax請求：

$.ajax({
    url: "http://g.cn",
    dataType:"json"
    }).done(function(data, status, xhr){
    console.log(
    JSON.stringify(data, null, 4)
    )    
})；

返回數(shù)據(jù)：

// 結(jié)果1
{
"name": "Elizabeth Hall",
"age": 91,
"color": "#0e64ea"
}

// 結(jié)果2
{
"name": "Michael Taylor",
"age": 61,
"color": "#081086"
}

Node.js：

// 安裝
npm install mockjs

// 使用
var Mock = require("mockjs");
var data = Mock.mock({
    "list|1-10": [{
        "id|+1": 1
    }]
});

console.log(JSON.stringify(data, null, 4))

Angular.js:

mock數(shù)據(jù)mockData.js:

Mock.mock("http://www.baidu.com", {
    "name": "@name()",
    "age|1-100": 100,
    "color": "@color"
});

語法

Mock.js 的語法規(guī)范包括兩部分：

數(shù)據(jù)模板定義（Data Temaplte Definition，DTD）

數(shù)據(jù)占位符定義（Data Placeholder Definition，DPD）

數(shù)據(jù)模板定義 DTD

數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：

// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
"name|rule": value

注意：

屬性名和生成規(guī)則之間用 | 分隔。

生成規(guī)則是可選的。

生成規(guī)則有 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

生成規(guī)則的含義需要依賴屬性值才能確定。

屬性值中可以含有 @占位符。

屬性值還指定了最終值的初始值和類型。

生成規(guī)則和示例：

1. 屬性值是字符串 String

"name|min-max": "value" 通過重復(fù) "value" 生成一個字符串，重復(fù)次數(shù)大于等于 min，小于等于 max。

"name|count": "value" 通過重復(fù) "value" 生成一個字符串，重復(fù)次數(shù)等于 count。

2. 屬性值是數(shù)字 Number

"name|+1": 100 屬性值自動加 1，初始值為 100

"name|1-100": 100 生成一個大于等于 1、小于等于 100 的整數(shù)，屬性值 100 只用來確定類型。

"name|1-100.1-10": 100 生成一個浮點數(shù)，整數(shù)部分大于等于 1、小于等于 100，小數(shù)部分保留 1 到 10 位。

    {
    "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
    }

3. 屬性值是布爾型 Boolean

"name|1": value 隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率是 1/2。

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

4. 屬性值是對象 Object

"name|min-max": {} 從屬性值 {} 中隨機選取 min 到 max 個屬性。

"name|count": {} 從屬性值 {} 中隨機選取 count 個屬性。

5. 屬性值是數(shù)組 Array

"name|1": [{}, {} ...] 從屬性值 [{}, {} ...] 中隨機選取 1 個元素，作為最終值。

"name|min-max": [{}, {} ...] 通過重復(fù)屬性值 [{}, {} ...] 生成一個新數(shù)組，重復(fù)次數(shù)大于等于 min，小于等于 max。

"name|count": [{}, {} ...] 通過重復(fù)屬性值 [{}, {} ...] 生成一個新數(shù)組，重復(fù)次數(shù)為 count。

6. 屬性值是數(shù)組 Function

"name": function(){} 執(zhí)行函數(shù) function(){}，取其返回值作為最終的屬性值，上下文為 "name" 所在的對象。

數(shù)據(jù)占位符定義 DPD

占位符只是在屬性值字符串中占個位置，并不出現(xiàn)在最終的屬性值中。占位符的格式為：

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

注意：

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

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

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

占位符也可以引用數(shù)據(jù)模板中的屬性。

占位符會優(yōu)先引用數(shù)據(jù)模板中的屬性

{
 name: {
 first: "@FIRST",
 middle: "@FIRST",
 last: "@LAST",
 full: "@first @middle @last"
    }
}
// =>
{
 "name": {
 "first": "Charles",
 "middle": "Brenda",
 "last": "Lopez",
 "full": "Charles Brenda Lopez"
    }
}

常用方法 Mock.mock( rurl?, rtype?, template|function(options) )

根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。

參數(shù)的含義和默認值如下所示：

參數(shù) rurl：可選。表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 //domain/list.json/、"/domian/list.json"。

參數(shù) rtype：可選。表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。

參數(shù) template：可選。表示數(shù)據(jù)模板，可以是對象或字符串。例如 { "data|1-10":[{}] }、"@EMAIL"。

參數(shù) function(options)：可選。表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。

參數(shù) options：指向本次請求的 Ajax 選項集。

Mock.mockjax(library)

覆蓋（攔截） Ajax 請求，目前內(nèi)置支持 jQuery、Zepto、KISSY。

Mock.Random

Mock.Random 是一個工具類，用于生成各種隨機數(shù)據(jù)。Mock.Random 的方法在數(shù)據(jù)模板中稱為“占位符”，引用格式為 @占位符(參數(shù) [, 參數(shù)]) 。

Mock.tpl(input, options, helpers, partials)

基于 Handlebars、Mustache 的 HTML 模板生成模擬數(shù)據(jù)。

方法使用詳情請參考mock.js文檔

參考

演示： mock-demo

演示： mock-angular-demo

參考： mock.js

源碼： mock-angular

GPU云服務(wù)器云服務(wù)器前端后端的區(qū)別前端跟后端的區(qū)別 java前端后端的區(qū)別前端與后端的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85877.html

發(fā)表評論

登陸后可評論

0條評論

chinafgj

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow和tensorboard版本對應(yīng)

閱讀 5125·2023-04-25 19:30
tensorflow入門

閱讀 2178·2023-04-25 15:09
11.8-11.14【大學(xué)生Python學(xué)習(xí)】社區(qū)總結(jié)+優(yōu)秀社區(qū)成員點名表揚&&am

閱讀 2625·2021-11-16 11:45
dedipath：美國便宜獨立服務(wù)器，洛杉磯機房，$39/月起，簡單測評

閱讀 2181·2021-11-15 18:07
iON：雙十一，美國VPS，1核/2G內(nèi)存/50G SSD/2T流量/G口帶寬，$11.11/季

閱讀 1464·2021-11-11 17:22
《HelloGitHub》第 67 期

閱讀 2125·2021-11-04 16:06
Megalayer：上新新加坡vps，2核/2G內(nèi)存/50G SSD/10M優(yōu)化帶寬，￥169.00

閱讀 3583·2021-10-20 13:47
虛擬主機怎么綁定域名-急急急一個域名怎樣綁定多個虛擬主機上？

閱讀 3043·2021-09-22 16:03

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用Mock.js進行獨立于后端的前端開發(fā)

1. 屬性值是字符串 String

2. 屬性值是數(shù)字 Number

3. 屬性值是布爾型 Boolean

4. 屬性值是對象 Object

5. 屬性值是數(shù)組 Array

6. 屬性值是數(shù)組 Function

參數(shù)的含義和默認值如下所示：

相關(guān)文章

前后端開發(fā)分離之Mock

前后端開發(fā)分離之Mock

**讓前端攻城師獨立于后端進行開發(fā): Mock.js**

mockjs讓前端開發(fā)獨立于后端

mockjs讓前端開發(fā)獨立于后端

發(fā)表評論

0條評論

chinafgj

男|高級講師

TA的文章

tensorflow和tensorboard版本對應(yīng)

tensorflow入門

11.8-11.14【大學(xué)生Python學(xué)習(xí)】社區(qū)總結(jié)+優(yōu)秀社區(qū)成員點名表揚&&am

dedipath：美國便宜獨立服務(wù)器，洛杉磯機房，$39/月起，簡單測評

iON：雙十一，美國VPS，1核/2G內(nèi)存/50G SSD/2T流量/G口帶寬，$11.11/季

《HelloGitHub》第 67 期

Megalayer：上新新加坡vps，2核/2G內(nèi)存/50G SSD/10M優(yōu)化帶寬，￥169.00

虛擬主機怎么綁定域名-急急急一個域名怎樣綁定多個虛擬主機上？

最新活動