利用SpringBoot和Vue实现前后端分离

以下是一个简化的Spring Boot后端和Vue前端分离项目的代码示例。

Spring Boot后端代码示例（Java）：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class HelloController {
 
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Vue!";
    }
}

Vue前端代码示例（JavaScript）：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch('/hello')
        .then(response => response.json())
        .then(data => {
          this.message = data;
        });
    }
  }
};
</script>

在这个例子中，Spring Boot提供了一个简单的REST API，而Vue前端通过fetch函数调用这个API，并将返回的数据显示在页面上。这个例子展示了前后端分离开发的基本流程，并且演示了如何通过API交换数据。