java课程表的前后端设计实现
最近练习了个教师课程管理系统，这篇博客主要记录怎么在系统中实现教师课程表的展示功能。
####1、数据库设计
字段设计
CREATE TABLE `kecheng` (
`cid` INT(32) NOT NULL AUTO_INCREMENT COMMENT '课程id',
`cname` VARCHAR(40) DEFAULT NULL COMMENT '课程名字',
`week` INT(32) DEFAULT NULL COMMENT '星期',
`jieci` INT(32) DEFAULT NULL COMMENT '节次',
`banji` VARCHAR(40) DEFAULT NULL COMMENT '班级名字',
`address` VARCHAR(40) DEFAULT NULL COMMENT '上课教室',
`tid` VARCHAR(100) DEFAULT NULL COMMENT '教师id',
PRIMARY KEY (`cid`)
) ENGINE=INNODB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8;
INSERT INTO `kecheng` VALUES (1,'Java基础','1','1','软件工程02班','南楼A103','1001'),
(2,'Java基础','1','3','软件工程01班','南楼A205','1001')
,(3,'Java基础','2','2','软件工程01班','南楼B201','1001')
,(4,'Java基础','3','3','软件工程02班','北楼A305','1001')
,(5,'Java基础','4','5','软件工程03班','南楼A405','1001')
,(6,'Java基础','5','4','软件工程03班','南楼A205','1001');
####2、前端页面
系统中是通过模态框实现的，当然也可以普通页面的方式显示。
部分html代码：
<a href="#" class="btn btn-primary btn-xs"
data-toggle="modal" data-target="#kechengList" onclick="getKecheng(${row.tc_id})">课程表
a>
<div class="modal fade" id="kechengList" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 900px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×span>
button>
<h4 class="modal-title" id="myModalLabel">课程表信息h4>
div>
<div class="modal-body">
<div class="table-div">
<h2 style="text-align: center;">课程表h2>
<table class="table table-bordered table-striped table-hover" style="height: 450px">
<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 class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭button>
div>
div>
div>
div>
点击课程表超链接，发送ajax请求，从服务器获取数据。
js代码：
// 通过Tid(教师的id)获取课程表信息
function getKecheng(id) {
$.ajax({
type:"get",
url:"<%=basePath%>kecheng/getKechengByTid.action",
data:{"id":id},
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+"
"+data[i].banji+"
"+data[i].address);
}
}
});
}
####3、后台代码
后台的java代码比较简单。
//根据老师id查询课程表
@RequestMapping("/getKechengByTid.action")
@ResponseBody
public List<Kecheng> getKechengByTid(String id) throws Exception{
System.out.println("教师id:"+id);
if (id!=null && !"".equals(id)) {
List<Kecheng> list = kechengService.getKechengByTid(id);
System.out.println(list.toString());
return list;
}
return null;
}
####4、显示效果
欢迎关注博主公众号：三叉树