• 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. Android中Handler使用浅析

    1. Handler使用引出 现在作为客户,有这样一个需求,当打开Activity界面时,开始倒计时,倒计时结束后跳转新的界面(思维活跃的朋友可能立马想到如果打开后自动倒计时,就类似于各个APP的欢迎 ...

  2. 解决clipboard手机端无法复制的一种思路

    最近,做了一个切图的小项目 主要内容是微信号的推广页面,上面会有精美的图片和微信号:) 点击按钮,会复制到粘贴板上,自己去微信里面粘贴搜索:),懒人会进行一系列复杂操作么,不看好 首先,百度了一下,看 ...

  3. Java IO之File和IO

    本系列我们主要总结一下Java中的IO.NIO以及NIO2. java.io.File 学习Java IO,首先让我们来了解File类吧,它是文件和目录路径名的抽象表示形式.因此你千万别误会File类 ...

  4. 软件测试作业3 — PrintPrimes()

    一．Use the following method printPrimes() for questions a–d. (a) Draw the control flow graph for the p ...

  5. ST HW1 An Error

    曾经使用ThinkPHP完成一个网上电子银行的项目,凡是涉及到金钱的,需要注意的问题很多,比如使用float类型,比如金钱的数额不能为负数等等.最初没有考虑到剩余金额不能为负数或者消费的金额不能为负, ...

  6. 给 Qt 添加模块

    添加 Qt 模块 QtCanvas3D 由于需要使用 Qt Quick 进行 3D 绘图,因此在网上找了一些资料. JS 绘制 3D 的有 ThreeJS 库,应该可以用于 QML.继续搜索,发现Qt ...

  7. 有关rip路由协议相关知识以及实例配置【第1部分】

    有关rip路由协议相关知识以及实例配置[第一部分] RIP呢,这是一个比较重要的知识点,所以它的知识覆盖面很广泛:但是呢,我将会对碰到的问题进行一些分析解刨(主要是为了帮助自己理清思维):也希望能够从 ...

  8. 千呼万呼使出来Gogland （jetBrains发布的golang IDE）

    由于之前一直在用PyCharm在开发, 已经习惯了这个IDE. 转golang开发后一直没找到合适的debug功能的IDE,忽然听说jetBrains发布测试版golang IDE: Gogland带 ...

  9. 启动tomcat直接报错：org.apache.tomcat.util.digester.Digester startElement

    今天很奇怪,自己手动搭建了一个ssm(spring+springmvc+mybatis)的项目,然后添加到tomcat下,启动直接报错: 2017-3-19 9:24:47 org.apache.to ...

  10. 【树莓派】Linux 测网速及树莓派源

    这篇文章比较杂,其中包含三点:linux环境中测试网络速度,树莓派下载软件的源,部分我写好的脚本: 一.Linux 测网速 Linux 测网速: sar -n DEV 1 100 1代表一秒统计并显示 ...