test_route_fix.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>路由修复验证测试</title>
  7. <style>
  8. body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
  9. .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; }
  10. .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
  11. .result { margin: 10px 0; padding: 10px; border-radius: 4px; }
  12. .result.success { background: #d4edda; border: 1px solid #28a745; }
  13. .result.error { background: #f8d7da; border: 1px solid #dc3545; }
  14. .result.info { background: #d1ecf1; border: 1px solid #17a2b8; }
  15. button { padding: 10px 20px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; background: #007bff; color: white; }
  16. button:hover { background: #0056b3; }
  17. pre { background: #f8f9fa; padding: 10px; border-radius: 4px; overflow-x: auto; }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="container">
  22. <h1>🔧 路由修复验证测试</h1>
  23. <div class="test-section">
  24. <h2>测试各个路由端点</h2>
  25. <p>点击下面按钮逐一测试各个API端点,验证路由冲突是否已解决:</p>
  26. <button onclick="testEndpoint('/readcard/huashi/health', '健康检查')">🏥 健康检查</button>
  27. <button onclick="testEndpoint('/readcard/huashi/status', '设备状态')">📊 设备状态</button>
  28. <button onclick="testEndpoint('/readcard/huashi/help', 'API帮助')">📖 API帮助</button>
  29. <button onclick="testEndpoint('/readcard/huashi/simple?action=status', '简单调用')">🔧 简单调用</button>
  30. <button onclick="clearResults()">🗑️ 清除结果</button>
  31. </div>
  32. <div id="results"></div>
  33. </div>
  34. <script>
  35. function addResult(title, data, type = 'info') {
  36. const results = document.getElementById('results');
  37. const div = document.createElement('div');
  38. div.className = `result ${type}`;
  39. let content = `<h3>${title} <small>${new Date().toLocaleTimeString()}</small></h3>`;
  40. if (typeof data === 'object') {
  41. content += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
  42. } else {
  43. content += `<pre>${data}</pre>`;
  44. }
  45. div.innerHTML = content;
  46. results.appendChild(div);
  47. results.scrollTop = results.scrollHeight;
  48. }
  49. function testEndpoint(endpoint, name) {
  50. const url = `http://localhost:8321${endpoint}`;
  51. addResult(`🚀 测试 ${name}`, `正在访问: ${url}`, 'info');
  52. fetch(url, {
  53. method: 'GET',
  54. headers: { 'Content-Type': 'application/json' }
  55. })
  56. .then(response => {
  57. if (response.ok) {
  58. return response.json();
  59. } else {
  60. throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  61. }
  62. })
  63. .then(data => {
  64. addResult(`✅ ${name} 成功`, data, 'success');
  65. })
  66. .catch(error => {
  67. addResult(`❌ ${name} 失败`, error.message, 'error');
  68. });
  69. }
  70. function clearResults() {
  71. document.getElementById('results').innerHTML = '';
  72. }
  73. // 页面加载提示
  74. window.onload = function() {
  75. addResult('🎯 路由修复验证',
  76. `本页面用于验证Web API路由冲突修复是否成功。
  77. 🔧 修复内容:
  78. • 在Startup.cs中启用了属性路由 (MapHttpAttributeRoutes)
  79. • 保留约定路由作为后备
  80. • 所有GET方法现在应该能正确路由
  81. ✅ 预期结果:
  82. • 健康检查 → 返回服务状态信息
  83. • 设备状态 → 返回读卡器连接状态
  84. • API帮助 → 返回完整API文档
  85. • 简单调用 → 返回设备状态(通过action=status参数)
  86. ❌ 如果仍有问题:
  87. 请检查程序是否重启,以及路由配置是否正确加载。`, 'info');
  88. };
  89. </script>
  90. </body>
  91. </html>