mock.js

数据模板

#查看模板生成的数据
var data = Mock.mock({
//list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围
// test|3.2-5 3.xx-3.xxxxx 整数位3,小数位位数范围为2-5
//'yourname|2-4': 'alice-' 重复字符串的次数范围2-4
//常规真实数据格式,@name @color @url @first @last 'list|1-10': [{'id|+2': 1 , 'age|20-30': 100}],
'name': '@name',
'color': '@color',
'url': '@url',
'email': '@email',
'friends|3': [{name: '@name'}],
'price|10-20.2-5': 11,
'cost|10-20.3': 11,
'test|3.2-5': 52,
'yourname|2-4': 'alice-'
}); JSON.stringify(data, null, 2); var data = Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
});
JSON.stringify(data, null, 2); #拦截请求,返回模拟数据
var Mock.mock('http://g.cn', {
'list|3-8': [{'id|+3': 1}]
});
  1. 数据模板定义

    'name|rule': value name 为属性名, rule 为规则, value 为值,属性名和生成规则之间用|分隔,生成规则的格式有7种:

    • 'name|min-max': value
    • 'name|count': value
    • 'name|min-max.dmin-dmax': value //.dmin-dmax 小数点后保留的位数范围
    • 'name|min-max.dcount': value //小数点后保留dcount位
    • 'name|count.dmin-dmax': value //貌似用处不大
    • 'name|+step': value //从value递增/减

    **属性值可以包含占位符(如@name),属性值指定了最终值的初始值和数据类型. **

    1. 属性值是字符串 String

      • 'name|min-max': 'value' 通过重复 'value' 生成一个字符串,重复次数大于等于 min,小于等于 max。

      • 'name|count': 'value' 通过重复 'value' 生成一个字符串,重复次数等于 count。

    2. 属性值是数字 Number

      • 'name|+1': 100 属性值自动加 1,初始值为 100
      • 'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型。
      • 'name|1-100.1-10': 100 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。
    3. 属性值是布尔型 Boolean

      • 'name|1': value 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2。
      • 'name|min-max': value 随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
    4. 属性值是对象 Object

      • 'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
      • 'name|count': {} 从属性值 {} 中随机选取 count 个属性。
    5. 属性值是数组 Array

      • 'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值。
      • 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max。
      • 'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count。
    6. 属性值是数组 Function

      • 'name': function(){} 执行函数 function(){},取其返回值作为最终的属性值,上下文为 'name' 所在的对象。
  2. 数据占位符定义

    占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。占位符 的格式为:

     @占位符
    @占位符(参数 [, 参数])
    • 用 @ 来标识其后的字符串是 占位符。

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

    • 通过 Mock.Random.extend() 来扩展自定义占位符。

    • 占位符 也可以引用 数据模板 中的属性。

    • 占位符 会优先引用 数据模板 中的属性

        {
      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) )

根据数据模板生成模拟数据。

参数的含义和默认值如下所示:

参数 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 选项集。

Mock.mockjax(library)

覆盖(拦截) Ajax 请求,目前内置支持 jQuery、Zepto、KISSY。

Mock.Random

Mock.Random 是一个工具类,用于生成各种随机数据。Mock.Random 的方法在数据模板中称为“占位符”,引用格式为 @占位符(参数 [, 参数]) 。

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

基于 Handlebars、Mustache 的 HTML 模板生成模拟数据。

mock.js 使用教程的更多相关文章

  1. Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...

  2. mock.js使用教程

    转载自:https://blog.csdn.net/qq_42205731/article/details/81705350 cdn引入文件 :<script src="http:// ...

  3. mock.js 模拟数据

    1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...

  4. 24个很赞的 Node.js 免费教程和在线指南

    JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...

  5. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  6. mock.js

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...

  7. Google Analytics统计代码GA.JS中文教程

    2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅     Google Analytics ...

  8. 使用 mock.js 让前端开发与后端独立

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. 前后端分离开发——模拟数据mock.js

    mock.js 生成模拟数据,拦截ajax请求 <script type="text/javascript" src="http://libs.baidu.com/ ...

随机推荐

  1. nodeJs入门笔记(一)

    node将"HTTP服务器"这一层抽离,直接面向浏览器用户 如PHP运行之前先要配置一个功能强大而复杂的HTTP 服务器,譬如Apache.IIS 或Nginx,还需要将PHP 配 ...

  2. QT连接mysql中文显示问题

    亲测OK! #vim /etc/mysql/my.cnf [mysqld]下面加入: default-character-set=utf8 重启mysql /etc/init.d/mysql rest ...

  3. Java定时器:Timer

    项目中往往会遇到需要定时的任务,例如订单,当用户在某个规定时间内没有操作订单时,订单状态将会发生改变. 那么在这种情况下,我们会用到定时器. 举例: import java.util.Timer; / ...

  4. ubuntu 安装ruby rails

    步骤0 - 安装系统需要的包 Mac 请安装 Xcode 开发工具,它将帮你安装好 Unix 环境需要的开发包 Ubuntu 请安装 $ sudo apt-get install -y build-e ...

  5. C# Socket SSL通讯笔记

    一.x.509证书 1.制作证书 先进入到vs2005的命令行状态,即:开始-->程序-->Microsoft Visual Studio 2005-->Visual Studio ...

  6. 关于“#ifdef __cplusplus”

    CC++语言在编译的时候为了解决函数的多态问题,会将函数名和参数联合起来生成一个中间的函数名称,而C语言则不会,因此会造成链接时找不到对应函数的情况,此时C函数就需要用extern “C”进行链接指定 ...

  7. Android系统Recovery工作原理之使用update.zip升级过程---updater-script脚本语法简介以及执行流程(转)

    目前update-script脚本格式是edify,其与amend有何区别,暂不讨论,我们只分析其中主要的语法,以及脚本的流程控制. 一.update-script脚本语法简介: 我们顺着所生成的脚本 ...

  8. CC++初学者编程教程(3) 安装VS2010 boost标准库开发环境

    1.      BOOST编译过程非常复杂,目前为了学习BOOST,首先搭建基于VS2010的BOOST开发环境. Boost库 8 9. 10. 11 12 13 14 15. 16. 17. 18 ...

  9. C语言入门(4)——常量、变量与赋值

    对于基本数据类型量,按其取值是否可改变又分为常量和变量两种.在程序执行过程中,其值不发生改变的量称为常量,其值可变的量称为变量.它们可与数据类型结合起来分类. 常量 常量有字符常量(Character ...

  10. cdoj 斐波那契进制

    //昨天在姜神的提醒下发现这种方法可以解决升级版的 非升级版直接01背包就好 //这题脑洞开得真是够大 解:大概要先把数分解成斐波拉契进制,x=f1*(0或1)+f2*(0或1)+...+fn*(0或 ...