首先，介绍一下软件准备工作
1.vscode
2.maven
3.vue搭建：node.js+yarn+vite
一.后端搭建
打开vscode,建立一个springboot项目，参考链接：sping boot项目搭建
建立一个项目，目录结构如下：
helloController.java
package example.example1;import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@CrossOrigin // 允许所有跨域请求（仅用于开发）
public class HelloController {@GetMapping("/hello")public String hello() {return "你好，Spring Boot! 当前时间: " + new java.util.Date();}
}访问浏览器：http://localhost:8080/hello
运行界面如下：
二.前端搭建
打开一个文件夹，建立一个vue项目，参考链接：vue项目创建
项目目录结构如下：
public/index.html如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>极简Vue+SpringBoot</title>
</head>
<body><div id="app"></div>
</body>
</html>Components/App.vue如下：
<template><div><h1>Vite + Spring Boot 测试</h1><button @click="fetchData">获取后端数据</button><div v-if="message">{{ message }}</div><div v-if="error" style="color: red">{{ error }}</div></div>
</template><script>
export default {data() {return {message: '',error: ''}},methods: {async fetchData() {try {const response = await fetch('/api/hello') // 注意 /api 前缀this.message = await response.text()this.error = ''} catch (err) {this.error = '请求失败: ' + err.message}}}
}
</script>main.js如下：
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
vite.config.js如下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'http://localhost:8080', // 你的 Spring Boot 后端地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀}}}
})运行界面如下：
点击获取后台数据：
这样就完成了前后端分离啦。
注意：要先运行后端再运行前端。
关键步骤总结：
一.后端搭建
1.首先，搭建后端，在servlet里面设置@CrossOrigin
2.用@GetMapping(）定义访问映射
编写@GetMapping("/hello")定义访问的映射
二.前端搭建：
1.用fetch方法来获取数据
fetch 是浏览器内置的一个用于发送网络请求（如 HTTP 请求）的函数。它可以用来向服务器获取数据或提交数据，常用于前后端分离项目中前端与后端的通信。
const response = await fetch('/api/hello')
这行代码的意思是：向 /api/hello 这个接口发送一个 GET 请求，等待服务器返回响应，然后把响应结果赋值给 response 变量。
2.其中，api接口是自己在vite.config.js中定义的
proxy: {
'/api': {
target: 'http://localhost:8080', // 你的 Spring Boot 后端地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀
}
}
这样访问也就是访问了http://localhost:8080/hello
当然，你也可以选择把接口直接定义为hello,这样地址就不用重写了，就可以写成，
proxy: {
'/hello': {
target: 'http://localhost:8080', // 你的 Spring Boot 后端地址
changeOrigin: true
}
}
不过，这样 const response = await fetch('/api/hello') 也要改成 const response = await fetch('/hello')
