# 管理后台数据显示问题 - 快速修复指南
## ✅ 诊断结果
经过测试确认：
- ✅ 数据库中有 7 个用户数据
- ✅ 后端 API 完全正常（已测试用户列表和统计接口）
- ✅ 后端运行在 http://localhost:3000
- ❌ 管理后台前端无法显示数据
## 🎯 问题原因
管理后台前端可能存在以下问题之一：
1. 管理后台服务未启动
2. 浏览器缓存或 localStorage 问题
3. 前端 API 请求失败但未显示错误
4. Token 过期或无效
## 🚀 立即修复步骤
### 步骤 1: 启动管理后台（如果未启动）
```bash
cd admin
npm run dev
```
管理后台应该运行在: http://localhost:3001
### 步骤 2: 清除浏览器缓存和数据
1. 打开管理后台 http://localhost:3001
2. 按 F12 打开开发者工具
3. 在 Console 中执行以下命令清除所有数据：
```javascript
// 清除所有 localStorage
localStorage.clear();
// 刷新页面
location.reload();
```
### 步骤 3: 重新登录
使用以下凭据登录：
- 用户名: `admin`
- 密码: `admin123`
### 步骤 4: 检查浏览器控制台
登录后，如果还是看不到数据：
1. 按 F12 打开开发者工具
2. 切换到 **Console** 标签，查看是否有错误
3. 切换到 **Network** 标签
4. 刷新页面
5. 查看 API 请求：
- 找到 `/api/v1/admin/users` 请求
- 点击查看响应内容
- 检查状态码（应该是 200）
### 步骤 5: 手动测试 API（在浏览器 Console 中）
如果登录成功，在浏览器 Console 中执行：
```javascript
// 检查 token 是否存在
console.log('Token:', localStorage.getItem('admin_token'));
// 手动测试用户列表 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);
console.log('用户数量:', d.data?.users?.length);
})
.catch(e => console.error('错误:', e));
// 手动测试统计 API
fetch('/api/v1/admin/statistics/dashboard', {
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('admin_token')
}
})
.then(r => r.json())
.then(d => {
console.log('统计数据:', d);
})
.catch(e => console.error('错误:', e));
```
## 🐛 常见问题排查
### 问题 1: 管理后台无法启动
**错误**: `npm run dev` 失败
**解决**:
```bash
cd admin
rm -rf node_modules package-lock.json
npm install
npm run dev
```
### 问题 2: API 请求返回 401
**原因**: Token 过期或无效
**解决**:
1. 清除 localStorage: `localStorage.clear()`
2. 重新登录
### 问题 3: API 请求返回 CORS 错误
**原因**: 后端 CORS 配置问题
**解决**: 后端已配置代理，确保：
- 后端运行在 3000 端口
- 管理后台运行在 3001 端口
### 问题 4: 页面显示空白或加载中
**原因**: 前端代码错误或 API 响应格式不匹配
**解决**: 查看浏览器 Console 的错误信息
### 问题 5: 数据显示为 0 或空
**检查**:
1. Network 标签中 API 是否返回数据
2. Console 是否有 JavaScript 错误
3. 响应数据格式是否正确
## 📝 验证数据的 SQL 命令
如果需要直接查看数据库：
```sql
-- 连接数据库
mysql -u root -p overseas_appointment
-- 查看用户数量
SELECT COUNT(*) as total FROM user;
-- 查看用户列表
SELECT id, nickname, wechat_open_id, status, created_at
FROM user
ORDER BY created_at DESC
LIMIT 10;
-- 查看预约统计
SELECT status, COUNT(*) as count
FROM appointment
GROUP BY status;
-- 查看提现统计
SELECT status, COUNT(*) as count
FROM withdrawal
GROUP BY status;
```
## 🔍 调试技巧
### 添加请求日志
在 `admin/src/utils/api.js` 的请求拦截器中添加日志：
```javascript
api.interceptors.request.use(
(config) => {
console.log('🚀 API Request:', config.method.toUpperCase(), config.url);
const token = localStorage.getItem('admin_token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(error) => {
console.error('❌ Request Error:', error);
return Promise.reject(error)
}
)
api.interceptors.response.use(
(response) => {
console.log('✅ API Response:', response.config.url, response.status, response.data);
return response
},
async (error) => {
console.error('❌ Response Error:', error.config?.url, error.response?.status, error.response?.data);
// ... 其他错误处理代码
}
)
```
### 检查响应格式
确认 API 返回的数据格式：
```javascript
// 期望的格式
{
"code": 0,
"message": "Success",
"data": {
"users": [...],
"pagination": {...}
}
}
```
## ✨ 快速测试脚本
创建一个测试文件 `admin/test-api.html`:
```html
API 测试
管理后台 API 测试
```
用浏览器打开这个文件，依次点击按钮测试 API。
## 📞 需要帮助？
如果以上步骤都无法解决问题，请提供：
1. 浏览器 Console 的完整错误信息（截图）
2. Network 标签中失败的 API 请求详情（截图）
3. 管理后台启动日志
4. 执行 `npm run dev` 的输出
## ✅ 成功标志
修复成功后，你应该能看到：
- ✅ 用户管理页面显示 7 个用户
- ✅ 数据统计显示：总用户数 7，活跃预约 0，待审核提现 0
- ✅ 所有页面数据正常加载