Update score_display.html

score_display.html

@@ -118,6 +118,7 @@
             <thead>
                 <tr>
                     <th>姓名</th>
+                    <th>学号</th>
                     <th>积分</th>
                 </tr>
             </thead>
@@ -135,61 +136,112 @@
         const studentList = document.getElementById('studentList');
         const sortButton = document.getElementById('sortButton');
         const clearButton = document.getElementById('clearButton');
-        let ascending = false;  // 默认降序
-
-        // 预定义学生名单
-        const predefinedStudents = [
-            { name: '张三', points: 0 },
-            { name: '李四', points: 0 },
-            { name: '王五', points: 0 },
-            { name: '赵六', points: 0 },
-        ];
-
-        // 获取所有学生，包括预定义名单
-        function getAllStudents() {
-            const students = predefinedStudents.map(student => {
-                const storedPoints = localStorage.getItem(student.name);
-                return {
-                    name: student.name,
-                    points: storedPoints !== null ? parseInt(storedPoints) : student.points
-                };
-            });
-            return students;
+        let ascend = false;  // 默认降序
+
+
+        //删除表
+        async function deleteTable(tableName) {
+    try {
+        const response = await fetch('/api/delete-table', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ tableName }),
+        });
+
+        if (!response.ok) {
+            throw new Error('删除表失败');
+        }
+
+        const data = await response.json();
+        alert(data.message); // 成功后显示消息
+    } catch (error) {
+        console.error('删除表操作失败:', error);
+        alert('删除表失败');
+    }
+}
+
+
+
+        // 获取按分数降序排列的学生排名
+        async function fetchDescendRanking() {
+            try {
+                const response = await fetch('/api/descend_ranking');
+                if (!response.ok) {
+                    alert('无法获取降序排名');
+                    return null;
+                }
+
+                const ranking = await response.json(); // 获取并解析为JSON数组
+                return ranking; // 返回排名数组
+            } catch (error) {
+                console.error('请求失败:', error);
+                return null;
+            }
+        }
+
+        // 获取按分数升序排列的学生排名
+        async function fetchAscendRanking() {
+            try {
+                const response = await fetch('/api/ascend_ranking');
+                if (!response.ok) {
+                    alert('无法获取升序排名');
+                    return null;
+                }
+
+                const ranking = await response.json(); // 获取并解析为JSON数组
+                return ranking; // 返回排名数组
+            } catch (error) {
+                console.error('请求失败:', error);
+                return null;
+            }
         }
 
-        // 显示学生积分
-        function displayStudents() {
-            const students = getAllStudents();
-            students.sort((a, b) => ascending ? a.points - b.points : b.points - a.points);
-            studentList.innerHTML = '';
-            students.forEach(student => {
+        async function displayStudents() {
+            let ranking; // 声明 ranking 变量
+            if (ascend) {
+                ranking = await fetchAscendRanking(); // 获取升序排名
+            } else {
+                ranking = await fetchDescendRanking(); // 获取降序排名
+            }
+
+            // 检查 ranking 是否为空
+            if (!ranking) {
+                alert('空 ranking');
+                return; // 退出函数
+            }
+
+            studentList.innerHTML = ''; // 清空表格内容
+            // 只显示前五名学生
+            ranking.slice(0, 5).forEach(student => {
                 studentList.innerHTML += `
                     <tr>
-                        <td>${student.name}</td>
-                        <td>${student.points}</td>
+                        <td>${student.student_name}</td>  <!-- 学生姓名 -->
+                        <td>${student.student_id}</td>    <!-- 学生ID -->
+                        <td>${student.score}</td>         <!-- 学生分数 -->
                     </tr>
                 `;
             });
         }
 
-        // 切换排序
+
+
         sortButton.addEventListener('click', () => {
-            ascending = !ascending;
-            sortButton.textContent = `切换排序 (${ascending ? '升序' : '降序'})`;
+            ascend = !ascend;
+            sortButton.textContent = `切换排序 (${ascend ? '升序' : '降序'})`;
             displayStudents();
         });
 
-        // 清除所有数据
         clearButton.addEventListener('click', () => {
             const confirmation = confirm("确定要清除所有学生数据吗？此操作无法撤销！");
             if (confirmation) {
-                localStorage.clear();
-                alert("所有数据已清除！");
+                deleteTable('students');
+                alert("所有信息已清除！");
                 displayStudents(); // 重新显示清空后的数据
             }
         });
 
-        // 初次加载时显示学生积分
         displayStudents();
     </script>