012-kaopeilian/知识库/用户管理页面调试指南.md

用户管理页面调试指南

问题追踪

用户反馈：翻页无效，搜索不工作

已完成的修复

修复1：移除前端过滤

• ✅ 删除了客户端过滤逻辑
• ✅ 改为直接显示后端返回的数据

修复2：触发后端请求

• ✅ 搜索时重置到第1页并重新加载
• ✅ 翻页时调用loadUserList()
• ✅ 清除筛选时重新加载数据

修复3：修正API参数

• ✅ 使用API层期望的参数格式（pageSize而非page_size）
• ✅ 让API层统一处理参数转换

最新代码版本

loadUserList函数

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

调试命令

查看前端容器日志

docker logs kpl-frontend-dev --tail 50

重启前端容器

docker restart kpl-frontend-dev

检查前端文件更新时间

docker exec kpl-frontend-dev ls -lh /app/src/views/admin/user-management.vue

测试后端API

# 获取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:

# 重启前端容器
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）输入以下命令查看当前状态：

// 查看当前页码
console.log('当前页:', currentPage.value)

// 查看每页数量
console.log('每页数量:', pageSize.value)

// 查看总数
console.log('总用户数:', total.value)

// 查看筛选条件
console.log('筛选条件:', filterForm)

// 查看用户列表
console.log('用户列表:', userList.value)

容器状态检查

# 检查所有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 - 初次修复