service-navigation-system/test-backend-connection.html at main · CunxiangYin/service-navigation-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
    <title>后端连接测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .loading { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
    </style>
</head>
<body>
    <h1>后端API连接测试</h1>
    <div id="status" class="status loading">正在测试连接...</div>
    <div id="services"></div>
    <div id="categories"></div>

    <script>
        async function testBackendConnection() {
            const statusDiv = document.getElementById('status');
            const servicesDiv = document.getElementById('services');
            const categoriesDiv = document.getElementById('categories');

            try {
                // 测试健康检查
                const healthResponse = await fetch('http://localhost:8001/api/health');
                if (!healthResponse.ok) {
                    throw new Error(`健康检查失败: ${healthResponse.status}`);
                }
                const healthData = await healthResponse.json();

                // 测试服务数据
                const servicesResponse = await fetch('http://localhost:8001/api/services');
                if (!servicesResponse.ok) {
                    throw new Error(`获取服务失败: ${servicesResponse.status}`);
                }
                const services = await servicesResponse.json();

                // 测试分类数据
                const categoriesResponse = await fetch('http://localhost:8001/api/categories');
                if (!categoriesResponse.ok) {
                    throw new Error(`获取分类失败: ${categoriesResponse.status}`);
                }
                const categories = await categoriesResponse.json();

                // 显示成功状态
                statusDiv.className = 'status success';
                statusDiv.innerHTML = `
                    ✅ 后端连接成功！<br>
                    健康状态: ${healthData.status}<br>
                    时间戳: ${healthData.timestamp}
                `;

                // 显示服务数据
                servicesDiv.innerHTML = `
                    <h2>服务数据 (${services.length} 个)</h2>
                    <pre>${JSON.stringify(services, null, 2)}</pre>
                `;

                // 显示分类数据
                categoriesDiv.innerHTML = `
                    <h2>分类数据 (${categories.length} 个)</h2>
                    <pre>${JSON.stringify(categories, null, 2)}</pre>
                `;

            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.innerHTML = `❌ 后端连接失败: ${error.message}`;
            }
        }

        // 页面加载后测试连接
        testBackendConnection();
    </script>
</body>
</html>