Javaweb复习项目

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、后台代码

//根据老师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;
    }