当前位置：首页 > news >正文

Vue+spring boot前后端分离项目搭建---小白入门

news 2025/7/10 15:10:52

首先，介绍一下软件准备工作

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,这样地址就不用重写了，就可以写成，