一个基于 Spring Boot + Vue 3 的前后端分离个人博客系统，包含前台展示、后台管理和 RESTful API 三大模块。
d:\Trae_Project\MyWeb\
│
├── myweb-api/ # Spring Boot REST API
│ ├── pom.xml # Maven 依赖配置
│ ├── Dockerfile # Docker 构建文件
│ └── src/main/java/com/myweb/api/
│ ├── ApiApplication.java # 启动入口
│ ├── config/ # 配置类
│ │ ├── SecurityConfig.java # Spring Security 配置
│ │ ├── CorsConfig.java # 跨域配置
│ │ └── RedisConfig.java # Redis 缓存配置
│ ├── controller/ # REST 控制器
│ │ ├── AuthController.java # 登录认证接口
│ │ ├── ArticleController.java # 文章 CRUD 接口
│ │ └── CategoryController.java # 分类接口
│ ├── model/ # JPA 实体类
│ │ ├── User.java # 用户模型
│ │ ├── Article.java # 文章模型
│ │ └── Category.java # 分类模型
│ ├── repository/ # 数据访问层
│ │ ├── UserRepository.java
│ │ ├── ArticleRepository.java
│ │ └── CategoryRepository.java
│ ├── service/ # 业务逻辑层
│ │ ├── AuthService.java # 认证服务
│ │ ├── ArticleService.java # 文章服务
│ │ ├── CategoryService.java # 分类服务
│ │ └── InitService.java # 初始化数据
│ ├── dto/ # 数据传输对象
│ │ ├── ApiResponse.java # 统一响应格式
│ │ ├── LoginRequest.java # 登录请求
│ │ ├── LoginResponse.java # 登录响应
│ │ ├── ArticleRequest.java # 文章请求
│ │ └── ArticleDTO.java # 文章数据传输
│ └── security/ # 安全组件
│ ├── JwtUtil.java # JWT 工具类
│ └── JwtAuthFilter.java # JWT 认证过滤器
│
├── myweb-frontend/ # Vue 3 前台博客
│ ├── package.json # 依赖配置
│ ├── vite.config.js # Vite 构建配置
│ └── src/
│ ├── main.js # 入口文件
│ ├── App.vue # 根组件（导航栏 + 页脚）
│ ├── style.css # 全局样式
│ ├── router/
│ │ └── index.js # 路由配置
│ ├── api/
│ │ └── index.js # Axios API 封装
│ ├── components/
│ │ └── NavBar.vue # 导航栏组件
│ └── views/
│ ├── Home.vue # 首页
│ ├── ArticleDetail.vue # 文章详情页
│ └── CategoryArticles.vue # 分类文章列表
│
├── myweb-admin/ # Vue 3 后台管理
│ ├── package.json # 依赖配置
│ ├── vite.config.js # Vite 构建配置 (/admin/ 基础路径)
│ └── src/
│ ├── main.js # 入口文件（Element Plus）
│ ├── App.vue # 根组件
│ ├── router/
│ │ └── index.js # 路由 + 鉴权守卫
│ ├── api/
│ │ └── index.js # Axios + JWT 拦截器
│ ├── stores/
│ │ └── auth.js # 认证状态管理
│ └── views/
│ ├── Login.vue # 登录页面
│ ├── Layout.vue # 后台布局（侧边栏 + 头部）
│ ├── ArticleList.vue # 文章列表管理
│ └── ArticleEditor.vue # 文章编辑器（Tiptap）
│
├── nginx/
│ └── nginx.conf # Nginx 反向代理配置
│
├── docker-compose.yml # Docker 编排（MySQL+Redis+API+Nginx）
├── Dockerfile # API Docker 构建文件
├── deploy.sh # Linux 一键部署脚本
├── start-dev.bat # Windows 本地开发脚本
└── .gitignore # Git 忽略配置
| 层级 |
技术 |
用途 |
| 后端 |
Spring Boot 3.2 |
REST API 框架 |
|
Spring Data JPA |
ORM 持久化 |
|
Spring Security |
认证与授权 |
|
JWT (jjwt 0.12) |
无状态令牌认证 |
|
MySQL 8.0 |
关系型数据库 |
|
Redis 7 |
热点数据缓存 |
|
Maven 3.9 |
项目构建 |
| 前台 |
Vue 3 |
前端框架 |
|
Vue Router 4 |
路由管理 |
|
Axios |
HTTP 客户端 |
|
Vite 8 |
构建工具 |
| 后台 |
Vue 3 |
前端框架 |
|
Element Plus |
UI 组件库 |
|
Tiptap |
富文本编辑器 |
|
Vue Router 4 |
路由 + 鉴权守卫 |
|
Axios + JWT Interceptor |
HTTP + 令牌管理 |
| 部署 |
Docker / Docker Compose |
容器化部署 |
|
Nginx |
反向代理 / 静态资源服务 |
| 功能 |
说明 |
| 博客首页 |
顶部搜索框、最新文章卡片展示、全部文章分页列表 |
| 分类导航 |
顶部导航栏展示全部分类，点击进入分类文章列表 |
| 文章详情 |
面包屑导航、标题/分类/标签/阅读数、Markdown 渲染、代码高亮 |
| 文章搜索 |
按标题/摘要关键词搜索 |
| 自动建表 |
JPA 自动创建数据库表结构 |
| 数据初始化 |
首次启动自动创建管理员账号和默认分类 |
| 功能 |
说明 |
| 安全登录 |
JWT 无状态认证，未登录自动跳转登录页 |
| 文章列表 |
分页展示全部文章（包含草稿），状态标签（已发布/草稿），快捷删除 |
| 文章编辑器 |
Tiptap 富文本编辑器，支持 H1/H2/H3、加粗、斜体、代码、代码块 |
| 文章发布 |
填写标题、分类、标签、摘要、封面图，可选择发布或保存草稿 |
| 文章修改 |
编辑已有文章，自动回填所有字段 |
| 文章删除 |
二次确认后删除 |
| 接口 |
方法 |
鉴权 |
说明 |
/api/auth/login |
POST |
否 |
管理员登录 |
/api/articles/published |
GET |
否 |
获取已发布文章（分页） |
/api/articles/category/{id} |
GET |
否 |
按分类获取文章 |
/api/articles/recent |
GET |
否 |
获取最新 10 篇文章 |
/api/articles/search |
GET |
否 |
搜索文章 |
/api/articles/{id} |
GET |
否 |
获取文章详情（+1 阅读数） |
/api/categories |
GET |
否 |
获取全部分类 |
/api/articles/admin/all |
GET |
是 |
后台获取全部文章 |
/api/articles/admin/{id} |
GET |
是 |
后台获取单篇文章 |
/api/articles |
POST |
是 |
创建文章 |
/api/articles/{id} |
PUT |
是 |
更新文章 |
/api/articles/{id} |
DELETE |
是 |
删除文章 |
/api/categories |
POST |
是 |
创建分类 |
| 字段 |
类型 |
说明 |
| id |
BIGINT (PK) |
主键自增 |
| username |
VARCHAR(50) |
用户名（唯一） |
| password |
VARCHAR |
BCrypt 加密密码 |
| nickname |
VARCHAR(100) |
昵称 |
| created_at |
DATETIME |
创建时间 |
| 字段 |
类型 |
说明 |
| id |
BIGINT (PK) |
主键自增 |
| title |
VARCHAR(200) |
文章标题 |
| summary |
TEXT |
文章摘要 |
| content |
LONGTEXT |
文章内容（HTML） |
| cover_image |
VARCHAR(500) |
封面图 URL |
| category_id |
BIGINT (FK) |
分类 ID |
| tags |
VARCHAR(100) |
标签（逗号分隔） |
| published |
BOOLEAN |
是否发布 |
| view_count |
INT |
阅读数 |
| created_at |
DATETIME |
创建时间 |
| updated_at |
DATETIME |
更新时间 |
| 字段 |
类型 |
说明 |
| id |
BIGINT (PK) |
主键自增 |
| name |
VARCHAR(50) |
分类名称（唯一） |
| description |
VARCHAR(200) |
分类描述 |
| sort_order |
INT |
排序序号 |
| created_at |
DATETIME |
创建时间 |
- JDK 17+
- Node.js 18+
- MySQL 8.0
- Redis 7+
- Maven 3.9+
方式一：一键启动
直接双击 start-dev.bat
方式二：分别启动
# 1. 启动数据库
# 确保 MySQL 运行在 localhost:3306，Redis 运行在 localhost:6379
# 2. 启动 API
cd myweb-api
mvn spring-boot:run
# 3. 启动前台博客（新终端）
cd myweb-frontend
npm install
npm run dev
# 4. 启动后台管理（新终端）
cd myweb-admin
npm install
npm run dev
| 用户名 |
密码 |
角色 |
| admin |
admin123 |
管理员 |
| 方案 |
成本 |
难度 |
稳定性 |
推荐指数 |
| 云服务器 + Docker |
≈ ¥24/月 |
中等 |
高 |
⭐⭐⭐⭐⭐ |
| 云服务器 + 手动部署 |
≈ ¥24/月 |
较高 |
中 |
⭐⭐⭐ |
| Vercel + Railway 免费 |
免费 |
复杂 |
低 |
⭐⭐ |
| 厂商 |
配置 |
价格 |
特点 |
| 阿里云 轻量应用服务器 |
2核2G 40GB SSD |
≈ ¥24/月 |
国内访问快 |
| 腾讯云 轻量应用服务器 |
2核2G 40GB SSD |
≈ ¥24/月 |
国内访问快 |
| 华为云 HECS |
2核2G 40GB |
≈ ¥28/月 |
稳定性好 |
注意：国内服务器需要 ICP 备案。如需免备案，可选择香港或海外服务器。
# 安装 Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
# 安装 Docker Compose
sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
# 安装 Node.js 18
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
# 安装 Maven
sudo apt-get install -y maven
# 上传项目到服务器（方式一：SCP）
scp -r MyWeb root@your-server-ip:/root/
# 上传项目到服务器（方式二：Git）
git clone https://github.com/your-repo/MyWeb.git
cd MyWeb
# 修改 Nginx 配置中的域名
# 编辑 nginx/nginx.conf，将 your-domain.com 改为你的实际域名
# 修改 docker-compose.yml 中的 MySQL 密码
# 一键部署
chmod +x deploy.sh
./deploy.sh
# DNS 解析
# 将域名 A 记录解析到服务器公网 IP
# 获取免费 SSL 证书（Let's Encrypt）
sudo apt-get install -y certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com
# 自动续期
sudo certbot renew --dry-run
在云服务商控制台的安全组中开放以下端口：
| 端口 |
协议 |
说明 |
| 22 |
TCP |
SSH（建议限制 IP） |
| 80 |
TCP |
HTTP |
| 443 |
TCP |
HTTPS |
前台博客: https://your-domain.com
后台管理: https://your-domain.com/admin/login
登录账号: admin / admin123
┌─────────────┐
│ Nginx │
│ :80/443 │
└──────┬──────┘
│
┌────────────┴────────────┐
│ │
┌────┴─────┐ ┌──────┴──────┐
│ 前台博客 │ │ 后台管理 │
│ 静态资源 │ │ 静态资源 │
└──────────┘ └─────────────┘
│ │
└────────────┬────────────┘
│
┌──────┴──────┐
│ API 服务 │
│ :8080 │
└──────┬──────┘
│
┌────────────┼────────────┐
│ │ │
┌────┴────┐ ┌────┴────┐ ┌────┴────┐
│ MySQL │ │ Redis │ │ 其他 │
│ :3306 │ │ :6379 │ │ │
└─────────┘ └─────────┘ └─────────┘
如果不想购买服务器，也可以使用以下免费服务：
前台博客 → Vercel (免费托管静态站点)
后台管理 → Vercel (免费托管，/admin 路由)
API 服务 → Railway ($5免费额度/月)
MySQL → Railway 内置 (免费额度内)
Redis → Upstash (免费 10MB)
| 优点 |
缺点 |
| 零成本 |
配置复杂 |
| 全球 CDN 加速 |
国内访问可能较慢 |
| 自动 HTTPS |
免费额度有限 |
| 无需管理服务器 |
调试困难 |
| 变量 |
默认值 |
说明 |
MYSQL_PASSWORD |
root |
MySQL 数据库密码 |
SPRING_DATASOURCE_URL |
jdbc:mysql://mysql:3306/myweb_blog |
数据库连接 URL |
SPRING_DATASOURCE_USERNAME |
root |
数据库用户名 |
SPRING_DATASOURCE_PASSWORD |
root |
数据库密码 |
SPRING_DATA_REDIS_HOST |
redis |
Redis 主机地址 |
JWT_SECRET |
MyWebBlogSecretKey... |
JWT 签名密钥 |
JWT_EXPIRATION |
86400000 |
JWT 过期时间（毫秒） |
- 前后端分离 - API 与前端独立开发部署，职责清晰
- JWT 无状态认证 - 无需 Session，天然支持横向扩展
- Redis 缓存加速 - 热点文章和分类缓存，降低数据库压力
- 自动初始化 - 首次启动自动建表、创建管理员和默认分类
- 富文本编辑 - Tiptap 编辑器，操作体验接近 Notion
- Docker 一键部署 - 一条命令完成整个系统上线的流程
- 统一响应格式 - 所有 API 返回一致的
{code, message, data} 结构
- 响应式设计 - 适配桌面和移动端浏览
系统初始化时自动创建以下分类：
| 分类 |
描述 |
| 技术分享 |
技术相关文章 |
| 生活随笔 |
生活感悟与分享 |
| 学习笔记 |
学习过程中的笔记 |
| 项目实战 |
项目实战经验总结 |