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模拟数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇layer.js open 隐藏滚动条的例子，具有很好的参考价值，希望对大家有所帮助。 一起跟随小编过来看看吧2019-09-09
UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计2012-06-06
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了js设计模式之代理模式及订阅发布模式,结合实例形式详细分析了代理模式及订阅发布模式的概念、原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了JS实现图片旋转动画效果封装与使用,结合实例形式分析了JavaScript实现图片元素旋转的相关功能代码的封装与使用操作技巧,需要的朋友可以参考下2018-07-07
使用Object.defineProperty为对象定义属性
这篇文章主要为大家介绍了使用Object.defineProperty为对象定义属性示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了JS随机漂浮广告代码具体实例，有需要的朋友可以参考一下2013-11-11
这篇文章给大家详细介绍了electron 如何获取位置坐标信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了微信小程序实现图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
js中位数不足自动补位扩展padLeft、padRight实现代码
这篇文章主要介绍了js中位数不足自动补位扩展之padLeft、padRight实现方法，主要是通过String.prototype扩展实现,需要的朋友可以参考下2020-04-04
最新评论