appointment_system/docs/setup/START_ADMIN.md

🚀 管理后台启动和修复指南

问题诊断结果

✅ 数据库: 正常，有 7 个用户 ✅ 后端 API: 完全正常 ❌ 管理后台: 需要检查

立即执行的步骤

步骤 1: 启动管理后台

打开新的命令行窗口，执行：

cd admin
npm run dev

等待看到类似这样的输出：

VITE v4.x.x  ready in xxx ms

➜  Local:   http://localhost:3001/
➜  Network: use --host to expose

步骤 2: 打开浏览器测试

1. 打开浏览器访问: http://localhost:3001

2. 按 F12 打开开发者工具

3. 在 Console 标签中执行以下命令清除缓存：

localStorage.clear();
console.log('✅ 缓存已清除');
location.reload();

步骤 3: 登录管理后台

使用以下凭据登录：

• 用户名: admin
• 密码: admin123

步骤 4: 查看调试信息

登录后，在浏览器 Console 中你应该能看到：

• 🚀 API Request 日志（显示请求详情）
• ✅ API Response 日志（显示响应数据）
• 如果有错误，会显示 ❌ API Error

步骤 5: 检查数据

如果登录成功：

1. 点击左侧菜单的"用户管理"
2. 应该能看到 7 个用户
3. 点击"数据统计"
4. 应该能看到：总用户数 7

如果还是看不到数据

检查 1: 查看 Console 日志

在浏览器 Console 中查找：

• ❌ 红色错误信息
• ⚠️ 黄色警告信息
• 🚀 API 请求是否发送
• ✅ API 响应是否成功

检查 2: 查看 Network 标签

1. 切换到 Network 标签
2. 刷新页面
3. 查找 /api/v1/admin/users 请求
4. 点击查看：
   • Status: 应该是 200
   • Response: 应该有用户数据

检查 3: 手动测试 API

在 Console 中执行：

// 测试用户列表 API
fetch('/api/v1/admin/users?page=1&limit=20', {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('admin_token')
  }
})
.then(r => r.json())
.then(d => {
  console.log('📊 用户数据:', d);
  if (d.data && d.data.users) {
    console.log('✅ 找到', d.data.users.length, '个用户');
    console.table(d.data.users);
  }
})
.catch(e => console.error('❌ 错误:', e));

常见问题解决

问题: 端口被占用

如果看到 Port 3001 is already in use：

# Windows
netstat -ano | findstr :3001
taskkill /PID <进程ID> /F

# 或者修改端口
# 编辑 admin/vite.config.js，将 port: 3001 改为 port: 3002

问题: 依赖安装失败

cd admin
rm -rf node_modules package-lock.json
npm install

问题: Token 无效

在 Console 执行：

localStorage.clear();
location.reload();
// 然后重新登录

问题: CORS 错误

确保：

1. 后端运行在 3000 端口
2. 管理后台运行在 3001 端口
3. vite.config.js 中的代理配置正确

使用测试工具

如果管理后台还是有问题，可以使用测试工具验证 API：

1. 用浏览器打开: file:///你的项目路径/admin/test-api.html
2. 点击"测试登录"
3. 点击"测试用户列表"
4. 查看是否能获取到数据

如果测试工具能获取数据，说明后端完全正常，问题在管理后台前端代码。

需要帮助？

如果以上步骤都无法解决，请提供：

1. 浏览器 Console 的完整日志（截图）
2. Network 标签中的 API 请求详情（截图）
3. 管理后台启动时的命令行输出

---

提示: 我已经在 admin/src/utils/api.js 中添加了详细的调试日志，现在每个 API 请求和响应都会在 Console 中显示。