Vue使用 如何使用 后端的api接口

已于 2022-03-15 22:51:43 修改
阅读量6.8k 收藏 37
点赞数 1
分类专栏： api vue 文章标签： vue.js javascript 前端 vue
于 2022-03-15 22:50:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45012817/article/details/123514395
版权
api 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

Vue 如何调用接口 3中方法（封装过axios）

vue 封装axios后如何快速调用 Api接口 获取数据

1.通过store仓库调用，获取数据的页面在挂载前发请求，列如：

在这里插入图片描述
拿到接口 对外暴露

在这里插入图片描述
引入暴露的接口 在actions中

在这里插入图片描述
在页面dispath调用就行了

2.将API挂在全局的原型上

1.在main.js中引入 并挂在prototype上
在这里插入图片描述
2.在页面mounted 建立个方法
在methos中使用方法 ，通过 this. A P I . x x x . x x x 拿 到 （ 我 的 就 是 t h i s . API.xxx.xxx拿到 （我的就是this. API.xxx.xxx拿到（我的就是this.API.trademark.reqTradeMarkList）
在这里插入图片描述

3.最好用的方法！！！！！！：

1.直接引入暴露的接口
在这里插入图片描述
2.直接对接口使用 当然记得传参数
在这里插入图片描述
这是我对外暴露的接口.
在这里插入图片描述

总结

总的来说各有各的有点，结合使用

对了这是我封装的axios
在这里插入图片描述

小小小白程序员
关注
  • 1
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目下如何调用后端接口
求学如是，不可入宝山而空归。。。
01-25 1096
在Vue前端中，你可以使用axios库来进行HTTP请求。
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">
Vue发起请求后端数据
最新发布
qq_57319760的博客
05-27 1337
在Vue中使用请求工具发起请求
Vue调用后台接口方式
qq_44577699的博客
11-28 4335
Vue中调用后台接口的方式
vue配置axios统一管理后端接口API
郝南过的博客
11-11 2401
配置axios统一管理后端接口API
vue使用后端提供的接口
忧郁的蛋的专栏
04-07 1109
在VUE中使用后端接口可通过以下步骤实现：安装 axios 库并导入。使用 axios 对象创建 http 请求，如 get 或 post。使用 data 选项传递数据。处理响应，使用 data 属性访问后端返回的数据。使用 vuex 管理从后端获取的数据，通过组件访问。
vue前后端对接前端如何写接口
m0_74079165的博客
09-19 955
需要注意的是，前后端对接还涉及到其他方面的内容，例如请求参数的传递、跨域问题的处理等。3. 处理接口返回的数据：根据后端接口的设计，你可能需要在前端对接口返回的数据进行处理。类似地，你可以根据你的具体需求发送不同类型的请求，并在响应的回调函数中处理返回的数据。1. 定义接口地址：在Vue项目中，你可以在一个统一的地方定义所有的接口地址，比如在一个单独的文件中或者在Vue实例中的一个常量中。这样，你就可以通过调用Axios的API来发送请求，并根据返回的结果进行相应的处理。// 返回处理后的数据。
Vue调用后端java接口的实例代码
10-16
今天小编就为大家分享一篇Vue调用后端java接口的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue接通后端api以及部署到服务器操作
10-14
在实际开发中，Vue 需要与后端API接口通信以获取或发送数据。本篇文章将详细介绍如何在Vue项目中配置后端API接口，并将项目部署到服务器。 首先，我们要确保Vue能够正确连接到后端API。这通常涉及到设置代理，以便...
VUE使用axios调用后台API接口的方法
11-19
我们都知道VUE更多是注重前段用户界面的渲染合操作，但是如果想到实现前后端之间的交互调用后台API，就需要借助其他组件，如今天要讲到的Axios，下边就重点讲解axios在vue中的使用。  Axios，基于 Promise 的 HTTP ...
vue设置全局访问接口API地址操作
11-20
然而，当后端API地址发生变化时，逐个修改每个接口调用的URL可能会变得繁琐。为了解决这个问题，我们可以设置全局访问接口API地址，使得改动一处就能影响到全局。 首先，在Vue项目的`src`目录下创建一个名为`...
Vue组件从后端API获取数据并渲染到页面上设计方案和实现方法
03-13
在“Vue组件从后端API获取数据并渲染到页面上”的场景下，我们需要理解Vue的基本使用，组件编写方法，以及如何与后端进行数据交互。 首先，让我们深入了解一下Vue.js的基本使用。Vue的核心是组件系统，每个组件可以...
vue中如何调取api_vue怎么读取api
weixin_34567845的博客
01-30 1379
使用Vue.js，可以逐步地构建围绕其中一个服务的应用程序，并在几分钟内就可以开始向用户提供内容服务。如何利用第三方API提供服务呢？我们可以创建ajax请求来处理响应，利用axios来处理API数据。Axios是一个基于 Promise 的HTTP客户端，用于创建 Ajax请求，并且非常适合我们的应用。它提供了一些简单而丰富的API。 它与fetchAPI非常相似，但不需要为旧版浏览器额外的添加...
python封装api给vue_vue入门：对vue项目中api接口的封装管理
weixin_39524703的博客
12-08 439
在以前的文档中，我们构建了vue项目的整体架构，详见vue入门：vue项目架构设计起步，现在我们主要对其中的api接口封装进行完善，并将过程做个记录，与之分享。很多朋友在开发过程中，习惯性直接将api的调用写在单个组件之中，就直接调用请求。例如：在前端项目开发中，从整体架构出发，我们可以将项目中所有api进行封装，从而便于我们进行统一管理。在src目录下，新建api文件夹，在api文件夹下创建in...
利用vue3 调用api接口实现 数据的渲染 以及详情的实现
weixin_48864616的博客
02-24 1万+
首先新建一个项目 yarn create vite vue3-template --template vue 然后下载相应的api npm i axios router 首先配置 App.vue <script setup> </script> <template> <router-view></router-view> </template> <style> </style> main.js
创建Vue2项目，调用后端接口
qq_21344887的博客
08-13 2723
Vue
Vue 中 store 使用方法讲解
热门推荐
Mr古技术分享
04-25 2万+
vuex 包含有五个基本的对象： state：存储状态。也就是变量； getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多； mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.co
vue-cli3.0 根据环境自动获取相应接口地址
cR。的博客
03-13 1483
在项目根目录创建config文件夹，然后创建2个文件 pro.env.js: module.exports = { NODE_ENV: '"production"', // 生产环境 API_ROOT: '""' // 填上自己的接口的网址 } dev.env.js: module.exports = { NODE_ENV: '"development"', // 开发...
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调用api接口获取数据
07-13
在Vue中调用API接口获取数据可以通过以下步骤进行： 1. 在Vue组件中，首先引入axios库（或其他HTTP请求库）来发送HTTP请求： ```javascript import axios from 'axios'; ``` 2. 在Vue组件的`methods`中定义一个方法来发送API请求，并处理返回的数据： ```javascript methods: { fetchData() { axios.get('http://example.com/api/data') // 替换为你的API接口地址 .then(response => { // 处理返回的数据 console.log(response.data); }) .catch(error => { // 处理错误 console.error(error); }); } } ``` 3. 在需要获取数据的地方调用该方法： ```html <button @click="fetchData">获取数据</button> ``` 这样，当用户点击按钮时，Vue组件会发送一个GET请求到指定的API接口，并在收到响应后进行处理。 请注意，上述代码仅为示例，并假设API接口返回的是JSON格式的数据。你需要根据你的实际需求进行相应的修改和处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值