vue 用axios请求接口的使用以及配置

最新推荐文章于 2024-04-04 09:08:30 发布
VIP文章 最新推荐文章于 2024-04-04 09:08:30 发布
阅读量5.1k 收藏 17
点赞数 1
分类专栏： 若依框架axios配置 axios跨域配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanfei_/article/details/103751161
版权

若依框架前后端分离 用axios请求接口的使用以及配置

首先需要下载安装

cnpm install axios --save

安装完成以后进行配置，打开main.js

import axios from 'axios'
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios

跨域配置：
打开vue.config.js

在这里插入图片描述
可以看到一个案例，这个就是跨域请求的写法我们只需要模仿人家写好的就可以

'/api'
最低0.47元/天 解锁文章
tanfei_
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前后端分离跨域问题
01-07
跨域问题来源于浏览器的同源策略。客户端和服务端不同IP不同端口都算跨域。 springboot解决跨域有cros,配置就是那几项。 如果把服务端程序部署在nginx上，在nginx 也可以解决，服务端和nginx只用写一个即可， server { listen 3002; server_name localhost; location /ok { proxy_pass http://localhost:3000; # 指定允许跨域的方法，*代表所有 add_header Access-Control-Allow-M
Vue2 配置 Axios api 接口调用文件的方法
01-19
但是，这里还没有涉及到 AJAX 请求接口的内容。 vue 本身是不支持 ajax 接口请求的，所以我们需要安装一个接口请求的 npm 包，来使我们的项目拥有这个功能。 这其实是一个重要的 unix 思想，就是一个工具只做好一件...
若依框架前端Vue项目分析实战
热门推荐
敲代码的小小酥的博客
04-09 2万+
说明 前面讲解了vue2的单点知识，下面用若依提供的vue项目，实战分析一下，拿到一个vue项目，如何进行分析并进行二次开发。 一、public/index.html与main.js和App.vue三者的关系 vue项目是单界面应用，所有的界面将在public下的index.html里呈现。 main.js是程序的入口，在这里，定义了vue实例对象。如下代码： new Vue({ el: '#app', router,//路由插件 store,//vuex插件,所有的组件中都可以使用store中
ruoyi-UI （若依）微服务版 vue前端使用及分析（2021-4-13更新）
qq_41312395的博客
03-26 1万+
ruoyi-UI vue前端版本（应该不算标题党） 1. 目录结构 3. 重点文件夹，文件解析 views/login.vue decrypt（）解密 /utils/jsencrypt.js encrypt（）加密 /utils/jsencrypt.js 页面加载的时候就是一个记住密码的功能，调的cookie 然后点击确定（handleLogin）的时候，调用permission.js的beforeEach函数 然后乱七八糟走了一大堆，然后调的store/modules/user.js里面的登
Vue axios 详细介绍（核心使用、封装、个性化配置，前端外包是如何转正网易的
最新发布
2401_84103936的博客
04-04 854
我们可以通过axios.create方式创建一个实例，为该实例配置默认值（该种方式可用于封装自定义axios，往下会展开）// 创建实例时设置配置默认值});// 实例创建之后可修改默认配置。
若依框架_05：接口汇总
Share_Li_98的博客
08-25 6045
若依框架接口汇总
记录一次若依框架 前端跨域访问 ruoyi -vue
MAFIAMB的博客
01-09 3878
文件名thirdPlatformRequest.js})// request 拦截器// 可以自请求发送前对请求做一些处理// 比如统一加token，对请求参数统一加密// 设置请求头});// response 拦截器// 可以在接口响应后统一处理结果// 如果是返回的文件return res// 兼容服务端返回的字符串数据res = res?return res;
ruoyi-vue快速集成magic-api
yueping0718的专栏
01-12 3151
ruoyi-vue 和magic-api都是优秀的框架，两个框架在开发中可以做到互补且互不影响，本文介绍两个框架如何顺利集成。
若依框架-补充篇：Vuex全局状态管理&Axios二次封装
席木木的博客
01-01 1814
若依框架-补充篇：Vuex全局状态管理&Axios二次封装，设计Vuex的核心概念（state、getters、mutations、actions、modules）及其配置、Vuex全局状态在组件中的获取和修改操作、Axios配置规则以及Axios的二次封装示例（涉及Axios实例的创建、拦截器配置、重复请求过滤配置、取消请求的逻辑编写等）。
全面解析若依框架（springboot-vue前后分离--后端部分）
qq_46624276的博客
12-16 2万+
自定义隐藏列通过excludeFields数组来进行控制，在List getFields获取字段信息的时候将通过excludeFields来进行字段排除，使用hideColumn(“userId”)方法来隐藏，使用方法如下。
若依框架 用axios请求接口的使用以及配置
51yunOA
03-21 3280
若依框架 用axios请求接口的使用以及配置
解决在Vue中使用axios POST请求变成OPTIONS的问题
01-19
2、axios配置和使用 在接口请求页面引入安装好的qs，如下图： 引入完成之后使用qs改变传递的参数data，如下： 这样就可以了，post请求的时候就不会再出现OPTIONS了 补充知识：axios发起请求，为什么先发送options...
vue 中关于 axios 网络请求的封装：包括请求拦截等内容，附有详细的代码说明！！！
05-04
对网络请求进行封装：文件目录为 network / request.js 使用方法: 打开 request.js 文件，对相关信息进行配置：主要包括 baseUrl、timeout 等信息 import request from '../network/request' ---------使用正确的...
详解vue+axios给开发环境和生产环境配置不同的接口地址
12-02
为什么要配置不同的接口地址 在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync...
解决vue中axios设置超时(超过5分钟)没反应的问题
10-14
主要介绍了解决vue中axios设置超时(超过5分钟)没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Ruoyi-Vue处理跨域问题、同时请求多个域名接口(前端处理)
qq_34746960的博客
10-09 2969
Ruoyi-Vue项目请求不同地址的接口，主要在于处理跨域问题，即vue.config.js文件处理。
Ruoyi-Vue处理跨域问题、同时请求多个域名接口(前后端处理)
qq_34746960的博客
10-17 2657
使用@CrossOrigin处理跨域，及Ruoyi-Vue项目前端配置。
【Vue】如何配置代理请求接口
苏珊蓝顿
11-28 3767
简单粗暴，依旧直接上代码 在实际项目中往往不想直接暴露后台的真实接口，我们可以通过配置代理接口进行伪装请求。 打开项目中/config/index.js文件 找到module.exports 配置 在dev模块中进行如下配置： // Proxy proxyTable: { '/web/api': { target: 'http://lo...
vue3封装axios请求接口
07-13
你可以通过以下步骤封装 Axios 请求接口： 1. 首先，安装 Axios： ```bash npm install axios ``` 2. 创建一个名为 `api.js` 的文件，并在其中导入 Axios 和 Vue： ```javascript import axios from 'axios'; import Vue from 'vue'; // 设置 Axios 的默认配置 axios.defaults.baseURL = 'https://api.example.com'; // 设置接口的基础URL // 创建一个 Vue 实例，用于在组件中使用 const instance = new Vue(); // 封装一个统一的请求方法 const request = async (url, method, data) => { try { const response = await axios({ url, method, data, }); return response.data; } catch (error) { // 在这里处理错误信息 instance.$message.error(error.message); throw error; } }; export default request; ``` 3. 在需要发送请求的组件中引入 `api.js` 文件，并使用封装的请求方法： ```javascript import request from './api.js'; export default { methods: { async fetchData() { try { const data = await request('/api/data', 'GET'); // 处理返回的数据 } catch (error) { // 处理错误 } }, async sendData() { try { const data = await request('/api/data', 'POST', { key: 'value' }); // 处理返回的数据 } catch (error) { // 处理错误 } }, }, }; ``` 通过这种方式，你可以在 Vue 组件中轻松封装和使用 Axios 请求接口。需要注意的是，这只是一个简单的示例，你可以根据实际需求进行进一步的封装和定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值