基于Springboot+VUE开发的前后端分离博客系统
项目地址[td]
技术栈总览前端 blog-client
- Vue 3.4（Composition API + <script setup>）
- TypeScript 5.5
- Vite 5.4
- Element Plus 2.7
- Vue Router 4 / Vuex 4
- Axios 1.7
- ECharts 5.5（Dashboard 图表）
- TinyMCE 6（文章富文本编辑器）
- undraw-ui（评论组件）
后端 blog-server
- JDK 17
- Spring Boot 2.7.18
- Spring Security + JWT (jjwt 0.12.6)
- MyBatis-Plus 3.5.5（单表 CRUD）
- MyBatis XML Mapper（多表关联查询，方便手工优化 SQL）
- MySQL 8.x
- SpringDoc OpenAPI 1.8.0（Swagger UI）
- Lombok
- BCryptPasswordEncoder
功能特性前台
- 首页动态卡片（可自由配置分类/标签及展示条数）
- 分类页、标签页、搜索、文章详情
- 嵌套评论、回复、点赞、打赏
- 动态页面标题（分类页 = 分类名，标签页 = 标签名，详情页 = 文章标题）
- 首页登录弹窗 & 独立登录页两种登录方式
- 移动端底部导航（可开关，任意菜单项可配置）
- 文章阅读量、点赞数统计
后台
- 仪表盘（实时统计 + ECharts 图表）
- 文章 / 分类 / 标签 / 评论 / 友链 / 菜单 / 角色 / 用户管理
- 完全动态的路由和菜单（后端下发）
- 支持文章附件下载配置
- 操作日志、接口文档（内嵌 Swagger）
系统
- JWT 鉴权、角色/菜单权限控制
- 首次启动自动补齐数据库缺失字段并 BCrypt 加密管理员密码
- 评论回复自动继承父评论的 articleId
快速开始环境要求[td]
1. 启动后端cd blog-server
CREATE DATABASE blog DEFAULT CHARACTER SET utf8mb4;
mvn spring-boot:run
- 后端接口：http://localhost:8090/rgh/api
- Swagger 文档：http://localhost:8090/swagger-ui/index.html
- 表结构与初始数据由 db/schema.sql + db/data.sql 自动执行
2. 启动前端cd blog-client
npm install
npm run dev
vite.config.ts 中配置的端口为 8080；若被占用会自动顺延（8081、8082…），启动时终端会打印实际端口。后端 SecurityConfig 已放行 http://localhost:* 与 http://127.0.0.1:* 的跨域请求，任意本地端口都能直接联调。
3. 默认账号[td]
DataInitializer 首次启动会自动把 admin 密码用 BCrypt 加密写回数据库。
项目结构.
├── blog-client/ # 前端 Vue 3 项目
│ ├── src/
│ │ ├── api/ # 接口封装
│ │ ├── common/ # 前台通用组件
│ │ ├── composables/ # 组合式函数
│ │ ├── layout/ # 后台布局
│ │ ├── router/ # 路由
│ │ ├── store/ # Vuex
│ │ └── views/ # 后台页面
│ ├── vite.config.ts
│ └── package.json
├── blog-server/ # 后端 Spring Boot 项目
│ ├── src/main/java/com/rgh
│ │ ├── conf/ # 安全、CORS、Swagger 配置
│ │ ├── controller/ # REST 接口
│ │ ├── entity/ # 实体
│ │ ├── mapper/ # MyBatis Mapper
│ │ ├── service/ # 业务层
│ │ └── vo/ # 视图对象
│ ├── src/main/resources/
│ │ ├── mapper/ # XML Mapper（多表关联查询）
│ │ ├── db/schema.sql # 建表
│ │ ├── db/data.sql # 初始数据
│ │ └── application.yml
│ └── pom.xml
└── README.md # 就是本文件
各端模块 README
- 前端详细说明：./blog-client/README.md
- 后端详细说明：./blog-server/README.md
