Mock.js 安装及使用demo

来源：互联网发布：集思宝数据导出电脑编辑：程序博客网时间：2024/05/06 02:30

Mock.js 安装及使用demo

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

1、Mock.js下载安装

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

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

文件结构，如图：
以下是文件代码：

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><!--mock.js 依赖jQuery和require.js--><script src="jquery-1.11.1.js"></script><script src="require.js"></script><!--mock-1.js是mockJs的demo文件--><script src="mock-1.js"></script></body></html>

mock-1.js

// 配置 Mock 路径require.config({    paths: {        mock: 'mock'    }});// 加载 Mockrequire(['mock'], function(Mock) {    /*第一部分与第二部分没有关系*/    /*第一部分*/    // Mock.mock( template )    //数据模板    var data = Mock.mock({        'list|1-10': [{            'id|+1': 1        }]    });    //打印到body上    $('<pre>').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上        $('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');    })});

2.2、Mock.js 使用demo （方式2）

文件结构，可同上：
以下是文件代码：
index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script src="mock.js"></script><!--mock-2.js是mockJs的demo文件--><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上         $('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');     })}sendData("hello.json");

3、运行index.html

运行结果截图：

注明：

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

0 0

Mock.js 安装 及 使用demo

Mock.js 安装 及 使用demo

1、Mock.js下载安装

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

2.2、Mock.js 使用demo （方式2）

3、运行index.html

注明：

Mock.js 安装及使用demo

Mock.js 安装及使用demo