mock.js-无需等待，随机产生数据，让前端独立于后端进行开发

发布时间：2017-07-07 16:46:41.68作者：IT网络文摘

mock.js所做的
基于数据模板生成模拟数据。
基于 HTML模板生成模拟数据。
拦截并模拟 ajax 请求。

Mock.js官方网址： http://mockjs.com/

1、Mock.js下载安装

下载mock.js文件 https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js 直接打开另存为就ok了
npm安装mock模块
项目路径下执行命令： npm install mock

2.1、Mock.js 使用demo （方式1：jquery方式）

demo的文件目录如下

seo优化培训,网络推广培训,网络营销培训,SEM培训,网络优化,在线营销培训

require.js 下载地址为http://www.requirejs.cn/docs/download.html

index.html 如下

 1 <!DOCTYPE html>  2 <html>  3 <head>  4     <meta charset="UTF-8">  5     <title>mock-demo</title>  6 </head>  7 <body>  8   9 <!--mock.js 依赖jQuery和require.js--> 10 <script src="jquery.js"></script> 11 <script src="require.js"></script> 12 <!--mock-main.js是mockJs的demo文件--> 13 <script src="mock-main.js"></script> 14 </body> 15 </html>

mock-main.js 如下

// 配置 Mock 路径 require.config({     paths: {         mock: 'mock'     } }); // 加载 Mock require(['mock'], function(Mock) {     /*第一部分与第二部分没有关系*/     /*第一部分*/     // Mock.mock( template )     //数据模板     var data = Mock.mock({         'list|4': [{             'id|+1': 1         }],         name: Mock.Random.cname(),  //随机产生一个中文的姓名         addr: Mock.mock('@county(true)'), //随机生成一个地址         'age|18-60': 1, //随机生成一个数字 大小在18到60         birth: Mock.Random.date(), //随机生成一个日期         sex: Mock.Random.integer(0, 1),//随机生成一个整数，0/1 ，根据这个来给“男” “女”         email:Mock.mock('@EMAIL()'), //随机生成一个邮箱         'moblie|1':['13531544954','13632250649','15820292420','15999905612'], //在数组中随机找一个         'num1|1-100.2':1, //1-100 中随机生成一个保留两位小数点         'num2|100-300.2':1,         'classroom|1':['精品语文班','精品作业A班','英语班','语文班'],         'from|1':['到店咨询','微店','壹家教','学习服务平台'],         'status|1':['意识强烈','预报名','意向一般','暂无意向'],          time:Mock.Random.date('yyyy-MM-dd'),          mobile:/^1[0-9]{10}$/  //用正则匹配1开头的11位数字的手机号     });      //打印到body上     $('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');     /*第二部分*/     // Mock.mock(rurl, template)     Mock.mock(/\.json/, {    //匹配.json文件         'list|1-10': [{      //数据模板，随机生成一个对象数组             'id|+1': 1,   //1开始，递增             'email': '@EMAIL',             'regexp3': /\d{5,10}/          }]     });     $.ajax({         url: 'hello.json',   //请求访问json文件，拦截hello.json的请求，返回mock数据模板中的数据         dataType: 'json'     }).done(function(data, status, jqXHR) {         //获得mock数据模板中的数据，打印到body上         $('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');     })     /*第三部分*/     var data3 =Mock.mock(/\.json/, {    //匹配.json文件，可执行匹配成功的参数           'list|1-10': [{      //数据模板                  'id|+1': 1,                  'email': '@EMAIL',                  'regexp4': /\d{5,10}/,                   'name': Mock.Random.cname(),  //随机产生一个中文的姓名              }]          });         function sendData(url) {             $.ajax({                  url: url,                  dataType: 'json'              }).done(function(data3, status, jqXHR) {                  //获得mock数据模板中的数据，打印到body上                  $('<pre>').text(JSON.stringify(data3, null,5)).appendTo('body');              })         }         sendData("hello.json");  //调用方法渲染出数据 });

效果如下图

seo优化培训,网络推广培训,网络营销培训,SEM培训,网络优化,在线营销培训