307 lines
7.2 KiB
Markdown
307 lines
7.2 KiB
Markdown
# 管理后台数据显示问题 - 快速修复指南
|
||
|
||
## ✅ 诊断结果
|
||
|
||
经过测试确认：
|
||
- ✅ 数据库中有 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
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>API 测试</title>
|
||
</head>
|
||
<body>
|
||
<h1>管理后台 API 测试</h1>
|
||
<button onclick="testLogin()">1. 测试登录</button>
|
||
<button onclick="testUsers()">2. 测试用户列表</button>
|
||
<button onclick="testStats()">3. 测试统计数据</button>
|
||
<pre id="result"></pre>
|
||
|
||
<script>
|
||
let token = '';
|
||
const output = document.getElementById('result');
|
||
|
||
async function testLogin() {
|
||
try {
|
||
const res = await fetch('http://localhost:3000/api/v1/admin/login', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ username: 'admin', password: 'admin123' })
|
||
});
|
||
const data = await res.json();
|
||
token = data.data.token;
|
||
output.textContent = '登录成功!\n' + JSON.stringify(data, null, 2);
|
||
} catch (e) {
|
||
output.textContent = '登录失败: ' + e.message;
|
||
}
|
||
}
|
||
|
||
async function testUsers() {
|
||
if (!token) {
|
||
output.textContent = '请先登录!';
|
||
return;
|
||
}
|
||
try {
|
||
const res = await fetch('http://localhost:3000/api/v1/admin/users?page=1&limit=20', {
|
||
headers: { 'Authorization': 'Bearer ' + token }
|
||
});
|
||
const data = await res.json();
|
||
output.textContent = '用户列表:\n' + JSON.stringify(data, null, 2);
|
||
} catch (e) {
|
||
output.textContent = '获取用户失败: ' + e.message;
|
||
}
|
||
}
|
||
|
||
async function testStats() {
|
||
if (!token) {
|
||
output.textContent = '请先登录!';
|
||
return;
|
||
}
|
||
try {
|
||
const res = await fetch('http://localhost:3000/api/v1/admin/statistics/dashboard', {
|
||
headers: { 'Authorization': 'Bearer ' + token }
|
||
});
|
||
const data = await res.json();
|
||
output.textContent = '统计数据:\n' + JSON.stringify(data, null, 2);
|
||
} catch (e) {
|
||
output.textContent = '获取统计失败: ' + e.message;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
用浏览器打开这个文件，依次点击按钮测试 API。
|
||
|
||
## 📞 需要帮助？
|
||
|
||
如果以上步骤都无法解决问题，请提供：
|
||
|
||
1. 浏览器 Console 的完整错误信息（截图）
|
||
2. Network 标签中失败的 API 请求详情（截图）
|
||
3. 管理后台启动日志
|
||
4. 执行 `npm run dev` 的输出
|
||
|
||
## ✅ 成功标志
|
||
|
||
修复成功后，你应该能看到：
|
||
- ✅ 用户管理页面显示 7 个用户
|
||
- ✅ 数据统计显示：总用户数 7，活跃预约 0，待审核提现 0
|
||
- ✅ 所有页面数据正常加载
|