Skip to content

Jcho526/personal_blog

BranchesTags

Repository files navigation

个人博客网站

1. 项目概述

个人博客网站是一个展示个人思想、分享知识和经验的平台，主要用于记录个人生活、技术学习、行业见解等内容。本方案旨在构建一个功能完整、界面美观、易于维护的现代个人博客网站，基于Spring Boot + MySQL + MyBatis + JWT等技术栈。

2. 核心功能模块

2.1 内容管理模块

  • 文章发布：支持富文本编辑、Markdown格式、图片上传
  • 文章管理：编辑、删除、置顶、草稿管理
  • 分类与标签：文章分类、标签管理、分类统计
  • 内容版本控制：历史版本记录、恢复功能

2.2 用户系统模块

  • 用户注册与登录：邮箱注册、密码找回、第三方登录（可选）
  • 个人中心：资料修改、密码修改、消息通知
  • 权限管理：普通用户、管理员角色区分

2.3 前端展示模块

  • 响应式首页：文章列表、分类导航、热门文章
  • 文章详情页：内容展示、目录导航、相关推荐
  • 分类与归档页：按分类、按时间归档
  • 搜索功能：全文搜索、标签搜索
  • 个人简介页：博主信息、联系方式、技能展示

2.4 互动功能模块

  • 评论系统：文章评论、回复、审核
  • 点赞与收藏：文章点赞、收藏功能
  • 分享功能：社交媒体分享
  • 订阅功能：RSS订阅、邮件订阅（可选）

2.5 后台管理模块

  • 仪表盘：数据统计、内容概览
  • 内容管理：文章、分类、标签的管理
  • 用户管理：用户信息、权限管理
  • 评论管理：评论审核、删除
  • 系统设置：网站配置、SEO设置

3. 技术栈选择

3.1 后端技术

  • 框架：Spring Boot 3.x
  • 语言：Java 17+
  • ORM框架：MyBatis-Plus 3.5+
  • 数据库：MySQL 8.0+
  • 认证：JWT（JSON Web Token）
  • 安全：Spring Security 6.x
  • 缓存：Redis（可选）
  • 工具库：
    • Lombok（简化代码）
    • MapStruct（对象映射）
    • Swagger（API文档）
    • Validator（参数校验）
    • Logback（日志管理）

3.2 前端技术

  • 框架：Vue 3 + Composition API
  • 构建工具：Vite
  • 状态管理：Pinia
  • 路由：Vue Router
  • UI组件库：Element Plus（或自定义组件）
  • CSS预处理器：SCSS/Sass
  • HTTP客户端：Axios
  • Markdown渲染：markdown-it
  • 代码高亮：highlight.js
  • 响应式设计：媒体查询 + Flexbox/Grid

3.3 开发工具

  • IDE：IntelliJ IDEA（后端）、VS Code（前端）
  • 版本控制：Git
  • 构建工具：Maven（后端）、npm（前端）
  • 数据库工具：Navicat Premium、MySQL Workbench
  • API测试：Postman、Swagger UI

3.4 部署与运维

  • 服务器：阿里云ECS（或腾讯云CVM）
  • 容器化：Docker + Docker Compose
  • CI/CD：GitHub Actions（自动构建和部署）
  • 域名：阿里云域名服务
  • SSL证书：Let's Encrypt（免费SSL证书）
  • 监控：Spring Boot Actuator、ELK Stack（可选）

4. 架构设计

4.1 整体架构

采用前后端分离架构：

  • 前端：Vue 3单页应用，通过API与后端通信
  • 后端：Spring Boot RESTful API服务
  • 数据库：MySQL存储数据
  • 缓存：Redis缓存热点数据（可选）
  • 文件存储：本地文件系统或对象存储服务（如阿里云OSS）

4.2 目录结构

后端目录结构

blog-backend/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/
│   │   │       └── example/
│   │   │           └── blog/
│   │   │               ├── common/            # 公共模块
│   │   │               │   ├── annotation/     # 自定义注解
│   │   │               │   ├── config/         # 配置类
│   │   │               │   ├── constant/       # 常量类
│   │   │               │   ├── exception/      # 异常处理
│   │   │               │   ├── handler/        # 处理器
│   │   │               │   ├── interceptor/    # 拦截器
│   │   │               │   ├── response/       # 响应封装
│   │   │               │   └── utils/          # 工具类
│   │   │               ├── controller/         # 控制器
│   │   │               ├── entity/             # 实体类
│   │   │               ├── mapper/             # MyBatis映射器
│   │   │               ├── service/            # 服务层
│   │   │               │   └── impl/           # 服务实现
│   │   │               ├── dto/                # 数据传输对象
│   │   │               └── BlogApplication.java # 应用入口
│   │   └── resources/
│   │       ├── mapper/                         # MyBatis XML映射文件
│   │       ├── application.yml                 # 应用配置
│   │       └── application-dev.yml             # 开发环境配置
│   └── test/                                   # 测试代码
├── pom.xml                                     # Maven依赖
└── .gitignore                                  # Git忽略文件

前端目录结构

blog-frontend/
├── public/                # 静态资源
├── src/
│   ├── assets/            # 静态资源（图片、样式等）
│   ├── components/        # 公共组件
│   ├── views/             # 页面组件
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   ├── api/               # API调用
│   ├── utils/             # 工具函数
│   ├── plugins/           # 插件
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .env                   # 环境变量
├── index.html             # HTML模板
├── package.json           # 依赖管理
└── vite.config.js         # Vite配置

4.3 数据库设计

用户表（user）

字段名 数据类型 约束 描述
id BIGINT PRIMARY KEY, AUTO_INCREMENT 用户ID
username VARCHAR(50) NOT NULL, UNIQUE 用户名
email VARCHAR(100) NOT NULL, UNIQUE 邮箱
password VARCHAR(100) NOT NULL 密码（加密存储）
avatar VARCHAR(255) 头像URL
bio TEXT 个人简介
role VARCHAR(20) NOT NULL, DEFAULT 'user' 角色（user/admin）
created_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP 创建时间
updated_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 更新时间

文章表（article）

字段名 数据类型 约束 描述
id BIGINT PRIMARY KEY, AUTO_INCREMENT 文章ID
title VARCHAR(200) NOT NULL 标题
content TEXT NOT NULL 内容
excerpt VARCHAR(500) 摘要
cover VARCHAR(255) 封面图片URL
author_id BIGINT NOT NULL, FOREIGN KEY (user.id) 作者ID
category_id BIGINT FOREIGN KEY (category.id) 分类ID
status VARCHAR(20) NOT NULL, DEFAULT 'draft' 状态（draft/published）
view_count INT NOT NULL, DEFAULT 0 浏览量
like_count INT NOT NULL, DEFAULT 0 点赞数
comment_count INT NOT NULL, DEFAULT 0 评论数
is_top TINYINT NOT NULL, DEFAULT 0 是否置顶（0/1）
created_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP 创建时间
updated_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 更新时间

分类表（category）

字段名 数据类型 约束 描述
id BIGINT PRIMARY KEY, AUTO_INCREMENT 分类ID
name VARCHAR(50) NOT NULL, UNIQUE 分类名称
slug VARCHAR(100) NOT NULL, UNIQUE 分类别名（URL友好）
description VARCHAR(255) 分类描述
article_count INT NOT NULL, DEFAULT 0 文章数量
created_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP 创建时间
updated_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 更新时间

标签表（tag）

字段名 数据类型 约束 描述
id BIGINT PRIMARY KEY, AUTO_INCREMENT 标签ID
name VARCHAR(50) NOT NULL, UNIQUE 标签名称
slug VARCHAR(100) NOT NULL, UNIQUE 标签别名（URL友好）
article_count INT NOT NULL, DEFAULT 0 文章数量
created_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP 创建时间
updated_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 更新时间

文章标签关联表（article_tag）

字段名 数据类型 约束 描述
article_id BIGINT PRIMARY KEY, FOREIGN KEY (article.id) 文章ID
tag_id BIGINT PRIMARY KEY, FOREIGN KEY (tag.id) 标签ID

评论表（comment）

字段名 数据类型 约束 描述
id BIGINT PRIMARY KEY, AUTO_INCREMENT 评论ID
article_id BIGINT NOT NULL, FOREIGN KEY (article.id) 文章ID
user_id BIGINT NOT NULL, FOREIGN KEY (user.id) 用户ID
content TEXT NOT NULL 评论内容
parent_id BIGINT FOREIGN KEY (comment.id) 父评论ID（用于回复）
status VARCHAR(20) NOT NULL, DEFAULT 'approved' 状态（approved/pending）
created_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP 创建时间
updated_at DATETIME NOT NULL, DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 更新时间

5. 核心功能实现方案

5.1 内容管理模块

  • 文章发布：

    • 使用富文本编辑器（如CKEditor、TinyMCE）或Markdown编辑器（如Editor.md）
    • 图片上传使用Spring Boot的MultipartFile处理，存储到本地或对象存储服务
    • 文章内容支持HTML和Markdown格式，后端存储原始格式，前端根据需要渲染

  • 文章管理：

    • 使用MyBatis-Plus实现CRUD操作
    • 支持按状态、分类、时间等筛选
    • 实现文章置顶、草稿保存功能
    • 使用AOP或拦截器实现文章浏览量统计

  • 分类与标签：

    • 实现分类和标签的CRUD操作
    • 文章与标签的多对多关联通过中间表实现
    • 分类和标签的文章数量统计通过定时任务或触发器更新

5.2 用户系统模块

  • 认证系统：

    • 使用JWT实现无状态认证
    • 登录时生成token，存储在前端localStorage中
    • 实现token刷新机制，避免频繁登录
    • 使用Spring Security的过滤器验证token

  • 权限控制：

    • 基于角色的权限控制（RBAC）
    • 使用Spring Security的注解（如@PreAuthorize）实现方法级权限控制
    • 区分普通用户和管理员权限

  • 密码安全：

    • 使用BCryptPasswordEncoder对密码进行加密存储
    • 实现密码强度校验
    • 提供密码找回功能（通过邮箱验证）

5.3 前端展示模块

  • 响应式设计：

    • 使用媒体查询和Flexbox/Grid实现不同设备的适配
    • 移动端优先设计，确保在手机、平板、电脑上都有良好的显示效果

  • 路由设计：

    • 使用Vue Router实现单页应用路由
    • 支持嵌套路由和动态路由
    • 实现路由守卫，处理未登录访问需要权限的页面

  • 状态管理：

    • 使用Pinia管理全局状态
    • 存储用户信息、文章列表、分类标签等数据
    • 实现状态持久化，避免页面刷新后数据丢失

  • 性能优化：

    • 实现图片懒加载
    • 使用Vue的异步组件和路由懒加载
    • 优化API请求，减少不必要的网络请求
    • 使用CDN加速静态资源

5.4 互动功能模块

  • 评论系统：

    • 实现嵌套评论和回复功能
    • 支持评论审核（管理员）
    • 使用WebSocket实现评论实时更新（可选）

  • 点赞功能：

    • 实现文章点赞和取消点赞
    • 使用Redis存储点赞记录，提高性能
    • 异步更新数据库中的点赞数

  • 分享功能：

    • 集成社交媒体分享SDK（如微信、微博、QQ）
    • 生成带有文章信息的分享卡片

  • 搜索功能：

    • 使用MySQL的全文搜索功能
    • 实现按标题、内容、标签的搜索
    • 支持搜索结果分页和排序

5.5 后台管理模块

  • 仪表盘：

    • 使用ECharts实现数据可视化
    • 展示文章数量、浏览量、评论数等统计数据
    • 显示最近发布的文章和待审核的评论

  • 内容管理：

    • 实现文章、分类、标签的CRUD操作
    • 支持批量操作（如批量删除、批量修改状态）
    • 提供文章编辑器，支持富文本和Markdown

  • 用户管理：

    • 实现用户信息管理
    • 支持用户角色修改
    • 显示用户注册时间、最后登录时间等信息

  • 系统设置：

    • 实现网站基本信息设置（如网站名称、描述、Logo）
    • SEO设置（如网站标题、关键词、描述）
    • 邮件配置（用于密码找回、评论通知等）

6. 开发流程

6.1 开发环境搭建

  1. 后端环境：

    • 安装JDK 17+
    • 安装Maven 3.8+
    • 安装MySQL 8.0+
    • 安装IntelliJ IDEA（推荐）

  2. 前端环境：

    • 安装Node.js 16+
    • 安装npm或yarn
    • 安装VS Code（推荐）

  3. 数据库配置：

    • 创建数据库：CREATE DATABASE blog CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
    • 创建数据库用户并授权
    • 导入初始化SQL脚本（创建表结构）

6.2 开发阶段划分

  1. 需求分析与设计阶段（1-2天）

    • 确定具体功能需求
    • 设计数据库模型
    • 设计界面原型

  2. 后端开发阶段（5-7天）

    • 搭建Spring Boot项目
    • 配置MyBatis-Plus和MySQL
    • 实现实体类和Mapper
    • 开发Service层和Controller层
    • 实现认证和权限控制
    • 编写单元测试

  3. 前端开发阶段（5-7天）

    • 搭建Vue 3 + Vite项目
    • 配置路由和状态管理
    • 实现页面组件
    • 开发API调用
    • 实现响应式设计
    • 集成第三方库（如编辑器、图表库）

  4. 联调测试阶段（2-3天）

    • 前后端联调
    • 功能测试
    • 性能测试
    • 兼容性测试

  5. 部署上线阶段（1-2天）

    • 构建生产版本
    • 配置服务器
    • 部署应用
    • 域名解析和SSL配置

6.3 测试策略

  • 单元测试：

    • 使用JUnit 5和Spring Boot Test
    • 测试Service层和工具类
    • 覆盖率目标：80%以上

  • 集成测试：

    • 测试API接口
    • 测试数据库操作
    • 测试认证和权限控制

  • 端到端测试：

    • 使用Cypress或Selenium
    • 测试完整用户流程
    • 测试响应式设计在不同设备上的表现

7. 部署方案

7.1 服务器配置

  • 推荐配置：2核CPU、4GB内存、50GB存储空间
  • 操作系统：Ubuntu 20.04 LTS
  • Web服务器：Nginx
  • 应用服务器：Spring Boot内置Tomcat
  • 数据库：MySQL 8.0
  • 缓存：Redis（可选）

7.2 部署步骤

  1. 服务器初始化：

    • 更新系统包：apt update && apt upgrade
    • 安装Java：apt install openjdk-17-jdk
    • 安装MySQL：apt install mysql-server
    • 安装Nginx：apt install nginx
    • 配置防火墙：ufw allow 80/tcp && ufw allow 443/tcp

  2. 数据库配置：

    • 启动MySQL服务：systemctl start mysql
    • 配置MySQL：mysql_secure_installation
    • 创建数据库和用户
    • 导入初始化SQL脚本

  3. 后端部署：

    • 构建Spring Boot项目：mvn clean package -DskipTests

    • 将jar包上传到服务器

    • 创建启动脚本：

      #!/bin/bash
java -jar blog-backend.jar --spring.profiles.active=prod

    • 使用systemd管理服务：

      [Unit]
Description=Blog Backend Service
After=syslog.target

[Service]
User=ubuntu
ExecStart=/path/to/start.sh
SuccessExitStatus=143

[Install]
WantedBy=multi-user.target

  4. 前端部署：

    • 构建Vue项目：npm run build

    • 将dist目录上传到服务器

    • 配置Nginx：

      server {
   listen 80;
   server_name example.com;

   location / {
       root /path/to/blog-frontend/dist;
       index index.html;
       try_files $uri $uri/ /index.html;
   }

   location /api {
       proxy_pass http://localhost:8080;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
}

  5. SSL配置：

    • 安装Certbot：apt install certbot python3-certbot-nginx
    • 获取SSL证书：certbot --nginx -d example.com
    • 配置自动续期：certbot renew --dry-run

7.3 运维方案

  • 日志管理：

    • 使用Spring Boot的日志配置，将日志输出到指定目录
    • 配置日志轮转，避免日志文件过大
    • 使用ELK Stack（Elasticsearch、Logstash、Kibana）集中管理日志（可选）

  • 监控告警：

    • 使用Spring Boot Actuator暴露应用指标
    • 集成Prometheus和Grafana监控系统（可选）
    • 设置CPU、内存、磁盘使用率告警

  • 备份策略：

    • 定期备份MySQL数据库（使用mysqldump）
    • 备份上传的图片和文件
    • 备份配置文件和代码

  • 安全更新：

    • 定期更新系统包和依赖库
    • 及时修复安全漏洞
    • 配置防火墙，限制不必要的端口访问

8. 总结与展望

本方案提供了一个完整的个人博客网站开发技术方案，基于Spring Boot + MySQL + MyBatis + JWT等技术栈。通过本方案的实施，您将拥有一个功能完整、界面美观、易于维护的现代个人博客网站。

未来可以考虑以下扩展功能：

  • 集成内容管理系统（CMS），提供更友好的编辑体验
  • 实现多语言支持，打造国际化博客
  • 集成第三方服务，如Google Analytics、Disqus评论等
  • 开发移动端App，提供更好的移动阅读体验
  • 实现PWA（渐进式Web应用），支持离线访问
  • 集成AI功能，如文章自动摘要、智能推荐等

通过本方案的实施，您将拥有一个属于自己的专业个人博客网站，为您的个人品牌建设和知识分享提供有力支持。

About

个人博客，用于记录个人学习笔记

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages