VUE封装后端接口

最新推荐文章于 2024-06-28 21:28:51 发布
最新推荐文章于 2024-06-28 21:28:51 发布
阅读量905 收藏 1
点赞数
分类专栏： 前端开发工程师 vue iview 文章标签： 重构 vue-api封装 data数据的封装 form表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18602226841/article/details/73549990
版权

最近老大觉着我们之前写的工程目录一塌糊涂…..为了规范写法,也为了后期项目维护细分化和简单化,所以最近两天要做的就是重构我们之前的代码.今天就暂时讲一下后端接口的封装.我们这里用到的都是post请求,所以是对post方法进行统一的封装.先看一下后端的端口
这里写图片描述
在这里我们封装的时候文件起名和后台端口保持一致.
这里写图片描述
我们是每个不同的模块封装的端口放在一个目录下面,这样的不同的人负责不同的模块,防止后期维护的时候产生混乱.那接下来我们需要在config.js中封装一些我们要用的公共的方法
这里写图片描述
因为现在我们还在开发环境,所以在evn.js中写入

最低0.47元/天 解锁文章
秋水君
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现后端管理模板
06-01
7. **Mock数据模拟**: 开发初期，可以通过Mock.js模拟后端接口数据，减少对后端的依赖，提高开发效率。 8. **预览与打包**: 提供热更新和打包部署功能，开发者在开发过程中可以实时查看代码变更效果，打包后生成的...
Vue前后端交互
热门推荐
淘小欣的博客
04-30 1万+
Vue前后端交互 文章目录Vue前后端交互引入：Vue前后端交互一、基于jQuery的ajax前后端交互模式前端后端二、使用fetch前后端交互fetch基本用法与请求参数fetch基本用法fetch请求参数fetch前后端交互前端后端三、前后端交互之axios前端后端参考资料 引入：Vue前后端交互 一般在项目中结合async/await语法使用axios调用接口 一、基于jQuery的ajax前后端交互模式 前端 <head> <meta charset="UTF-8">
vue2接口的封装
weixin_53935634的博客
02-17 5145
1.配置完成router后 ，可以在router内新建request.js文件 import axios from 'axios' import { MessageBox, Message } from 'element-ui' // import store from '@/store' // import { getToken } from '@/utils/auth' //创建axios 实例 const service = axios.create({ // baseURL..
Vue.js 中的API接口封装实战与详解
最新发布
Play_Sai的博客
06-28 558
在开发Web应用的过程中，我们常常需要和服务器进行数据交互，这就涉及到了API接口的调用。在Vue.js项目中，为了提高代码复用性、可维护性和降低错误率，我们将API接口进行合理的封装显得尤为重要。本文将详细介绍如何在Vue.js项目中实现API接口的封装。
Vue调用后台接口方式
qq_44577699的博客
11-28 4409
Vue中调用后台接口的方式
vue调用后端接口
Jie1104的博客
11-17 3843
vue调用后端接口
Java8新特性之接口的默认方法和静态方法（四）
JackieBlog
04-15 642
1. 背景介绍 2. 接口的默认方法介绍 3. 接口的静态方法介绍 4. 相关链接
vue设置全局访问接口API地址操作
11-20
在使用Vue框架构建前后端分离的应用时，与后端接口的交互是不可或缺的步骤。Vue开发者经常使用axios库来调用这些接口。然而，当后端API地址发生变化时，逐个修改每个接口调用的URL可能会变得繁琐。为了解决这个问题...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
根据后端接口是GET还是POST，调整请求参数和数据传递方式。例如，如果是GET请求，需要将参数拼接到URL上；如果是POST请求，则将数据放在data对象中。 ```javascript import { exportMethod } from '@/libs/util' ...
vue项目 API接口封装
dccose的博客
11-09 3380
vue项目 API接口封装
vue项目调用后端接口
m0_73649732的博客
01-16 1718
替换为实际的后端接口地址。如果后端接口需要授权，请确保在请求头中添加适当的授权信息。这是一个简单的示例，实际的调用方式和处理返回值的逻辑会依据具体的项目需求而有所不同。在Vue项目中调用后端接口并获取返回的值，可以使用Vue的内置方法。来发起HTTP请求。注意：在调用后端接口时，要将。
vue3如何封装接口
A12536365214的博客
07-28 3306
在Vue 3中封装接口的主要目的是为了提高代码的可维护性、重用性和可读性。将网络请求的操作封装成一个独立的模块，有以下几个好处：代码复用：通过封装接口，可以将网络请求的逻辑集中管理，使得多个组件可以共享同一份接口代码，避免在多个地方重复编写相同的网络请求代码，减少代码冗余。抽象和封装：将接口请求抽象为一个独立的模块，可以使代码结构更加清晰，降低组件的复杂度。当需要修改接口或更换网络请求库时，只需在封装的接口模块进行修改，而不需要在每个组件中逐个修改，便于维护和管理。
vue使用后端提供的接口
忧郁的蛋的专栏
04-07 1162
在VUE中使用后端接口可通过以下步骤实现：安装 axios 库并导入。使用 axios 对象创建 http 请求，如 get 或 post。使用 data 选项传递数据。处理响应，使用 data 属性访问后端返回的数据。使用 vuex 管理从后端获取的数据，通过组件访问。
Vue的api接口封装以及使用说明、模块说明
wushengyong1996的博客
01-12 572
在Api目录下面建立user.js，如果以后有不同的接口请求地址都可以单独创建不同的，目的是方便维护！这个代码是引入之前封装好的 request.js 文件，具体可以参考上门一篇文档。
从零开始的VUE项目-03（数据的增删改查）
木卯彳亍的博客
04-18 4910
这一篇中，我们要实现的基本就是这么个东西 这个页面就是我们创建的DataManagement.vue页面，我们的主要代码将写在这里面，这个表格我们将用Element-UI的table组件来实现 组件地址：https://element.eleme.cn/#/zh-CN/component/table 我们先用这个基础表格看看效果，点击表格下面的显示代码，我们把这些代码复制粘贴到我们的DataManagement.vue里，运行看看效果 这时有人可能会问，我地图没有啊，来，让我们运行ng
vue-element-admin 前后端联调 请求后端接口
sinat_59061183的博客
06-08 1568
这里对 token 存储进行了修改，原框架中的 token 既存储在 cookie 中，又存储在了 store.state 中中，这样对代码维护造成了困难，每次修改 token 都要修改两个地方。由于 token 没有响应式的需求，所以将 token 统一存储在 cookie 中，而 vuex 中相关 SET_TOKEN 的代码都注释掉。发送请求的 axios 工具被封装在 src/utils/request.js 中。token 的请求头修改一下，在 src/utils/request.js 中。
手把手教你用VUE写个例子访问后端WebApi的接口获取数据并显示出来
weixin_43935474的博客
09-05 1万+
​ 本文接着上文《手把手叫你用VS2019写个WebApi（可以供网页、手机、电脑三端连接使用）从网页访问后端并在后端通过EF获取sqlserver中的数据》 https://blog.csdn.net/weixin_43935474/article/details/132497256?spm=1001.2014.3001.5501 上文中介绍了如何创建一个WebApi后端接口的例子，现在来写个网页端访问这个后端接口的例子。 ​
vue如何封装请求接口方法
qingshui_zhuo的博客
01-27 8741
封装请求接口的方法有很多种，这是我最近新学的一种方法，可以参考一下 如果大家有更方便的方法也可以分享出来借鉴一下哈 首先创建一个server.js文件 引入axios和qs //引入axios和qs插件 import axios from 'axios' import qs from 'qs' //创建一个类并导出 export const Server= new class { constructor() { //请求接口路径 this.loginApi= '/v1/user/getuserinfo
uniapp vue3 后端接口请求带token封装
05-12
在uniapp中，我们可以使用uni.request()方法来请求后端接口。为了在请求中带上token，我们可以先在本地存储中获取token，然后将其放在请求头中。 以下是一个简单的封装示例： ```js import store from '@/store' /...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值