写给后端开发的『vue3』请求后端接口

这篇具有很好参考价值的文章主要介绍了写给后端开发的『vue3』请求后端接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文分享一下在vue3前端项目中请求后端接口获取数据。比较简单,内容如下:
写给后端开发的『vue3』请求后端接口,vue3,axios,后端,前端

1、使用axios请求后端接口

首先npm install axios,添加axios依赖,就靠它来请求后端接口了,基本等同于使用jquery发ajax。

# src/main.js
import axios from 'axios'
import vueAxios from 'vue-axios'
createApp(App).use(ElementPlus).use(vueAxios,axios).mount("#app");

axios是一个独立的库,方便调用,这里使用vue-axios,通过this.axios发起后端请求。后端接口如图所示:
写给后端开发的『vue3』请求后端接口,vue3,axios,后端,前端
通过axios获取到数据后赋值到data数据即可,页面引用data数据进行展示。

<script>
export default{
    data(){
        return {
            signName: 'star',
            users: []
        }
    },
    methods:{
        getUsers(){
            this.axios.get('/api/getAllUsers')
                 .then((res)=>{
                    console.log(JSON.stringify(res.data.records))
                    this.users = res.data.records
                 })
                 .catch(function (error) { 
                    console.log(error);
            });
        }
    },
    mounted () {
        this.getUsers()
  }
}
</script>

2、配置代理

直接向localhost:8787/getAllUsers发请求会产生跨域问题,通常前端和后端是分开部署的,即使部署在一台服务器端口也不同,所以存在跨域问题(不考虑将前端dist扔到后端服务器里半分离情况)。

在vue.config.js文件中配置代理(没有新建一个即可),将本地路径请求转发到目标地址,这样就可以规避掉浏览器同源策略。同源只是浏览器的限制,即便跨域后端还是可以收到请求数据的。

module.exports = {
  devServer: {
    port: 80,
    proxy: {
      '/api': {
        target: 'http://localhost:8787',
        secure: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      }
    },
  },
}

3、页面table渲染

最后写一个.vue将请求数据展示一下,使用方式和上篇相同,只要有数据了页面展示可以通过第三方组件轻松展示,这里使用element-plus。

<template>
  <el-table :data="users" style="width: 100%">
    <el-table-column prop="id" label="编号" width="120" />
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="age" label="年龄" width="120" />
    <el-table-column prop="city" label="城市" />
  </el-table>
</template>

最终效果如下,如果参照本文出现任何与预期不一致的地方,那一定是本文写错了,还请参见各个组件官方文档。
写给后端开发的『vue3』请求后端接口,vue3,axios,后端,前端文章来源地址https://www.toymoban.com/news/detail-588302.html

到了这里,关于写给后端开发的『vue3』请求后端接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端基于axios请求下载文件(后端返回Blob文件流)

    前端小白第一篇csdn文章就当自己记录学习啦! 我自己遇到的情况写在前面防止有人和我不一样,浪费时间浏览; 调用下载接口后端给我返回的数据格式(即文件流格式)如下: 1.按钮定义点击事件 2.调用后端接口 在使用 axios 请求下载文件 api 接口时,注意区分不同请求方法

    2024年02月11日
    浏览(61)
  • Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程,前端下载后端接口返回的文件流并自动保存到本地,支持任何格式的文件下载(从后端拿到二进制文件流 Blob 对象,前端实现点击下载功能)

    调用服务端(后端)接口拿到文件流,通过前端下载并保存到本地。 本文 实现了在 vue3 项目中,通过后端接口返回的二进制文件流 Blob 对象,在前端进行点击下载并保存到用户本地,任何格式的文件都可以轻松下载, 保证您直接复制代码,改个请求地址就可以使用了, 如下

    2024年02月04日
    浏览(200)
  • vue3【使用axios并封装axios请求】

    第一步:安装axios 第二步:编写请求文件 新建request.js 简单的axios封装,里面相关提示信息,自己可以引入element-plus去添加

    2024年02月04日
    浏览(59)
  • Vue3——Axios(网络请求库)

    希望大家看完觉得有用的话点赞、关注和收藏,感谢!!! axios可以在浏览器和node里面用 原生的问题:无法在node里使用,fetch是在浏览器里使用的。(但是原生可以帮助我们理解。) 1.安装axios 2.创建service文件夹并在里面创建index.js,import axios,然后创建封装axios的类并导出创建

    2024年02月05日
    浏览(37)
  • Vue3+Axios网络请求封装

    本文将详细介绍一款基于Axios+Typescript封装的网络请求库,该库可以自动携带token、拦截请求和响应等操作,并能够处理请求重复、超时和错误状态码等异常情况。 Axios 是基于Node.js的HTTP客户端,也是一款广泛使用的网络请求库。它具有使用简单、可扩展性高、易用性好等特点

    2024年02月07日
    浏览(44)
  • @PathVariable、@PathParam、@RequestBody接收axios传递的请求参数;后端接收前端传递过来的参数

    目录 一、前言 :Content-Type 类型    (1)、 application/x-www-form-urlencoded 类型 (2)、application/json 类型 二、@PathVariable 二、@PathParam  三、@RequestBody  四、后端发送数据给前端 五、注意事项         请求参数以key-value的形式传输         请求参数以JOSN串的形式传输         ax

    2024年01月18日
    浏览(46)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(68)
  • Vue3的axios请求封装,请求拦截,相应拦截

    对于三者放在Service.js中封装,方便使用 axios.create  的作用是创建一个新的  axios  实例,该实例可以具有自定义配置。通过使用  axios.create ,您可以为任何 API 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加

    2024年02月03日
    浏览(43)
  • Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

    Axios 是一个流行的基于 Promise 的 HTTP 客户端库,用于在浏览器和 Node.js 中发出 HTTP 请求。 Axios 还支持请求和响应的拦截器。接下来通过这篇文章,我们一起来学习和了解一下 Axios 拦截器和并发请求,通过实际代码来介绍如何使用 Axios 拦截器。 拦截器会在发生响应请求之前和

    2024年02月10日
    浏览(43)
  • Vue3.0(八):网络请求库axios

    axios官网 功能特点 在浏览器中发送 XMLHttpRequests请求 在node.js中发送http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求方式 axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[,

    2024年02月21日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包