1. 项目概述Spring BootVue项目从零入手是一个典型的前后端分离开发实战教程旨在帮助开发者掌握现代Web应用开发的核心技术栈。作为一名长期从事全栈开发的工程师我发现这种架构组合已经成为企业级应用开发的事实标准。Spring Boot作为Java生态中最流行的后端框架提供了快速构建生产级应用的能力而Vue.js作为渐进式前端框架以其轻量、灵活的特性赢得了大量开发者的青睐。两者结合既能保证后端服务的稳定性又能提供出色的前端用户体验。2. 技术选型解析2.1 为什么选择Spring BootSpring Boot的自动配置和起步依赖特性让开发者能够快速搭建项目骨架。我在实际项目中最欣赏的几个特点内嵌服务器(Tomcat/Jetty)支持无需部署WAR文件自动化的Spring配置减少了大量样板代码丰富的starter依赖轻松集成各种企业级组件完善的生产就绪特性(健康检查、指标监控等)2.2 为什么选择Vue.jsVue.js作为前端框架的优势在于渐进式架构可以从小型功能逐步扩展到完整SPA响应式数据绑定简化了DOM操作组件化开发模式提高代码复用性丰富的生态系统(Vuex, Vue Router等)相比React和Angular更平缓的学习曲线3. 开发环境准备3.1 后端环境配置# 使用SDKMAN安装Java curl -s https://get.sdkman.io | bash source $HOME/.sdkman/bin/sdkman-init.sh sdk install java 11.0.12-open # 验证安装 java -version3.2 前端环境配置# 安装Node.js (推荐使用nvm管理版本) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash nvm install 16.14.2 # 安装Vue CLI npm install -g vue/cli3.3 IDE推荐配置IntelliJ IDEA Ultimate (后端开发)VS Code (前端开发) 必备插件Vetur (Vue语法支持)ESLint (代码规范检查)Prettier (代码格式化)4. 项目初始化4.1 创建Spring Boot项目使用Spring Initializr (https://start.spring.io) 生成项目骨架推荐选择Java 11Spring Boot 2.7.x依赖项Spring WebLombokSpring Data JPAMySQL Driver4.2 创建Vue项目vue create frontend # 选择配置 # - Babel # - Router # - Vuex # - CSS Pre-processors (Sass/SCSS) # - ESLint Prettier5. 前后端联调配置5.1 解决跨域问题在Spring Boot中添加配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8080) .allowedMethods(*) .allowedHeaders(*) .allowCredentials(true); } }5.2 配置代理开发服务器在Vue项目的vue.config.js中添加module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }6. 典型功能实现6.1 用户认证模块后端实现RestController RequestMapping(/api/auth) public class AuthController { PostMapping(/login) public ResponseEntity? login(RequestBody LoginRequest request) { // 实现认证逻辑 String token jwtTokenUtil.generateToken(userDetails); return ResponseEntity.ok(new JwtResponse(token)); } }前端实现// store/modules/auth.js const actions { async login({ commit }, credentials) { const response await axios.post(/api/auth/login, credentials) commit(SET_TOKEN, response.data.token) localStorage.setItem(token, response.data.token) axios.defaults.headers.common[Authorization] Bearer ${response.data.token} } }6.2 数据表格分页查询后端分页实现GetMapping(/users) public PageUser getUsers( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size) { return userRepository.findAll(PageRequest.of(page, size)); }前端分页实现template el-table :datatableData !-- 表格列定义 -- /el-table el-pagination current-changehandlePageChange :current-pagepagination.current :page-sizepagination.size :totalpagination.total /el-pagination /template script export default { data() { return { tableData: [], pagination: { current: 1, size: 10, total: 0 } } }, methods: { async fetchData() { const res await axios.get(/api/users, { params: { page: this.pagination.current - 1, size: this.pagination.size } }) this.tableData res.data.content this.pagination.total res.data.totalElements }, handlePageChange(page) { this.pagination.current page this.fetchData() } } } /script7. 项目优化技巧7.1 后端性能优化启用GZIP压缩# application.properties server.compression.enabledtrue server.compression.mime-typestext/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json使用Spring Cache抽象Cacheable(products) public Product getProductById(Long id) { return productRepository.findById(id).orElse(null); }7.2 前端性能优化路由懒加载const UserList () import(./views/UserList.vue)按需引入UI组件import { Button, Table, Pagination } from element-ui使用Webpack分包策略// vue.config.js configureWebpack: { optimization: { splitChunks: { chunks: all } } }8. 常见问题解决8.1 跨域问题排查检查后端CORS配置是否正确确认前端请求URL是否正确检查请求头是否包含Origin使用Postman测试API是否正常工作8.2 Vue组件不更新确保响应式数据使用正确// 错误方式 this.someObject.property newValue // 正确方式 this.$set(this.someObject, property, newValue)检查Vuex状态变更是否通过mutation8.3 Spring Boot热部署失效添加devtools依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId scoperuntime/scope optionaltrue/optional /dependency启用IDE的自动构建功能设置spring.devtools.restart.enabledtrue9. 项目部署方案9.1 后端部署打包可执行JARmvn clean package使用Docker部署FROM openjdk:11-jre COPY target/*.jar app.jar ENTRYPOINT [java,-jar,/app.jar]9.2 前端部署生产环境构建npm run buildNginx配置示例server { listen 80; server_name yourdomain.com; location / { root /path/to/dist; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; } }10. 进阶开发建议后端API文档化集成Swagger或SpringDoc OpenAPI使用Knife4j增强UI体验前端状态管理复杂应用使用Vuex进行状态管理考虑使用Pinia作为Vuex的替代方案微服务演进将单体应用拆分为微服务使用Spring Cloud组件(Feign, Eureka等)前端微前端架构使用Module Federation实现微前端考虑qiankun框架集成持续集成/持续部署配置GitHub Actions或Jenkins流水线自动化测试和部署流程在实际项目开发中我通常会先建立好前后端的通信规范定义清晰的API契约。使用OpenAPI/Swagger可以很好地解决这个问题。同时前后端团队应该保持密切沟通特别是在接口变更时要及时同步更新文档和客户端代码。