outsource/appointment_system

Fork 0

18631081161 1f888a20aa 移动文件

2025-12-19 00:37:31 +08:00

7.2 KiB

Raw Blame History

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

✅ 诊断结果

经过测试确认：

✅ 数据库中有 7 个用户数据
✅ 后端 API 完全正常（已测试用户列表和统计接口）
✅ 后端运行在 http://localhost:3000
❌ 管理后台前端无法显示数据

🎯 问题原因

管理后台前端可能存在以下问题之一：

管理后台服务未启动
浏览器缓存或 localStorage 问题
前端 API 请求失败但未显示错误
Token 过期或无效

🚀 立即修复步骤

步骤 1: 启动管理后台（如果未启动）

cd admin
npm run dev

管理后台应该运行在: http://localhost:3001

步骤 2: 清除浏览器缓存和数据

打开管理后台 http://localhost:3001
按 F12 打开开发者工具
在 Console 中执行以下命令清除所有数据：

// 清除所有 localStorage
localStorage.clear();

// 刷新页面
location.reload();

步骤 3: 重新登录

使用以下凭据登录：

用户名: admin
密码: admin123

步骤 4: 检查浏览器控制台

登录后，如果还是看不到数据：

按 F12 打开开发者工具
切换到 Console 标签，查看是否有错误
切换到 Network 标签
刷新页面
查看 API 请求：
- 找到 /api/v1/admin/users 请求
- 点击查看响应内容
- 检查状态码（应该是 200）

步骤 5: 手动测试 API（在浏览器 Console 中）

如果登录成功，在浏览器 Console 中执行：

// 检查 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 失败

解决:

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

问题 2: API 请求返回 401

原因: Token 过期或无效

解决:

清除 localStorage: localStorage.clear()
重新登录

问题 3: API 请求返回 CORS 错误

原因: 后端 CORS 配置问题

解决: 后端已配置代理，确保：

后端运行在 3000 端口
管理后台运行在 3001 端口

问题 4: 页面显示空白或加载中

原因: 前端代码错误或 API 响应格式不匹配

解决: 查看浏览器 Console 的错误信息

问题 5: 数据显示为 0 或空

检查:

Network 标签中 API 是否返回数据
Console 是否有 JavaScript 错误
响应数据格式是否正确

📝 验证数据的 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 的请求拦截器中添加日志：

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 返回的数据格式：

// 期望的格式
{
  "code": 0,
  "message": "Success",
  "data": {
    "users": [...],
    "pagination": {...}
  }
}

✨ 快速测试脚本

创建一个测试文件 admin/test-api.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。

📞 需要帮助？

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

浏览器 Console 的完整错误信息（截图）
Network 标签中失败的 API 请求详情（截图）
管理后台启动日志
执行 npm run dev 的输出

✅ 成功标志

修复成功后，你应该能看到：

✅ 用户管理页面显示 7 个用户
✅ 数据统计显示：总用户数 7，活跃预约 0，待审核提现 0
✅ 所有页面数据正常加载

7.2 KiB Raw Blame History Unescape Escape