一套完整的前后端分离博客系统。前端 Vue 3 + TypeScript + Vite 5 + Element Plus，后端 Spring Boot 2.7 + MyBatis-Plus + MySQL + Spring Security(JWT)
项目地址
| 端 | 仓库地址 | 子目录 |
|---|---|---|
| 前端 blog-client | https://github.com/vfaner/blog-client | ./blog-client |
| 后端 blog-server | https://github.com/vfaner/blog-server | ./blog-server |
如果本项目对你有帮助，欢迎点一个 ⭐️ Star，这是对我持续维护开源项目最大的支持！
✨ 效果预览
博客首页
首页弹窗登录
独立登录页（访问 /admin/* 未登录时跳转）
分类文章列表
文章详情
后台仪表盘
后台文章编辑
后台评论管理
🚀 技术栈总览
前端 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
🏃 快速开始
环境要求
| 组件 | 版本 |
|---|---|
| JDK | 17+ |
| Maven | 3.6+ |
| MySQL | 8.x |
| Node.js | 18+ |
1. 启动后端
cd blog-server
创建数据库：
CREATE DATABASE blog DEFAULT CHARACTER SET utf8mb4;
修改 src/main/resources/application.yml 中的 spring.datasource.password 为你的 MySQL 密码，然后：
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. 默认账号
| 用户名 | 密码 |
|---|---|
| admin | 123456 |
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｜ English - 后端详细说明：
./blog-server/README.md｜ English
