最近工作有用到mockjs模拟数据，实现前后端分离，今天系统的把mockjs的API都过了一遍，算是入门吧。

　　

什么是mockjs

mockjs就是一个模拟数据，生成随机数据，拦截ajax请求。

为什么使用mockjs

1、后端给不了数据
2、数据太长，将数据放在js文件里面，完成后挨个改url
3、还原真实数据
4、特殊格式 ip 随机数 图片 地址
5、分页显示

mockjs基本语法（require.js）

参考index.html

语法规则

1、数据模板定义规范

"name|rule":value 
'name|min-max': value

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

'name|count': value

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

'name|min-max.dmin-dmax': value

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

'name|min-max.dcount': value

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dcount 位。

'name|count.dmin-dmax': value

生成一个浮点数，整数部分等于count，小数部分保留 dmin 到 dmax 位。

'name|count.dcount': value

生成一个浮点数，整数部分等于count，小数部分保留 dcount 位。

'name|+1': value

属性值自动加 1，初始值为 value

'name|1': boolean

属性值自动加 1，初始值为 value

1、Mock.mock(template)

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

2、Mock.mock(rurl,template)

当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

3、Mock.mock( rurl, function( options ) )

当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

4、Mock.mock( rurl, rtype, template )

当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

5、Mock.mock( rurl, rtype, function( options ) )

当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

6、Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

7、占位符 Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据

8、自定义占位符 Mock.Random.extend({func});

用于自定义占位符

9、Mock.valid()

校验真实数据 data 是否与数据模板 template 匹配。

 
index.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script src="./require.js"></script>

    <script>

      require.config({

          paths:{

              zepto:"./zepto",

              mock:"http://mockjs.com/dist/mock"

          }

      });

      require(["mock"],function(M){

           var data = M.mock({

               'list|1-10':[{

                   'id|+1':1

               }]

           })

           console.log(data);

      })

    </script>

<body>

</body>

</html>
index2.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script src="./require.js"></script>

    <script>

      require.config({

          paths:{

              zepto:"./zepto",

              mock:"http://mockjs.com/dist/mock"

          }

      });

      require(["mock"],function(M){

           var data = M.mock({

               'list1|1':/[a-z][A-Z][0-9]/,

               'list2|1':/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,

               'list3|1':/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/,

               'list4|1':/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/,

           })

           console.log(data);

      })

    </script>

<body>

</body>

</html>
index3.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script src="./require.js"></script>

    <script>

      require.config({

          paths:{

              zepto:"./zepto",

              mock:"http://mockjs.com/dist/mock"

          }

      });

      require(["zepto","mock"],function($,M){

           var temp = {

               "title":"hejian",

               "star|1-5":"*",

               "count|5-9.2":1,

               "like1|1-2":false,

               "like2|1":true,

               "obj1|2-4":{

                   "1":"北京",

                   "2":"上海",

                   "3":"杭州",

                   "4":"西安",

               },

               "obj2|2":{

                   "1":"安康",

                   "2":"宝鸡",

                   "3":"咸阳",

                   "4":"户县"

               },

               "array|1":["1","2","3","5"],

               'function':function(){

                   return this.title;

               }

           }

           var data = M.mock(temp);

           var temp2 = {

               "list|1-10":[{

                   "id|+1":1,

                   'email':'@EMAIL'

               }]

           }

           M.mock(/\.json/,temp2);

           $.ajax({

               url:"hello.json",

               dataType:"json",

               success:function(data){

                   console.log(data);

               }

           })

           var func = function(options){

               return options;

           }

           M.mock(/\.json/,func);

           $.ajax({

               url:"hello.json",

               dataType:"json",

               success:function(data){

                   console.log(data);

               }

           })

           $.ajax({

               url:"hello.json",

               dataType:"json",

               data:{

                   id:1,

                   name:"2"

               },

               success:function(data){

                   console.log(data);

               }

           })

           $.ajax({

               url:"hello.json",

               type:"post",

               success:function(data){

                   console.log(data);

               }

           })

           M.mock(/\.json/,'get',{

               type:"get"

           });

           $.ajax({

               url:"hello.json",

               type:"post",

               success:function(data){

                   console.log(data);

               }

           })

           M.mock(/\.json/,'get',function(options){

               return options.type;

           })

           $.ajax({

               url:"hello.json",

               type:"get",

               success:function(data){

                   console.log(data);

               }

           })

           // M.setup({

           //     timeout:400,

           // })

           // $.ajax({

           //     url:"hello.json",

           //     timeout:400,

           //     success:function(data){

           //         console.log(data);

           //     }

           // })

           var Random = M.Random;

           console.log(Random.email());

           var data3 = M.mock('@email');

           console.log(data3);

           var data4 = M.mock({"email":"@email"});

           console.log(data4);

           console.log(M.mock({boolean:'@boolean'}));

           console.log(M.mock({natural:'@natural'}))

           console.log(M.mock({integer:'@integer'}))

           console.log(M.mock({float:'@float'}))

           console.log(M.mock({character:'@character'}))

           console.log(M.mock({string:'@string'}))

           console.log(M.mock({range:'@range'}))

           console.log(M.mock({date:'@date'}))

           console.log(M.mock({time:'@time'}))

           console.log(M.mock({datetime:'@datetime'}))

           console.log(M.mock({now:'@now'}))

           console.log(M.mock({image:'@image'}))

           console.log(M.mock({dataImage:'@dataImage'}))

           console.log(M.mock({color:'@color'}))

           console.log(M.mock({paragraph:'@paragraph'}))

           console.log(M.mock({word:'@word'}))

           console.log(M.mock({title:'@title'}))

           console.log(M.mock({cparagraph:'@cparagraph'}))

           console.log(M.mock({cword:'@cword'}))

           console.log(M.mock({ctitle:'@ctitle'}))

           console.log(M.mock({first:'@first'}))

           console.log(M.mock({last:'@last'}))

           console.log(M.mock({name:'@name'}))

           console.log(M.mock({cfirst:'@cfirst'}))

           console.log(M.mock({domain:'@domain'}))

           console.log(M.mock({area:'@area'}))

           console.log(M.mock({guid:'@guid'}))

           console.log(M.mock({capitalize:'@capitalize'}))

           console.log(M.mock({upper:'@upper'}))

           console.log(M.mock({shuffle:'@shuffle'}))

           M.Random.extend({

               test:function(date){

                   var city = ["西安","杭州","北京","上海","深圳"];

                   return this.pick(city);

               }

           })

           console.log(M.mock("@test"));

           var temp3 = {

               name:"value1"

           }

           var data = {

               name :"value2"

           }

           console.log(M.valid(temp3,data));

           var temp4 = {

               "key|1-4":"*"

           }

           console.log(M.toJSONSchema(temp4));

      })

    </script>

<body>

</body>

</html>

这三个文件就是自己自学mockjs学习的过程，希望能帮助到大家。

学习 | mockjs入门的更多相关文章

  1. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  2. [IT学习]sql 入门及实例

    sql 是一种数据库查询语言,可以让你很快的查询到数据.其实一般情况下,你也可以采用excel来查询数据库数据. 但是人们通常认为sql会更加灵活和方便一些. sql学习的入门网站: http://w ...

  3. PHP学习笔记 - 入门篇（5）

    PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...

  4. PHP学习笔记 - 入门篇（4）

    PHP学习笔记 - 入门篇(4) 什么是运算符 PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. PHP中的算术运算符 算术运算符主要 ...

  5. PHP学习笔记 - 入门篇（3）

    PHP学习笔记 - 入门篇(3) 常量 什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量 ...

  6. PHP学习笔记--入门篇

    PHP学习笔记--入门篇 一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...

  7. netty深入学习之一: 入门篇

    netty深入学习之一: 入门篇 本文代码下载: http://download.csdn.net/detail/cheungmine/8497549 1)Netty是什么 Netty是Java NI ...

  8. LESS学习笔记 —— 入门

    今天在网上完成了LESS的基础学习,下面是我的学习笔记.总共有三个文件:index.html.main.less.mian.css,其中 mian.css 是 main.less 经过Koala编译之 ...

  9. Java工程师学习指南 入门篇

    Java工程师学习指南 入门篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

随机推荐

  1. 【HAOI2015】树上染色 - 树形 DP

    题目描述 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后,你会获得黑点两两之 ...

  2. vob文件转mkv

    下载了一部片子,是所谓的dvd原盘,就是用软件将dvd碟片rip下来,视频文件是一堆vob文件.觉得这片子没必要看原盘,想压缩成mkv以减小体积,同时保持合适的清晰度. 首先想到用handbrake这 ...

  3. Spring中眼花缭乱的BeanDefinition

    本篇博客主要参考:Spring官网阅读(四)BeanDefinition(上) 引入主题 为什么要读Spring源码,有的人为了学习Spring中的先进思想,也有的人是为了更好的理解设计模式,当然也有 ...

  4. 在.NET Core中使用MongoDB明细教程(3)：Skip, Sort, Limit, Projections

    到目前为止,我们已经讨论了创建文档, 检索文档,现在让我们来研究一下文档排序,指定要跳过或限制返回的文档数量,以及如何进行投影.此篇文章中的实例代码摘录自原文,未像前几篇文章一样进行实际代码的验证. ...

  5. 操作系统-I/O（1）设备控制器

    I/O设备通常是物理上相互独立的设备,它们一般通过通信总线(电缆)与I/O控制器连接. 例如,图中IDE接口是通信总线而非I/O总线. I/O控制器(I/O接口)在扩展卡或者南桥芯片内,通过I/O总线 ...

  6. Exploring Adversarial Attack in Spiking Neural Networks with Spike-Compatible Gradient

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:2001.01587v1 [cs.NE] 1 Jan 2020 Abstract 脉冲神经网络(SNN)被广泛应用于神经形态设 ...

  7. vmd与ovito的对比

    1.minimize后,lammps生成的data文件 2.pdb:

  8. LR与LR？

    目录 逻辑回归与线性回归 逻辑回归 1.建立目标函数 2. 梯度求解 3. 实现 线性回归 1. 建立目标函数 2. 求解 3. 实现 逻辑回归与交叉熵 逻辑回归与线性回归 逻辑回归 线性回归 目标函 ...

  9. javascript 数据结构与算法---二叉数

    二叉树,首先了解一些关于二叉数的概念(来自百度百科) 1. 二叉树(Binary tree)是树形结构的一个重要类型 2. 定义: 二叉树(binary tree)是指树中节点的度不大于2的有序树,它 ...

  10. PyTorch迁移学习-私人数据集上的蚂蚁蜜蜂分类

    迁移学习的两个主要场景 微调CNN:使用预训练的网络来初始化自己的网络,而不是随机初始化,然后训练即可 将CNN看成固定的特征提取器:固定前面的层,重写最后的全连接层,只有这个新的层会被训练 下面修改 ...