• 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. WP8.1开发中找程序下的Assets文件夹

    这俩天在开发另一个程序时,遇到一个小问题:如何调用程序下的Assets文件夹及其下的文件和文件夹: 在网上找了两天,基本上是关于如何调用手机中库的方法,没找到有关介绍如何调用查找 编译前添加图片或其它 ...

  2. STM32的LED驱动程序

    这个LED的小程序基于的是德飞莱的最小系统板 我当时写这个程序的时候想的就是这个程序能够便于理解 也便于移植 便于调用 我参加过电赛 对于STM32的一个管脚修改的麻烦是深有体会 一个地方不对就没法工 ...

  3. WEB标准了解

    今天看到朋友的简历有一项“了解WEB标准”,就特地了解了一下什么是WEB标准.现在就一项一项地解开自己的疑惑. 1.什么是WEB标准 WEB标准大部分由万维网组织(W3C)制定的WEB程序开发规范.W ...

  4. GPU渲染管线概述

    1.顶点着色器 顶点着色器是流水线的第一个阶段,它的输入来自于CPU.顶点着色器的处理单位是顶点,也就是说输入进来的每个顶点都会调用一次顶点着色器. 顶点着色器需要完成的工作主要有:坐标变换和逐顶点光 ...

  5. JAVA开发环境搭建 - Eclipse基本配置

    Eclipse设置的内容包括许多方面,不同的开发人员,不同的项目需要,可能对Eclipse的设置不尽相同.如下内容仅是对本人的一些基本设置做一些记录,以作备忘.后期会逐渐对相关内容进行更新,仅供参考. ...

  6. NSTimer定时器进阶——详细介绍，循环引用分析与解决

    引言 定时器:A timer waits until a certain time interval has elapsed and then fires, sending a specified m ...

  7. .NET平台和开发.

  8. C#泛型编程

    1.泛型的概念     C#中的泛型与C++中的模板类似,泛型是实例化过程中提供的类型或类建立的.泛型并不限于类,还可以创建泛型接口.泛型方法,甚至泛型委托.这将极大提高代码的灵活性,正确使用泛型可以 ...

  9. 《深入理解Java虚拟机》学习笔记之最后总结

    编译器 Java是编译型语言,按照编译的时期不同,编译器可分为: 前端编译器:其实叫编译器的前端更合适些,它把*.java文件转变成*.class文件,如Sun的Javac.Eclipse JDT中的 ...

  10. ycsb对hbase性能测试的研究

    ycsb对hbase性能测试 1.ycsb安装 下载ycsb软件 wget https://github.com/downloads/brianfrankcooper/YCSB/ycsb-0.1.4. ...