【Vue】Vue+SpringBoot Axios网络请求

秃头的少女

已于 2023-05-07 13:53:52 修改

阅读量179

点赞数 1

于 2023-03-28 00:28:14 首次发布

本文链接：https://blog.csdn.net/m0_62956576/article/details/129806854

版权

该文介绍了如何在Vue项目中通过main.js配置axios请求后端API，设置默认基础URL为本地8088端口。在组件中利用生命周期函数created进行网络请求，获取后端/user/findAll接口的数据。后端使用SpringBoot，通过application.properties设置不同端口避免冲突，并用@RestController和@CrossOrigin注解处理控制器和跨域问题。

摘要由CSDN通过智能技术生成

前端Vue

在main.js文件中配置后端端口号

import axios from 'axios'

//配置请求根地址
axios.default.baseURL = "http://localhost:8088"

//自定义属性$http
//将axios作为全局的自定义属性，每个组件可在内部直接访问
//axios不需额外在每个组件的script中导入axios
Vue.protptype.$http = axios;

在组件的created生命周期函数中进行网络请求

<template>
  <div>
    <el-table :data="tableData">
      <el-table-colomn lable="ID" slot-scope="{row}">
        {{row.id}}
      </el-table-colomn>
      <el-table-colomn lable="name" slot-scope="{row}">
        {{row.name}}
      </el-table-colomn>
    </el-table>
  </div>            
</template>
<script>
export default{
  data(){
    return {
      tableData: []
    }
  },
  created:function(){
    //对应后端相应地址
    //在main.js文件中定义过$http，因此this.$http=axios，axios不需额外导入
    //get自动连接main.js文件中的baseURL
    this.$http.get("/user/findAll").then((response) => {
      //根据后端返回的数据
      //从后端拿到的数据赋值给tableData
      this.tableData = response.data
    }
  }
}
</script>

后端SpringBoot

在application.properties中修改端口号，避免与前端端口号冲突

server.port = 8088

controller控制类

@RestController
@RequestMapping("/user")
//解决跨域问题
@CrossOrigin
public class UserController{
    
    @Autowired
    UserMapper userMapper;

    @GetMapping("/findAll")
    public List<User> find() {
        return userMapper.selectAllUser();
    }

}