java和vue怎么用Axios实现前后端交互

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js。它可以让我们更方便地在前端和后端之间进行数据交互。

在 Java 后端，我们可以使用 Spring Boot 框架来构建 RESTful API，然后使用 Axios 在 Vue 中进行调用。以下是一个简单的示例：

1. 在 Java 后端中，我们可以使用 Spring Boot 来创建一个简单的 RESTful API：

@RestController
@RequestMapping("/api")
public class ExampleController {

    @GetMapping("/example")
    public String getExample() {
        return "Hello from the backend!";
    }
}

2. 在 Vue 中，我们可以使用 Axios 发起 GET 请求来获取后端数据：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    axios
      .get('/api/example')
      .then(response => {
        this.message = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

在这个示例中，我们使用了 Axios 的 GET 方法来获取后端数据，并将返回值赋给了 Vue 的 data 属性 message。如果请求失败，则会在控制台中输出错误信息。

需要注意的是，我们在 Vue 中发起的请求的 URL 是相对于当前页面的，因此需要在 URL 前面加上斜杠 /，以表示根路径。