Mock.js 安装 及 使用demo

Mock.js 安装 及 使用demo

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

1、Mock.js下载安装

  • 下载mock.js文件
  • npm安装mock模块
    项目路径下执行命令: npm install mock

2.1、Mock.js 使用demo (方式1)

  • 文件结构,如图:
    Mock.js 安装 及 使用demo_第1张图片
  • 以下是文件代码:

index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>


<script src="jquery-1.11.1.js">script>
<script src="require.js">script>

<script src="mock-1.js">script>
body>
html>

mock-1.js

// 配置 Mock 路径
require.config({
    paths: {
        mock: 'mock'
    }
});

// 加载 Mock
require(['mock'], function(Mock) {

    /*第一部分与第二部分没有关系*/

    /*第一部分*/
    // Mock.mock( template )
    //数据模板
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    //打印到body上
    $('
').text(JSON.stringify(data, null, 4)).appendTo('body');


    /*第二部分*/
    // Mock.mock(rurl, template)
    Mock.mock(/\.json/, {    //匹配.json文件
        'list|1-10': [{      //数据模板
            'id|+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上
        $('
').text(JSON.stringify(data, null, 4)).appendTo('body');
    })
});

2.2、Mock.js 使用demo (方式2)

  • 文件结构,可同上:
  • 以下是文件代码:
    index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>



<script src="mock.js">script>

<script src="mock-2.js">script>
body>
html>

mock-2.js

Mock.mock(/\.json/, {    //匹配.json文件,可执行匹配成功的参数
  'list|1-10': [{      //数据模板
         'id|+1': 1,
         'email': '@EMAIL',
         'regexp3': /\d{5,10}/
     }]
 });

function sendData(url) {
    $.ajax({
         url: url,
         dataType: 'json'
     }).done(function(data, status, jqXHR) {
         //获得mock数据模板中的数据,打印到body上
         $('
').text(JSON.stringify(data, null, 4)).appendTo('body');
     })
}
sendData("hello.json");

3、运行index.html

运行结果截图:
Mock.js 安装 及 使用demo_第2张图片

注明:

  • mock.js本质是更改了jquery、zepto等库的请求文件前缀。更改了代码的实现,可能存在影响请求的结果。
    实际上mock.js的请求并没有被发送。
  • gulp-mock插件:请求被发送但是被拦截,不影响代码的实际实现。

你可能感兴趣的:(工具,反向代理,mockJS)