mock.js模拟数据的实现

更新时间：2023年11月28日 11:52:11 作者：永久旅途

在没有后端提供数据的情况下,前端人员在自己写demo或者练手项目的时候可以使用mock.js来模拟数据,本文主要介绍了mock.js模拟数据的实现,感兴趣的可以了解一下

一、安装mock.js

npm i mockjs

二、配置JSON文件

我们创建一个mock文件夹，用于存放mock相关的模拟数据和代码实现。

我们将数据全部放在xxx.json文件夹下，里面配置我们需要的JSON格式的数据。

注意：json文件中不要留有空格，否则会获取数据失败！

如果json数据中有用到图片，记得配置图片的路径。

三、模拟mock接口

我们在mock文件夹下创建一个mockServe.js 文件，用于编写mock模拟数据的相关代码。

Mock.mock("请求地址", {code:xxx, data:xxx})

// 引入mock模块
import Mock from "mockjs";

// 引入json文件
// 因为Webpack中，图片和json文件是默认暴露的，所以我们可以直接使用
import banner from "./banner.json";
import floor from "./floor.json";

// 配置mock数据
// 接收两个参数：请求地址 和 请求数据
Mock.mock("/mock/banner", { code: 200, data: banner });
Mock.mock("/mock/floor", { code: 200, data: floor });

四、引入mock文件

我们编写完如上代码过后必须要引入，否则就没有意义。

如果我们是在Vue中使用mock，那么直接在main.js文件中引入即可：

import "@/mock/mockServe.js";

然后就可以使用我们配置的虚拟接口去发送请求获取到mock虚拟数据了。

到此这篇关于mock.js模拟数据的实现的文章就介绍到这了,更多相关mock.js模拟数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript实现前端input密码输入强度验证
这篇文章主要为大家详细介绍了javascript实现前端input密码输入强度验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
JS数组中常用方法技巧学会进阶成为大佬
这篇文章主要为大家介绍了JS数组中常用的方法技巧，学会了你就在进阶成为大佬的道路上又迈进了一步，希望能够有所帮助，祝大家多多进步
2021-10-10
js实现上传图片之上传前预览图片
此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了，感兴趣的各位可以参考下哈
2013-03-03
JS针对浏览器窗口关闭事件的监听方法集锦
这篇文章主要介绍了JS针对浏览器窗口关闭事件的监听方法,总结整理了几种常用的浏览器关闭事件监听方法,非常简单实用,需要的朋友可以参考下
2016-06-06
如何防止JavaScript中的正则表达式回溯
某些正则表达式模式可能容易受到回溯的影响,这可能会导致超线性运行时,并可能导致DoS攻击,本文就来介绍一下如何防止JavaScript中的正则表达式回溯,感兴趣的可以了解一下
2023-08-08
JS重载实现方法分析
这篇文章主要介绍了JS重载实现方法,结合实例形式分析了javascript重载的实现与使用方法,需要的朋友可以参考下
2016-12-12
JS事件循环机制event loop宏任务微任务原理解析
这篇文章主要介绍了JS事件循环机制event loop宏任务微任务原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
javascript 流畅动画实现原理
浏览器目前来说是没有抗锯齿效果的(将来不一定哦)，这样dom元素外观的改变就被限制在1个像素为最佳效果。
2009-09-09
解析从小程序开发者工具源码看原理实现
小程序的架构设计与web技术还是有一定的差别，其吸取了web技术的一些优势，同时也摒弃web技术中体验等不好的地方。下面通过问题的形式来说说小程序架构中的一些设计点
2021-06-06
Bootstrap导航条的使用和理解3
这篇文章主要为大家详细介绍了关于Bootstrap导航条的使用和理解的学习记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12