vue项目使用fastmock模拟数据请求

最新推荐文章于 2023-08-15 17:33:39 发布
最新推荐文章于 2023-08-15 17:33:39 发布
阅读量1.5k 收藏 11
点赞数 2
分类专栏： 项目 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/minmin_web/article/details/114810038
版权

备注此项目通过vue create programname创建（不是基于webpack模板创建）

首先fastmock官网准备一个项目

注册登录之后我的项目，新增在这里插入图片描述
新增接口
在这里插入图片描述
编辑好接口之后复制地址
在这里插入图片描述

vue项目中配置

src下新增api文件夹，然后新增index.js文件（需要先安装axios插件）
在这里插入图片描述
配置vue.config.js文件（没有就在根目录下新建一个）
在这里插入图片描述
target的地址就是之前复制的地址

vue文件中发出请求

在这里插入图片描述

最后运行项目： npm run serve
打开网站，在控制台中即可看到打印的数据
在这里插入图片描述

依米__
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
如何mock数据【Vue小技巧】
weixin_45732235的博客
10-14 223
mock 模拟接口
vue axios数据请求及vue中使用axios的方法
10-18
以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括： - 支持 Promise API，使得异步操作...
Vue3.0组合式API（五）-----网络请求axios
chucksun0426的博客
02-09 4878
目录一、发送网络请求axios1.1 概述1.2 并发请求1.3 封装axios1.3.1 封装请求1.3.2 调用封装实例1.4 拦截器1.4.1 请求拦截1.4.2 响应拦截 一、发送网络请求axios 1.1 概述 功能：用于前端向后端请求数据 安装：npm install axios，注意，要有node环境 使用：以下写在HTML的script标签里import axios from 'axios' // 后面引号内的是路径 axios({ // axios是
Vue -- 使用fastmock来模拟假数据
Qin_xian_shen的博客
12-18 1722
在编写vue时候，如果后台没有编写好，可以使用mock来模拟一些假数据。等到接口编写完后，更改相应的url接口即可。 https://www.fastmock.site/#/ 1.接口管理 2.编写json返回 ...
vue 使用fastmock来模拟假数据
weixin_45173576的博客
10-10 557
1.接口管理 https://www.fastmock.site/#/
mock数据如何更加方便？快使用 fastmock
Dark_programmer的博客
11-04 691
MOCK数据1. 为什么要mock数据？2.如何mock数据？3.项目实战 之前都是本地安装mockjs来进行数据的模拟，但是如今发现一个在线接口 MOCK 平台，于是准备记录一下 1. 为什么要mock数据？ 项目定下来之后，前端可能和后端是同时进行开发操作。那么这时接口不存在，前端无从获取数据，开发就会遇到一些问题。 那么，该如何搞嘞？ 这种前后端同时开发是一种很常见的状态，工期紧张更要同步进行，不可能等着接口出来在进行前端开发。 这时前端需要和后端同学事先约定一些内容： 1.接口数量以及接口名称
VUE中MOCK.JS的使用
weixin_55690518的博客
08-31 506
在开发过程中，前后端分离的开发模式，在发ajax请求时，会遇到后端的接口还没有完成或者后台给你的接口没有测试环境，需要在本地模拟数据的返回，有一个很好的办法，就是使用mock.js,更加方便的构造需要的假数据 mock.js的实现方式： 1、线上的mock服务器：https://www.fastmock.site/ 简单快捷 2、本地启用mock服务器 自己用express写接口 本地用专门的mock服务 今天，我们就重点介绍一下怎么在自己的项目里面自己写mock 使用步骤： （1）、定义
《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》mock文件
06-02
对应《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》博客
vue如何从接口请求数据
08-30
在Vue.js中，我们可以使用数据绑定来将数据渲染到视图中。 Vue-resource 在上面的代码中，我们使用了Vue-resource来发送请求。Vue-resource是一个基于Vue.js的HTTP客户端库，提供了简洁的API来发送HTTP请求。在...
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
本篇文章主要介绍了Vue-cli 使用json server在本地模拟请求数据的示例代码，非常具有实用价值，需要的朋友可以参考下
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下
Vue3-无限滚动的懒加载-模拟网络请求Mock版
m0_61486963的博客
09-22 1157
Vue3-无限滚动的懒加载-模拟网络请求Mock版
fastmock使用-只能模拟get请求
qiuyushuofeng的专栏
06-06 335
用于模拟get请求，fastMock,方便
Vue3中简单使用Mock.js
weixin_45616480的博客
07-20 7631
前端开发人员用来模拟虚拟数据，拦截ajax请求，方便模拟后端接口。
【Vue+Mock】使用Mock模拟数据
  ╭じò ぴé╮。Qi
08-14 3207
在前端采用Mock服务来模拟请求后台接口，按照接口文档的约定写入api、入参及出参等假数据，来模拟整个前后端联调的过程。前端发送请求后，在devServe.before中运行mock/index.js暴露的函数，捕捉到url一致的请求，直接返回mock设定的数据，有返回值就不会继续真实的请求，拦截成功之后，请求没有往后台去，而是在前端完成了虚拟请求。
vue3+vite 使用mockjs+axios模拟后端数据
最新发布
黎小小的博客
08-15 1446
如果你发现生产环境下无法请求mock接口，原因很有可能是因为你是在onMounted或者onBeforeMount这两个生命周期中请求的。你的请求会直接发出去，无法通过mock返回数据。解决方案：①直接在main.js中注入插件配置。创建一个js文件mockProdServer.js，位置和main.js同层，在src/mockProdServer.js。注意如果vite.config.ts中配置了代理proxy就会走代理请求，如果使用mockjs需要注释掉代理相关代码。
Vue项目最佳实践
bug处理进行时
12-16 746
Vue项目最佳实践 文章目录Vue项目最佳实践项目配置策略1 - 基本配置2 - `webpack`相关配置3 - 环境变量和模式相关配置权限管理1 - 路由级权限管理2 - 细粒度的权限管理导航菜单请求 && 数据1 - 统一配置请求库2 - 请求拦截和响应拦截3 - 数据mock4 - 请求代理参考资料 项目配置策略 1 - 基本配置 配置上下文信息：publicPath 部署应用包时的基本 URL。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 ht
fastmock的基本使用
m0_49304996的博客
04-15 2924
fastmock的使用 1.创建项目 登录成功后进入到“我的项目”页面，这个时候项目列表应该是空的。点击页面中间的“创建项目”或者右上角的“+”可以开始创建项目。 在这里插入图片描述 字段说明： 项目名称：用于标识项目 项目基础路径：重要，基础路径用于为每个项目分配访问时的基础url。 项目描述：关于该项目的描述信息。 创建完成在我的项目查看 2. 创建接口 点击新增接口添加接口 定义接口名，类型(method)，url 3.接口定义成功，测试接口 Postman 把需要测试的接口放入Postman中
vue 本地mock模拟数据请求
07-28
在Vue项目中，可以使用mock.js来模拟数据请求。引用\[1\]中提到，mock.js可以在后端没有提供接口的情况下，自己模拟一个mock接口去请求，并且可以返回你希望得到的随机数据。这对于本地开发和演示项目非常有用。引用\[2\]中提到，使用mock.js可以完全本地化实现数据，方便前端人员定义接口数据，并且可以配合后台人员进行开发。在Vue项目中，可以通过引入mock.js并定义mock接口来模拟数据请求。例如，可以在一个mock文件夹中创建一个mock.js文件，然后在该文件中定义接口和返回的数据。在Vue组件中，可以通过发送请求来获取mock数据。引用\[3\]中给出了一个示例，展示了如何使用mock.js来请求获取.json文件的数据。在该示例中，首先引入了mock-request工具和项目的设置文件，然后定义了一个tableData函数来发送请求并获取数据。这样，你就可以在Vue项目中使用mock.js来模拟数据请求了。 #### 引用[.reference_title] - *1* [【Vue】使用mock模拟数据](https://blog.csdn.net/ZHANGYANG_1109/article/details/124547442)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue本地模拟服务器请求mock数据](https://blog.csdn.net/liyoro/article/details/119616107)[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^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值