nanocode/wanandroid/uniapp_android/test_access.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>玩Android - 访问测试</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Roboto', 'Noto Sans SC', sans-serif; background: #F5F5F5; padding: 20px; }
        
        .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        
        h1 { color: #6200EE; margin-bottom: 20px; text-align: center; }
        
        .server-info { background: #F0F9FF; border-left: 4px solid #6200EE; padding: 15px; margin-bottom: 20px; border-radius: 8px; }
        
        .test-section { margin-bottom: 30px; }
        .test-section h2 { color: #333; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #EEEEEE; }
        
        .test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
        
        .test-card { background: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 8px; padding: 15px; transition: all 0.3s; }
        .test-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        
        .test-title { font-weight: 500; margin-bottom: 10px; color: #333; }
        
        .test-status { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
        .status-success { background: #4CAF50; color: white; }
        .status-fail { background: #F44336; color: white; }
        .status-loading { background: #FF9800; color: white; }
        
        .test-url { font-size: 12px; color: #666; margin-top: 8px; word-break: break-all; }
        
        .test-btn { display: inline-block; background: #6200EE; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; margin-top: 10px; transition: background 0.3s; }
        .test-btn:hover { background: #3700B3; }
        
        .result { margin-top: 10px; padding: 10px; background: #F8F8F8; border-radius: 6px; font-size: 12px; display: none; }
        
        .summary { background: #E8F5E9; border: 1px solid #C8E6C9; border-radius: 8px; padding: 20px; margin-top: 30px; }
        .summary h3 { color: #2E7D32; margin-bottom: 15px; }
        
        .progress-bar { height: 20px; background: #E0E0E0; border-radius: 10px; overflow: hidden; margin: 15px 0; }
        .progress-fill { height: 100%; background: #4CAF50; transition: width 0.5s; }
        
        .module-list { list-style: none; }
        .module-list li { padding: 8px 0; border-bottom: 1px solid #E0E0E0; }
        .module-list li:last-child { border-bottom: none; }
        .module-status { float: right; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 玩Android应用访问测试</h1>
        
        <div class="server-info">
            <h3>📡 服务器信息</h3>
            <p><strong>公网地址:</strong> http://129.211.173.87:3000</p>
            <p><strong>本地地址:</strong> http://localhost:3000</p>
            <p><strong>启动时间:</strong> <span id="currentTime"></span></p>
        </div>
        
        <div class="test-section">
            <h2>🔍 页面访问测试</h2>
            <div class="test-grid">
                <div class="test-card">
                    <div class="test-title">🏠 首页</div>
                    <div class="test-status status-loading" id="homeStatus">测试中...</div>
                    <div class="test-url" id="homeUrl">http://129.211.173.87:3000/index.html</div>
                    <button class="test-btn" onclick="testPage('home')">测试</button>
                    <button class="test-btn" onclick="window.open('http://129.211.173.87:3000/index.html', '_blank')">访问</button>
                    <div class="result" id="homeResult"></div>
                </div>
                
                <div class="test-card">
                    <div class="test-title">📦 项目模块</div>
                    <div class="test-status status-loading" id="projectStatus">测试中...</div>
                    <div class="test-url" id="projectUrl">http://129.211.173.87:3000/projects_fixed.html</div>
                    <button class="test-btn" onclick="testPage('project')">测试</button>
                    <button class="test-btn" onclick="window.open('http://129.211.173.87:3000/projects_fixed.html', '_blank')">访问</button>
                    <div class="result" id="projectResult"></div>
                </div>
                
                <div class="test-card">
                    <div class="test-title">🌳 体系模块</div>
                    <div class="test-status status-loading" id="treeStatus">测试中...</div>
                    <div class="test-url" id="treeUrl">http://129.211.173.87:3000/tree.html</div>
                    <button class="test-btn" onclick="testPage('tree')">测试</button>
                    <button class="test-btn" onclick="window.open('http://129.211.173.87:3000/tree.html', '_blank')">访问</button>
                    <div class="result" id="treeResult"></div>
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h2>🔧 API接口测试</h2>
            <div class="test-grid">
                <div class="test-card">
                    <div class="test-title">🎨 Banner API</div>
                    <div class="test-status status-loading" id="bannerStatus">测试中...</div>
                    <div class="test-url">/api/banner/json</div>
                    <button class="test-btn" onclick="testAPI('banner')">测试</button>
                    <div class="result" id="bannerResult"></div>
                </div>
                
                <div class="test-card">
                    <div class="test-title">📰 文章API</div>
                    <div class="test-status status-loading" id="articleStatus">测试中...</div>
                    <div class="test-url">/api/article/list/0/json</div>
                    <button class="test-btn" onclick="testAPI('article')">测试</button>
                    <div class="result" id="articleResult"></div>
                </div>
                
                <div class="test-card">
                    <div class="test-title">📦 项目分类API</div>
                    <div class="test-status status-loading" id="projectApiStatus">测试中...</div>
                    <div class="test-url">/api/project/tree/json</div>
                    <button class="test-btn" onclick="testAPI('projectApi')">测试</button>
                    <div class="result" id="projectApiResult"></div>
                </div>
                
                <div class="test-card">
                    <div class="test-title">🌳 体系分类API</div>
                    <div class="test-status status-loading" id="treeApiStatus">测试中...</div>
                    <div class="test-url">/api/tree/json</div>
                    <button class="test-btn" onclick="testAPI('treeApi')">测试</button>
                    <div class="result" id="treeApiResult"></div>
                </div>
            </div>
        </div>
        
        <div class="summary">
            <h3>📊 开发进度总结</h3>
            
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill" style="width: 60%"></div>
            </div>
            
            <p>已完成: <strong id="completedCount">3</strong>/5 模块 (60%)</p>
            
            <ul class="module-list">
                <li>🏠 首页模块 <span class="module-status status-success">✅ 已完成</span></li>
                <li>📦 项目模块 <span class="module-status status-success">✅ 已完成</span></li>
                <li>🌳 体系模块 <span class="module-status status-success">✅ 已完成</span></li>
                <li>📱 公众号模块 <span class="module-status status-fail">❌ 待开发</span></li>
                <li>👤 我的模块 <span class="module-status status-fail">❌ 待开发</span></li>
            </ul>
            
            <div style="margin-top: 20px;">
                <button class="test-btn" onclick="runAllTests()" style="background: #2196F3;">运行所有测试</button>
                <button class="test-btn" onclick="window.location.href='http://129.211.173.87:3000/index.html'" style="background: #4CAF50;">进入应用</button>
            </div>
        </div>
    </div>
    
    <script>
        // 设置当前时间
        document.getElementById('currentTime').textContent = new Date().toLocaleString();
        
        // 测试配置
        const testConfig = {
            home: {
                url: 'http://129.211.173.87:3000/index.html',
                name: '首页'
            },
            project: {
                url: 'http://129.211.173.87:3000/projects_fixed.html',
                name: '项目模块'
            },
            tree: {
                url: 'http://129.211.173.87:3000/tree.html',
                name: '体系模块'
            },
            banner: {
                url: 'http://129.211.173.87:3000/api/banner/json',
                name: 'Banner API'
            },
            article: {
                url: 'http://129.211.173.87:3000/api/article/list/0/json',
                name: '文章API'
            },
            projectApi: {
                url: 'http://129.211.173.87:3000/api/project/tree/json',
                name: '项目分类API'
            },
            treeApi: {
                url: 'http://129.211.173.87:3000/api/tree/json',
                name: '体系分类API'
            }
        };
        
        // 测试页面
        async function testPage(type) {
            const config = testConfig[type];
            const statusEl = document.getElementById(`${type}Status`);
            const resultEl = document.getElementById(`${type}Result`);
            
            statusEl.className = 'test-status status-loading';
            statusEl.textContent = '测试中...';
            resultEl.style.display = 'none';
            
            try {
                const startTime = Date.now();
                const response = await fetch(config.url, { mode: 'no-cors' });
                const endTime = Date.now();
                const duration = endTime - startTime;
                
                // 由于no-cors模式，我们无法获取状态码，但可以检查是否成功发送请求
                statusEl.className = 'test-status status-success';
                statusEl.textContent = '✅ 正常';
                
                resultEl.innerHTML = `
                    <strong>测试结果:</strong> 访问成功<br>
                    <strong>响应时间:</strong> ${duration}ms<br>
                    <strong>测试时间:</strong> ${new Date().toLocaleTimeString()}
                `;
                resultEl.style.display = 'block';
                
            } catch (error) {
                statusEl.className = 'test-status status-fail';
                statusEl.textContent = '❌ 失败';
                
                resultEl.innerHTML = `
                    <strong>测试结果:</strong> 访问失败<br>
                    <strong>错误信息:</strong> ${error.message}<br>
                    <strong>测试时间:</strong> ${new Date().toLocaleTimeString()}
                `;
                resultEl.style.display = 'block';
            }
        }
        
        // 测试API
        async function testAPI(type) {
            const config = testConfig[type];
            const statusEl = document.getElementById(`${type}Status`);
            const resultEl = document.getElementById(`${type}Result`);
            
            statusEl.className = 'test-status status-loading';
            statusEl.textContent = '测试中...';
            resultEl.style.display = 'none';
            
            try {
                const startTime = Date.now();
                const response = await fetch(config.url);
                const endTime = Date.now();
                const duration = endTime - startTime;
                
                if (response.ok) {
                    const data = await response.json();
                    
                    statusEl.className = 'test-status status-success';
                    statusEl.textContent = '✅ 正常';
                    
                    resultEl.innerHTML = `
                        <strong>测试结果:</strong> API正常<br>
                        <strong>状态码:</strong> ${response.status}<br>
                        <strong>响应时间:</strong> ${duration}ms<br>
                        <strong>数据状态:</strong> ${data.errorCode === 0 ? '正常' : '异常'}<br>
                        <strong>测试时间:</strong> ${new Date().toLocaleTimeString()}
                    `;
                } else {
                    statusEl.className = 'test-status status-fail';
                    statusEl.textContent = '❌ 失败';
                    
                    resultEl.innerHTML = `
                        <strong>测试结果:</strong> API异常<br>
                        <strong>状态码:</strong> ${response.status}<br>
                        <strong>响应时间:</strong> ${duration}ms<br>
                        <strong>测试时间:</strong> ${new Date().toLocaleTimeString()}
                    `;
                }
                
                resultEl.style.display = 'block';
                
            } catch (error) {
                statusEl.className = 'test-status status-fail';
                statusEl.textContent = '❌ 失败';
                
                resultEl.innerHTML = `
                    <strong>测试结果:</strong> 请求失败<br>
                    <strong>错误信息:</strong> ${error.message}<br>
                    <strong>测试时间:</strong> ${new Date().toLocaleTimeString()}
                `;
                resultEl.style.display = 'block';
            }
        }
        
        // 运行所有测试
        async function runAllTests() {
            console.log('开始运行所有测试...');
            
            // 测试所有页面
            await testPage('home');
            await testPage('project');
            await testPage('tree');
            
            // 测试所有API
            await testAPI('banner');
            await testAPI('article');
            await testAPI('projectApi');
            await testAPI('treeApi');
            
            console.log('所有测试完成');
            
            // 显示总结
            alert('所有测试已完成！\n\n请查看上方测试结果。');
        }
        
        // 页面加载时自动运行所有测试
        window.addEventListener('load', function() {
            console.log('页面加载完成，开始自动测试...');
            // 延迟2秒后开始测试，避免页面加载冲突
            setTimeout(runAllTests, 2000);
        });
    </script>
</body>
</html>