299 lines
7.0 KiB
Markdown
299 lines
7.0 KiB
Markdown
|
|
# 账号管理系统重构说明
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
本次重构彻底改进了账号管理系统,从后端API到前端页面都进行了全面优化。重构基于第一性原理思考,采用更现代、更安全的架构。
|
|||
|
|
|
|||
|
|
## 重构前后对比
|
|||
|
|
|
|||
|
|
### 后端改进
|
|||
|
|
|
|||
|
|
| 方面 | 重构前 | 重构后 |
|
|||
|
|
|------|--------|--------|
|
|||
|
|
| 错误处理 | 基础try-catch | 装饰器统一异常处理,分类错误码 |
|
|||
|
|
| 响应格式 | 不统一 | 统一响应结构: `{success, data, message, code}` |
|
|||
|
|
| 数据验证 | 分散在多处 | 统一的验证函数,前后端一致 |
|
|||
|
|
| 删除方式 | 硬删除(物理删除) | 软删除(标记删除) |
|
|||
|
|
| 审计日志 | 无 | 完整的审计日志系统 |
|
|||
|
|
| 日志记录 | 只记录错误 | 记录所有操作详情 |
|
|||
|
|
| 安全性 | 基础验证 | 强验证+权限控制 |
|
|||
|
|
| 代码复用 | 重复代码较多 | 模块化,函数复用 |
|
|||
|
|
|
|||
|
|
### 前端改进
|
|||
|
|
|
|||
|
|
| 方面 | 重构前 | 重构后 |
|
|||
|
|
|------|--------|--------|
|
|||
|
|
| 状态管理 | 散乱 | IIFE模式,状态统一管理 |
|
|||
|
|
| DOM操作 | 频繁使用innerHTML | DOM创建+事件委托 |
|
|||
|
|
| 错误处理 | 简单alert | 优雅的通知系统 |
|
|||
|
|
| 事件绑定 | 重复绑定 | 事件委托避免重复 |
|
|||
|
|
| 代码结构 | 函数式 | 模块化(IIFE) |
|
|||
|
|
| 用户体验 | 基础 | 加载状态、实时反馈 |
|
|||
|
|
| 表单验证 | 基础 | 前后端双重验证 |
|
|||
|
|
|
|||
|
|
## 核心改进
|
|||
|
|
|
|||
|
|
### 1. 统一响应格式
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
{
|
|||
|
|
"success": bool, # 操作是否成功
|
|||
|
|
"data": any, # 返回数据
|
|||
|
|
"message": str, # 提示信息
|
|||
|
|
"code": int # 状态码
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**优点:**
|
|||
|
|
- 前端处理更简单
|
|||
|
|
- 错误信息更清晰
|
|||
|
|
- 便于调试和日志分析
|
|||
|
|
|
|||
|
|
### 2. 软删除机制
|
|||
|
|
|
|||
|
|
- **添加字段:** `is_deleted`, `delete_time`
|
|||
|
|
- **查询过滤:** 自动过滤已删除记录
|
|||
|
|
- **安全保护:** 防止数据丢失
|
|||
|
|
|
|||
|
|
### 3. 审计日志
|
|||
|
|
|
|||
|
|
记录所有管理员操作:
|
|||
|
|
- 操作类型: CREATE, UPDATE, DELETE, TOGGLE_STATUS
|
|||
|
|
- 操作人: admin_id
|
|||
|
|
- 目标: target_type, target_id
|
|||
|
|
- 详情: details (JSON格式)
|
|||
|
|
- 环境: IP地址, User-Agent
|
|||
|
|
|
|||
|
|
### 4. 统一验证
|
|||
|
|
|
|||
|
|
- `validate_username()`: 用户名验证
|
|||
|
|
- `validate_password()`: 密码强度验证
|
|||
|
|
- `validate_email()`: 邮箱格式验证
|
|||
|
|
- `validate_admin_data()`: 管理员数据综合验证
|
|||
|
|
|
|||
|
|
### 5. 异常处理装饰器
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
@handle_exceptions
|
|||
|
|
def api_function():
|
|||
|
|
# 异常自动处理
|
|||
|
|
# 统一错误响应
|
|||
|
|
# 自动回滚事务
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 6. 权限验证装饰器
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
@require_admin
|
|||
|
|
def protected_function():
|
|||
|
|
# 自动检查登录状态
|
|||
|
|
# 自动检查超级管理员权限
|
|||
|
|
# 统一权限错误响应
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 文件变更
|
|||
|
|
|
|||
|
|
### 新增文件
|
|||
|
|
|
|||
|
|
1. **app/models/audit_log.py** - 审计日志模型
|
|||
|
|
2. **app/api/admin_refactored.py** - 重构后的API(已替换原文件)
|
|||
|
|
3. **app/web/templates/admin/list_refactored.html** - 重构后的前端页面(已替换原文件)
|
|||
|
|
4. **migrations/versions/20241111_add_soft_delete_to_admin.py** - 添加软删除字段迁移
|
|||
|
|
5. **migrations/versions/20241111_create_audit_log.py** - 创建审计日志表迁移
|
|||
|
|
6. **test_refactored_admin.py** - 测试脚本
|
|||
|
|
|
|||
|
|
### 备份文件
|
|||
|
|
|
|||
|
|
1. `app/api/admin_old.py` - 原API文件备份
|
|||
|
|
2. `app/web/templates/admin/list_old.html` - 原前端页面备份
|
|||
|
|
|
|||
|
|
## 数据库迁移
|
|||
|
|
|
|||
|
|
### 迁移1: 添加软删除字段
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
flask db upgrade
|
|||
|
|
# 或
|
|||
|
|
alembic upgrade head
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**变更内容:**
|
|||
|
|
- 添加 `is_deleted` 字段 (默认0)
|
|||
|
|
- 添加 `delete_time` 字段
|
|||
|
|
- 创建索引 `ix_admin_is_deleted`
|
|||
|
|
|
|||
|
|
### 迁移2: 创建审计日志表
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 迁移1完成后自动执行
|
|||
|
|
# 或手动执行
|
|||
|
|
flask db stamp add_soft_delete_admin
|
|||
|
|
flask db upgrade
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**变更内容:**
|
|||
|
|
- 创建 `audit_log` 表
|
|||
|
|
- 添加外键关联
|
|||
|
|
- 创建索引
|
|||
|
|
|
|||
|
|
## API变更
|
|||
|
|
|
|||
|
|
### 响应结构统一
|
|||
|
|
|
|||
|
|
所有API现在返回统一格式:
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"success": true/false,
|
|||
|
|
"data": {...}, // 成功时返回数据
|
|||
|
|
"message": "提示信息",
|
|||
|
|
"code": 0 // 状态码
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 状态码定义
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
class ResponseCode:
|
|||
|
|
SUCCESS = 0 # 成功
|
|||
|
|
VALIDATION_ERROR = 1001 # 验证错误
|
|||
|
|
AUTHENTICATION_FAILED = 1002 # 认证失败
|
|||
|
|
PERMISSION_DENIED = 1003 # 权限不足
|
|||
|
|
NOT_FOUND = 1004 # 资源不存在
|
|||
|
|
DUPLICATE_USERNAME = 2001 # 用户名重复
|
|||
|
|
INVALID_DATA = 2002 # 无效数据
|
|||
|
|
CANNOT_DELETE_SELF = 2003 # 不能删除自己
|
|||
|
|
CANNOT_DISABLE_SELF = 2004 # 不能禁用自己
|
|||
|
|
SERVER_ERROR = 5000 # 服务器错误
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 前端改进
|
|||
|
|
|
|||
|
|
### 1. 模块化代码结构
|
|||
|
|
|
|||
|
|
使用IIFE模式封装:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
(function() {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
// 状态管理
|
|||
|
|
const state = {
|
|||
|
|
currentPage: 1,
|
|||
|
|
searchParams: {...},
|
|||
|
|
isLoading: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 事件处理
|
|||
|
|
function bindEvents() {...}
|
|||
|
|
|
|||
|
|
// 数据加载
|
|||
|
|
function loadAdmins() {...}
|
|||
|
|
|
|||
|
|
// 初始化
|
|||
|
|
document.addEventListener('DOMContentLoaded', init);
|
|||
|
|
})();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 事件委托
|
|||
|
|
|
|||
|
|
使用事件委托减少内存泄漏:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
elements.adminList.addEventListener('click', function(e) {
|
|||
|
|
const target = e.target.closest('button');
|
|||
|
|
if (!target) return;
|
|||
|
|
|
|||
|
|
if (target.classList.contains('edit-btn')) {
|
|||
|
|
// 编辑逻辑
|
|||
|
|
} else if (target.classList.contains('delete-btn')) {
|
|||
|
|
// 删除逻辑
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. DOM安全操作
|
|||
|
|
|
|||
|
|
使用createElement替代innerHTML:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const tr = document.createElement('tr');
|
|||
|
|
const td = document.createElement('td');
|
|||
|
|
td.textContent = admin.username; // 防止XSS
|
|||
|
|
tr.appendChild(td);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 用户体验优化
|
|||
|
|
|
|||
|
|
- 加载状态指示
|
|||
|
|
- 优雅的错误通知
|
|||
|
|
- 实时数据更新
|
|||
|
|
- 表单验证反馈
|
|||
|
|
|
|||
|
|
## 测试
|
|||
|
|
|
|||
|
|
运行测试脚本:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
python test_refactored_admin.py
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
测试覆盖:
|
|||
|
|
1. Admin模型基本功能
|
|||
|
|
2. 软删除功能
|
|||
|
|
3. 审计日志记录
|
|||
|
|
4. 数据验证函数
|
|||
|
|
5. 统一响应格式
|
|||
|
|
|
|||
|
|
## 部署步骤
|
|||
|
|
|
|||
|
|
1. **备份数据库**
|
|||
|
|
```bash
|
|||
|
|
# 备份当前数据库
|
|||
|
|
mysqldump -u user -p database > backup.sql
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **应用迁移**
|
|||
|
|
```bash
|
|||
|
|
flask db upgrade
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. **重启应用**
|
|||
|
|
```bash
|
|||
|
|
# 如果使用gunicorn
|
|||
|
|
sudo systemctl restart kamixitong
|
|||
|
|
|
|||
|
|
# 或直接运行
|
|||
|
|
python run.py
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
4. **验证部署**
|
|||
|
|
- 访问账号管理页面
|
|||
|
|
- 创建测试账号
|
|||
|
|
- 查看审计日志
|
|||
|
|
|
|||
|
|
## 已知问题和限制
|
|||
|
|
|
|||
|
|
1. **兼容性**: 现有已删除的硬删除记录需要手动处理
|
|||
|
|
2. **性能**: 审计日志会逐渐增大,建议定期归档
|
|||
|
|
3. **权限**: 当前只有超级管理员可以管理账号
|
|||
|
|
|
|||
|
|
## 未来改进计划
|
|||
|
|
|
|||
|
|
1. **批量操作**: 支持批量启用/禁用/删除
|
|||
|
|
2. **角色细分**: 支持更多角色类型
|
|||
|
|
3. **操作日志查看**: 在管理界面查看审计日志
|
|||
|
|
4. **数据导出**: 支持导出账号数据
|
|||
|
|
5. **API限流**: 添加API访问频率限制
|
|||
|
|
|
|||
|
|
## 总结
|
|||
|
|
|
|||
|
|
本次重构显著提升了系统的:
|
|||
|
|
- **安全性**: 软删除+审计日志
|
|||
|
|
- **可维护性**: 模块化+统一规范
|
|||
|
|
- **可观测性**: 完整的日志记录
|
|||
|
|
- **用户体验**: 实时反馈+优雅交互
|
|||
|
|
- **代码质量**: 减少重复+提高复用
|
|||
|
|
|
|||
|
|
通过这次重构,账号管理系统达到了生产级别的标准,具备了更好的扩展性和维护性。
|