更新 course-category.html

app/templates/course-category.html

@@ -42,22 +42,55 @@
             </ul>
         </div>
     </div>
+    <div class="layui-body">
+        <table id="courseTable" lay-filter="courseTableFilter"></table>
+    </div>
 </div>
 
 <script src="static/jquery.min.js"></script> <!-- 确保已经引入jQuery -->
 <script src="static/layui.js"></script>
 <script>
     // 请求后端获取菜单数据
-$.get('/api/menu', function (menuItems) {
-    var menuList = $('.layui-nav.layui-nav-tree');
-    menuList.empty();
+    $.get('/api/menu', function (menuItems) {
+        var menuList = $('.layui-nav.layui-nav-tree');
+        menuList.empty();
 
-    menuItems.forEach(function (item) {
-        var href = item.path || 'javascript:void(0);';  // 提供一个默认值
-        menuList.append('<li class="layui-nav-item"><a href="' + href + '">' + item.name + '</a></li>');
+        menuItems.forEach(function (item) {
+            var href = item.path || 'javascript:void(0);';  // 提供一个默认值
+            menuList.append('<li class="layui-nav-item"><a href="' + href + '">' + item.name + '</a></li>');
+        });
+
+        layui.element.render('nav', 'test');
     });
 
-    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 () {