mockjs使用

時間  2019-11-29
標籤 mockjs 使用 简体版
原文   原文鏈接 
/**
 * 使用mockjs來mock數據, 提供mock數據API接口
 */
import Mock from 'mockjs'
import data from './data.json'

//註冊接口
Mock.mock('/api2/goods', {
  // code表示成功
  code: 0,
  data: data.goods
})
Mock.mock('/api2/ratings', {
  code: 0,
  data: data.ratings
})
Mock.mock('/api2/seller', {
  code: 0,
  data: data.seller
})

// 不用export

 

 

 

mock數據模板javascript

1. 屬性值是字符串 String

  1. 'name|min-max': stringcss

    經過重複 string 生成一個字符串，重複次數大於等於 min，小於等於 max。html

  2. 'name|count': stringjava

    經過重複 string 生成一個字符串，重複次數等於 count。jquery

2. 屬性值是數字 Number

  1. 'name|+1': numbergit

    屬性值自動加 1，初始值爲 number。github

  2. 'name|min-max': numberjson

    生成一個大於等於 min、小於等於 max 的整數，屬性值 number 只是用來肯定類型。api

  3. '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
}

3. 屬性值是布爾型 Boolean

  1. 'name|1': boolean

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

  2. 'name|min-max': value

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

4. 屬性值是對象 Object

  1. 'name|count': object

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

  2. 'name|min-max': object

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

5. 屬性值是數組 Array

  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。

6. 屬性值是函數 Function

  1. 'name': function

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

數據佔位符定義規範 DPD

佔位符 只是在屬性值字符串中佔個位置，並不出如今最終的屬性值中。

佔位符 的格式爲：

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

注意：

  1. 用 @ 來標識其後的字符串是 佔位符。
  2. 佔位符 引用的是 Mock.Random 中的方法。
  3. 經過 Mock.Random.extend() 來擴展自定義佔位符。
  4. 佔位符 也能夠引用 數據模板 中的屬性。
  5. 佔位符 會優先引用 數據模板 中的屬性。
  6. 佔位符 支持 相對路徑 和 絕對路徑。
Mock.mock({ name: { first: '@FIRST', middle: '@FIRST', last: '@LAST', full: '@first @middle @last' } }) // => { "name": { "first": "Charles", "middle": "Brenda", "last": "Lopez", "full": "Charles Brenda Lopez" } }

 

Mock.mock()用法

mock參數

rurl

可選。

表示須要攔截的 URL，能夠是 URL 字符串或 URL 正則。例如 /\/domain\/list\.json/、'/domian/list.json'。

rtype

可選。

表示須要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。

template

可選。

表示數據模板，能夠是對象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

function(options)

可選。

表示用於生成響應數據的函數。

options

指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性，參見 XMLHttpRequest 規範。

1.Mock.mock( template )

根據數據模板生成模擬數據。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script src="http://mockjs.com/dist/mock.js"></script>
  <script>

    // mock數據模板
    // 屬性名   name
    // 生成規則 rule
    // 屬性值   value
    // 'name|rule': value

    var template = {
        'title': 'Syntax Demo',    //固定文本               //結果:Syntax Demo
        'string1|1-10': '★',       //隨機生成重複1到10個★          ★★★★
        'string1|1-10': 'abc',     //隨機生成重複1到10個abc         abcabcabcabcabcabc 
        'string2|3': 'value',      //重複3個value                  valuevaluevalue
        'number1|+1': 100,         //屬性值自動加 1，初始值爲100     100
        'number2|1-100': 100,      //隨機1-100                     
        'number3|1-100.1-10': 1,   //隨機1-100,並小數點後帶1-10位數   24.23586
        'number4|123.1-10': 1,     //123,並小數點後帶1-10位數         123.9722331,
        'number5|123.3': 1,        //123，並小數點後帶3位數           123.346
        'number6|123.10': 1.123,   //                                123.1232441918

        'boolean1|1': true,
        'boolean2|1-2': true,

        'object1|2-4': {           //從屬性值 object 中隨機選取2到4個屬性。
            '110000': '北京市',
            '120000': '天津市',
            '130000': '河北省',
            '140000': '山西省'
        },
        'object2|2': {              //從屬性值 object 中隨機選取2個屬性。
            '310000': '上海市',
            '320000': '江蘇省',
            '330000': '浙江省',
            '340000': '安徽省'
        },

        'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],    //從屬性值 array 中隨機選取1個元素爲最終值   'CMD'
        'array2|1-10': ['Mock.js'],
        'array3|3': ['Mock.js'],      //重複屬性值mock.js三次 生成新數組  ['Mock.js','Mock.js','Mock.js']

        'name': function() {      //執行函數 function，取其返回值做爲最終的屬性值，函數的上下文爲屬性 'name' 所在的對象。
            return this.title
        }
    }
    var data = Mock.mock(template)
    console.log(data)
  </script>
</body>
</html>

2.Mock.mock( rurl, template )

記錄數據模板。當攔截到匹配 rurl 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並做爲響應數據返回。

 

3.Mock.mock( rurl, rtype, template )

記錄數據模板。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並做爲響應數據返回。

 

4.Mock.mock( rurl, rtype, function( options ) )

記錄用於生成響應數據的函數。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數 function(options) 將被執行，並把執行結果做爲響應數據返回。

 

 

 

 

 

 

在html中使用

 get請求

在實踐過程當中，發現 Mockjs 自己對 GET 請求的支持並非很友好。
舉個例子，使用 Mock.mock("/user/getUserInfo", "get", mockData) 的時候，它只會攔截url等於 /user/getUserInfo 的請求，而對於帶參數的請求，如/user/getUserInfo?id=12，由於不等於 /user/getUserInfo 就攔截不到。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
    <div>
        <h2 id="mock1">mock模擬帶參數的get請求</h2>
    </div>
    <script type="text/javascript">

        // Mock.mock("http://mockjs",'get',function(options) {
        //   return options
        // });
        // 上面直接請求http://mockjs?data=abc，沒法請求，可經過下面正則來匹配
        // 對於帶參數的get請求，url爲：http://mockjs?data=abc
        Mock.mock(/http:\/\/mockjs/,'get',function(options) {
            return options
        });
        $("#mock1").click(function(){
            $.get("http://mockjs",{data:'abc'},
              function (res) {
                console.log(typeof(res))  //string   res爲JSON字符串
                var res=JSON.parse(res)   //經過JSON.parse JSON字符串轉爲JSON對象
                console.log(res)      
                //{url: "http://mockjs?data=abc", type: "GET", body: null}
                // body: null
                // type: "GET"
                // url: "http://mockjs?data=abc"
                // __proto__: Object
              }
            );
        });

    </script>
  </body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程