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

資訊專(zhuān)欄INFORMATION COLUMN

使用Mock.js進(jìn)行獨(dú)立于后端的前端開(kāi)發(fā)

chinafgj / 2061人閱讀

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

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

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

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

攔截并模擬 Ajax請(qǐng)求

用法 瀏覽器：

返回值:

{
"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請(qǐng)求：

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

返回?cái)?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"
});
語(yǔ)法

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

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

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

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

數(shù)據(jù)模板中的每個(gè)屬性由 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ī)則 的 含義 需要依賴(lài) 屬性值 才能確定。

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

屬性值 還指定了最終值的初始值和類(lèi)型。

生成規(guī)則和示例：
1. 屬性值是字符串 String

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

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

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

"name|+1": 100 屬性值自動(dòng)加 1，初始值為 100

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

"name|1-100.1-10": 100 生成一個(gè)浮點(diǎn)數(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 隨機(jī)生成一個(gè)布爾值，值為 true 的概率是 1/2，值為 false 的概率是 1/2。

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

4. 屬性值是對(duì)象 Object

"name|min-max": {} 從屬性值 {} 中隨機(jī)選取 min 到 max 個(gè)屬性。

"name|count": {} 從屬性值 {} 中隨機(jī)選取 count 個(gè)屬性。

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

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

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

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

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

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

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

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

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

注意：

用 @ 來(lái)標(biāo)識(shí)其后的字符串是 占位符。

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

通過(guò) Mock.Random.extend() 來(lái)擴(kuò)展自定義占位符。

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

占位符 會(huì)優(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ù)的含義和默認(rèn)值如下所示：

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

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

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

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

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

Mock.mockjax(library)

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

Mock.Random

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

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

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

方法使用詳情請(qǐng)參考mock.js文檔

參考

演示： mock-demo

演示： mock-angular-demo

參考： mock.js

源碼： mock-angular

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

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

相關(guān)文章

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

    摘要：為了使得前端減輕對(duì)后端的依賴(lài)，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開(kāi)發(fā)，我們一般會(huì)手動(dòng)進(jìn)行一些數(shù)據(jù)模擬，即假數(shù)據(jù)。覆蓋攔截請(qǐng)求，目前內(nèi)置支持。 序 有時(shí)候我們開(kāi)發(fā)一般會(huì)分為前后端，前端負(fù)責(zé)數(shù)據(jù)顯示和UI交互，后端負(fù)責(zé)數(shù)據(jù)IO等等。因此造成前端對(duì)后端有嚴(yán)重依賴(lài)，使得前端的開(kāi)發(fā)進(jìn)度普遍滯后于后端。 為了使得前端減輕對(duì)后端的依賴(lài)，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開(kāi)發(fā)，我們一般會(huì)手...

    phpmatt 評(píng)論0 收藏0

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

    摘要：為了使得前端減輕對(duì)后端的依賴(lài)，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開(kāi)發(fā)，我們一般會(huì)手動(dòng)進(jìn)行一些數(shù)據(jù)模擬，即假數(shù)據(jù)。覆蓋攔截請(qǐng)求，目前內(nèi)置支持。 序 有時(shí)候我們開(kāi)發(fā)一般會(huì)分為前后端，前端負(fù)責(zé)數(shù)據(jù)顯示和UI交互，后端負(fù)責(zé)數(shù)據(jù)IO等等。因此造成前端對(duì)后端有嚴(yán)重依賴(lài)，使得前端的開(kāi)發(fā)進(jìn)度普遍滯后于后端。 為了使得前端減輕對(duì)后端的依賴(lài)，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開(kāi)發(fā)，我們一般會(huì)手...

    tyheist 評(píng)論0 收藏0

  • 讓前端攻城師獨(dú)立于后端進(jìn)行開(kāi)發(fā): Mock.js

    摘要：一是什么目前的大部分公司的項(xiàng)目都是采用的前后端分離后端接口的開(kāi)發(fā)和前端人員是同時(shí)進(jìn)行的那么這個(gè)時(shí)候就會(huì)存在一個(gè)問(wèn)題在頁(yè)面需要使用大量數(shù)據(jù)進(jìn)行渲染生成前后端開(kāi)發(fā)人員的接口也許并沒(méi)有寫(xiě)完作為前端的我們也就沒(méi)有辦法獲取數(shù)據(jù)所以前端工程師就需要自己 showImg(https://segmentfault.com/img/remote/1460000013022563); 一.Mock.js是...

    Fundebug 評(píng)論0 收藏0

  • mockjs讓前端開(kāi)發(fā)獨(dú)立于后端

    摘要：可以模擬數(shù)據(jù)，攔截請(qǐng)求，返回模擬數(shù)據(jù)，無(wú)需后端返回就可以測(cè)試前端程序官網(wǎng)原文首先在頭中引入我們需要的文件在請(qǐng)求之前，用定義返回?cái)?shù)據(jù)表示成功，表示錯(cuò)誤信息不完整彈出錯(cuò)誤信息在中的要與中的相同，比如我這里是那么好了，說(shuō)到這里，我們進(jìn)行測(cè)試一下調(diào) mock.js 可以模擬ajax數(shù)據(jù)，攔截ajax請(qǐng)求，返回模擬數(shù)據(jù)，無(wú)需后端返回就可以測(cè)試前端程序 mockjs官網(wǎng) 原文：http://i.j...

    Half 評(píng)論0 收藏0

  • mockjs讓前端開(kāi)發(fā)獨(dú)立于后端

    摘要：可以模擬數(shù)據(jù)，攔截請(qǐng)求，返回模擬數(shù)據(jù)，無(wú)需后端返回就可以測(cè)試前端程序官網(wǎng)原文首先在頭中引入我們需要的文件在請(qǐng)求之前，用定義返回?cái)?shù)據(jù)表示成功，表示錯(cuò)誤信息不完整彈出錯(cuò)誤信息在中的要與中的相同，比如我這里是那么好了，說(shuō)到這里，我們進(jìn)行測(cè)試一下調(diào) mock.js 可以模擬ajax數(shù)據(jù)，攔截ajax請(qǐng)求，返回模擬數(shù)據(jù)，無(wú)需后端返回就可以測(cè)試前端程序 mockjs官網(wǎng) 原文：http://i.j...

    Ali_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<