🌟 Personal Blog Records 个人博客记录

一个融合现代前端技术与企业级后端架构的全栈个人博客解决方案

📖 项目简介

Personal Blog Records 是一个集成了现代化静态博客框架 Mizuki 和企业级后台管理系统 RuoYi 的全栈个人博客项目。该项目旨在为开发者提供一个功能丰富、易于定制且具备完整后台管理能力的个人博客解决方案。

🎯 核心理念

前端现代化：采用 Astro 静态站点生成器，提供极致的性能和用户体验
后端企业级：基于 Spring Boot + Vue 的成熟技术栈，确保系统的稳定性和扩展性
全栈一体化：前后端分离架构，支持独立开发和部署
功能丰富：内置多种特色页面和高级功能，满足个人博客的各种需求

🚀 快速开始

📋 环境要求

# 前端环境
Node.js >= 20.0.0
pnpm >= 9.0.0

# 后端环境  
Java >= 1.8
Maven >= 3.6.0
MySQL >= 5.7
Redis >= 5.0

🛠️ 安装步骤

1. 克隆项目

git clone https://gitee.com/zzt40404040/personal-blog-records.git
cd personal-blog-records

2. 后端部署 (RuoYi)

# 进入后端目录
cd RuoYi

# 修改数据库配置
# 编辑 ruoyi-admin/src/main/resources/application-druid.yml

# 初始化数据库
# 执行 sql/ry_20250522.sql 和 sql/quartz.sql

# 启动后端服务
mvn spring-boot:run
# 或使用脚本
./ry.sh start

后端服务默认运行在 http://localhost:8848

3. 前端部署 (Mizuki)

# 进入前端目录
cd ../mizuki

# 安装依赖
pnpm install

# 配置博客设置
# 编辑 src/config.ts

# 启动开发服务器
pnpm dev

前端服务默认运行在 http://localhost:4321

🔧 基础配置

后端配置

# application.yml 关键配置
server:
  port: 8848

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/ry_vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: your_username
    password: your_password
  
  redis:
    host: localhost
    port: 6379
    password: your_redis_password

前端配置

// src/config.ts 关键配置
export const siteConfig = {
  title: "你的博客名称",
  subtitle: "你的博客描述",
  siteURL: "https://your-domain.com",
  backendAPI: "http://localhost:8848", // 后端API地址
}

🎨 功能特性

📱 前端特色页面

页面	功能描述	技术实现
🏠 首页	文章列表展示，支持置顶、分类筛选	Astro + Tailwind CSS
📝 博客文章	Markdown渲染，代码高亮，数学公式支持	Expressive Code + KaTeX
🎬 动漫追踪	记录观看进度和评分	自定义组件
👥 友链页面	美观的朋友网站卡片展示	Svelte 组件
📓 生活日记	类似社交媒体的生活记录分享	动态内容管理
📚 归档页面	时间线形式的文章归档	自动生成
ℹ️ 关于页面	个人信息和项目展示	配置驱动

🛠️ 技术功能

🔍 高级搜索：基于 Pagefind 的全文搜索功能
🌙 主题切换：深色/浅色模式自动适配
📱 响应式设计：完美适配各种设备屏幕
⚡ 性能优化：懒加载、缓存策略、图片优化
🤖 AI 对话：集成看板娘智能对话功能（目前使用免费阿里千文模型）
📊 SEO 优化：自动生成 sitemap 和 meta 标签

🔧 后台管理功能

👥 用户管理：完整的用户权限管理体系
📝 文章管理：富文本编辑器，支持 Markdown
📁 文件管理：图片、附件统一管理
⚙️ 系统配置：灵活的系统参数配置
📈 数据统计：访问量、用户行为分析
⏰ 定时任务：自动化任务调度管理
🛡️ 安全防护：JWT 认证、XSS 防护、SQL 注入防护

🔧 技术架构

🏗️ 整体架构

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Mizuki前端    │    │   RuoYi后端     │    │   数据存储层    │
│   (Astro)       │◄──►│ (Spring Boot)   │◄──►│ (MySQL/Redis)   │
│                 │    │                 │    │                 │
│ • 静态站点生成  │    │ • RESTful API   │    │ • 关系型数据    │
│ • 响应式设计    │    │ • 权限认证      │    │ • 缓存数据      │
│ • 组件化开发    │    │ • 业务逻辑处理  │    │ • 会话管理      │
└─────────────────┘    └─────────────────┘    └─────────────────┘

📊 技术栈详情

前端技术栈 (Mizuki)

{
  "框架": "Astro 5.17.1",
  "语言": "TypeScript 5.9.2",
  "样式": "Tailwind CSS 3.4.19",
  "组件": "Svelte 5.46.1",
  "构建工具": "Vite",
  "包管理": "pnpm 10.22.0"
}

后端技术栈 (RuoYi)

<!-- 核心框架 -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
  <version>2.5.15</version>
</dependency>

<!-- 安全框架 -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-security</artifactId>
</dependency>

<!-- 数据库相关 -->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>druid-spring-boot-starter</artifactId>
  <version>1.2.27</version>
</dependency>

<!-- 缓存 -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

📁 项目结构

personal-blog-records/
├── mizuki/                    # 前端博客项目
│   ├── src/
│   │   ├── content/          # 博客内容 (Markdown)
│   │   ├── components/       # UI 组件
│   │   ├── pages/           # 页面路由
│   │   ├── styles/          # 样式文件
│   │   └── config.ts        # 全局配置
│   ├── public/              # 静态资源
│   └── package.json
│
├── RuoYi/                   # 后端管理系统
│   ├── ruoyi-admin/        # 后台管理模块
│   ├── ruoyi-framework/    # 核心框架
│   ├── ruoyi-system/       # 系统模块
│   ├── ruoyi-common/       # 通用工具
│   ├── ruoyi-ui/          # 前端管理界面
│   └── pom.xml
│
└── README.md               # 项目说明文档

🎯 部署指南

🌐 生产环境部署

前端部署 (Vercel/Netlify)

# 构建静态文件
cd mizuki
pnpm build

# 部署到 Vercel
vercel --prod

# 或部署到 Netlify
netlify deploy --prod

后端部署 (Docker/Linux)

# 打包后端应用
cd RuoYi
mvn clean package -DskipTests

# 运行 jar 包
java -jar ruoyi-admin/target/ruoyi-admin.jar

# 或使用 Docker (推荐)
docker-compose up -d

⚙️ 环境变量配置

# .env (前端)
SITE_URL=https://your-blog.com
BACKEND_API=https://api.your-blog.com
UMAMI_API_KEY=your_analytics_key

# application-prod.yml (后端)
spring:
  datasource:
    url: jdbc:mysql://prod-db:3306/blog_records
    username: ${DB_USERNAME}
    password: ${DB_PASSWORD}
  redis:
    host: ${REDIS_HOST}
    password: ${REDIS_PASSWORD}

🤝 开发指南

📝 代码规范

前端：遵循 TypeScript 严格模式，使用 ESLint + Prettier
后端：遵循阿里巴巴 Java 开发手册，使用 CheckStyle
Git：采用 Conventional Commits 规范

🔄 开发流程

# 1. 创建功能分支
git checkout -b feature/new-feature

# 2. 开发并提交代码
git add .
git commit -m "feat: add new feature"

# 3. 推送并创建 PR
git push origin feature/new-feature

🧪 测试策略

单元测试：JUnit 5 + Mockito (后端)
组件测试：Vitest + Testing Library (前端)
端到端测试：Playwright

📈 项目路线图

✅ 已完成功能

基础博客功能
后台管理系统
响应式设计
多语言支持
SEO 优化
评论系统集成
AI 对话功能

🚀 计划中功能

🔧 Mizuki与RuoYi菜单系统深度整合

统一菜单管理后台
- 将Mizuki的导航菜单项纳入RuoYi后台管理系统
- 实现菜单的增删改查、权限控制和状态管理
- 支持菜单层级结构和父子关系配置
动态菜单同步机制
- 建立前后端菜单数据同步接口
- 实现菜单变更的实时推送和缓存更新
- 支持菜单项的启用/禁用状态同步
菜单类型扩展支持
- 扩展RuoYi菜单实体支持Mizuki特有页面类型：
  - 动漫追踪页面 (anime)
  - 友链展示页面 (friends)
  - 生活日记页面 (diary)
  - 项目展示页面 (projects)
  - 技能展示页面 (skills)
  - 时间轴页面 (timeline)
  - 设备展示页面 (devices)
  - 相册页面 (albums)
响应式菜单适配
- 移植Mizuki的移动端菜单面板到RuoYi框架
- 实现不同设备下的菜单显示策略
- 支持侧边栏、顶部导航、下拉菜单等多种布局
菜单权限集成
- 将Mizuki页面访问权限对接RuoYi权限系统
- 实现基于角色的菜单可见性控制
- 支持菜单项的访问日志记录

🎯 功能增强计划

PWA 支持 - 离线访问和移动设备安装
内容推荐算法 - 基于用户行为的智能推荐
数据可视化仪表板 - 博客访问统计和用户分析
多用户博客平台 - 支持多作者协作的内容管理
实时通知系统 - 评论提醒和系统消息推送
SEO优化增强 - 结构化数据和搜索引擎优化

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

感谢以下开源项目的贡献：

Mizuki - 现代化的静态博客模板
RuoYi - 企业级后台管理系统
Astro - 下一代网站构建工具
Spring Boot - Java 应用开发框架

📞 联系方式

作者：zzTzz
博客：https://zztzz.xyz/
邮箱：3227689893@qq.com
Gitee：https://gitee.com/zzt40404040

如果你觉得这个项目对你有帮助，请给它一个 ⭐ Star！

⬆ 回到顶部

zzTzz的博客