最近工作有用到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. 在UOS 上部署 django + uwsgi + nginx 流程

    前言:这篇主要是流程,不喜勿喷,虽然我知道在部署过程中 参照博客写的越详细越好. 强大的百度会解决一切的 爬了诸多坑 ,心累,必须总结!! 最近 芯片封锁闹的很凶  支持国产!! UOS 统一操作系统 ...

  2. [noip2002] 产生数

    题目描述 给出一个整数 n (n<1030)和 k 个变换规则 (k < 15) . 规则: 一位数可变换成另一个一位数: 规则的右部不能为零. 例如:n = 234 .有规则( k=2  ...

  3. Salesforce学习笔记之Actions and Recommendations

    设置Actions and Recommendations(Salesforce提供的标准元素),Salesforce上的文档说有两种方法,即Deployment和Process Builder(通过 ...

  4. Linked server的一个问题

    好久没有写新的博客,主要是很久没有什么动力和需求来写程序.虽然也不是一点没写,但都缺乏技术含量,没什么可说的. 前两天碰到一个关于linked server的问题.本地的sql server里,通过l ...

  5. python 在目标位置建立文件夹

    import os path = r'D:\pywork\12' # 指定位置 if not os.path.exists(path + '/' + '任务集'): #如果目标位置 不存在该文件夹“任 ...

  6. 免费验证码接收网站&不停开小号方法

    手机号注册:免费验证码接收网站 0.http://getfreesmsnumber.com/ 9个外国网站,访问后要快点点击链接,否则2秒会检测出adblocker 1.http://smsrecei ...

  7. linux命令--大小写转换命令

    1.tr命令 tr命令转换小写为大写     cat aa.txt | tr a-z A-Z 或者   cat aa.txt | tr [:lower:] [:upper:]  tr命令大写转换小写  ...

  8. Jmeter 常用函数（20）- 详解 __counter

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 计数器,跟配置元件里面的计数器作用类似哦 ...

  9. centos7.8 安装部署 k8s 集群

    centos7.8 安装部署 k8s 集群 目录 centos7.8 安装部署 k8s 集群 环境说明 Docker 安装 k8s 安装准备工作 Master 节点安装 k8s 版本查看 安装 kub ...

  10. javascript正则用法

    一.元字符 .      匹配除了换行符以外的字符. \w   匹配字母或者数字或者下划线 \W  匹配不是字母.数字.下划线 \d   匹配数字,相当于[0-9] \D  匹配不是数字的字符 \s  ...