首先，介绍一下软件准备工作
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')