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