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">&times;</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>
<!-- 课程表对话框end -->

点击课程表超链接，发送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+"<br>"+data[i].banji+"<br>"+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、显示效果

欢迎关注公众号：【皮卡战记】