博客系统基于springboot+mybatis+Vue
·
在无痕环境中隔离环境打开http://localhost:5173/
JWT 配置 Blog项目架构和核心技术介绍
项目整体架构
这是一个前后端分离的全栈博客系统，采用经典的三层架构模式：
┌─────────────────────────────────────────────────────────────┐
│ 前端 (Frontend) │
│ Vue 3 + Vite + Element Plus │
│ (端口: 5173) │
└──────────────────────┬──────────────────────────────────────┘
│ HTTP/REST API
│ (Proxy: /api → localhost:8080)
┌──────────────────────▼──────────────────────────────────────┐
│ 后端 (Backend) │
│ Spring Boot 2.7 + MyBatis │
│ (端口: 8080) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Controller Layer (REST API) │ │
│ │ - ArticleController, AuthController, etc. │ │
│ └──────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Service Layer (业务逻辑) │ │
│ │ - ArticleService, AuthService, etc. │ │
│ └──────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Mapper Layer (数据访问) │ │
│ │ - MyBatis XML 映射文件 │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────┬──────────────────────────────────────┘
│ JDBC
┌──────────────────────▼──────────────────────────────────────┐
│ MySQL 数据库 │
│ (localhost:3306/blog) │
└─────────────────────────────────────────────────────────────┘核心技术栈
后端技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Spring Boot | 2.7.18 | 应用框架 |
| MyBatis | 2.2.2 | ORM 框架 |
| PageHelper | 1.4.7 | 分页插件 |
| JWT (JJWT) | 0.11.5 | 身份认证 |
| Spring Security Crypto | - | 密码加密 |
| MySQL Connector | 8.0.33 | 数据库驱动 |
| Log4j2 | - | 日志框架 |
| Lombok | - | 代码生成 |
| Java | 1.8 | 编程语言 |
前端技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Vue | 3.4.30 | 前端框架 |
| Vite | 5.4.0 | 构建工具 |
| Vue Router | 4.4.5 | 路由管理 |
| Pinia | 2.1.7 | 状态管理 |
| Element Plus | 2.9.0 | UI 组件库 |
| Axios | 1.7.7 | HTTP 客户端 |
后端项目结构
backend/src/main/java/com/example/blog/
├── config/ # 配置层
│ ├── DebugLogFilter.java # 调试日志过滤器
│ └── WebConfig.java # Web 配置（CORS、拦截器）
│
├── controller/ # 控制层 (REST API)
│ ├── ArticleController.java # 文章相关 API
│ ├── AuthController.java # 认证相关 API
│ ├── CaptchaController.java # 验证码 API
│ ├── CategoryController.java # 分类 API
│ ├── CommentController.java # 评论 API
│ └── TagController.java # 标签 API
│
├── service/ # 业务逻辑层
│ ├── ArticleService.java # 文章服务接口
│ ├── AuthService.java # 认证服务接口
│ ├── CategoryService.java # 分类服务接口
│ ├── CommentService.java # 评论服务接口
│ ├── TagService.java # 标签服务接口
│ └── impl/ # 服务实现类
│ ├── ArticleServiceImpl.java
│ ├── AuthServiceImpl.java
│ ├── CategoryServiceImpl.java
│ ├── CommentServiceImpl.java
│ └── TagServiceImpl.java
│
├── mapper/ # 数据访问层
│ ├── ArticleMapper.java # 文章 Mapper 接口
│ ├── UserMapper.java # 用户 Mapper 接口
│ ├── CategoryMapper.java # 分类 Mapper 接口
│ ├── TagMapper.java # 标签 Mapper 接口
│ ├── CommentMapper.java # 评论 Mapper 接口
│ └── LoginLogMapper.java # 登录日志 Mapper 接口
│
├── domain/ # 数据模型
│ ├── entity/ # 数据库实体
│ │ ├── User.java
│ │ ├── Article.java
│ │ ├── Category.java
│ │ ├── Tag.java
│ │ ├── Comment.java
│ │ └── LoginLog.java
│ ├── dto/ # 数据传输对象
│ │ ├── ArticleRequest.java
│ │ ├── LoginRequest.java
│ │ ├── RegisterRequest.java
│ │ └── CommentRequest.java
│ └── vo/ # 视图对象
│ ├── ArticleVO.java
│ └── UserVO.java
│
├── interceptor/ # 拦截器
│ └── AuthInterceptor.java # 认证拦截器
│
├── exception/ # 异常处理
│ └── GlobalExceptionHandler.java # 全局异常处理器
│
├── util/ # 工具类
│ ├── JwtUtil.java # JWT 工具
│ ├── UserContext.java # 用户上下文
│ ├── ApiResponse.java # API 响应包装
│ ├── PageResult.java # 分页结果
│ └── DebugLogger.java # 调试日志
│
└── BlogApplication.java # 启动类数据库设计
核心表结构
user # 用户表
├── id (PK)
├── username (UNIQUE)
├── email (UNIQUE)
├── password_hash
├── role (ADMIN/USER)
├── status (enabled/disabled)
└── timestamps
article # 文章表
├── id (PK)
├── title
├── summary
├── content (LONGTEXT)
├── cover_url
├── status (draft/published)
├── view_count
├── like_count
├── author_id (FK → user)
└── timestamps
category # 分类表
├── id (PK)
└── name (UNIQUE)
tag # 标签表
├── id (PK)
└── name (UNIQUE)
article_category # 文章-分类关联表 (多对多)
├── article_id (FK)
└── category_id (FK)
article_tag # 文章-标签关联表 (多对多)
├── article_id (FK)
└── tag_id (FK)
comment # 评论表
├── id (PK)
├── article_id (FK)
├── user_id (FK, nullable)
├── content
├── status (pending/approved)
├── ip
└── ua (User-Agent)
login_log # 登录日志表
├── id (PK)
├── user_id (FK)
├── ip
├── ua
├── success (0/1)
└── created_atJWT 认证流程
1. 用户登录
└─> AuthController.login()
├─ 验证验证码（Session 中存储）
├─ 调用 AuthService.login()
├─ 生成 JWT Token (HMAC-SHA256)
└─ 返回 Token 给前端
2. 前端存储 Token
└─> localStorage.setItem('token', token)
3. 后续请求
└─> 前端在 Axios 拦截器中添加 Authorization 头
└─> Authorization: Bearer {token}
4. 后端验证
└─> AuthInterceptor.preHandle()
├─ 解析 Token
├─ 提取 userId (Subject)
├─ 存储到 UserContext (ThreadLocal)
└─ 允许请求继续
5. 业务层获取用户信息
└─> UserContext.get() 获取当前用户 IDjwt:
secret: changeme-change-me-very-strong-secret-32b # 256-bit 密钥
expire-minutes: 120 # 普通 Token 有效期
remember-expire-days: 7 # 记住我 Token 有效期前端项目结构
frontend/src/
├── api/ # API 调用层
│ ├── request.js # Axios 实例配置
│ ├── article.js # 文章 API
│ ├── auth.js # 认证 API
│ ├── category.js # 分类 API
│ ├── comment.js # 评论 API
│ └── tag.js # 标签 API
│
├── components/ # 可复用组件
│ ├── NavHeader.vue # 导航栏
│ └── Sidebar.vue # 侧边栏
│
├── views/ # 页面组件
│ ├── Home.vue # 首页
│ ├── ArticleDetail.vue # 文章详情页
│ ├── Dashboard.vue # 仪表板
│ ├── Login.vue # 登录页
│ └── Register.vue # 注册页
│
├── router/ # 路由配置
│ └── index.js # 路由定义
│
├── store/ # 状态管理 (Pinia)
│ └── auth.js # 认证状态
│
├── App.vue # 根组件
└── main.js # 入口文件API 通信流程
请求/响应格式
// 请求示例
POST /api/article
Authorization: Bearer {jwt_token}
Content-Type: application/json
{
"title": "文章标题",
"summary": "文章摘要",
"content": "文章内容",
"categoryIds": [1, 2],
"tagIds": [1, 2, 3]
}
// 响应格式
{
"code": 0, // 0 表示成功，非 0 表示错误
"msg": "操作成功",
"data": {
"id": 123,
"title": "文章标题",
...
}
}
// 分页响应
{
"code": 0,
"msg": "成功",
"data": {
"total": 100,
"pageNum": 1,
"pageSize": 10,
"list": [...]
}
}CORS 跨域配置
// WebConfig.java
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173", "http://127.0.0.1:5173")
.allowCredentials(true)
.allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS")
.maxAge(3600);项目启动流程
后端启动
# 1. 确保 MySQL 运行并创建数据库
mysql -u root -p < sql/schema.sql
# 2. 修改 application.yml 中的数据库连接信息
# 3. 编译和运行
mvn clean install
mvn spring-boot:run
# 或直接运行 JAR
java -jar backend/target/blog-0.0.1-SNAPSHOT.jar前端启动
# 1. 安装依赖
npm install
# 2. 开发模式运行
npm run dev
# 访问 http://localhost:5173
# 3. 生产构建
npm run build关键特性
- JWT 认证：无状态的 Token 认证，支持"记住我"功能
- 分页查询：使用 PageHelper 实现高效分页
- 多对多关系：文章与分类、标签的关联管理
- 验证码机制：Session 存储一次性验证码
- CORS 跨域：支持前端跨域请求
- 全局异常处理：统一的错误响应格式
- 调试日志：用于追踪请求流程的日志系统
- 用户上下文：ThreadLocal 存储当前用户信息
获取整个项目的文件可以去到我的github中download，制作不易，请点点star！！！
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)