一个基于 Spring Boot 和 React 的现代化个人博客系统，采用前后端分离架构，支持类似 Typecho 的独立页面模板化，支持基于角色的权限管理。

本项目是从原有的 Typecho PHP 博客系统重构而来的完整前后端分离博客系统，保留了原有大部分功能的同时，采用了更现代的技术栈和架构设计，可使用内置Typecho迁移工具一键迁移文章及独立页、评论、标签、分类。

• 🎨 现代化UI：前台采用简洁优雅的设计，后台使用 Ant Design Pro 风格
• 📝 Markdown支持：文章支持 Markdown 格式，代码高亮显示
• 📄 独立页面模板：支持类似 Typecho 的独立页面模板化，可自定义页面模板
• 💬 评论系统：支持评论回复、审核、点赞等功能
• 🔍 全文搜索：支持文章标题、内容、标签搜索
• 📱 响应式设计：完美适配PC端和移动端
• 🔐 权限系统：基于角色的权限管理，支持 ADMIN、STAFF、VISITOR 三种角色
• 🚀 JWT认证：使用 JWT 实现无状态认证
• 📊 API文档：使用 Knife4j 自动生成 API 接口文档
• 🤖 AI摘要：集成 DeepSeek AI 自动生成文章摘要
• 📡 RSS订阅：支持 RSS 订阅和 SiteMap 站点地图
• 🌐 朋友圈：支持发布动态，可从 RSS 订阅拉取
• 🎵 网易云音乐集成：支持展示网易云音乐歌单和歌曲
• 😀 B站表情包集成：支持在评论中使用B站表情包
• ⚙️ 自定义任务系统：可扩展定制开发的定时任务系统
• 🚀 轻量部署：依赖组件少，无需Redis，仅需MySQL，脚本一键部署线上服务器

blog/
│   # 前端
├── front/          
│   ├── src/
│   │   ├── api/         # API接口
│   │   ├── components/  # 公共组件
│   │   ├── pages/       # 页面组件
│   │   ├── router/      # 路由配置
│   │   ├── store/       # Redux状态管理
│   │   └── utils/       # 工具函数
│   ├── package.json
│   └── vite.config.js
│
│   # 后端
├── src/main/java/com/rawchen/blog/
│   ├── config/      # 配置类
│   ├── controller/  # 控制器层
│   ├── entity/      # 实体类
│   ├── dto/         # 数据传输对象
│   ├── vo/          # 视图对象
│   ├── mapper/      # Mapper接口
│   ├── service/     # 服务层
│   ├── common/      # 公共类
│   ├── exception/   # 异常处理
│   └── security/    # 安全相关
├── pom.xml
│
├── sql/                 # 数据库脚本
│   ├── schema.sql       # 表结构
│   └── data.sql         # 初始数据
│
└── docs/                # 文档
    └── API文档.md

• JDK 1.8+
• Node.js 16+
• MySQL 5.7+
• Maven 3.6+

git clone https://github.com/rawchen/blog.git

# 创建数据库
CREATE DATABASE blog DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

# 导入表结构和初始数据
mysql -u root -p blog < sql/schema.sql
mysql -u root -p blog < sql/data.sql

修改 blog/src/main/resources/application-dev.yml:

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/blog?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: your_password

cd blog
mvn clean install
mvn spring-boot:run

后端启动成功后，访问：

• API文档: http://localhost:9999/doc.html

前台展示 & 后台管理：

cd front
pnpm i
pnpm run dev

• 博客: http://localhost:3000
• 管理: http://localhost:3000/admin

• 管理员账号: admin
• 管理员密码: admin123

./remote_deploy.sh

• ✅ 仪表盘数据统计
• ✅ 文章管理（增删改查、发布、草稿、版本历史）
• ✅ 独立页面管理
• ✅ 分类管理
• ✅ 标签管理
• ✅ 评论管理（审核、删除）
• ✅ 朋友圈管理（发布、RSS拉取）
• ✅ 友链管理
• ✅ 站点配置管理

• ✅ 文章列表（分页、分类筛选）
• ✅ 文章详情（Markdown渲染、代码高亮）
• ✅ 文章搜索
• ✅ 分类/标签归档
• ✅ 评论功能
• ✅ 文章点赞、浏览量统计

系统采用基于角色的访问控制：

1. ADMIN：超级管理员，拥有所有权限，可进行文章、配置等管理操作
2. STAFF：工作人员，可访问后台管理界面，拥有部分管理权限
3. VISITOR：访客角色，可访问后台但权限有限

启动后端后，访问 http://localhost:9999/doc.html 查看完整的API文档。

• POST /api/auth/login - 用户登录
• GET /api/auth/info - 获取当前用户信息
• POST /api/auth/logout - 退出登录
• PUT /api/auth/password - 修改密码
• PUT /api/auth/profile - 更新个人资料

• POST /api/article/article-list - 获取文章列表（前台）
• GET /api/article/detail/{id} - 获取文章详情
• GET /api/article/slug/{slug} - 根据别名获取文章
• GET /api/article/timeline - 时间线归档
• GET /api/article/archive - 归档列表
• GET /api/article/random - 随机文章
• GET /api/article/recommend - 推荐文章
• POST /api/article/latest-article - 最新文章
• GET /api/article/admin/list - 获取文章列表（后台）
• POST /api/article/admin - 创建文章
• PUT /api/article/admin - 更新文章
• DELETE /api/article/admin/{id} - 删除文章
• POST /api/article/admin/ai/summary - AI生成文章摘要

• GET /api/article/pages - 获取独立页面列表
• GET /api/article/page/{slug} - 获取独立页面详情
• POST /api/article/admin/pages - 创建独立页面

• GET /api/category/category-list - 获取分类列表
• GET /api/tag/list - 获取标签列表

• GET /api/comment/list/{articleId} - 获取评论列表
• POST /api/comment/submit - 提交评论
• POST /api/comment/like/{id} - 点赞评论
• PUT /api/comment/admin/audit/{id} - 审核评论

• GET /api/moment/list - 获取朋友圈列表（前台）
• POST /api/moment/admin - 添加动态
• POST /api/moment/admin/fetch - 从RSS订阅拉取

• GET /feed - RSS订阅
• GET /sitemap.xml - 站点地图

• GET /api/config/site-config - 获取站点配置（公开）
• GET /api/config/all - 获取所有配置（后台）
• PUT /api/config/batch - 批量更新配置

jwt:
  secret: rawchen-blog-jwt-secret-key-2026-very-long-secret-key-for-security
  expiration: 2592000000   # Access Token过期时间（毫秒），默认1个月
  token-prefix: Bearer
  header: Authorization

spring:
  mail:
    host: smtp.qq.com
    port: 587
    username: your_email@qq.com
    password: your_auth_code
    from: your_email@qq.com

ip2region:
  xdb: file:./data/ip2region_v4.xdb

aliyun:
  oss:
    access-key-id: xxx
    access-key-secret: xxx
    role-arn: acs:ram::xxx:role/xxx
    endpoint: oss-cn-xxx.aliyuncs.com
    bucket-name: xxx
    custom-domain: 
    sts-expiration: 3600
    upload-folder: blog

deepseek:
  api-key: sk-xxx
  base-url: https://api.deepseek.com
  chat-model: deepseek-chat

系统已配置允许所有域名跨域访问，生产环境请根据实际情况修改 CorsConfig.java。

MIT License

感谢以下开源项目：

• Spring Boot
• React
• Ant Design
• MyBatis-Plus