feat: 初始化考培练系统项目
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
This commit is contained in:
111
221
知识库/用户管理页面调试指南.md
Normal file
221
知识库/用户管理页面调试指南.md
Normal file
@@ -0,0 +1,221 @@
|
||||
# 用户管理页面调试指南
|
||||
|
||||
## 问题追踪
|
||||
用户反馈：翻页无效，搜索不工作
|
||||
|
||||
## 已完成的修复
|
||||
|
||||
### 修复1：移除前端过滤
|
||||
- ✅ 删除了客户端过滤逻辑
|
||||
- ✅ 改为直接显示后端返回的数据
|
||||
|
||||
### 修复2：触发后端请求
|
||||
- ✅ 搜索时重置到第1页并重新加载
|
||||
- ✅ 翻页时调用loadUserList()
|
||||
- ✅ 清除筛选时重新加载数据
|
||||
|
||||
### 修复3：修正API参数
|
||||
- ✅ 使用API层期望的参数格式（pageSize而非page_size）
|
||||
- ✅ 让API层统一处理参数转换
|
||||
|
||||
## 最新代码版本
|
||||
|
||||
### loadUserList函数
|
||||
```typescript
|
||||
const loadUserList = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params: any = {
|
||||
page: currentPage.value,
|
||||
pageSize: pageSize.value, // API层会转换为page_size
|
||||
keyword: filterForm.username || undefined,
|
||||
role: filterForm.role || undefined,
|
||||
status: filterForm.status || undefined // API层会转换为is_active
|
||||
}
|
||||
|
||||
const response = await getUserList(params)
|
||||
// ...处理响应
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API层参数转换
|
||||
`src/api/admin/user.ts` 中的 `getUserList` 函数会：
|
||||
1. 将 `pageSize` 转换为 `page_size`
|
||||
2. 将 `status` 转换为 `is_active`
|
||||
3. 清理空参数
|
||||
|
||||
## 验证步骤
|
||||
|
||||
### 1. 清除浏览器缓存
|
||||
```
|
||||
1. 打开 https://kpl.ireborn.com.cn/admin/user-management
|
||||
2. 按 Ctrl+Shift+R (Windows) 或 Cmd+Shift+R (Mac) 强制刷新
|
||||
3. 或者按 F12 打开开发者工具，在Network标签页勾选"Disable cache"
|
||||
```
|
||||
|
||||
### 2. 打开浏览器控制台
|
||||
```
|
||||
按 F12 打开开发者工具
|
||||
切换到 Console 标签页
|
||||
```
|
||||
|
||||
### 3. 监控网络请求
|
||||
```
|
||||
1. 切换到 Network 标签页
|
||||
2. 筛选 XHR 请求
|
||||
3. 观察对 /api/v1/users/ 的请求
|
||||
```
|
||||
|
||||
### 4. 测试翻页功能
|
||||
```
|
||||
操作：点击页码 "2"
|
||||
预期：应该看到新的网络请求
|
||||
请求URL应该包含：?page=2&page_size=20
|
||||
```
|
||||
|
||||
### 5. 测试搜索功能
|
||||
```
|
||||
操作：在搜索框输入"何平"
|
||||
预期：应该看到新的网络请求
|
||||
请求URL应该包含：?page=1&page_size=20&keyword=何平
|
||||
```
|
||||
|
||||
### 6. 测试角色筛选
|
||||
```
|
||||
操作：选择"管理者"
|
||||
预期：应该看到新的网络请求
|
||||
请求URL应该包含：?page=1&page_size=20&role=manager
|
||||
```
|
||||
|
||||
## 调试命令
|
||||
|
||||
### 查看前端容器日志
|
||||
```bash
|
||||
docker logs kpl-frontend-dev --tail 50
|
||||
```
|
||||
|
||||
### 重启前端容器
|
||||
```bash
|
||||
docker restart kpl-frontend-dev
|
||||
```
|
||||
|
||||
### 检查前端文件更新时间
|
||||
```bash
|
||||
docker exec kpl-frontend-dev ls -lh /app/src/views/admin/user-management.vue
|
||||
```
|
||||
|
||||
### 测试后端API
|
||||
```bash
|
||||
# 获取token
|
||||
TOKEN=$(curl -s -X POST "https://kpl.ireborn.com.cn/api/v1/auth/login" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"username":"admin","password":"admin123"}' | \
|
||||
python3 -c "import sys, json; print(json.load(sys.stdin)['data']['token']['access_token'])")
|
||||
|
||||
# 测试第1页
|
||||
curl -s "https://kpl.ireborn.com.cn/api/v1/users/?page=1&page_size=20" \
|
||||
-H "Authorization: Bearer $TOKEN" | python3 -m json.tool | head -30
|
||||
|
||||
# 测试第2页
|
||||
curl -s "https://kpl.ireborn.com.cn/api/v1/users/?page=2&page_size=20" \
|
||||
-H "Authorization: Bearer $TOKEN" | python3 -m json.tool | head -30
|
||||
|
||||
# 测试搜索
|
||||
curl -s "https://kpl.ireborn.com.cn/api/v1/users/?keyword=何平" \
|
||||
-H "Authorization: Bearer $TOKEN" | python3 -m json.tool
|
||||
```
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q1: 修改后页面没变化
|
||||
**A**: 需要强制刷新浏览器（Ctrl+Shift+R）清除缓存
|
||||
|
||||
### Q2: 看不到网络请求
|
||||
**A**:
|
||||
1. 检查F12开发者工具是否打开
|
||||
2. 确认在Network标签页
|
||||
3. 确认已勾选"Preserve log"
|
||||
|
||||
### Q3: API返回200但没数据
|
||||
**A**:
|
||||
1. 检查Console是否有JavaScript错误
|
||||
2. 检查Network中的Response内容
|
||||
3. 查看是否total=0（说明确实没数据）
|
||||
|
||||
### Q4: 容器状态不健康
|
||||
**A**:
|
||||
```bash
|
||||
# 重启前端容器
|
||||
docker restart kpl-frontend-dev
|
||||
|
||||
# 等待30秒后检查
|
||||
sleep 30
|
||||
docker ps --filter "name=kpl-frontend-dev"
|
||||
```
|
||||
|
||||
## 预期结果
|
||||
|
||||
### 翻页
|
||||
- ✅ 点击页码时发送新的HTTP请求
|
||||
- ✅ URL包含正确的page参数
|
||||
- ✅ 表格显示对应页的数据
|
||||
- ✅ 总数显示117个用户
|
||||
|
||||
### 搜索
|
||||
- ✅ 输入关键词时发送HTTP请求
|
||||
- ✅ URL包含keyword参数
|
||||
- ✅ 只显示匹配的用户
|
||||
- ✅ 总数显示匹配的数量
|
||||
|
||||
### 筛选
|
||||
- ✅ 选择筛选条件时发送HTTP请求
|
||||
- ✅ URL包含对应的参数（role/is_active）
|
||||
- ✅ 只显示符合条件的用户
|
||||
- ✅ 可以组合多个筛选条件
|
||||
|
||||
## 浏览器控制台检查
|
||||
|
||||
在浏览器控制台（F12 → Console）输入以下命令查看当前状态：
|
||||
|
||||
```javascript
|
||||
// 查看当前页码
|
||||
console.log('当前页:', currentPage.value)
|
||||
|
||||
// 查看每页数量
|
||||
console.log('每页数量:', pageSize.value)
|
||||
|
||||
// 查看总数
|
||||
console.log('总用户数:', total.value)
|
||||
|
||||
// 查看筛选条件
|
||||
console.log('筛选条件:', filterForm)
|
||||
|
||||
// 查看用户列表
|
||||
console.log('用户列表:', userList.value)
|
||||
```
|
||||
|
||||
## 容器状态检查
|
||||
|
||||
```bash
|
||||
# 检查所有kpl容器
|
||||
docker ps --filter "name=kpl" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
|
||||
|
||||
# 检查前端容器健康状态
|
||||
docker inspect kpl-frontend-dev --format='{{.State.Health.Status}}'
|
||||
|
||||
# 查看前端容器最近日志
|
||||
docker logs kpl-frontend-dev --tail 100 | grep -E "ERROR|WARN|编译"
|
||||
```
|
||||
|
||||
## 联系支持
|
||||
|
||||
如果问题仍未解决，请提供：
|
||||
1. 浏览器Console中的错误信息（红色文字）
|
||||
2. Network标签中的请求URL和响应内容
|
||||
3. 具体的操作步骤和预期/实际结果
|
||||
|
||||
## 更新记录
|
||||
- 2025-11-11 20:10 - 修正API参数格式
|
||||
- 2025-11-11 20:00 - 初次修复
|
||||
|
||||
Reference in New Issue
Block a user