vue与Spring boot数据交互例子【简单版】

以下是一个简单的例子，展示了如何在Vue.js前端和Spring Boot后端之间进行数据交互。

后端（Spring Boot）:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class GreetingController {
 
    @GetMapping("/greeting")
    public Greeting greeting() {
        return new Greeting("Hello, Spring Boot!");
    }
}
 
class Greeting {
    private final String content;
 
    public Greeting(String content) {
        this.content = content;
    }
 
    public String getContent() {
        return content;
    }
}

前端（Vue.js）:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/greeting')
        .then(response => {
          this.message = response.data.content;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在这个例子中，Spring Boot后端提供了一个简单的REST API，而Vue.js前端通过axios库在created钩子函数中向该API发送GET请求，并将返回的数据赋值给本地变量，以在模板中显示。这个例子展示了前后端如何交互，但不包括详细的错误处理和优化。