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

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

1、使用axios请求后端接口

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

javascript 复制代码
# 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发起后端请求。后端接口如图所示:

通过axios获取到数据后赋值到data数据即可,页面引用data数据进行展示。

javascript 复制代码
<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文件中配置代理(没有新建一个即可),将本地路径请求转发到目标地址,这样就可以规避掉浏览器同源策略。同源只是浏览器的限制,即便跨域后端还是可以收到请求数据的。

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

3、页面table渲染

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

css 复制代码
<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>

最终效果如下,如果参照本文出现任何与预期不一致的地方,那一定是本文写错了,还请参见各个组件官方文档。

相关推荐
小林学习编程2 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
IT_102432 分钟前
Spring Boot项目开发实战销售管理系统——系统设计!
大数据·spring boot·后端
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
Touper.2 小时前
SpringBoot -- 自动配置原理
java·spring boot·后端
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
一只鹿鹿鹿2 小时前
信息化项目验收,软件工程评审和检查表单
大数据·人工智能·后端·智慧城市·软件工程
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron