/**
 * 使用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数据模板

1. 属性值是字符串 String

  1. 'name|min-max': string

    通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

  2. 'name|count': string

    通过重复 string 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

  1. 'name|+1': number

    属性值自动加 1，初始值为 number。

  2. 'name|min-max': number

    生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

  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>

mockjs使用的更多相关文章

  1. Mockjs，模拟数据生成器

    (推荐使用)Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 提供了以下模拟功能: 1. 根据数据模板生成模拟数据. 2. 模拟Ajax请求,生成并返回模拟 ...

  2. mockjs模拟前后端交互

    mockjs是用于mock数据(造假数据)的组件. mockjs官网链接为:http://mockjs.com/:mockjs官网有mockjs的源代码.API以及示例. mockjs拦截ajax请求 ...

  3. 让我们来简单说说mockjs吧！

    背景: 新接手了一个更新CRM的客户管理项目,负责添加三张活动财务表与操作的模块,接到任务时候,后台还没有做数据,所以用到了假数据,So就是这里所说的mockjs. 介绍: mockjs让前端独立于后 ...

  4. mockjs学习总结（方便前端模拟数据，加快开发效率）

      基本介绍: 在我们前端开发中经常遇到这样的事情,接口没有写好,只能写静态页面,如何才能用很简单的方法模拟后端数据呢?mockjs就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...

  5. vue+mockjs 模拟数据，实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  6. dva + antd + mockjs 实现基础用户管理

    1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard   [dvadashboard为项目名]       3.安装mockjs ...

  7. vue 利用mockJs 模拟数据

    工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE +  Element-ui + springboot 写的,由于需求没有定,先画一个de ...

  8. mockjs，json-server一起搭建前端通用的数据模拟框架

    无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的.本篇文章就是基于此原因而产出的.希望对有这方面的需求的同 ...

  9. vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  10. MockJS和Easy Mock使用

    之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...

随机推荐

  1. 使用Visual Studio Team Services敏捷规划和项目组合管理（三）——使用Kanban板

    使用Visual Studio Team Services敏捷规划和项目组合管理(三)--使用Kanban板 1.要查看Kanban板,请单击Work>Backlogs页面上的Board 链接. ...

  2. web前端（6）—— 标签的属性，分类，嵌套

    属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中 1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序. 2.属性值要用引 ...

  3. php的register_long_arrays可以关闭以提高性能

    如果你使用php5.0以上,在程序中没有使用$HTTP_*_VARS这种变量,那么就可以考虑将register_long_arrays设置为Off,来提高一点点性能.看下PHP手册中关于registe ...

  4. 关于Three.js基本几何形状

    一.有关球体SphereGeometry构造函数参数说明 SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLeng ...

  5. ES5-ES6-ES7_对象的扩展

    简化的对象写法 省略同名的属性值,省略方法的function let x = 1; let y = 2; let point = { x, y, setX (x) { this.x = x } }; ...

  6. C#、Java中的一些小知识点总结(持续更新......)

    前言:在项目中,有时候一些小的知识,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小知识点,以备用,并持续更新...... 1.禁用DataGridV ...

  7. Zend：PHP框架结束的开始？

    Zend:PHP框架结束的开始? 随着Zeev Suraski, Matthew Weier O'Phinney, Enrico Zimuel and Dmitry Stogov 这些PHP核心小组的 ...

  8. UVA1152-4 Values whose Sum is 0（分块）

    Problem UVA1152-4 Values whose Sum is 0 Accept: 794  Submit: 10087Time Limit: 9000 mSec Problem Desc ...

  9. Oracle hint之ORDERED和USE_NL

    Hint:ORDERED和USE_NL ORDERED好理解,就是表示根据 from 后面表的顺序join,从左到右,左边的表做驱动表 use_nl(t1,t2):表示对表t1.t2关联时采用嵌套循环 ...

  10. flash设置里面：您的 Flash 设置会一直保留到您退出 Chrome 为止。

    疑问:flash设置里面:您的 Flash 设置会一直保留到您退出 Chrome 为止. 我记得以前的版本配置后就一直用啊,允许的就可以一直允许,现在这个sb版本退出后就恢复到默认,允许列表的网站就清 ...