更新 course-category.html

app/templates/course-category.html

@@ -42,6 +42,9 @@
             </ul>
         </div>
     </div>
+    <div class="layui-body">
+        <table id="courseTable" lay-filter="courseTableFilter"></table>
+    </div>
 </div>
 
 <script src="static/jquery.min.js"></script> <!-- 确保已经引入jQuery -->
@@ -60,6 +63,36 @@ $.get('/api/menu', function (menuItems) {
         layui.element.render('nav', 'test');
     });
 
+    layui.use(['table', 'jquery'], function () {
+    var table = layui.table;
+    var $ = layui.jquery;
+
+    // 发起GET请求获取数据
+    $.get('/api/get-course-type', function (res) {
+        // 假设返回的res是一个对象，包含必修和选修的课程名数组
+        console.log(res);
+
+        // 处理返回的数据，转换为表格能接受的格式
+        var tableData = [];
+        res['必修'].forEach(function (course) {
+            tableData.push({course_type: '必修', course_name: course});
+        });
+        res['选修'].forEach(function (course) {
+            tableData.push({course_type: '选修', course_name: course});
+        });
+
+        // 渲染表格
+        table.render({
+            elem: '#courseTable',
+            cols: [[ // 设置表头
+                {field: 'course_type', title: '课程类型', sort: true},
+                {field: 'course_name', title: '课程名称', sort: true}
+            ]],
+            data: tableData  // 使用处理后的数据
+        });
+    });
+});
+
     layui.use(['jquery'], function () {
         var $ = layui.jquery; // 获取Layui的jQuery对象