这类前后端分离实战项目最值得关注的不是框架本身而是如何把一个“毕业设计”或“学习项目”真正跑起来并且理解从环境搭建、接口联调到部署上线的完整链路。很多新手卡在第一步环境配置或者代码下载后一堆报错最后项目没跑起来信心先没了。我建议把这类项目拆成三个阶段来看环境准备与项目启动、核心功能与代码理解、部署与扩展思考。今天我们就以“SpringBoot3 Vue3 前后端分离个人博客/物业管理系统”这个典型组合为例走一遍从零到一的实操路径。如果你手头有类似的毕业设计或学习项目可以直接对照着来如果是完全的新手跟着步骤走也能避开80%的常见坑。最关键的一点不要一上来就试图读懂所有代码。先确保项目能在你的电脑上成功运行看到登录页和基础功能这是建立信心的第一步。之后再带着问题去读代码效率会高得多。1. 环境准备别在第一步就卡住环境是实战项目的基石很多“跑不起来”的问题都源于环境不匹配或依赖缺失。对于 SpringBoot3 Vue3 项目我们需要准备后端 Java 环境、前端 Node.js 环境以及数据库。1.1 后端环境清单与验证后端基于 SpringBoot 3.x这要求你的 JDK 版本必须是17 或更高。这是硬性要求版本不对会导致编译失败。JDK 安装与验证去 Oracle 官网或 Adoptium 等开源站点下载 JDK 17如 JDK 17 LTS 或 JDK 21 LTS。安装后打开命令行CMD 或 Terminal执行java -version和javac -version。确保输出的版本号大于等于 17。如果系统里有多个 JDK需要确认环境变量JAVA_HOME指向的是正确的版本。可以通过echo %JAVA_HOME%(Windows) 或echo $JAVA_HOME(Mac/Linux) 检查。构建工具Maven 或 Gradle项目大概率使用 Maven 进行依赖管理和构建。去 Apache Maven 官网下载解压并配置MAVEN_HOME和PATH。验证mvn -v应显示版本信息。国内网络环境可能需要配置 Maven 镜像仓库修改conf/settings.xml文件添加阿里云等国内镜像源能极大加快依赖下载速度。如果项目使用 Gradle同理安装并配置。数据库准备个人博客或物业管理系统通常使用 MySQL。建议安装 MySQL 8.0 或更高版本。安装后启动 MySQL 服务并用 root 用户登录。根据项目README.md或sql目录下的脚本文件创建项目所需的数据库和用户。命令通常类似CREATE DATABASE blog_db CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; CREATE USER blog_user% IDENTIFIED BY your_password; GRANT ALL PRIVILEGES ON blog_db.* TO blog_user%; FLUSH PRIVILEGES;关键点注意数据库的字符集设置为utf8mb4以支持存储 Emoji 和所有 Unicode 字符避免中文乱码。1.2 前端环境清单与验证前端基于 Vue 3 和配套的构建工具。Node.js 与 npm去 Node.js 官网下载LTS长期支持版本如 18.x 或 20.x。安装包会同时安装 Node.js 和 npm。验证node -v和npm -v应显示版本号。注意某些老项目可能对 Node.js 版本敏感如果运行出错可以尝试使用nvm(Node Version Manager) 切换版本。但 Vue 3 项目对新版 Node.js 兼容性通常较好。包管理工具加速npm 默认源在国内可能很慢。建议立即配置淘宝镜像npm config set registry https://registry.npmmirror.com也可以选择使用yarn或pnpm它们速度更快、磁盘空间利用更高效。安装后同样需要配置国内镜像。IDE 或编辑器后端IntelliJ IDEA (社区版免费)、Eclipse 或 VS Code需安装 Java 插件包。前端VS Code 是主流选择安装 Volar (Vue 3 官方推荐扩展)、ESLint、Prettier 等插件能极大提升开发体验。我个人的习惯用 IDEA 打开后端项目用 VS Code 打开前端项目。两个编辑器并行调试和修改互不干扰。1.3 项目获取与初步检查拿到项目代码可能是 ZIP 包或 Git 仓库后先做以下检查结构确认标准的分离项目会有两个独立的文件夹例如blog-backend(SpringBoot) 和blog-frontend(Vue)。确保你解压或克隆到了正确的位置。配置文件在后端项目的src/main/resources/目录下找到application.yml或application.properties文件。这里配置了数据库连接、服务器端口等。你需要将里面的数据库连接信息URL、用户名、密码修改成你自己在 1.1.3 步骤中创建的。依赖文件后端查看pom.xml前端查看package.json。这是项目的“菜单”所有需要的库都在这里声明。注意很多新手在这一步直接运行然后报“无法找到数据源”或“端口被占用”错误。问题九成出在配置文件没改对。先花5分钟核对application.yml和你的本地数据库信息。2. 后端启动与核心接口调试环境就绪后我们优先启动后端。因为前端需要调用后端的 API后端先跑通前端联调才有意义。2.1 导入项目与依赖下载用 IDEA 打开后端项目文件夹。IDEA 会自动识别为 Maven/Gradle 项目并开始下载依赖观察底部进度条。第一次下载依赖可能需要较长时间取决于网速和镜像配置。耐心等待直到控制台没有错误日志。依赖下载完成后检查项目结构。主要关注src/main/javaJava 源代码控制器(Controller)、服务(Service)、数据访问层(Mapper/Repository)都在这里。src/main/resources配置文件、静态资源、SQL 映射文件如果用了 MyBatis。pom.xml所有依赖的版本。SpringBoot 3.x 会依赖 Spring Framework 6.x注意版本一致性。2.2 数据库连接与启动应用修改配置再次确认application.yml中的数据库配置。一个典型的配置片段如下spring: datasource: url: jdbc:mysql://localhost:3306/blog_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: blog_user password: your_password driver-class-name: com.mysql.cj.jdbc.Driver请将blog_db,blog_user,your_password替换为你自己创建的信息。serverTimezone设置为Asia/Shanghai可以避免时区问题。启动主类在src/main/java下找到以Application结尾的类例如BlogApplication右键点击选择Run ‘BlogApplication‘。观察控制台启动成功的标志是看到类似以下的日志Started BlogApplication in 5.123 seconds (process running for 5.456) Tomcat started on port(s): 8080 (http) with context path 这表示 SpringBoot 内嵌的 Tomcat 服务器已在 8080 端口启动。验证健康端点打开浏览器访问http://localhost:8080/actuator/health如果项目引入了 actuator 依赖或http://localhost:8080如果项目有默认首页。如果能返回 JSON 数据或看到页面说明后端服务基本正常。2.3 使用 API 工具进行接口测试后端启动后不要急着对接前端。先用专业的 API 测试工具如Postman、Insomnia或Apifox手动测试几个核心接口这能帮你快速理解接口的请求响应格式。找到接口文档项目可能集成了 Swagger/OpenAPI。访问http://localhost:8080/swagger-ui.html或http://localhost:8080/doc.html如果用了 Knife4j。这里会以网页形式列出所有接口并可以直接测试。测试登录接口这是最常见的第一个接口。在 Swagger 页面或 Postman 中找到POST /api/login或类似的登录接口。请求体 (Body)选择raw-JSON输入类似{username:admin, password:123456}的格式具体账号密码看项目说明或数据库初始脚本。点击发送观察响应。成功通常会返回一个 JSON包含code: 200、message: “成功”、data对象里面有token字段。这个token就是后续接口的通行证。失败返回code: 500或401并带有错误信息。根据信息排查账号密码错误、用户被禁用等。测试需要认证的接口复制上一步获取到的token。在 Postman 的 “Headers” 或 “Authorization” 选项卡中添加一个头Authorization: Bearer your_token_here。然后测试一个需要登录的接口比如GET /api/user/info。如果返回用户信息说明 token 认证通过。测试增删改查接口依次测试文章列表GET、发布文章POST、修改文章PUT、删除文章DELETE等接口。重点关注请求参数是放在 URL 路径里/api/article/{id}、查询字符串里?page1size10还是请求体Body里。同时观察响应的数据结构。这个步骤至关重要。很多前后端联调的问题是因为双方对接口的请求/响应格式理解不一致。先用工具手动调通你就掌握了接口的“契约”后续前端调用时心里有底。3. 前端启动与联调实战后端接口测试无误后我们启动前端项目并让它连接到我们本地运行的后端服务。3.1 安装依赖与启动开发服务器用 VS Code 打开前端项目文件夹。打开终端Terminal确保路径在前端项目根目录。安装依赖执行npm install或yarn install或pnpm install。同样第一次安装需要时间等待完成。配置后端代理前端在开发时通常运行在独立的端口如localhost:5173而后端在localhost:8080。直接调用会产生跨域问题。解决方案是在前端项目的配置文件中设置代理。Vite 项目修改vite.config.js或vite.config.ts。Vue CLI 项目修改vue.config.js。找到server配置项下的proxy将其指向后端地址// vite.config.js 示例 export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 你的后端地址 changeOrigin: true, // rewrite: (path) path.replace(/^\/api/, ) // 如果需要重写路径 } } } })这样前端所有以/api开头的请求都会被代理到http://localhost:8080/api从而解决跨域。启动前端开发服务器执行npm run dev或yarn dev。控制台会输出本地访问地址通常是http://localhost:5173或http://localhost:3000。3.2 理解前端项目结构启动后浏览器打开前端地址你应该能看到登录页或首页。此时快速浏览一下前端项目的核心目录src/views或src/pages页面组件。Login.vue,Home.vue,ArticleList.vue等。src/components可复用的 UI 组件。如按钮、对话框、表格等。src/router路由配置。定义了 URL 路径和页面组件的映射关系。src/api这是前后端联调的核心目录。里面通常有index.js或按模块划分的 JS 文件如user.js,article.js封装了所有对后端接口的 HTTP 请求。你会看到类似axios.get(‘/api/article/list‘)的代码。src/store状态管理如果用了 Pinia 或 Vuex。用于管理全局状态如用户登录信息。src/utils工具函数比如处理 token 的存储和读取、日期格式化等。3.3 联调关键Token 管理与 API 调用前后端分离的核心是 API 调用。前端如何携带 token后端如何验证是联调成功的关键。登录与 Token 存储在前端登录页面 (Login.vue)找到表单提交的处理函数。里面会调用src/api目录下的登录接口函数。登录成功后接口返回的token需要被存储起来。通常有两种方式LocalStorage/SessionStoragelocalStorage.setItem(‘token‘, token)。简单但需注意安全性避免存储敏感信息。Cookie由后端设置HttpOnly的 Cookie更安全但前端 JavaScript 无法直接读取。存储后通常还会将 token 和用户信息存入状态管理 (Pinia/Vuex)方便其他组件使用。请求拦截器这是处理 token 的优雅方式。在src/utils或src/api的request.js或类似文件中会使用axios的拦截器。请求拦截器在每个请求发出前自动从 LocalStorage 或 Store 中取出 token并添加到请求头Authorization中。// axios 请求拦截器示例 service.interceptors.request.use( config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; }, error { return Promise.reject(error); } )响应拦截器处理通用的响应逻辑比如 token 过期返回 401时自动跳转到登录页。调用一个列表接口打开文章列表页面 (ArticleList.vue)。在created()或onMounted()生命周期钩子中你会看到它调用了getArticleList()这类方法。这个方法内部会调用src/api/article.js中封装的fetchArticleList(params)函数。该函数使用配置了拦截器的axios实例向/api/article/list发起 GET 请求并自动携带了 token。请求成功后将返回的数据列表赋值给页面的响应式数据变量如articleList页面模板就会自动渲染出表格。联调时最常见的两个问题404 错误前端请求的 URL 和后端接口路径不匹配。检查代理配置 (vite.config.js) 和 API 封装文件 (src/api/xxx.js) 中的路径。401 未授权token 未正确携带或已过期。检查请求拦截器是否工作token 是否成功存储以及后端 token 校验逻辑。4. 核心功能模块代码走读项目能跑起来之后我们就可以深入代码理解个人博客或物业管理系统几个核心模块的实现。这里以个人博客系统为例。4.1 用户认证与权限模块这是系统的安全基石。后端实现 (Spring Security JWT)登录流程在AuthController中/api/login接口接收用户名密码。UserService调用UserMapper查询数据库验证。验证通过后使用JwtUtil工具类生成一个 JWT Token 返回给前端。Token 生成JWT Token 通常包含用户ID、用户名、过期时间等信息并用一个密钥进行签名。权限校验通过一个JwtAuthenticationFilter过滤器。它拦截所有请求从Authorization头中取出 token 进行解析和验证。验证通过后将用户信息存入 SecurityContext供后续业务使用。接口权限控制在SecurityConfig配置类中使用http.authorizeHttpRequests()来配置哪些接口需要登录哪些需要特定角色如ADMIN。前端配合登录后存储 token。通过路由守卫 (router.beforeEach) 检查访问的页面是否需要登录如果未登录则跳转回登录页。根据用户角色从 token 解析或/api/user/info接口获取动态渲染侧边栏菜单或按钮权限例如“发布文章”按钮只对管理员显示。4.2 博客文章管理模块 (CRUD)这是博客系统的核心业务。后端分层架构Controller 层 (ArticleController)接收前端请求进行参数校验可使用Valid注解调用 Service 层返回统一格式的响应如Result.success(data)。Service 层 (ArticleService)处理核心业务逻辑。例如发布文章前检查用户权限更新文章时记录修改时间删除文章时可能涉及关联评论的级联操作逻辑删除更常见。Mapper/Repository 层 (ArticleMapper)负责与数据库交互。这里会使用 MyBatis-Plus 或 Spring Data JPA 的接口定义 SQL 操作。MyBatis-Plus 提供了强大的条件构造器可以方便地构建动态查询。关键代码片段示例// ArticleController.java RestController RequestMapping(/api/article) public class ArticleController { Autowired private ArticleService articleService; GetMapping(/list) public ResultPageArticleVO list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageArticleVO page articleService.getArticleList(pageNum, pageSize, keyword); return Result.success(page); } PostMapping PreAuthorize(hasRole(ADMIN)) // 权限注解只有管理员能发布 public Result create(Valid RequestBody ArticleDTO articleDTO) { articleService.createArticle(articleDTO); return Result.success(); } }// ArticleServiceImpl.java Service public class ArticleServiceImpl implements ArticleService { Autowired private ArticleMapper articleMapper; Override public PageArticleVO getArticleList(Integer pageNum, Integer pageSize, String keyword) { PageArticle page new Page(pageNum, pageSize); LambdaQueryWrapperArticle wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(keyword), Article::getTitle, keyword) .orderByDesc(Article::getCreateTime); PageArticle articlePage articleMapper.selectPage(page, wrapper); // 将 Article 转换为 ArticleVO (视图对象可能包含作者名等额外信息) return convertToVoPage(articlePage); } }前端对应实现ArticleList.vue使用onMounted调用fetchArticleList获取分页数据并用el-table或自定义组件渲染。ArticleForm.vue一个表单组件用于创建和编辑文章。使用v-model绑定数据提交时调用createArticle或updateArticleAPI。4.3 前端路由与状态管理路由管理 (Vue Router)在src/router/index.js中定义路由。对于需要权限的页面可以配置meta: { requiresAuth: true }。在全局路由守卫中检查requiresAuth和用户的登录状态。实现动态路由根据用户角色从后端获取有权限的菜单列表然后通过router.addRoute()动态添加路由规则。状态管理 (Pinia)创建useUserStore存储用户信息token, userInfo。创建useAppStore存储应用级状态如侧边栏折叠状态、主题色。在组件中通过const userStore useUserStore()引入并通过userStore.token访问或userStore.setToken()修改状态。状态变化会自动触发依赖该状态的组件更新。5. 部署上线与生产环境考量学习项目的最后一步是尝试将其部署到一个你能访问的环境理解开发和生产环境的差异。5.1 后端打包与部署打包在项目根目录执行mvn clean package -DskipTests。这会在target目录下生成一个*.jar文件例如blog-backend-0.0.1-SNAPSHOT.jar。这个 jar 包是独立的包含了应用本身和所有依赖。生产环境配置绝对不要直接使用开发环境的application.yml。SpringBoot 支持多环境配置。创建application-prod.yml文件。在其中配置生产数据库地址、用户名密码与开发环境不同。配置服务器端口、日志路径、文件上传目录等。在打包或运行时通过--spring.profiles.activeprod参数激活生产配置。运行在服务器上或本地测试确保安装了 JDK 17然后运行nohup java -jar blog-backend-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod app.log 21 nohup和让程序在后台运行。 app.log 21将标准输出和错误输出都重定向到app.log文件方便查看日志。使用反向代理通常不会直接用 8080 端口对外服务。会用 Nginx 作为反向代理。# nginx 配置示例 server { listen 80; server_name your-domain.com; # 或服务器IP location /api/ { proxy_pass http://localhost:8080; # 转发到后端SpringBoot应用 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 前端静态资源部署配置见下一节 }5.2 前端打包与部署打包在前端项目根目录执行npm run build。这会在dist目录生成优化后的静态文件HTML, JS, CSS。部署将dist文件夹内的所有文件上传到你的 Web 服务器如 Nginx, Apache的网站根目录。Nginx 配置server { listen 80; server_name your-domain.com; # 或服务器IP root /path/to/your/dist; # 前端打包文件路径 index index.html; location / { try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } location /api/ { proxy_pass http://localhost:8080; # 后端API地址 # ... 其他proxy配置 } }try_files指令对于 Vue Router 的history模式至关重要它确保前端路由在刷新页面时不会返回 404。前端所有/api开头的请求都会被 Nginx 转发到后端服务。5.3 生产环境关键检查点数据库使用生产环境专用的数据库实例做好定期备份。密码要强不要用默认的root用户。配置文件确保application-prod.yml等配置文件不被提交到 Git通常通过环境变量或配置中心管理。日志配置合理的日志级别和滚动策略将日志输出到文件便于问题排查。跨域生产环境下前端和后端通常共用一个域名通过 Nginx 反向代理区分路径因此不存在跨域问题。开发时的代理配置是为了方便。前端资源优化build后生成的 JS 文件可能很大可以考虑配置路由懒加载、CDN 引入大型库、开启 Gzip 压缩等。6. 从“能跑”到“理解”进阶学习建议当你成功运行并部署了项目后可以尝试以下练习加深理解修改一个功能例如给博客文章增加“浏览量”统计。这需要你在数据库article表添加view_count字段。修改后端实体类 (Article.java)、Mapper 接口和 XML如果用了 MyBatis。在ArticleService中创建increaseViewCount(Long articleId)方法。在ArticleController中新增一个GET /api/article/{id}/view接口来触发计数。在前端文章详情页调用这个新接口。在文章列表和详情页显示浏览量。修复一个 Bug故意在代码中引入一个常见错误如空指针异常、SQL 注入风险使用#{}而非${}可避免、或前端响应式数据更新问题然后尝试调试并修复它。更换一个组件库项目可能用了 Element Plus 或 Ant Design Vue。尝试将其部分组件替换成另一个你感兴趣的 UI 库理解组件库的封装和引入方式。思考架构为什么采用 Controller-Service-Mapper 分层每层的职责是什么如果让你设计一个更复杂的权限系统如 RBAC你会如何设计数据库表和接口这个 SpringBoot3 Vue3 前后端分离项目本质上是一个现代 Web 应用的标准实践模板。把它吃透的意义远大于仅仅完成一个毕业设计。你真正收获的是一套从环境搭建、本地开发、调试联调到部署上线的完整工程能力。下次遇到任何新的前后端分离项目你都能快速找到切入点而不是对着陌生的代码无从下手。
SpringBoot3+Vue3前后端分离项目实战：从环境搭建到部署上线全链路解析
这类前后端分离实战项目最值得关注的不是框架本身而是如何把一个“毕业设计”或“学习项目”真正跑起来并且理解从环境搭建、接口联调到部署上线的完整链路。很多新手卡在第一步环境配置或者代码下载后一堆报错最后项目没跑起来信心先没了。我建议把这类项目拆成三个阶段来看环境准备与项目启动、核心功能与代码理解、部署与扩展思考。今天我们就以“SpringBoot3 Vue3 前后端分离个人博客/物业管理系统”这个典型组合为例走一遍从零到一的实操路径。如果你手头有类似的毕业设计或学习项目可以直接对照着来如果是完全的新手跟着步骤走也能避开80%的常见坑。最关键的一点不要一上来就试图读懂所有代码。先确保项目能在你的电脑上成功运行看到登录页和基础功能这是建立信心的第一步。之后再带着问题去读代码效率会高得多。1. 环境准备别在第一步就卡住环境是实战项目的基石很多“跑不起来”的问题都源于环境不匹配或依赖缺失。对于 SpringBoot3 Vue3 项目我们需要准备后端 Java 环境、前端 Node.js 环境以及数据库。1.1 后端环境清单与验证后端基于 SpringBoot 3.x这要求你的 JDK 版本必须是17 或更高。这是硬性要求版本不对会导致编译失败。JDK 安装与验证去 Oracle 官网或 Adoptium 等开源站点下载 JDK 17如 JDK 17 LTS 或 JDK 21 LTS。安装后打开命令行CMD 或 Terminal执行java -version和javac -version。确保输出的版本号大于等于 17。如果系统里有多个 JDK需要确认环境变量JAVA_HOME指向的是正确的版本。可以通过echo %JAVA_HOME%(Windows) 或echo $JAVA_HOME(Mac/Linux) 检查。构建工具Maven 或 Gradle项目大概率使用 Maven 进行依赖管理和构建。去 Apache Maven 官网下载解压并配置MAVEN_HOME和PATH。验证mvn -v应显示版本信息。国内网络环境可能需要配置 Maven 镜像仓库修改conf/settings.xml文件添加阿里云等国内镜像源能极大加快依赖下载速度。如果项目使用 Gradle同理安装并配置。数据库准备个人博客或物业管理系统通常使用 MySQL。建议安装 MySQL 8.0 或更高版本。安装后启动 MySQL 服务并用 root 用户登录。根据项目README.md或sql目录下的脚本文件创建项目所需的数据库和用户。命令通常类似CREATE DATABASE blog_db CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; CREATE USER blog_user% IDENTIFIED BY your_password; GRANT ALL PRIVILEGES ON blog_db.* TO blog_user%; FLUSH PRIVILEGES;关键点注意数据库的字符集设置为utf8mb4以支持存储 Emoji 和所有 Unicode 字符避免中文乱码。1.2 前端环境清单与验证前端基于 Vue 3 和配套的构建工具。Node.js 与 npm去 Node.js 官网下载LTS长期支持版本如 18.x 或 20.x。安装包会同时安装 Node.js 和 npm。验证node -v和npm -v应显示版本号。注意某些老项目可能对 Node.js 版本敏感如果运行出错可以尝试使用nvm(Node Version Manager) 切换版本。但 Vue 3 项目对新版 Node.js 兼容性通常较好。包管理工具加速npm 默认源在国内可能很慢。建议立即配置淘宝镜像npm config set registry https://registry.npmmirror.com也可以选择使用yarn或pnpm它们速度更快、磁盘空间利用更高效。安装后同样需要配置国内镜像。IDE 或编辑器后端IntelliJ IDEA (社区版免费)、Eclipse 或 VS Code需安装 Java 插件包。前端VS Code 是主流选择安装 Volar (Vue 3 官方推荐扩展)、ESLint、Prettier 等插件能极大提升开发体验。我个人的习惯用 IDEA 打开后端项目用 VS Code 打开前端项目。两个编辑器并行调试和修改互不干扰。1.3 项目获取与初步检查拿到项目代码可能是 ZIP 包或 Git 仓库后先做以下检查结构确认标准的分离项目会有两个独立的文件夹例如blog-backend(SpringBoot) 和blog-frontend(Vue)。确保你解压或克隆到了正确的位置。配置文件在后端项目的src/main/resources/目录下找到application.yml或application.properties文件。这里配置了数据库连接、服务器端口等。你需要将里面的数据库连接信息URL、用户名、密码修改成你自己在 1.1.3 步骤中创建的。依赖文件后端查看pom.xml前端查看package.json。这是项目的“菜单”所有需要的库都在这里声明。注意很多新手在这一步直接运行然后报“无法找到数据源”或“端口被占用”错误。问题九成出在配置文件没改对。先花5分钟核对application.yml和你的本地数据库信息。2. 后端启动与核心接口调试环境就绪后我们优先启动后端。因为前端需要调用后端的 API后端先跑通前端联调才有意义。2.1 导入项目与依赖下载用 IDEA 打开后端项目文件夹。IDEA 会自动识别为 Maven/Gradle 项目并开始下载依赖观察底部进度条。第一次下载依赖可能需要较长时间取决于网速和镜像配置。耐心等待直到控制台没有错误日志。依赖下载完成后检查项目结构。主要关注src/main/javaJava 源代码控制器(Controller)、服务(Service)、数据访问层(Mapper/Repository)都在这里。src/main/resources配置文件、静态资源、SQL 映射文件如果用了 MyBatis。pom.xml所有依赖的版本。SpringBoot 3.x 会依赖 Spring Framework 6.x注意版本一致性。2.2 数据库连接与启动应用修改配置再次确认application.yml中的数据库配置。一个典型的配置片段如下spring: datasource: url: jdbc:mysql://localhost:3306/blog_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: blog_user password: your_password driver-class-name: com.mysql.cj.jdbc.Driver请将blog_db,blog_user,your_password替换为你自己创建的信息。serverTimezone设置为Asia/Shanghai可以避免时区问题。启动主类在src/main/java下找到以Application结尾的类例如BlogApplication右键点击选择Run ‘BlogApplication‘。观察控制台启动成功的标志是看到类似以下的日志Started BlogApplication in 5.123 seconds (process running for 5.456) Tomcat started on port(s): 8080 (http) with context path 这表示 SpringBoot 内嵌的 Tomcat 服务器已在 8080 端口启动。验证健康端点打开浏览器访问http://localhost:8080/actuator/health如果项目引入了 actuator 依赖或http://localhost:8080如果项目有默认首页。如果能返回 JSON 数据或看到页面说明后端服务基本正常。2.3 使用 API 工具进行接口测试后端启动后不要急着对接前端。先用专业的 API 测试工具如Postman、Insomnia或Apifox手动测试几个核心接口这能帮你快速理解接口的请求响应格式。找到接口文档项目可能集成了 Swagger/OpenAPI。访问http://localhost:8080/swagger-ui.html或http://localhost:8080/doc.html如果用了 Knife4j。这里会以网页形式列出所有接口并可以直接测试。测试登录接口这是最常见的第一个接口。在 Swagger 页面或 Postman 中找到POST /api/login或类似的登录接口。请求体 (Body)选择raw-JSON输入类似{username:admin, password:123456}的格式具体账号密码看项目说明或数据库初始脚本。点击发送观察响应。成功通常会返回一个 JSON包含code: 200、message: “成功”、data对象里面有token字段。这个token就是后续接口的通行证。失败返回code: 500或401并带有错误信息。根据信息排查账号密码错误、用户被禁用等。测试需要认证的接口复制上一步获取到的token。在 Postman 的 “Headers” 或 “Authorization” 选项卡中添加一个头Authorization: Bearer your_token_here。然后测试一个需要登录的接口比如GET /api/user/info。如果返回用户信息说明 token 认证通过。测试增删改查接口依次测试文章列表GET、发布文章POST、修改文章PUT、删除文章DELETE等接口。重点关注请求参数是放在 URL 路径里/api/article/{id}、查询字符串里?page1size10还是请求体Body里。同时观察响应的数据结构。这个步骤至关重要。很多前后端联调的问题是因为双方对接口的请求/响应格式理解不一致。先用工具手动调通你就掌握了接口的“契约”后续前端调用时心里有底。3. 前端启动与联调实战后端接口测试无误后我们启动前端项目并让它连接到我们本地运行的后端服务。3.1 安装依赖与启动开发服务器用 VS Code 打开前端项目文件夹。打开终端Terminal确保路径在前端项目根目录。安装依赖执行npm install或yarn install或pnpm install。同样第一次安装需要时间等待完成。配置后端代理前端在开发时通常运行在独立的端口如localhost:5173而后端在localhost:8080。直接调用会产生跨域问题。解决方案是在前端项目的配置文件中设置代理。Vite 项目修改vite.config.js或vite.config.ts。Vue CLI 项目修改vue.config.js。找到server配置项下的proxy将其指向后端地址// vite.config.js 示例 export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, // 你的后端地址 changeOrigin: true, // rewrite: (path) path.replace(/^\/api/, ) // 如果需要重写路径 } } } })这样前端所有以/api开头的请求都会被代理到http://localhost:8080/api从而解决跨域。启动前端开发服务器执行npm run dev或yarn dev。控制台会输出本地访问地址通常是http://localhost:5173或http://localhost:3000。3.2 理解前端项目结构启动后浏览器打开前端地址你应该能看到登录页或首页。此时快速浏览一下前端项目的核心目录src/views或src/pages页面组件。Login.vue,Home.vue,ArticleList.vue等。src/components可复用的 UI 组件。如按钮、对话框、表格等。src/router路由配置。定义了 URL 路径和页面组件的映射关系。src/api这是前后端联调的核心目录。里面通常有index.js或按模块划分的 JS 文件如user.js,article.js封装了所有对后端接口的 HTTP 请求。你会看到类似axios.get(‘/api/article/list‘)的代码。src/store状态管理如果用了 Pinia 或 Vuex。用于管理全局状态如用户登录信息。src/utils工具函数比如处理 token 的存储和读取、日期格式化等。3.3 联调关键Token 管理与 API 调用前后端分离的核心是 API 调用。前端如何携带 token后端如何验证是联调成功的关键。登录与 Token 存储在前端登录页面 (Login.vue)找到表单提交的处理函数。里面会调用src/api目录下的登录接口函数。登录成功后接口返回的token需要被存储起来。通常有两种方式LocalStorage/SessionStoragelocalStorage.setItem(‘token‘, token)。简单但需注意安全性避免存储敏感信息。Cookie由后端设置HttpOnly的 Cookie更安全但前端 JavaScript 无法直接读取。存储后通常还会将 token 和用户信息存入状态管理 (Pinia/Vuex)方便其他组件使用。请求拦截器这是处理 token 的优雅方式。在src/utils或src/api的request.js或类似文件中会使用axios的拦截器。请求拦截器在每个请求发出前自动从 LocalStorage 或 Store 中取出 token并添加到请求头Authorization中。// axios 请求拦截器示例 service.interceptors.request.use( config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer ${token}; } return config; }, error { return Promise.reject(error); } )响应拦截器处理通用的响应逻辑比如 token 过期返回 401时自动跳转到登录页。调用一个列表接口打开文章列表页面 (ArticleList.vue)。在created()或onMounted()生命周期钩子中你会看到它调用了getArticleList()这类方法。这个方法内部会调用src/api/article.js中封装的fetchArticleList(params)函数。该函数使用配置了拦截器的axios实例向/api/article/list发起 GET 请求并自动携带了 token。请求成功后将返回的数据列表赋值给页面的响应式数据变量如articleList页面模板就会自动渲染出表格。联调时最常见的两个问题404 错误前端请求的 URL 和后端接口路径不匹配。检查代理配置 (vite.config.js) 和 API 封装文件 (src/api/xxx.js) 中的路径。401 未授权token 未正确携带或已过期。检查请求拦截器是否工作token 是否成功存储以及后端 token 校验逻辑。4. 核心功能模块代码走读项目能跑起来之后我们就可以深入代码理解个人博客或物业管理系统几个核心模块的实现。这里以个人博客系统为例。4.1 用户认证与权限模块这是系统的安全基石。后端实现 (Spring Security JWT)登录流程在AuthController中/api/login接口接收用户名密码。UserService调用UserMapper查询数据库验证。验证通过后使用JwtUtil工具类生成一个 JWT Token 返回给前端。Token 生成JWT Token 通常包含用户ID、用户名、过期时间等信息并用一个密钥进行签名。权限校验通过一个JwtAuthenticationFilter过滤器。它拦截所有请求从Authorization头中取出 token 进行解析和验证。验证通过后将用户信息存入 SecurityContext供后续业务使用。接口权限控制在SecurityConfig配置类中使用http.authorizeHttpRequests()来配置哪些接口需要登录哪些需要特定角色如ADMIN。前端配合登录后存储 token。通过路由守卫 (router.beforeEach) 检查访问的页面是否需要登录如果未登录则跳转回登录页。根据用户角色从 token 解析或/api/user/info接口获取动态渲染侧边栏菜单或按钮权限例如“发布文章”按钮只对管理员显示。4.2 博客文章管理模块 (CRUD)这是博客系统的核心业务。后端分层架构Controller 层 (ArticleController)接收前端请求进行参数校验可使用Valid注解调用 Service 层返回统一格式的响应如Result.success(data)。Service 层 (ArticleService)处理核心业务逻辑。例如发布文章前检查用户权限更新文章时记录修改时间删除文章时可能涉及关联评论的级联操作逻辑删除更常见。Mapper/Repository 层 (ArticleMapper)负责与数据库交互。这里会使用 MyBatis-Plus 或 Spring Data JPA 的接口定义 SQL 操作。MyBatis-Plus 提供了强大的条件构造器可以方便地构建动态查询。关键代码片段示例// ArticleController.java RestController RequestMapping(/api/article) public class ArticleController { Autowired private ArticleService articleService; GetMapping(/list) public ResultPageArticleVO list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageArticleVO page articleService.getArticleList(pageNum, pageSize, keyword); return Result.success(page); } PostMapping PreAuthorize(hasRole(ADMIN)) // 权限注解只有管理员能发布 public Result create(Valid RequestBody ArticleDTO articleDTO) { articleService.createArticle(articleDTO); return Result.success(); } }// ArticleServiceImpl.java Service public class ArticleServiceImpl implements ArticleService { Autowired private ArticleMapper articleMapper; Override public PageArticleVO getArticleList(Integer pageNum, Integer pageSize, String keyword) { PageArticle page new Page(pageNum, pageSize); LambdaQueryWrapperArticle wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(keyword), Article::getTitle, keyword) .orderByDesc(Article::getCreateTime); PageArticle articlePage articleMapper.selectPage(page, wrapper); // 将 Article 转换为 ArticleVO (视图对象可能包含作者名等额外信息) return convertToVoPage(articlePage); } }前端对应实现ArticleList.vue使用onMounted调用fetchArticleList获取分页数据并用el-table或自定义组件渲染。ArticleForm.vue一个表单组件用于创建和编辑文章。使用v-model绑定数据提交时调用createArticle或updateArticleAPI。4.3 前端路由与状态管理路由管理 (Vue Router)在src/router/index.js中定义路由。对于需要权限的页面可以配置meta: { requiresAuth: true }。在全局路由守卫中检查requiresAuth和用户的登录状态。实现动态路由根据用户角色从后端获取有权限的菜单列表然后通过router.addRoute()动态添加路由规则。状态管理 (Pinia)创建useUserStore存储用户信息token, userInfo。创建useAppStore存储应用级状态如侧边栏折叠状态、主题色。在组件中通过const userStore useUserStore()引入并通过userStore.token访问或userStore.setToken()修改状态。状态变化会自动触发依赖该状态的组件更新。5. 部署上线与生产环境考量学习项目的最后一步是尝试将其部署到一个你能访问的环境理解开发和生产环境的差异。5.1 后端打包与部署打包在项目根目录执行mvn clean package -DskipTests。这会在target目录下生成一个*.jar文件例如blog-backend-0.0.1-SNAPSHOT.jar。这个 jar 包是独立的包含了应用本身和所有依赖。生产环境配置绝对不要直接使用开发环境的application.yml。SpringBoot 支持多环境配置。创建application-prod.yml文件。在其中配置生产数据库地址、用户名密码与开发环境不同。配置服务器端口、日志路径、文件上传目录等。在打包或运行时通过--spring.profiles.activeprod参数激活生产配置。运行在服务器上或本地测试确保安装了 JDK 17然后运行nohup java -jar blog-backend-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod app.log 21 nohup和让程序在后台运行。 app.log 21将标准输出和错误输出都重定向到app.log文件方便查看日志。使用反向代理通常不会直接用 8080 端口对外服务。会用 Nginx 作为反向代理。# nginx 配置示例 server { listen 80; server_name your-domain.com; # 或服务器IP location /api/ { proxy_pass http://localhost:8080; # 转发到后端SpringBoot应用 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 前端静态资源部署配置见下一节 }5.2 前端打包与部署打包在前端项目根目录执行npm run build。这会在dist目录生成优化后的静态文件HTML, JS, CSS。部署将dist文件夹内的所有文件上传到你的 Web 服务器如 Nginx, Apache的网站根目录。Nginx 配置server { listen 80; server_name your-domain.com; # 或服务器IP root /path/to/your/dist; # 前端打包文件路径 index index.html; location / { try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } location /api/ { proxy_pass http://localhost:8080; # 后端API地址 # ... 其他proxy配置 } }try_files指令对于 Vue Router 的history模式至关重要它确保前端路由在刷新页面时不会返回 404。前端所有/api开头的请求都会被 Nginx 转发到后端服务。5.3 生产环境关键检查点数据库使用生产环境专用的数据库实例做好定期备份。密码要强不要用默认的root用户。配置文件确保application-prod.yml等配置文件不被提交到 Git通常通过环境变量或配置中心管理。日志配置合理的日志级别和滚动策略将日志输出到文件便于问题排查。跨域生产环境下前端和后端通常共用一个域名通过 Nginx 反向代理区分路径因此不存在跨域问题。开发时的代理配置是为了方便。前端资源优化build后生成的 JS 文件可能很大可以考虑配置路由懒加载、CDN 引入大型库、开启 Gzip 压缩等。6. 从“能跑”到“理解”进阶学习建议当你成功运行并部署了项目后可以尝试以下练习加深理解修改一个功能例如给博客文章增加“浏览量”统计。这需要你在数据库article表添加view_count字段。修改后端实体类 (Article.java)、Mapper 接口和 XML如果用了 MyBatis。在ArticleService中创建increaseViewCount(Long articleId)方法。在ArticleController中新增一个GET /api/article/{id}/view接口来触发计数。在前端文章详情页调用这个新接口。在文章列表和详情页显示浏览量。修复一个 Bug故意在代码中引入一个常见错误如空指针异常、SQL 注入风险使用#{}而非${}可避免、或前端响应式数据更新问题然后尝试调试并修复它。更换一个组件库项目可能用了 Element Plus 或 Ant Design Vue。尝试将其部分组件替换成另一个你感兴趣的 UI 库理解组件库的封装和引入方式。思考架构为什么采用 Controller-Service-Mapper 分层每层的职责是什么如果让你设计一个更复杂的权限系统如 RBAC你会如何设计数据库表和接口这个 SpringBoot3 Vue3 前后端分离项目本质上是一个现代 Web 应用的标准实践模板。把它吃透的意义远大于仅仅完成一个毕业设计。你真正收获的是一套从环境搭建、本地开发、调试联调到部署上线的完整工程能力。下次遇到任何新的前后端分离项目你都能快速找到切入点而不是对着陌生的代码无从下手。