基于Springboot+VUE开发的前后端分离博客系统

一套完整的前后端分离博客系统。前端 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<br>npm install<br>npm run dev

默认访问：http://localhost:8080

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