Mock.js 安装及使用demo

最新推荐文章于 2025-07-04 10:07:24 发布

SunPrincess

最新推荐文章于 2025-07-04 10:07:24 发布

阅读量2.2w

点赞数 1

分类专栏：工具反向代理 mockJS 文章标签：工具 mockJS 反向代理

工具同时被 3 个专栏收录

3 篇文章

订阅专栏

反向代理

1 篇文章

订阅专栏

mockJS

1 篇文章

订阅专栏

本文介绍Mock.js的安装方法和两种使用方式，通过示例代码演示如何生成模拟数据，并使用Ajax请求获取这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'
    }
});

// 加载 Mock
require(['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");