30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度这次我们来看一个完全手把手教学的博客管理项目基于 SpringBoot 和 Vue3 的前后端分离架构。对于想从零开始学习企业级项目开发、掌握前后端协同流程的开发者来说这是一个非常实用的实战案例。项目不依赖复杂的代码生成器而是通过详细的步骤讲解带你理解从环境搭建、数据库设计、接口开发到前端页面联调的每一个环节。本文将重点拆解项目的核心功能、技术栈选型、本地部署流程以及开发中可能遇到的典型问题确保你看完就能动手复现。项目的核心价值在于“教学”而非“框架”。它旨在让你理解 SpringBoot 如何整合 MyBatis-Plus、Redis、JWT 等常用组件以及 Vue3 如何通过 Composition API、Pinia、Element Plus 等现代技术栈构建管理后台。整个过程会覆盖项目创建、数据库配置、实体类编写、业务逻辑开发、接口测试和前端页面渲染。无论你是正在准备 SpringBoot 或 Vue3 面试还是需要一个完整的毕业设计项目这个教程都能提供清晰的路径。1. 核心能力速览能力项说明项目类型前后端分离的博客内容管理系统 (CMS)技术栈后端SpringBoot 2.7.x, MyBatis-Plus, Redis, JWT前端Vue3, Vite, Pinia, Element Plus, Axios数据库MySQL 8.0 (兼容 5.7) Redis 5 用于缓存和会话核心功能用户认证、博客文章CRUD、分类标签管理、评论系统、数据统计仪表盘部署方式本地开发环境一键启动支持 IDEA 和 VSCode 开发提供完整的 SQL 脚本和配置适合场景Java/全栈初学者实战、毕业设计、个人博客系统搭建、SpringBootVue3 技术栈学习学习重点手把手编码、理解前后端数据流、掌握异常处理与日志、学习项目打包与基础部署2. 适用场景与使用边界这个博客管理项目主要面向以下几类开发者Java 后端初学者希望通过一个完整项目理解 SpringBoot 的核心用法包括控制器(Controller)、服务(Service)、数据访问层(Mapper)的分层架构以及如何集成 MyBatis-Plus 进行高效的数据操作。前端开发者Vue3想学习如何使用 Vue3 的 Composition API 和script setup语法配合 Pinia 进行状态管理并基于 Element Plus 组件库快速搭建后台管理界面。全栈学习爱好者需要了解前后端分离项目如何协同工作包括 RESTful API 设计、Axios 请求拦截与响应处理、JWT 令牌认证与刷新机制。毕业设计需求者寻找一个结构清晰、功能完整、文档齐全且技术栈主流的项目作为毕设基础可以在此基础上进行功能扩展和定制。使用边界与注意事项教学性质本项目核心目标是教学因此代码可能为了清晰而牺牲部分生产环境的极致优化如复杂的缓存策略、分布式事务等。适合学习和中小型项目起步大型高并发场景需要进一步重构。版权与数据项目中使用的示例数据如文章、用户信息仅为演示在实际部署时务必替换并注意用户隐私和数据安全。生产部署本文重点在本地开发环境搭建和功能验证。若需部署到云服务器如阿里云、腾讯云还需额外配置 Nginx 反向代理、HTTPS、域名解析、数据库远程访问安全策略等这不在本文核心讨论范围但会提供基本思路。3. 环境准备与前置条件在开始编码之前请确保你的开发环境满足以下要求。这是项目能成功运行的基础。1. 后端开发环境 (Java/SpringBoot侧):JDK: 版本 8 或 11 (推荐 11 与 SpringBoot 2.7.x 兼容性更好)。安装后配置JAVA_HOME环境变量。Maven: 版本 3.6。用于管理项目依赖和构建。同样需要配置环境变量。IDE: IntelliJ IDEA (社区版或旗舰版) 或 Eclipse (需安装 Spring Tools)。本文演示以 IDEA 为主。数据库: MySQL 8.0 (或 5.7)。需提前安装并启动服务记住 root 密码或创建一个有权限的专用用户。缓存/会话: Redis 5.0。需要安装并启动 Redis 服务。2. 前端开发环境 (Vue3侧):Node.js: 版本 16 (推荐 18 LTS)。安装包自带 npm。包管理器: npm 或 yarn 或 pnpm。本文使用 npm 演示。IDE: Visual Studio Code (推荐) 或 WebStorm。3. 工具与测试:API 测试工具: Postman 或 Apifox 或 Insomnia用于测试后端接口。浏览器: Chrome 或 Edge用于访问前端页面和开发者工具调试。Git: 用于版本管理可选但强烈推荐。环境检查清单在终端或命令提示符中执行以下命令确认环境就绪# 检查 Java 和 Maven java -version mvn -version # 检查 Node.js 和 npm node -v npm -v # 检查 MySQL 服务是否运行 (Windows 服务管理器或 Linux systemctl) # 检查 Redis 服务是否运行 (通过 redis-cli ping 命令)4. 项目初始化与数据库配置我们将从零开始创建项目结构。为了更贴近“手把手”教学这里不直接使用若依等代码生成框架而是手动搭建以深入理解每个文件的作用。4.1 创建 SpringBoot 后端项目打开 IntelliJ IDEA选择New Project。左侧选择Spring Initializr。填写项目信息Project SDK: 选择你的 JDK 11。Name:blog-backend(或你喜欢的名称)。Location: 选择你的项目存放目录。Type: Maven。Language: Java。Packaging: Jar。Java Version: 11。点击Next在依赖选择页面勾选以下依赖这是项目核心Spring Web(构建Web应用包含RESTful API支持)Spring Data Redis(访问Redis)MySQL Driver(连接MySQL数据库)MyBatis Framework(或后续手动引入 MyBatis-Plus)Lombok(简化实体类代码)点击FinishIDEA 会自动创建项目并下载初始依赖。4.2 引入 MyBatis-Plus 等关键依赖初始化的pom.xml依赖可能不全我们需要手动添加。打开pom.xml在dependencies节点内补充以下内容!-- MyBatis-Plus 增强版ORM框架 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MyBatis-Plus 代码生成器 (可选用于快速生成基础代码) -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-generator/artifactId version3.5.3.1/version scopetest/scope /dependency !-- JWT 用于Token认证 -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency !-- Hutool 工具类库 -- dependency groupIdcn.hutool/groupId artifactIdhutool-all/artifactId version5.8.20/version /dependency !-- 参数校验 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency添加后IDEA 会提示导入 Maven 变更点击确认。4.3 配置数据库连接和Redis在src/main/resources/目录下找到或创建application.yml文件比 properties 文件更清晰进行如下配置server: port: 8080 # 后端服务端口 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/blog_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root # 替换为你的数据库用户名 password: your_password # 替换为你的数据库密码 redis: host: localhost port: 6379 database: 0 # 默认使用0号库 password: # 如果Redis设置了密码填写在此 lettuce: pool: max-active: 8 max-idle: 8 min-idle: 0 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL开发阶段方便调试 global-config: db-config: logic-delete-field: deleted # 全局逻辑删除字段名 logic-delete-value: 1 # 逻辑已删除值 logic-not-delete-value: 0 # 逻辑未删除值 # 自定义配置项如JWT密钥、Token过期时间 jwt: secret: your_jwt_secret_key_here_make_it_long_and_random # 务必修改为一个长且随机的字符串 expire: 604800 # Token过期时间单位秒这里是一周注意请将your_password和your_jwt_secret_key_here_make_it_long_and_random替换为你自己的值。4.4 创建数据库与表使用 MySQL 客户端如命令行、Navicat、MySQL Workbench连接你的 MySQL 服务。执行以下 SQL 语句创建数据库和用户表这是最基础的表其他表如文章、分类等可在后续开发中创建CREATE DATABASE IF NOT EXISTS blog_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE blog_db; -- 用户表 CREATE TABLE sys_user ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键ID, username varchar(50) NOT NULL COMMENT 用户名, password varchar(255) NOT NULL COMMENT 密码加密后, nickname varchar(50) DEFAULT NULL COMMENT 昵称, avatar varchar(500) DEFAULT NULL COMMENT 头像URL, email varchar(100) DEFAULT NULL COMMENT 邮箱, status tinyint DEFAULT 1 COMMENT 状态0-禁用1-正常, deleted tinyint DEFAULT 0 COMMENT 逻辑删除0-未删除1-已删除, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_unicode_ci COMMENT系统用户表; -- 插入一个测试用户 (密码明文为‘123456’这里需要是BCrypt加密后的字符串可以先运行程序生成) -- INSERT INTO sys_user (username, password, nickname) VALUES (admin, $2a$10$xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx, 管理员);密码字段需要存储加密后的字符串我们将在后续编写注册/登录逻辑时使用 Spring Security 的BCryptPasswordEncoder进行加密。5. 后端核心功能开发与验证接下来我们按照分层架构开发用户登录和文章管理这两个核心模块。5.1 创建实体类 (Entity)在src/main/java/com/yourdomain/blog/entity/目录下创建User.javapackage com.yourdomain.blog.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.time.LocalDateTime; Data TableName(sys_user) public class User { TableId(type IdType.AUTO) private Long id; private String username; private String password; private String nickname; private String avatar; private String email; private Integer status; TableLogic // 标记逻辑删除字段 private Integer deleted; TableField(fill FieldFill.INSERT) private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; }同样创建Article.java实体类对应文章表需先设计并创建blog_article表。5.2 创建数据访问层 (Mapper)在src/main/java/com/yourdomain/blog/mapper/目录下创建UserMapper.javapackage com.yourdomain.blog.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.yourdomain.blog.entity.User; import org.apache.ibatis.annotations.Mapper; Mapper public interface UserMapper extends BaseMapperUser { // 继承 BaseMapper 后基本的 CRUD 方法已自动拥有 // 可以在此定义自定义的复杂 SQL 查询方法 }注意需要在主启动类上添加MapperScan(com.yourdomain.blog.mapper)注解或者确保每个 Mapper 接口都有Mapper注解。5.3 创建服务层 (Service)先创建接口UserService.java再创建实现类UserServiceImpl.java。这里展示实现类的关键方法package com.yourdomain.blog.service.impl; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.yourdomain.blog.entity.User; import com.yourdomain.blog.mapper.UserMapper; import com.yourdomain.blog.service.UserService; import org.springframework.stereotype.Service; import java.util.HashMap; import java.util.Map; Service public class UserServiceImpl extends ServiceImplUserMapper, User implements UserService { Override public MapString, Object login(String username, String password) { // 1. 根据用户名查询用户 LambdaQueryWrapperUser wrapper new LambdaQueryWrapper(); wrapper.eq(User::getUsername, username); User user this.getOne(wrapper); // 2. 用户不存在或密码错误 if (user null) { throw new RuntimeException(用户名或密码错误); } // 3. 验证密码 (这里假设密码已加密实际应使用 PasswordEncoder.matches) // if (!passwordEncoder.matches(rawPassword, user.getPassword())) { ... } // 4. 生成JWT Token (简化示例实际需引入JWT工具类) String token generated_jwt_token_here; // 5. 返回用户信息和token MapString, Object result new HashMap(); result.put(user, user); result.put(token, token); return result; } }5.4 创建Web控制层 (Controller)在src/main/java/com/yourdomain/blog/controller/目录下创建AuthController.javapackage com.yourdomain.blog.controller; import com.yourdomain.blog.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.Map; RestController RequestMapping(/api/auth) public class AuthController { Autowired private UserService userService; PostMapping(/login) public MapString, Object login(RequestBody MapString, String loginForm) { String username loginForm.get(username); String password loginForm.get(password); // 参数校验略 return userService.login(username, password); } }5.5 启动后端服务并测试接口找到主启动类通常名为BlogBackendApplication运行其main方法。观察控制台日志确保没有报错并且看到Tomcat started on port(s): 8080类似的日志。打开 Postman创建一个新的POST请求地址为http://localhost:8080/api/auth/login。在Body标签页选择raw和JSON输入以下内容用户需先在数据库中存在{ username: admin, password: 123456 }点击Send。如果一切正常你应该会收到一个包含用户信息和模拟 Token 的 JSON 响应。如果收到 404 或 500 错误请检查服务是否成功启动端口 8080 是否被占用。数据库连接配置是否正确检查application.yml和 MySQL 服务状态。请求路径和方法是否正确。6. 前端 Vue3 项目搭建与页面开发后端 API 初步调通后我们开始搭建前端管理界面。6.1 使用 Vite 创建 Vue3 项目打开终端进入你的工作目录执行npm create vuelatest blog-frontend按照提示选择项目配置Add TypeScript?No(为简化教学先不使用TS)Add JSX Support?NoAdd Vue Router for Single Page Application?Yes(路由是必须的)Add Pinia for state management?Yes(推荐使用)Add Vitest for Unit Testing?No(可选)Add an End-to-End Testing Solution?No(可选)Add ESLint for code quality?Yes(推荐)创建完成后进入项目并安装依赖cd blog-frontend npm install6.2 安装 Element Plus 和 Axiosnpm install element-plus axios npm install -D unplugin-vue-components unplugin-auto-import # 按需导入组件插件配置 Vite 以支持 Element Plus 按需导入。修改vite.config.jsimport { fileURLToPath, URL } from node:url import { defineConfig } from vite import vue from vitejs/plugin-vue import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)) } }, server: { port: 5173, // 前端开发服务器端口 proxy: { // 配置代理解决跨域问题 /api: { target: http://localhost:8080, // 后端服务地址 changeOrigin: true, } } } })6.3 创建登录页面在src/views/目录下创建LoginView.vuetemplate div classlogin-container el-card classlogin-card h2博客管理系统登录/h2 el-form :modelloginForm :rulesrules refformRef el-form-item propusername el-input v-modelloginForm.username placeholder请输入用户名 prefix-iconUser / /el-form-item el-form-item proppassword el-input v-modelloginForm.password placeholder请输入密码 prefix-iconLock typepassword show-password / /el-form-item el-form-item el-button typeprimary clickhandleLogin :loadingloading stylewidth:100%登录/el-button /el-form-item /el-form /el-card /div /template script setup import { ref, reactive } from vue import { ElMessage } from element-plus import { useRouter } from vue-router import axios from axios const router useRouter() const formRef ref() const loading ref(false) const loginForm reactive({ username: , password: }) const rules { username: [{ required: true, message: 请输入用户名, trigger: blur }], password: [{ required: true, message: 请输入密码, trigger: blur }] } const handleLogin () { formRef.value.validate((valid) { if (!valid) return loading.value true // 调用后端登录接口 axios.post(/api/auth/login, loginForm) .then(response { const data response.data // 假设返回的token在data.token中 localStorage.setItem(token, data.token) // 存储用户信息到Pinia或localStorage ElMessage.success(登录成功) router.push(/) // 跳转到首页 }) .catch(error { console.error(登录失败:, error) ElMessage.error(error.response?.data?.message || 登录失败请检查用户名和密码) }) .finally(() { loading.value false }) }) } /script style scoped .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f2f5; } .login-card { width: 400px; } /style6.4 配置路由和状态管理在src/router/index.js中配置登录路由。在src/stores/下使用 Pinia 创建userStore.js来管理用户登录状态和 Token。在main.js中全局引入 Element Plus 样式和 Pinia。6.5 启动前端服务并测试在终端中运行npm run dev访问http://localhost:5173/login你应该能看到登录页面。尝试输入之前在后端数据库里创建的用户名和密码注意目前密码验证是模拟的需要你完善后端密码加密和验证逻辑点击登录。如果代理配置正确请求会转发到http://localhost:8080/api/auth/login。关键验证点前端页面能否正常加载Element Plus 组件样式是否生效。点击登录按钮浏览器开发者工具Network标签页是否能看到向/api/auth/login发起的请求。请求是否成功状态码 200并收到后端返回的模拟数据。如果出现跨域错误CORS检查后端是否添加了跨域配置CrossOrigin注解或全局配置或者前端代理 (vite.config.js中的proxy) 是否生效。7. 前后端联调与功能完善登录流程跑通后我们就可以继续开发其他功能模块如文章列表、文章编辑、分类管理等。这里以文章列表为例展示前后端如何协同。7.1 后端文章查询接口在ArticleController中创建分页查询接口RestController RequestMapping(/api/article) public class ArticleController { Autowired private ArticleService articleService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String title) { PageArticle page new Page(pageNum, pageSize); LambdaQueryWrapperArticle wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.isNotBlank(title), Article::getTitle, title); wrapper.orderByDesc(Article::getCreateTime); PageArticle articlePage articleService.page(page, wrapper); return Result.success(articlePage); } }这里Result是一个自定义的统一响应封装类。7.2 前端文章列表页面在src/views/article/下创建ArticleListView.vue使用el-table和el-pagination组件并通过 Axios 调用/api/article/list接口获取数据。7.3 联调测试启动后端服务 (BlogBackendApplication)。启动前端服务 (npm run dev)。在浏览器中访问文章列表页面。观察网络请求查看分页数据是否正确返回并渲染到表格中。测试搜索功能根据标题过滤。联调常见问题排查404 Not Found: 检查前端请求的 URL 是否正确后端 Controller 的RequestMapping路径是否匹配。500 Internal Server Error: 查看后端控制台日志通常是 SQL 异常、空指针或业务逻辑错误。跨域问题 (CORS): 确保后端已配置跨域或前端开发服务器代理 (proxy) 工作正常。可以在后端添加一个全局跨域配置类。数据绑定失败: 检查前端接收的数据结构是否与后端返回的Result结构一致特别是嵌套字段如data.records,data.total。8. 项目打包与基础部署开发完成后我们需要将项目打包为部署做准备。8.1 后端 SpringBoot 打包在blog-backend根目录下执行 Maven 打包命令mvn clean package -DskipTests打包成功后会在target目录下生成一个可执行的blog-backend-0.0.1-SNAPSHOT.jar文件。8.2 前端 Vue3 项目打包在blog-frontend目录下执行npm run build打包成功后会在项目根目录下生成dist文件夹里面是静态资源文件HTML, JS, CSS。8.3 本地运行测试后端在target目录下使用java -jar blog-backend-0.0.1-SNAPSHOT.jar启动后端服务。确保数据库和 Redis 服务正在运行。前端将dist文件夹内的所有文件复制到后端项目的src/main/resources/static/目录下如果希望前后端一起部署。或者使用任何静态文件服务器如nginx、http-server来托管dist文件夹。使用http-server快速测试全局安装npm install -g http-server然后在dist目录下执行http-server -p 8081。访问前端页面如http://localhost:8081测试功能是否正常。此时前端请求的后端地址需要是绝对路径例如http://localhost:8080/api/...你需要修改前端生产环境的 API 基础地址通常通过环境变量.env.production配置。9. 常见问题与排查方法在从零开始搭建项目的过程中你几乎一定会遇到下面这些问题。这里提供一个快速排查指南。问题现象可能原因排查方式解决方案IDEA 中 Maven 依赖下载失败或报红1. 网络问题或仓库地址不可达。2. Maven 配置文件 (settings.xml) 有误。3. 本地仓库损坏。1. 检查网络尝试mvn clean compile看详细错误。2. 检查 IDEA 中 Maven 的配置路径和仓库地址。1. 更换 Maven 镜像源如阿里云镜像。2. 删除本地仓库中对应的依赖目录重新下载。3. 在 IDEA 中尝试ReimportMaven 项目。后端启动时报数据库连接错误1.application.yml中数据库配置错误IP、端口、库名、用户名、密码。2. MySQL 服务未启动。3. 数据库驱动版本不匹配。1. 仔细核对配置文件的每一个字符。2. 使用客户端工具如 Navicat测试能否连接MySQL。3. 查看错误日志确认是连接拒绝还是认证失败。1. 修正配置文件。2. 启动 MySQL 服务。3. 确认pom.xml中 MySQL 驱动版本与安装的 MySQL 版本兼容。前端npm install失败1. 网络问题。2. Node.js 版本过低。3. 项目依赖存在冲突。1. 检查网络尝试npm config get registry。2. 使用node -v检查版本。3. 查看报错信息是否某个特定包安装失败。1. 切换 npm 镜像源npm config set registry https://registry.npmmirror.com。2. 升级 Node.js 到 LTS 版本。3. 删除node_modules和package-lock.json重新npm install。前端页面访问后端 API 出现跨域错误 (CORS)浏览器同源策略限制。开发时前端端口(5173)与后端端口(8080)不同。打开浏览器开发者工具查看 Console 或 Network 标签页的错误信息。开发环境使用 Vite 的proxy配置如前文所示。生产环境后端配置 CORS 过滤器或使用 Nginx 反向代理将前后端请求统一到同一个域名和端口下。页面样式错乱或 Element Plus 组件不显示1. Element Plus 组件未正确注册或引入。2. 样式文件未加载。1. 检查浏览器控制台是否有 JS 错误。2. 检查元素样式是否被正确应用。1. 确认vite.config.js中按需导入插件配置正确。2. 确认在main.js中正确引入了 Element Plus 的样式文件import element-plus/dist/index.css。MyBatis-Plus 查询不到数据或报错1. 实体类字段名与数据库列名映射不正确。2. Mapper 接口未被扫描。3. 表名或字段名有 SQL 关键字冲突。1. 查看控制台打印的 SQL 语句是否正确。2. 检查是否在主类上添加了MapperScan。3. 检查实体类TableName和TableField注解。1. 使用TableField(value “db_column_name”)指定映射。2. 确保 Mapper 接口在MapperScan指定的包路径下。3. 为可能的关键字字段添加反引号或在配置中设置转义。打包后运行 Jar 包报错1. 依赖缺失或冲突。2. 配置文件未被打包。3. 端口被占用。1. 使用java -jar your.jar --debug查看详细启动日志。2. 检查target目录下 jar 包内的配置文件。1. 确保使用mvn clean package打包。2. 检查application.yml是否在resources目录下。3. 更换启动端口java -jar your.jar --server.port8081。10. 最佳实践与后续扩展建议通过这个手把手项目你已经掌握了 SpringBoot Vue3 前后端分离项目的基本开发流程。为了将所学转化为更扎实的能力并用于实际项目这里有一些建议代码分层与规范严格遵守 Controller - Service - Mapper 的分层。Service 处理业务逻辑Controller 只负责参数校验和请求转发。使用统一的返回对象如Result和异常处理机制ControllerAdvice。安全加固密码务必使用BCryptPasswordEncoder对密码进行加密存储切勿明文保存。JWT实现完整的 JWT 生成、验证和刷新逻辑。将 Token 存储在 HttpOnly 的 Cookie 或安全的客户端存储中。接口权限使用 Spring Security 或 Sa-Token 实现基于角色的访问控制 (RBAC)为不同接口添加权限注解如PreAuthorize(“hasRole(‘ADMIN’)”)。前端工程化API 封装将所有的 Axios 请求封装成独立的模块如src/api/目录统一处理请求拦截添加 Token、响应拦截处理错误和基础配置。路由守卫使用 Vue Router 的导航守卫在页面跳转前验证用户登录状态和权限。状态管理合理使用 Pinia 管理全局状态如用户信息、侧边栏折叠状态避免 Props 层层传递。项目扩展方向功能上可以增加文章评论、文章点赞收藏、用户个人中心、文章分类/标签管理、数据统计图表、文件上传封面图、文章全文搜索集成 Elasticsearch等功能。技术上可以引入 Redis 缓存热点文章、使用 Quartz 或 Spring Scheduler 做定时任务如定时发布文章、集成 Swagger/knife4j 自动生成 API 文档、使用 Docker 容器化部署、配置 CI/CD 自动化流程。部署上学习使用 Nginx 配置反向代理和负载均衡将前端静态文件和后端 API 服务部署到云服务器如阿里云 ECS并配置域名和 HTTPS。这个项目最大的价值在于“过程”。不要只满足于跑通代码要多问几个为什么为什么这里要用Autowired为什么前端请求需要代理MyBatis-Plus的Page对象是如何实现分页的通过查阅官方文档、调试代码、搜索社区问题你会对这套技术栈有更深的理解。建议你把项目代码托管到 GitHub 或 Gitee这不仅是一个备份也是你学习历程的见证。 30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度