【SpringBoot】SpringBoot+Thymeleaf+Ajax制作一个动态的课程表

---

数据库

我们的数据库有俩个表，一个是存储课程的基本信息一个是存储上课地点的信息

这个表的列分别是：课程id、课程名称、教授老师名称、上课班级

这个表的列分别是：课程id、上课的星期天数、上课的节次、上课地点

前端代码

前端就是做一个大体的框架，然后将数据填入
css代码

<style>
			table.tftable,
			table.table-count {
				font-size: 12px;
				color: #333333;
				width: 1200px;
				border-width: 1px;
				border-collapse: collapse;
			}
			
			table tbody tr:nth-child(2n+1) {
				background: #F5F5F5;
			}
			
			table.table-count th,
			table.table-count td {
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				border-width: 1px;
				border-style: solid;
				border-color: #e4e4e4;
				text-align: center;
			}
			
			table.tftable th,
			table.tftable td {
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				border-width: 1px;
				padding: 8px;
				border-style: solid;
				border-color: #e4e4e4;
				text-align: left;
				text-align: center;
			}
			
			.tftable {
				margin-left: 1%;
				margin-bottom: 10px;
				margin-top: 10px;
			}
			
			table.tftable tr:hover {
				background: #C3ECFF;
			}
			
			.tftable>thead>tr:hover {
				background: white;
			}
		</style>

HTML代码

<div id="kechengList" tabindex="-1">
			<div style="float: right;">
				<div>
					<div class="modal-header">
						<h4 id="myModalLabel">课程表信息</h4>
					</div>

					<div>
						<div>
							<h2 style="text-align: center;">课程表</h2>
							<table class="tftable" style="height: 600px;float: right;">
								<thead>
									<tr>
										<th scope="col"></th>
										<th scope="col">星期一</th>
										<th scope="col">星期二</th>
										<th scope="col">星期三</th>
										<th scope="col">星期四</th>
										<th scope="col">星期五</th>
									</tr>
								</thead>

								<tbody style="text-align: center;">
									<tr style="height: 80px">
										<th scope="row">1-2节
										</th>
										<td id="table_1_1"></td>
										<td id="table_2_1"></td>
										<td id="table_3_1"></td>
										<td id="table_4_1"></td>
										<td id="table_5_1"></td>

									</tr>
									<tr style="height: 80px">
										<th scope="row">3-4节
										</th>
										<td id="table_1_2"></td>
										<td id="table_2_2"></td>
										<td id="table_3_2"></td>
										<td id="table_4_2"></td>
										<td id="table_5_2"></td>
									</tr>
									<tr style="height: 80px">
										<th scope="row">5-6节
										</th>
										<td id="table_1_3"></td>
										<td id="table_2_3"></td>
										<td id="table_3_3"></td>
										<td id="table_4_3"></td>
										<td id="table_5_3"></td>
									</tr>
									<tr style="height: 80px">
										<th scope="row">7-8节
										</th>
										<td id="table_1_4"></td>
										<td id="table_2_4"></td>
										<td id="table_3_4"></td>
										<td id="table_4_4"></td>
										<td id="table_5_4"></td>
									</tr>
									<tr style="height: 80px">
										<th scope="row">9-10节
										</th>
										<td id="table_1_5"></td>
										<td id="table_2_5"></td>
										<td id="table_3_5"></td>
										<td id="table_4_5"></td>
										<td id="table_5_5"></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

没有数据是页面显示

Ajax代码

Ajax的主要作用就是获取后端的json数据，然后将数据插入即可
$("#table_" + data[i].week + "_" + data[i].jieci)这是通过id来确定课程的位置

<script>
        function getKecheng() {
            $.ajax({
                type: "get",
                url: "/stu/getKechengByTid.action",
                success: function(data) {
                    //清空课程表
                    for(var i = 1; i < 6; i++) {
                        for(var j = 1; j < 6; j++) {
                            $("#table_" + j + "_" + i).html("");
                        }
                    }
                    //遍历课程表
                    for(var i = 0; i < data.length; i++) {
                        $("#table_" + data[i].week + "_" + data[i].jieci).html(data[i].cname + "<br>" + data[i].banji + "<br>" + data[i].address + "<br>" + data[i].tname);
                    }
                }
            });
        }
    </script>

后端代码

首先要使用Mybatis来获取数据库的数据，Mybatis的具体使用在这里就不做赘述了，我们只交代具体的sql语句是如何书写

SELECT 
	name,
	week,
	jieci,
	name AS cname, 
	className AS banji,
	address,
	teacherName AS tName 
from course c, 
	kecheng k
WHERE 
	c.cid = k.cid 

controller书写

    @GetMapping("/getKechengByTid.action")
    @ResponseBody
    public List<Kecheng> getKecheng() throws Exception {
        List<Kecheng> list = collectionService.getKecheng();
        return list;
    }

结果