# 管理后台数据显示问题 - 快速修复指南

## ✅ 诊断结果

经过测试确认：
- ✅ 数据库中有 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
- ✅ 所有页面数据正常加载
