/**
 * 使用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. 自动化测试基础篇--Selenium中数据参数化之TXT

    摘自https://www.cnblogs.com/sanzangTst/p/7722594.html 一.搜索参数化 在TXT文件中保存需要搜索的内容: 测试代码: 1 #!/usr/bin/env ...

  2. Zabbix监控文件是否存在/文件大小

    检查C:\Zabbix\zabbix_agentd.log文件是否存在 zabbix_get -s 10.16.4.1 -k vfs.file.exists[C:\\Zabbix\\zabbix_ag ...

  3. 南邮ctf-web的writeup

    WEB 签到题 nctf{flag_admiaanaaaaaaaaaaa} ctrl+u或右键查看源代码即可.在CTF比赛中,代码注释.页面隐藏元素.超链接指向的其他页面.HTTP响应头部都可能隐藏f ...

  4. python Docker 查看私有仓库镜像

      pip 安装: 首先安装epel扩展源: yum -y install epel-release 更新完成之后,就可安装pip: yum -y install python-pip 安装完成之后清 ...

  5. 牛客 小a与星际探索 bfs

    链接:https://ac.nowcoder.com/acm/contest/317/C?&headNav=acm来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ ...

  6. Centos 6.7 安装mongodb

    下载mongodb  https://www.mongodb.com/download-center#community 2.解压文件 tar -zxvf mongodb-linux-x86_64-3 ...

  7. go 调用windows dll 的三种方法

    参考:https://blog.csdn.net/qq_39584315/article/details/81287669 大部分代码参考:https://studygolang.com/articl ...

  8. 在Ubuntu18.04上使用Anaconda(python3.7)环境中安装tensorflow1.13.1

    由于清华镜像源迟迟没有更新tensorflow1.13.1导致python3.7不能使用tensorflow 这里有一个解决方法 管理员模式打开(一定要管理员模式 不然会导致权限不足) 输入 pip ...

  9. 转://SQLNET.EXPIRE_TIME参数

    DCD: Dead Connection Detection ,可以用于检测.标记僵死而没有断开会session,再由PMON进行清理,释放资源.开启DCD,只需要在服务端的sqlnet.ora文件中 ...

  10. 微信硬件平台（八） 1 esp8266从自己的服务器获取token

    从txt获取token #include <ESP8266WiFi.h> #define host_token "www.dongvdong.top" #define ...