dict-debug.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  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; }
  9. .container { max-width: 800px; margin: 0 auto; }
  10. .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
  11. .success { color: green; }
  12. .error { color: red; }
  13. .warning { color: orange; }
  14. pre { background: #f5f5f5; padding: 10px; border-radius: 3px; overflow-x: auto; }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="container">
  19. <h1>字典数据调试页面</h1>
  20. <div class="test-section">
  21. <h3>测试说明</h3>
  22. <p>此页面用于调试学生信息管理页面的字典数据问题</p>
  23. <p>请确保:</p>
  24. <ul>
  25. <li>后端服务正在运行在 http://localhost:8080</li>
  26. <li>已经登录管理后台</li>
  27. <li>打开浏览器开发者工具查看详细日志</li>
  28. </ul>
  29. </div>
  30. <div class="test-section">
  31. <h3>测试结果</h3>
  32. <div id="results"></div>
  33. </div>
  34. <div class="test-section">
  35. <h3>字典数据详情</h3>
  36. <div id="dictDetails"></div>
  37. </div>
  38. </div>
  39. <script>
  40. const results = document.getElementById('results');
  41. const dictDetails = document.getElementById('dictDetails');
  42. function log(message, type = 'info') {
  43. const div = document.createElement('div');
  44. div.className = type;
  45. div.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
  46. results.appendChild(div);
  47. console.log(`[DICT-DEBUG] ${message}`);
  48. }
  49. function showDictData(dictType, data) {
  50. const section = document.createElement('div');
  51. section.innerHTML = `
  52. <h4>${dictType} (${data.length} 条记录)</h4>
  53. <pre>${JSON.stringify(data, null, 2)}</pre>
  54. `;
  55. dictDetails.appendChild(section);
  56. }
  57. async function testDictAPI() {
  58. log('开始测试字典API...');
  59. const dictTypes = ['xg_gender', 'xg_student_status', 'xg_info_status'];
  60. for (const dictType of dictTypes) {
  61. try {
  62. log(`正在测试字典类型: ${dictType}`);
  63. const response = await fetch(`http://localhost:8080/system/dict/data/type/${dictType}`, {
  64. method: 'GET',
  65. headers: {
  66. 'Accept': 'application/json',
  67. 'Content-Type': 'application/json'
  68. },
  69. credentials: 'include' // 包含cookies
  70. });
  71. const result = await response.json();
  72. if (result.code === 200) {
  73. log(`✅ ${dictType}: 成功获取 ${result.data.length} 条数据`, 'success');
  74. showDictData(dictType, result.data);
  75. } else if (result.code === 401) {
  76. log(`❌ ${dictType}: 认证失败,请先登录管理后台`, 'error');
  77. } else {
  78. log(`❌ ${dictType}: ${result.msg}`, 'error');
  79. }
  80. } catch (error) {
  81. log(`❌ ${dictType}: 网络错误 - ${error.message}`, 'error');
  82. }
  83. }
  84. }
  85. // 页面加载完成后执行测试
  86. window.addEventListener('load', () => {
  87. log('页面加载完成,开始测试...');
  88. testDictAPI();
  89. });
  90. // 添加手动重试按钮
  91. const retryButton = document.createElement('button');
  92. retryButton.textContent = '重新测试';
  93. retryButton.onclick = () => {
  94. results.innerHTML = '';
  95. dictDetails.innerHTML = '';
  96. testDictAPI();
  97. };
  98. document.querySelector('.container').appendChild(retryButton);
  99. </script>
  100. </body>
  101. </html>