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

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

1、Mock.js下载安装

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

demo的文件目录如下

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

index.html 如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>mock-demo</title>

 </head>

 <body>

 <!--mock.js 依赖jQuery和require.js-->

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

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

 <!--mock-main.js是mockJs的demo文件-->

 <script src="mock-main.js"></script>

 </body>

 </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");  //调用方法渲染出数据

});

效果如下图

2.2 vue中使用mock.js 【引用自简书】

vue-cli 本地开发mock数据使用方法http://www.jianshu.com/p/ccd53488a61b

2.3自己本地搭建vue项目 是在src底下添加一个mock模块

目录如下

将数据源放在user.js里面

在mock.js里面调用user.js渲染出数据

mock.js-无需等待，随机产生数据，让前端独立于后端进行开发的更多相关文章

  1. 让前端独立于后端进行开发，模拟数据生成器Mock.js

    让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...

  2. mock.js-无需等待，让前端独立于后端进行开发

    概述 首先啦,我不认识mock.js的作者,带着需求找到mock.js让我觉得很惊艳. 相对于其他同类的框架的实现,mock.js超出了我的意料. 基于 数据模板 生成模拟数据. 基于 HTML模板 ...

  3. mock.js 劫持 ajax，模拟数据

    http://mockjs.com/ Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. ...

  4. 让前端攻城师独立于后端进行开发: Mock.js

    一.Mock.js是什么? 目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的 ...

  5. js抽奖概率随机取出数据(简单示例)

    在平常活动开发当中,经常会碰到抽奖等类似的js功能,那么下面我们随机取数组中的一条来展示出来. ( 一 ) 无概率问题 var gift_ = ['apple pro一台','iphoneX一台',' ...

  6. 前端开发：mock.js的简单应用（生成随机数据，拦截 Ajax 请求）

    摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...

  7. MOCK.JS 生成随机数据，拦截 Ajax 请求

    mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...

  8. Mock.js 与 fiddler 前端模拟数据与拦截请求

    最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...

  9. 玩转【Mock.js】,前端也能跑的很溜

    现在开发已经是前后端分离了,前端和后端可以同时进行开发,互不影响,但是有些时候后端开发的接口慢于前端,导致前端需要等待后端的接口完成才能完成前后端对接,为了解决这个痛点,出现了模拟接口数据的方案,目前 ...

随机推荐

  1. [原创.数据可视化系列之十三]idw反距离权重插值算法的javascript代码实现

    图形渲染中,idw反距离权重插值算法是一个应用非常广泛的方法,但是js实现的比较少,目前实现一个: //idw算法 //输入[[x:0,y:0,v:0],[x:0,y:0,v:0],[x:0,y:0, ...

  2. iOS使用StroryBoard页面跳转及传值

    之前在网上iOS的页面跳转大多都是按回以前的那种xib的形式,但鄙人是使用storyboard的.这篇就只介绍利用storyboard进行页面跳转与传值. 新建页面 iOS的程序也是使用了MVC的思想 ...

  3. 【CNMP系列】CentOS7.0下安装FTP服务

    一个小插曲,安装一个FTP服务,便于和远程服务器的文件沟通.后续我们会讲到如何使用Capistrano配合git完成服务器的代码部署以及发布流程.现在,代码先走FTP吧,挺稳. FTP简介 FTP 是 ...

  4. 利用CSS3 animation绘制动态卡通人物，无需使用JS代码

    此外博主原创,转载请注明出处:谢谢~ 效果图: 其中云.风车.尾巴是动态的: 以下是代码: <!DOCTYPE html> <html lang="en"> ...

  5. c#基础语句——循环语句（for、while、foreach）

    循环类型:for.while.foreach 循环四要素:初始条件-->循环条件-->循环体-->状态改变 1.for 格式: for(初始条件:循环条件:状态改变) {循环体(br ...

  6. ThinkPhp框架的数据库操作（查询）

    TP框架有一套自己的数据库操作的代码,包括数据库的增.删.改.查.本文主要讲解TP框架的数据库查询操作. 找到入口文件的控制器: 我这里的入口文件是Show文件夹下的控制器. 打开Login控制器. ...

  7. LoadRunner如何进行移动端性能测试

    1.录制脚本 1.1 创建脚本:新建一个用户脚本,选择Mobile Application 使用管理员身份打开VirtualUser Generator,点击[文件]->[新建脚本和解决方案], ...

  8. 3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队

    3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 129  Solv ...

  9. 1639: [Usaco2007 Mar]Monthly Expense 月度开支

    1639: [Usaco2007 Mar]Monthly Expense 月度开支 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 593  Solved: ...

  10. USB PE

    To put WinPE on a USB Stick, you must first make it bootable. Warning: This will destroy all the dat ...