1. 环境搭建与项目初始化全栈开发的第一步就是搭建开发环境。我建议从Java 17和Node.js 16开始这两个版本是目前最稳定的选择。安装完基础环境后用IDEA创建一个Spring Boot 3项目时记得勾选Spring Web和Lombok依赖这能省去不少样板代码的编写。Vue 3这边我推荐使用Vite作为构建工具它比传统的Webpack快太多了。在终端里运行npm create vitelatest命令选择Vue模板不到1分钟就能初始化好项目。第一次启动时我被它的热更新速度惊艳到了 - 修改代码后几乎瞬间就能在浏览器看到变化。前后端项目结构建议这样组织project-root/ ├── backend/ # Spring Boot项目 ├── frontend/ # Vue 3项目 └── README.md2. Spring Boot 3核心配置Spring Boot 3的自动配置能力更强大了。我在application.yml中通常会这样配置server: port: 8080 servlet: context-path: /api spring: datasource: url: jdbc:mysql://localhost:3306/app_db username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver对于跨域问题现在可以直接用CrossOrigin注解解决。但更推荐的方式是配置全局CORS规则Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:5173) .allowedMethods(*); } }; }3. Vue 3组合式API实战Vue 3的组合式API用起来特别顺手。比如实现一个用户列表功能script setup import { ref, onMounted } from vue import axios from axios const users ref([]) const loading ref(false) onMounted(async () { loading.value true try { const res await axios.get(/api/users) users.value res.data } finally { loading.value false } }) /scriptPinia的状态管理也比Vuex简单多了。创建一个store只需要// stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: null }), actions: { setToken(token) { this.token token } } })4. 前后端数据交互Axios的封装我通常这样做// src/utils/request.js import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use(config { const store useUserStore() if (store.token) { config.headers.Authorization Bearer ${store.token} } return config }) // 响应拦截器 service.interceptors.response.use( response response.data, error { return Promise.reject(error) } ) export default service后端接口开发推荐使用Spring Boot的RestControllerRestController RequestMapping(/users) RequiredArgsConstructor public class UserController { private final UserService userService; GetMapping public ResponseEntityListUser listUsers() { return ResponseEntity.ok(userService.findAll()); } }5. 项目打包与部署Spring Boot打包很简单运行mvn clean package就会生成可执行的jar文件。部署时用java -jar命令启动即可我习惯加上生产环境配置java -jar app.jar --spring.profiles.activeprodVue项目打包前要修改vite.config.jsexport default defineConfig({ base: /static/, // 静态资源路径 build: { outDir: ../backend/src/main/resources/static // 输出到Spring Boot静态目录 } })Nginx配置示例server { listen 80; server_name example.com; location / { root /var/www/html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; } }6. 常见问题解决方案数据库连接池配置是个容易踩坑的地方。我推荐HikariCP的配置spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 1800000前端路由遇到404问题需要在Spring Boot中添加Configuration public class WebConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{path:[^\\.]*}) .setViewName(forward:/index.html); } }7. 性能优化技巧开启Spring Boot的Gzip压缩server: compression: enabled: true mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json min-response-size: 1024Vue的路由懒加载能显著提升首屏速度const routes [ { path: /dashboard, component: () import(./views/Dashboard.vue) } ]8. 安全最佳实践Spring Security的基础配置Configuration EnableWebSecurity public class SecurityConfig { Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http .csrf().disable() .authorizeRequests() .antMatchers(/api/auth/**).permitAll() .anyRequest().authenticated() .and() .sessionManagement() .sessionCreationPolicy(SessionCreationPolicy.STATELESS); return http.build(); } }前端敏感信息要放在.env文件中VITE_API_BASE_URL/api VITE_DEBUG_MODEfalse
【实战指南】Spring Boot 3 + Vue 3全栈开发：从零构建企业级应用
1. 环境搭建与项目初始化全栈开发的第一步就是搭建开发环境。我建议从Java 17和Node.js 16开始这两个版本是目前最稳定的选择。安装完基础环境后用IDEA创建一个Spring Boot 3项目时记得勾选Spring Web和Lombok依赖这能省去不少样板代码的编写。Vue 3这边我推荐使用Vite作为构建工具它比传统的Webpack快太多了。在终端里运行npm create vitelatest命令选择Vue模板不到1分钟就能初始化好项目。第一次启动时我被它的热更新速度惊艳到了 - 修改代码后几乎瞬间就能在浏览器看到变化。前后端项目结构建议这样组织project-root/ ├── backend/ # Spring Boot项目 ├── frontend/ # Vue 3项目 └── README.md2. Spring Boot 3核心配置Spring Boot 3的自动配置能力更强大了。我在application.yml中通常会这样配置server: port: 8080 servlet: context-path: /api spring: datasource: url: jdbc:mysql://localhost:3306/app_db username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver对于跨域问题现在可以直接用CrossOrigin注解解决。但更推荐的方式是配置全局CORS规则Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:5173) .allowedMethods(*); } }; }3. Vue 3组合式API实战Vue 3的组合式API用起来特别顺手。比如实现一个用户列表功能script setup import { ref, onMounted } from vue import axios from axios const users ref([]) const loading ref(false) onMounted(async () { loading.value true try { const res await axios.get(/api/users) users.value res.data } finally { loading.value false } }) /scriptPinia的状态管理也比Vuex简单多了。创建一个store只需要// stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: null }), actions: { setToken(token) { this.token token } } })4. 前后端数据交互Axios的封装我通常这样做// src/utils/request.js import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use(config { const store useUserStore() if (store.token) { config.headers.Authorization Bearer ${store.token} } return config }) // 响应拦截器 service.interceptors.response.use( response response.data, error { return Promise.reject(error) } ) export default service后端接口开发推荐使用Spring Boot的RestControllerRestController RequestMapping(/users) RequiredArgsConstructor public class UserController { private final UserService userService; GetMapping public ResponseEntityListUser listUsers() { return ResponseEntity.ok(userService.findAll()); } }5. 项目打包与部署Spring Boot打包很简单运行mvn clean package就会生成可执行的jar文件。部署时用java -jar命令启动即可我习惯加上生产环境配置java -jar app.jar --spring.profiles.activeprodVue项目打包前要修改vite.config.jsexport default defineConfig({ base: /static/, // 静态资源路径 build: { outDir: ../backend/src/main/resources/static // 输出到Spring Boot静态目录 } })Nginx配置示例server { listen 80; server_name example.com; location / { root /var/www/html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; } }6. 常见问题解决方案数据库连接池配置是个容易踩坑的地方。我推荐HikariCP的配置spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 1800000前端路由遇到404问题需要在Spring Boot中添加Configuration public class WebConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/{path:[^\\.]*}) .setViewName(forward:/index.html); } }7. 性能优化技巧开启Spring Boot的Gzip压缩server: compression: enabled: true mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json min-response-size: 1024Vue的路由懒加载能显著提升首屏速度const routes [ { path: /dashboard, component: () import(./views/Dashboard.vue) } ]8. 安全最佳实践Spring Security的基础配置Configuration EnableWebSecurity public class SecurityConfig { Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http .csrf().disable() .authorizeRequests() .antMatchers(/api/auth/**).permitAll() .anyRequest().authenticated() .and() .sessionManagement() .sessionCreationPolicy(SessionCreationPolicy.STATELESS); return http.build(); } }前端敏感信息要放在.env文件中VITE_API_BASE_URL/api VITE_DEBUG_MODEfalse
