蔚蓝极客-个人博客系统_系统开发案例-程序员客栈

技术信息

语言技术
SpringMVC、Vue、TypeScript、ElementUI、MySQL系统类型
Web行业分类
项目任务、教育校园

作品详情

行业场景

本项目立项的初衷，是解决个人及小型技术团队在技术内容沉淀与知识管理方面的痛点。在当前的互联网环境下，程序员、技术爱好者普遍面临几个问题：第一，主流博客平台（如 CSDN、掘金、简书）广告泛滥、排版受限、内容审核不可控，无法满足个性化写作需求；第二，已有的开源博客系统（如 WordPress、Typecho）多为 PHP 架构，部署复杂、性能有限，且前后端耦合严重，难以二次开发；第三，个人开发者缺乏一个完整的、可自主掌控的前后端分离博客系统，用于技术分享、文章归档和个人品牌建设。
从行业场景看，技术博客是程序员展示技术能力、沉淀知识体系的重要载体，也是企业技术团队对外输出技术影响力的窗口。然而现有解决方案要么过于臃肿（如企业级 CMS），要么过于简陋（如静态博客生成器），缺少一个"轻量、现代、可扩展"的开源博客系统。本项目基于 Spring Boot + Vue 3 的前后端分离架构，采用 JWT 认证、MinIO 对象存储、MyBatis-Plus 数据访问等主流技术栈，目标是打造一个功能完整、代码清晰、易于二次开发的技术博客系统，既可作为个人技术博客使用，也可作为团队技术分享平台，同时可作为学习 Spring Boot 4 和 Vue 3 的参考项目。

功能介绍

本项目是一个基于 Spring Boot + Vue 3 的前后端分离博客系统，主要包含以下功能模块：
1. 用户模块：支持用户注册、登录、头像上传。采用 JWT 令牌认证，密码使用 BCrypt 加密存储，保证账号安全。用户信息包含用户名、邮箱、头像等字段，支持多角色权限管理（普通用户、作者、管理员、超级管理员）。
2. 文章模块：支持文章的发布、查询、详情查看、删除。文章包含标题、封面、摘要、正文、分类、标签等字段。发布文章时可关联多个标签，查询列表时自动组装标签信息。支持文章封面上传到 MinIO 对象存储，返回可直接访问的 URL。
3. 分类模块：支持分类的添加和列表查询，文章可归属于某个分类，方便内容归档。
4. 标签模块：支持标签的添加和列表查询，文章可关联多个标签，实现多维度的内容组织。
5. 文件上传模块：基于 MinIO 对象存储，支持用户头像和文章封面的上传，返回预签名 URL 供前端直接访问。
6. 统一返回模块：所有接口返回统一的 Result 结构（code、message、data），前端可统一处理成功和失败情况。
7. AOP 日志模块：通过自定义注解 + AOP 切面，记录关键操作的执行时间、方法名、参数、返回值，便于问题排查和性能监控。
8. 分页查询模块：文章列表支持分页查询，前端提供分页组件，支持页码切换、上一页、下一页、省略号显示等交互。
前端使用 Element Plus 组件库，配合 Pinia 状态管理、Vue Router 路由、Axios 请求封装，实现了首页首屏视频展示、文章卡片列表、文章详情、登录注册等页面，并集成了数据矩阵过渡动画、星空背景等视觉效果，整体风格偏向极客技术风。

项目实现

一、我负责的任务
本项目由我独立完成，涵盖后端和前端全部开发。后端负责三层模块化架构搭建、数据库表设计、实体类/Mapper/Service/Controller 编写、JWT 认证、BCrypt 密码加密、MinIO 文件上传、AOP 日志切面、统一异常处理、分页查询、跨域配置等。前端负责 Vue 3 + TypeScript 项目初始化、Element Plus 集成、Pinia 状态管理、Vue Router 路由、Axios 请求封装、文章列表/详情/登录/注册等页面开发、分页组件封装、首屏视频与数据矩阵过渡动画实现。二、技术栈与架构
后端采用 Spring Boot 4.1.1 + Java 17 + MyBatis-Plus 3.5.16 + MySQL 8.0.28，使用 JWT 做认证、BCrypt 加密密码、MinIO 做对象存储。前端采用 Vue 3.5.41 + TypeScript + Vite + Element Plus + Pinia + Vue Router + Axios。整体采用前后端分离架构，后端三层模块化设计（公共模块、领域模块、Web 模块），前端按功能模块划分目录。三、实现亮点
JWT + BCrypt 双重安全：登录返回 JWT 令牌，密码加盐哈希存储。
MinIO 对象存储：头像和封面统一上传，返回预签名 URL。
AOP 日志切面：自定义注解记录方法执行时间、参数、返回值，异步写库不影响主业务。
统一返回结构：所有接口返回 Result，前端 Axios 拦截器统一处理。
分页查询封装：后端用 MyBatis-Plus IPage 分页，前端封装分页组件，支持省略号、当前页高亮。
前端视觉设计：首页首屏 MP4 + 星空背景，MP4 与列表之间加入 Canvas 数据矩阵过渡动画。