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")@ResponseBodypublic 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、显示效果

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

java课程表的前后端设计实现相关推荐

java计算机毕业设计前后端分离健身房管理系统源代码+数据库+系统+lw文档
java计算机毕业设计前后端分离健身房管理系统源代码+数据库+系统+lw文档 java计算机毕业设计前后端分离健身房管理系统源代码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语 ...
最近很火的在线文件预览txt、doc、ppt、pdf、excel、jpg、png、zip、tar.gz等各种文件及压缩文件在线解压和预览，包括前后端设计和源码，编写搜索引擎多关键词检索名称和内容（四）
最近很火的在线文件预览txt.doc.ppt.pdf.excel.jpg.mp4.png.zip.tar.gz等各种文件及压缩文件在线解压和预览,包括前后端设计和源码,编写一个文件搜索引擎实现多关键词 ...
java+vue实现前后端导出html的word文档
java+vue实现前后端导出html的word文档该内容主要是完成项目中实战导出word文档,而且不需要其他的依赖,原生的写法即可! 本项目架构: PS:不是这个架构的话看下逻辑就好,赶紧找别的博 ...
java和Vue前后端RSA对称加密
java和Vue前后端RSA对称加密参考:https://blog.csdn.net/qq_25623257/article/details/109775531 一.生成秘钥对(公私钥) 在线生成地 ...
最近很火的在线文件预览txt、doc、ppt、pdf、excel、jpg、png、zip、tar.gz等各种文件及压缩文件在线解压和预览，包括前后端设计和源码，编写搜索引擎多关键词检索名称和内容（五）
最近很火的在线文件预览txt.doc.ppt.pdf.excel.jpg.mp4.png.zip.tar.gz等各种文件及压缩文件在线解压和预览,包括前后端设计和源码,编写一个文件搜索引擎实现多关键词 ...
基于Java+SpringBoot+Vue前后端分离网上银行系统设计与实现(视频讲解)
博主介绍:✌全网粉丝3W+,全栈开发工程师,从事多年软件开发,在大厂呆过.持有软件中级.六级等证书.可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌ 博主作 ...
JAVA中的前后端交互
JDBC 什么是JDBC java数据库连接(Java Database Connectivity) 有什么用利用 Java 代码, 可以操作数据库. 怎么用注册驱动获取数据库连接创建 Sta ...
java中常用前后端交互框架,整合Spring-SpringMVC-MyBatis实现简单前后端交互
整合Spring-SpringMVC-MyBatis实现简单前后端交互 (1)环境要求 IDEA MySQL Tomcat Maven (2)数据库环境 id name pwd 1 Hunter 12 ...
Java微服务前后端分离技术开发的微信快速框架-教程
JooLun微信快速开发框架-采用目前最流行的前后端分离框架开发出来的微信快速开发平台.二次开发效率高,技术先进不怕被淘汰系统特性: Spring Cloud微服务化开发,采用Nacos注册和配置中 ...

java课程表的前后端设计实现

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

java课程表的前后端设计实现相关推荐

最新文章

热门文章