VUE封装后端接口

最新推荐文章于 2024-07-19 16:42:54 发布
最新推荐文章于 2024-07-19 16:42:54 发布
阅读量913 收藏 1
点赞数
分类专栏： 前端开发工程师 vue iview 文章标签： 重构 vue-api封装 data数据的封装 form表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18602226841/article/details/73549990
版权
本文介绍了在Vue项目中进行后端接口的重构和封装，遵循规范化的目录结构，以提高代码可维护性。首先，按照后端端口创建对应的API文件，每个模块的接口放在独立目录下。接着，在`config.js`中封装公共方法，并在开发环境配置接口基础URL。此外，单独封装JSON转换方法。最后，展示了一个API封装的例子，并说明了在组件中如何调用这些封装好的API以及数据和表单验证的封装方法。
摘要由CSDN通过智能技术生成

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

最低0.47元/天 解锁文章
秋水君
关注
专栏目录
vue接后端接口
weixin_44094836的博客
11-10 1988
vue接后端接口 1.首先安装axios npm install axios 2.main.js:导入 import axios from 'axios' Vue.prototype.$http = axios Vue.prototype.$http.defaults.baseURL = '' // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL 3.配置api里引用request文件。创建一个实例 import axios from 'axios' im
Java8新特性之接口的默认方法和静态方法（四）
JackieBlog
04-15 643
1. 背景介绍 2. 接口的默认方法介绍 3. 接口的静态方法介绍 4. 相关链接
Vue中如何封装接口
最新发布
ggq53219的博客
07-19 449
在Vue项目中封装接口通常是指将HTTP请求（如GET、POST等）封装成可复用的函数或方法，以便于在组件中方便地调用。这样的封装有助于减少代码重复，增强代码的可维护性和可读性。以下是一个基于Vue和Axios（一个基于Promise的HTTP客户端，用于浏览器和node.js）的接口封装示例。
vue调用后端接口
热门推荐
qq_53943932的博客
04-08 1万+
1、在config文件下的index.js文件的proxyTable:{ }中写入 '/api': { target: 'http://localhost:8088/',//此处可以换成自己需要的地址 changeOrigin: true, pathRewrite: { '^/api': '/' } } 2、在main.js中写入 Vue.prototype.HOST = "/api" 3
vue的后端接口进行封装
weixin_49551572的博客
08-07 262
废话少说，直接上效果！！！！
vue封装接口
weixin_46031177的博客
10-07 374
需要创建俩个js文件 http.js 和 api.js 在http.js中引入axios，对get和post进行封装请求方式，在这里可以设置请求头和超时时间，也可以进行环境的切换，这里的环境指的是开发环境和生产环境，也可以设置请求拦截和响应拦截 在http.js中 //第一步:引入axios import axios from 'axios'; //在这里设置开发环境和生产环境的默认路径 //development是开发环境 production是生产环境 if(process.env.NODE_ENV
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
根据后端接口是GET还是POST，调整请求参数和数据传递方式。例如，如果是GET请求，需要将参数拼接到URL上；如果是POST请求，则将数据放在data对象中。 ```javascript import { exportMethod } from '@/libs/util' ...
传统html页面vue方法调接口,使用Vue调取接口,并渲染数据的示例代码
weixin_31028871的博客
06-04 2612
刚接触vue.js框架的时候，很伤脑筋。今天整理一下post/get两种方式，简单的调取数据库数据，并进行渲染，希望帮助大家！首先，在HTML页面引入：//引入vue.js文件引入vue-resource.min.js文件，就可以引入接口方法了然后，在body中书写div：//id在下面js中进行引用序号姓名头像//v-for 循环数据表中的数据{{v.id}}{{v.username}}{{v....
vue构建项目对接口的调用封装
weixin_46166755的博客
07-26 667
在项目这里面写入 一个配置文件 我写的是config >infex.vue（后面会附上一张图） const env = process.env.NODE_ENV || 'prod' 这个prod就是开发模式 const EnvConfig = { dev: { // 你要和你公司的后端要的接口地址放在这里 // 这个可以随意定义 就是一个变量 apiOrderUrl //http://192.168.4.90:7810/api 这个就是接口地址 //多个接口也可以使
详解vue配置后台接口方式
10-17
主要介绍了vue配置后台接口方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue接口封装
weixin_44683763的博客
01-05 559
axios封装 请求拦截：请求标记已经存在，则取消本次请求，否则在请求列表中加入请求标记 响应拦截：code==500，统一报错；不同error，不同处理报错 // axios.js import axios from "axios" import { Message } from 'gdb-ui'; let requestList = []; let cancelToken = axios.CancelToken; // 请求拦截 axios.interceptors.request.use(
Vue - 与后端交互
wuzeipero的博客
12-16 4583
Vue - 与后端交互零：与后端交互 - ajax版本1 - 出现了跨域问题版本2 - 解决了跨域问题版本3 - 后端读取json文件传到前端一：fetch1.简介2.实例二：Axios1.简介2.实例三：计算属性1.通过计算属性实现名字首字母大写2.通过计算属性重写过滤案例四：虚拟DOM 与diff算法 key的作用1.Vue2.0 v-for 中 :key 有什么用呢？2.虚拟DOM的diff算法3.具体实现思考：什么是跨域问题？如何解决？ 零：与后端交互 - ajax 版本1 - 出现了跨域问题 前端
vue使用后端提供的接口
忧郁的蛋的专栏
04-07 1385
在VUE中使用后端接口可通过以下步骤实现：安装 axios 库并导入。使用 axios 对象创建 http 请求，如 get 或 post。使用 data 选项传递数据。处理响应，使用 data 属性访问后端返回的数据。使用 vuex 管理从后端获取的数据，通过组件访问。
vue请求后台接口
qq_43267199的博客
09-07 1539
vue不支持直接发送AJAX请求，需要使用vue-resource、axios等插件实现。 一.使用axios发送AJAX请求： 1.安装axios并引入： 1）npm install axios -S （直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中），首先在 main.js 中引入 axios：在此文件加入import axios from ‘axios’，如果在其它的组件中无法使用 axios 命令。可以将 axios 改写为 Vue 的原型
axios的二次封装
Haines
10-07 824
  import axios from 'axios' // 注意先安装哦 import config from './config.js' // 倒入默认配置 import qs from 'qs' // 序列化请求数据，视服务端的要求 export default function $axios (options) { return new Promise((resolve, r...
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、付费专栏及课程。

余额充值