使用Mock.js实现前端模拟数据及增删改查功能

友人.227

已于 2025-01-19 20:22:55 修改

阅读量623

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2025-01-19 13:51:41 首次发布

本文链接：https://blog.csdn.net/weixin_66708577/article/details/145242307

在前端开发过程中，我们经常会遇到后端接口尚未完成，但前端页面需要进行数据展示和交互的情况。这时，Mock.js就派上大用场了。Mock.js是一个强大的模拟数据生成库，可以帮助我们快速生成模拟数据，让前端开发不再依赖后端接口。本文将通过一个简单的示例，介绍Mock.js的基本使用方法，并在此基础上实现增删改查功能。

一、引入Mock.js

首先，我们需要在HTML文件中引入Mock.js。可以通过CDN的方式引入，如下所示：

也可以去官网下载到本地使用 mock官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mock.js示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head>
<body>
		<div>
			<h1 id="mockjs">请按F12到console查看数据</h1>
			<div class="list"></div>
		</div>
</body>
</html>

这里我们同时引入了jQuery库，因为在示例中会使用到jQuery的$.ajax方法。

二、模拟数据

接下来，我们使用Mock.js来模拟数据。在<script>标签中，调用Mock.mock方法来定义模拟数据的规则：

<script type="text/javascript">
    // 调用mock方法模拟数据
//这里的tableData 是请求 时 使用的 字段
    Mock.mock(
        'http://mockjs', {
            'tableData|30-60': [{
                "guid": '@guid',     // 唯一ID
                'id|+1': 1,     // 模拟id 序号
                "Loophole": "Alureon/Olmarik 网络通信检测",     // 漏洞名称
                "date": "@date('yyyy-MM-dd')",  // 模拟时间
                "content": "内容" // 模拟文本
            }]
        });
</script>

在上述代码中，'http://mockjs'是我们模拟的接口地址。tableData|30-60表示生成一个数组，数组的长度在30到60之间。数组中的每个对象包含以下属性：