• 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. .NET Core log4net 使用

    log4net .NET Core 版使用,log4net 2.0.7版发布也有一段时间了,从2.0.6 版开始就已经支持.NET Core. 之前有介绍NLog .NET Core版的使用,ASP. ...

  2. C语言程序的三种基本结构

    1.程序结构:在C语言程序中,一共有三种程序结构:顺序结构.选择结构(分支结构).循环结构: 顺序结构:从头到尾一句接着一句的执行下来,直到执行完最后一句: 选择结构:到某个节点后,会根据一次判断的结 ...

  3. 简单说说NoHTTP

    学习NoHttp的原因是由于公司之前做的产品使用的网络请求框架一直都是Volley(为什么使用Volley就不用多说了,最起码是谷歌开发团队自己搞的,总感觉权威一些),可是自从android6.0推出 ...

  4. Apache Struts2存在S2-045

    麻蛋的,批了老半天都找不到,还得谷歌 不扯蛋了,直接主题: Struts2 2.3.32 版本 下载地址:https://dist.apache.org/repos/dist/release/stru ...

  5. Strtus2 S2-045漏洞

    S2-045漏洞已经爆发几天了,但还很多网址都存在此漏洞,很多金融类网站也收到了保护费通知...唉,收保护费少,报警无效!只能酌情处理了!做黑产的,还是少做为秒,常在河边站哪有不湿鞋,劝各位早日金盆洗 ...

  6. 百度api使用心得体会

    最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出. 一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.co ...

  7. WPF: 在 MVVM 设计中实现对 ListViewItem 双击事件的响应

    ListView 控件最常用的事件是 SelectionChanged:如果采用 MVVM 模式来设计 WPF 应用,通常,我们可以使用行为(如 InvokeCommandAction)并结合命令来实 ...

  8. 关于cursor的各种属性应用

    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...

  9. 基于ELK的数据分析实践——满满的干货送给你

    很多人刚刚接触ELK都不知道如何使用它们来做分析,经常会碰到下面的问题: 安装完ELK不知从哪下手 拿到数据样本不知道怎么分解数据 导入到elasticsearch中奇怪为什么搜不出来 搜到结果后,不 ...

  10. SQL SERVER 报：由于数据移动,未能继续以 NOLOCK 方式扫描错误的解决办法。

    比如在某个表中使用 select xxx from xxx with(nolock) where xxxx 查询. 提示出错:由于数据移动,未能继续以 NOLOCK 方式扫描. 它有可能某些条件出错, ...