如何使用mockjs模拟假数据

首先 使用 npm install mockjs --save 安装mockjs 插件

1. 在项目src目录下创建mock文件夹

2.在mock文件夹下准备要使用的json数据

3.把mock数据需要的图片放在public文件夹中【public文件夹打包的时候,会把相应的资源原封不动的打包到dist文件夹下】

图片存放在 public下面的images文件夹 , 图片路径最开头的 / 代表public文件夹

4.创建mockServe.js文件,通过mockjs插件实现模拟数据

5.在入口文件引入mockServe.js文件(至少执行一次才能模拟数据)

6.配置mockAjax 文件,设置baseurl

7.封装api  , 使用mockAjax对外暴露的实例  发送请求获取数据

 

 

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Mock.js可以方便地模拟数据。在Vue-cli项目中,可以通过引入相关模块和配置来使用Mock.js模拟数据。首先,在项目的main.js文件中引入mockserver.js模块,并让其执行一遍。这样可以确保Mock.js的相关配置得到正确的加载和初始化。然后,在需要使用模拟数据的地方,可以使用Mock.mock()方法来模拟接口的返回数据。例如,可以在一个接口请求的地方使用Mock.mock()来模拟轮播图的数据,通过传入一个对象来定义模拟数据结构。这样,在开发过程中就可以使用模拟数据来进行测试和调试,而无需依赖真实的后端接口。Mock.js还提供了丰富的数据生成规则和语法,可以根据需求来生成各种类型的模拟数据使用Mock.js模拟数据可以提高开发效率,减少对后端接口的依赖,并且可以模拟各种不同的场景和数据情况,以便更好地测试和调试前端代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [使用mockjs模拟数据](https://blog.csdn.net/guhanfengdu/article/details/126021744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解在vue-cli项目下简单使用mockjs模拟数据](https://download.csdn.net/download/weixin_38748769/12950790)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值