Vue3 + Axios + SpringBoot 请求实现指南

作为一名经验丰富的开发者，我将向你介绍如何在 Vue3 中使用 Axios 发送请求到 SpringBoot 服务。以下是整个流程的步骤和代码示例。

步骤流程

以下是实现 Vue3 + Axios + SpringBoot 请求的步骤：

步骤 描述
1 安装 Axios
2 创建 Vue3 组件
3 在 Vue3 组件中使用 Axios 发送请求
4 在 SpringBoot 中创建控制器和方法
5 测试请求

代码实现

1. 安装 Axios

在 Vue3 项目中，首先需要安装 Axios：

npm install axios

2. 创建 Vue3 组件

创建一个 Vue3 组件，例如 HelloWorld.vue：

<template>
  <div>
    {{ message }}
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8080/api/data')
        .then(response => {
          this.message = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>
  • <template> 标签定义了组件的 HTML 结构。
  • <script> 标签中导入了 Axios，并定义了组件的数据和方法。
  • fetchData 方法使用 Axios 发送 GET 请求到 SpringBoot 服务。

3. 在 SpringBoot 中创建控制器和方法

在 SpringBoot 项目中，创建一个控制器 DataController.java：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DataController {

  @GetMapping("/api/data")
  public String getData() {
    return "Hello from SpringBoot!";
  }
}
  • @RestController 注解表示这是一个控制器类。
  • @GetMapping("/api/data") 注解表示处理 GET 请求，并映射到 /api/data 路径。
  • getData 方法返回一个字符串。

4. 测试请求

启动 SpringBoot 服务和 Vue3 应用，点击按钮发送请求，查看控制台输出。

5. 序列图

以下是请求的序列图：

sequenceDiagram
  participant V as Vue3
  participant A as Axios
  participant S as SpringBoot

  V->>A: 发送 GET 请求
  A->>S: 请求 /api/data
  S->>A: 返回数据
  A->>V: 处理响应

结尾

通过以上步骤，你已经学会了如何在 Vue3 中使用 Axios 发送请求到 SpringBoot 服务。希望这篇文章对你有所帮助。如果你有任何问题或需要进一步的帮助，请随时联系我。