devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

排课、选课系统——JSP与数据库设计_数据库查询 - 选课系统

作者：码创造者 | 2024-07-23 22:59:04

赞

踩

数据库查询 - 选课系统

缘起是，在数据库实践课程上我们选择做“兴趣班排课系统”，并做页面设计。

开发工具：

        NetBeans 14（Tomcat8.5，JDK11）

        MySQL 5.7.19

目录

一：实现功能

二：项目运行的前置条件（配置）

三：高复用与核心代码

四：表结构与表的建立

五：登录、注册功能

六：机构管理员功能实现

七：教师相关操作实现

八：学生相关操作实现

九：教务员相关操作实现

十：总结

十一：项目文件结构与提取

一：实现功能

1.登录、注册功能

2.机构管理员相关操作（机构管理员是兴趣班的最高权限者）

        （1）教师信息管理（添加教师信息、修改教师信息）

        （2）教务员信息管理（添加教师信息、修改教师信息）

        （3）退费管理（对学生申请的退课退费申请进行处理）        

        （4）个人中心（查询与修改）

3.教师相关操作

        （1）显示教师的课（教务员排课后发布的课，发布后不可在页面进行退课）

        （2）教师空闲时间（教师空闲时间表一学期换，教师在此设置自己的空闲时间方便教务员排课）

        （3）个人中心（查询与修改）

4.学生相关操作

        （1）课程查询（先选科目类别，再进行选课，已选的课不能重复选课，已选择的课要申请退课才能退课）

        （2）我的课表（需要选择学期；如果想退课，可以点击课程进行申请）

        （3）申请退课（在申请课程后，申请信息会出现现在这里，还有机构管理员的处理结果）

        （4）个人中心（查询与修改） 

5.教务员相关操作

        （1）学生信息管理（查询与修改）

        （2）教室信息管理（查询与修改，方便排课）

        （3）排课（下拉选择学期，点击对应的节次进入排课和修改，排好后点击“发布！”）

        （4）教室信息查询（只能查询不能修改，方便排课）

        （5）个人中心（查询与修改）

二：项目运行的前置条件（配置）

1.配置Tomcat，参考：

NetBeans配置Tomcat-CSDN博客

2.mysql安装与使用和Navicat工具激活

（1）mysql安装与使用

        在官网安装即可，但是需要注意，在jdbc连接mysql时需要下载mysql的connector/J包，如果下的版本不一致可能造成不适配的情况。

        我这里的mysql是5.7.19，连接包是mysql-connector-j-8.2.0.jar

Netbeans + MySQL-CSDN博客

（2）Navicat Premium工具（MySQL可视化工具）

        这里要先说明一下，有条件支持正版！

        

三：高复用与核心代码

1.数据库层次：

        （1）jsp界面头部的导入工具包

  1. <%@page import="java.sql.ResultSet"%>
  2. <%@page import="java.sql.PreparedStatement"%>
  3. <%@page import="java.sql.DriverManager"%>
  4. <%@page import="java.sql.Connection"%>

        （2）连接数据库与之操作：

  1. Class.forName("com.mysql.jdbc.Driver");  //加载驱动
  2. Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/homework", "root", "alfo123456");//这里是本地连接，数据库名是homework，账号是root，密码是alfo123456
  3. String sql = "SELECT * FROM `USER` WHERE LoginID=? AND PASSWORD=?";//这里写sql语句，对于要赋值的变量用“?”代替
  4. PreparedStatement ps = conn.prepareStatement(sql);//PreparedStatement是Java中的一个接口，用于执行预编译的SQL语句，这里创建一个它的实例，名叫ps
  5. ps.setString(1, id);//给前面sql语句要赋值的变量赋值，如果是int是ps.setInt(1,XXX)；
  6. ps.setString(2, password);
  7. ResultSet rs = ps.executeQuery();//执行查询语句并把结果赋值给rs，ResultSet是Java的一个接口，用于表示执行数据库操作的结果集。需要注意如果是增删改查操作是ps.executeUpdate();
  8.  
  9. int user_id = 0;
  10. String user_name = "";
  11. if(rs.next()){    //这里请做rs.next()操作，因为rs指针本来指向空，rs.next()相当于把rs指针右移一位，不然会报错！同理的如果查询结果为多行值，可以用while(rs.next())......数据结构用Java的集合列表ArrayList
  12.     user_id = rs.getInt("UserID");
  13.     user_name = rs.getString("UserName");
  14. }
  15.

2.HTML高复用模块：

（1）课表模板

  1. <table class="the_table" id="the_table">
  2.                 <div style="display:flex; justify-content: center; align-items: center;">
  3.                 <tr class="week_tr">
  4.                     <td></td> <!-- 空白单元格 -->
  5.                     <% for (int i = 0; i < weeks.length; i++) {%>
  6.                     <td><%= weeks[i]%></td> <!-- 显示周次 -->
  7.                     <% } %>
  8.                 </tr>
  9.                 <% for (int i = 1; i < times.length + 1; i++) {%>
  10.                 <!--改用数据库的section,这里调整的比较多-->
  11.                 <tr>
  12.                     <td class="section_no"><%= times[i - 1]%></td> <!-- 显示节次 -->
  13.                     <% for (int j = 1; j < weeks.length + 1; j++) {
  14.                             //这里添加自己代码
  15.                     %>
  16.                     <td id="cell_<%= (i)%>_ <%= (j)%>" class="<%= cellClass%>"><%= cellText%></td>
  17.                     <% } %>
  18.                 </tr>
  19.                 <% }%>
  20.             </div>
  21. </table>
  22. //这里实现的功能是渲染一个课表，table等结构的样式可以在<style>添加。
  23. //这里有周和节次两个数组，分别存放库中一周有几天和一天有几个节次。weeks.length=7,times.length=6，对应周一到周日，早上第一节课到晚上最后一节课

实现效果如下（我这里自己代码是进行数据库该教师课程的查询）

（2）“修改”和“添加”信息的提交表单的次级页面

  1. <div id="classroomModal" class="modal">
  2.         <div class="modal-content">
  3.             <div class="form_title">修改教室信息</div>
  4.  
  5.             <form action="change_classroom_form.jsp" method="post" class="the_form">
  6.                 <!-- 这里放置你的表单内容 -->
  7.                 <input type="hidden" id="classroom_id" name="classroom_id">
  8.                 //这里设置类型为hidden，说明只传内容，不显示
  9.                 <div class="details">
  10.                     <label for="classroom_name">教室名称:</label>
  11.                     <input type="text" id="classroom_name" name="classroom_name">
  12.                 </div>
  13.                 <br>
  14.                 <div class="details">
  15.                     <label for="classroom_location">教室位置:</label>
  16.                     <input type="text" id="classroom_location" name="classroom_location">
  17.                 </div>
  18.                 <br>
  19.                 <div class="details">
  20.                     <label for="locked_time">占用时间:</label>
  21.                     <input type="text" id="locked_time" name="locked_time">
  22.                 </div>
  23.                 <br> 
  24.                 <div class="details">
  25.                     <label for="locked_task_name">占用事项:</label>
  26.                     <input type="text" id="locked_task_name" name="locked_task_name">
  27.                 </div>
  28.                 <br> 
  29.  
  30.                 <input type="submit" value="提交">
  31.                 <input type="button" value="取消" onclick="closeClassroomModal()">
  32.             </form>
  33.         </div>
  34. </div>
  35. //通过点击事件触发（js处理）后，可以打开这个次级页面（设置宽高），同时传递信息，提交后把信息传递到目标jsp文件进行处理（这里是change_classroom_form.jsp），取消后调用函数（这里是closeClassroomModal()）关闭

实现效果如下

这里顺便吧用到的js代码带上

  1.  //classroom_manage's functions
  2. function closeClassroomModal() {
  3.     document.getElementById('classroomModal').style.display = 'none';
  4. }
  5. function openClassroomModal(classroom_id, classroom_name, classroom_location, locked_time, locked_task_name) {
  6.     //这里要指定前面打开的模块id：classroomModal
  7.     document.getElementById('classroomModal').style.display = 'block';
  8.     //这里传参数，做到点击“修改”就有信息而不是重新输入（比如名字已经出现在了输入框）
  9.     document.getElementById('classroom_id').value = classroom_id;
  10.     document.getElementById('classroom_name').value = classroom_name; 
  11.     document.getElementById('classroom_location').value = classroom_location;
  12.     document.getElementById('locked_time').value = locked_time;
  13.     document.getElementById('locked_task_name').value = locked_task_name;
  14. //                console.log("click it once!");//用于调试
  15. }

3.Java代码复用

（1）渲染内容（本质还是html了这里）

  1. // Print the results in a table
  2. out.print("<table class='table_info' border='1'>");
  3. out.print("<tr><th>教室编号</th><th>教室名称</th><th>教室位置</th><th>占用时间</th><th>占用事项</th><th>更改</th></tr>");
  4. for (int i = 0; i < classroom_id.size(); i++) {
  5.     out.print("<tr class='tr_info'>");
  6.     out.print("<td id='name-" + i + "'>" + classroom_id.get(i) + "</td>");
  7.     out.print("<td id='sex-" + i + "'>" + classroom_name.get(i) + "</td>");
  8.     out.print("<td id='age-" + i + "'>" + classroom_location.get(i) + "</td>");
  9.     out.print("<td id='phone-" + i + "'>" + locked_time.get(i) + "</td>");
  10.     out.print("<td id='phone-" + i + "'>" + locked_task_name.get(i) + "</td>");
  11.     out.print("<td><button href='javascript:void(0)' "
  12.             + "onclick=\"openClassroomModal('" + classroom_id.get(i) + "','" + classroom_name.get(i) + "','" + classroom_location.get(i) + "','" + locked_time.get(i) + "','" + locked_task_name.get(i) + "')\">"
  13.             + "修改</button></td>"
  14.     );//此处Javascript.void(0)不执行任何操作，只说明执行后面的JavaScript代码
  15.     out.print("</tr>");
  16. }
  17. out.print("</table>");
  18. //实现的其实就是对要查询的数据进行遍历输出
  19. //点击“修改”后，调用js函数进行修改

实现效果：（这里渲染库里的教室信息，变量值前面已经获取）

（2）在进行数据库请求的时候，要做防止乱码的操作：

4.JS代码复用（这里主要是函数）

提要：如果有的方法用不了，尤其是异步传参等，请在文件的<head>下添加以下代码

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  2. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

（1）点击事件后的页面跳转：

  1. function showIt(term) {
  2.         console.log(term);
  3.         if (confirm("是否确认公布?")) {
  4.             var xhttp = new XMLHttpRequest();
  5.             xhttp.onreadystatechange = function () {
  6.                 if (this.readyState === 4 && this.status === 200) {
  7.                     // 刷新页面以更新数据（不跳转）
  8.                     location.reload();
  9.                 }
  10.             };
  11.             xhttp.open("GET", "showIT.jsp?term=" + term, true);  // 替换为你的showIT.jsp的路径
  12.             xhttp.send();
  13.          } else {
  14.             // 如果取消则关闭弹出框
  15.             // 需要注意的是，在 `confirm` 弹出框中点击取消会自动关闭弹出框，你不需要写额外的代码来关闭它
  16.          }
  17.     }
  18. //这个函数在点击“公布！”后触发，会弹出窗口提示“是否确认公布?”
  19. //如果结果是true，会跳转页面到showIT.jsp页面（这个页面把学期为term的课程是否发布属性设为1），同时吧term作为参数传过去
  20. //如果是传两个参数：xhttp.open("GET", "showIT.jsp?term="+ term + "&var2_name=" +var2, true);
  21. //如果希望跳转而不是刷新页面：应该是这样：window.location.href = "showIT.jsp?term=" + term + "&var2_name=" + var2;

（2）打开次级页面（常用于提交表单）

  1. function closeClassroomModal() {
  2.     document.getElementById('classroomModal').style.display = 'none';
  3. }
  4. function openClassroomModal(classroom_id, classroom_name, classroom_location, locked_time, locked_task_name) {
  5.     document.getElementById('classroomModal').style.display = 'block';
  6.     document.getElementById('classroom_id').value = classroom_id;
  7.     document.getElementById('classroom_name').value = classroom_name; 
  8.     document.getElementById('classroom_location').value = classroom_location;
  9.     document.getElementById('locked_time').value = locked_time;
  10.     document.getElementById('locked_task_name').value = locked_task_name;
  11. //                console.log("click it once!");
  12. }
  13. //这里在上面已经解释过了，如果希望该开始没有显示内容只保留第一行就行了

（3）选择学期并渲染表格（比如选择第一学期，则表格同步刷新为第一学期的课）

  1. function changeSemester(semester) {
  2.     // 发送请求或执行其他逻辑来获取对应学期的课程数据
  3.     var semesterSelect = document.getElementById("semesterSelect");
  4.     console.log(semesterSelect);
  5.     var semester = semesterSelect.value;
  6.     console.log("this is a line!");
  7.     console.log(semester);
  8.     $.ajax({
  9.         url: "course_plan.jsp",    //请求来自该页面
  10.         type: "GET",
  11.         data: {
  12.              semester: semester
  13.         },
  14.         success: function (response) {
  15.              var selectedSemester = semesterSelect.value;
  16.              refreshTable(selectedSemester);    //获取成功则同步渲染表格
  17.         }
  18.     });
  19. }
  20. function refreshTable(semester) {
  21.     $.ajax({
  22.          url: "course_table.jsp",    //这里是渲染课程的表格的jsp页面
  23.          method: "GET",
  24.          data: {
  25.               semester: semester
  26.          },
  27.          success: function (response) {
  28.               $("#the_table").html(response);    //把course_table.jsp文件当成一个整体
  29.          },
  30.          error: function () {
  31.               // 处理错误情况
  32.          }
  33.    });
  34.  }

四：表结构与表的建立

1.表结构设计如下：

此处需要注意：

（1）主键需要是单列的，可以提高连接和查询的效率（使用逻辑主键解决，即使它无意义）

（2）在设计表名字时，要做到直观（见字如面）；同时如果与库中原有的表名相同，则要避免或在使用的时候用“  `  ”引起来（ESC的下面按键）

（3）避免使用外键（使用逻辑外键，在库内不使用，但都认为它是外键，

  KEY `idx_user_id` (`user_id`),而不是

FOREIGN KEY (`user_id`) REFERENCES `user` (`id`)

）

2.表结构代码：

  1. CREATE DATABASE homework
  2.  
  3. CREATE TABLE USER(
  4. 	UserID INT NOT NULL AUTO_INCREMENT,
  5. 	UserName VARCHAR(10) NOT NULL,
  6. 	UserSex ENUM('男','女') DEFAULT '男' NOT NULL,
  7. 	UserAge INT NOT NULL,
  8. 	UserPhone VARCHAR(11) NOT NULL,
  9.     LoginID VARCHAR(20) NOT NULL，
  10.     `Password` VARCHAR(20) NOT NULL，
  11. 	Identity ENUM('学生','教师','教务员','机构管理员') NOT NULL,
  12. 	PRIMARY KEY(UserID)
  13. )
  14.  
  15. CREATE TABLE TEACHER(
  16.  TeacherID INT NOT NULL AUTO_INCREMENT, 
  17.  TeacherName VARCHAR(10) NOT NULL, 
  18.  TeacherAge INT NOT NULL, 
  19.  TeacherSex ENUM('男','女') DEFAULT '男' NOT NULL, 
  20.  TeacherPhone VARCHAR(11) NOT NULL, 
  21.  PRIMARY KEY(TeacherID) 
  22. ) ENGINE = INNODB DEFAULT CHARSET=UTF8;
  23.  
  24. CREATE TABLE `SUBJECT`(
  25. 	SubjectID INT NOT NULL AUTO_INCREMENT,
  26. 	TeacherID INT NOT NULL,
  27. 	SubjectType VARCHAR(10) NOT NULL,
  28. 	SubjectName VARCHAR(10) NOT NULL,
  29. 	PRIMARY KEY(SubjectID),
  30. 	KEY IdxTeacherID (TeacherID)
  31. 	) ENGINE = INNODB DEFAULT CHARSET=UTF8; 
  32.  
  33. CREATE TABLE LEISURE(
  34. 	ID INT NOT NULL AUTO_INCREMENT,
  35. 	SectionNo VARCHAR(4) NOT NULL,
  36. 	TeacherID INT NOT NULL,
  37. 	PRIMARY KEY(ID),
  38. 	KEY IdxSectionNO(SectionNo),
  39. 	KEY IdxTeacherID(TeacherID)
  40. )	ENGINE = INNODB DEFAULT CHARSET=UTF8;
  41.  
  42. CREATE TABLE SECTION(
  43. 	SectionNo VARCHAR(4) NOT NULL,
  44. 	WeekNo VARCHAR(2) NOT NULL,
  45. 	TimePeriod VARCHAR(10) NOT NULL,
  46. 	PRIMARY KEY(SectionNo)
  47. )	ENGINE = INNODB DEFAULT CHARSET=UTF8;
  48.  
  49. CREATE TABLE COURSE(
  50. 	CourseID INT NOT NULL AUTO_INCREMENT,
  51. 	SubjectID INT  NOT NULL,
  52. 	ClassroomID INT NOT NULL,
  53. 	TeacherID INT NOT NULL,
  54. 	SectionNo VARCHAR(4) NOT NULL,
  55. 	Term VARCHAR(6) NOT NULL,
  56.     Status TINYINT(1) DEFAULT 0,
  57.     IsShow TINYINT(1) DEFAULT 0,
  58. 	PRIMARY KEY(CourseID),
  59. 	KEY IdxSubjectID(SubjectID),
  60. 	KEY IdxClassroomID(ClassroomID),
  61. 	KEY IdxTeacherID(TeacherID),
  62. 	KEY IdxSectionNo(SectionNo)
  63. ) ENGINE = INNODB DEFAULT CHARSET=UTF8;
  64.  
  65. CREATE TABLE CLASSROOM(
  66. 	ClassroomID INT NOT NULL AUTO_INCREMENT,
  67. 	ClassroomName VARCHAR(20) NOT NULL,
  68. 	ClassroomLocation VARCHAR(30) NOT NULL,
  69. 	PRIMARY KEY(ClassroomID)
  70. ) ENGINE = INNODB DEFAULT CHARSET=UTF8;
  71.  
  72. CREATE TABLE CLASSROOMARRANGE(
  73. 	ID INT NOT NULL AUTO_INCREMENT,
  74. 	ClassroomID INT NOT NULL,
  75. 	LockedTime DATETIME DEFAULT CURRENT_TIMESTAMP,
  76. 	LockedTaskName VARCHAR(50) NOT NULL,
  77. 	PRIMARY KEY(ID),
  78. 	KEY IdxClassroomID(ClassroomID)
  79. ) ENGINE = INNODB DEFAULT CHARSET = UTF8;
  80.  
  81. CREATE TABLE STUDENT(
  82. 	StudentID INT NOT NULL AUTO_INCREMENT,
  83. 	StudentName VARCHAR(10) NOT NULL,
  84. 	StudentSex ENUM('男','女') DEFAULT '男' NOT NULL,
  85. 	StudentAge INT NOT NULL,
  86. 	StudentPhone VARCHAR(11) NOT NULL,
  87. 	PRIMARY KEY(StudentID)
  88. ) ENGINE = INNODB DEFAULT CHARSET=UTF8;
  89.  
  90. CREATE TABLE SIGNUP(
  91. 	ID INT NOT NULL AUTO_INCREMENT,
  92. 	CourseID INT NOT NULL,
  93. 	StudentID INT NOT NULL,
  94. 	SignUpTime DATETIME DEFAULT CURRENT_TIMESTAMP(),
  95. 	PayOrNot TINYINT(1) DEFAULT 0,
  96. 	PRIMARY KEY(ID),
  97. 	KEY IdxCourseID(CourseID),
  98. 	KEY IdxStudentID(StudentID)
  99. ) ENGINE = INNODB DEFAULT CHARSET=UTF8;
  100.  
  101. CREATE TABLE RETURNAPPLY(
  102. 	ApplyID INT NOT NULL AUTO_INCREMENT,
  103. 	SignUpID INT NOT NULL,
  104. 	ApprovalStatus TINYINT(1) DEFAULT 0,
  105.     ApprovalResult VARCHAR(3) DEFAULT '未审批',
  106. 	PRIMARY KEY(ApplyID),
  107. 	KEY IdxSignUpID(SignUpID)
  108. ) ENGINE = INNODB DEFAULT CHARSET=UTF8;

这里笔者找的是最早的版本并进行了一些修改，不保证一定对，各位可以一条一条执行，同时修改为自己想要的类型

建成之后应该是这样的

五：登录、注册功能

（1）登录：这里本质就是一个表单操作和数据库查询操作

此处需要注意Tomcat的入口文件默认是index.jsp文件（改的话需要在conf文件修改），我这里直接把登录界面命名为index.jsp（不然运行项目会出现404）

核心代码：

  1. <div id="a">
  2.     <h1>登录界面</h1>
  3.     <!--此处的check.jsp需要重写，分权限-->
  4.     <form action="" method="post">
  5.         账号:<input type="text" name="id"/>
  6.         <br>
  7.         密码:<input type="password"name="password"/>
  8.         <br>
  9.         <input type="submit" value="login"/>
  10.         没有账号？<a href ="Register.jsp">注册账号</a>
  11.     </form>
  12. </div>

还有就是如果账号不为空时进行身份判别，跳转不同页面，同时传递user_id（方便后期数据处理）

  1. if (identity.equals("学生")) {
  2.     //传传传传参
  3.     session.setAttribute("UserID", user_id);    //名字可能改，传id
  4.     session.setAttribute("UserName", user_name);
  5.     response.sendRedirect("./Student-Web/Student.jsp");    //跳转页面
  6. } else if (identity.equals("教师")) {
  7.     session.setAttribute("UserID", user_id);    
  8.     session.setAttribute("UserName", user_name); 
  9.     response.sendRedirect("./Teacher-Web/Teacher.jsp");
  10. } else if (identity.equals("教务员")) {
  11.     session.setAttribute("UserID", user_id);   
  12.     session.setAttribute("UserName", user_name); 
  13.     response.sendRedirect("./TeachAdmin-Web/TeachAdmin.jsp");
  14. } else {
  15.     session.setAttribute("UserID", user_id);   
  16.     session.setAttribute("UserName", user_name);
  17.     response.sendRedirect("./OrgAdmin-Web/OrgAdmin.jsp");
  18. }

页面效果：

（2）注册界面：本质也是一个表单

此处需要注意注册默认的身份。我这个项目分四个身份：“机构管理员”、“教务员”、“教师”、“学生”。

我的设计是这样的：“机构管理员”是最高权限者，“学生”是最低，注册默认是“学生”。

“机构管理员”可以注册和管理“教师”、“教务员”信息；“教务员”可以注册和管理“学生信息”，但只能查看“教师”信息。

“教师”和“学生”只能修改和管理自己信息

核心代码：

  1. //先验证是否已存在
  2. String sql = "SELECT * FROM `USER` "
  3.         + "WHERE LoginID=?";
  4.         PreparedStatement ps = conn.prepareStatement(sql);
  5.         ps.setString(1, login_id);
  6.         ResultSet rs = ps.executeQuery();
  7.         if (rs.next()) {//如果不为空
  8.         out.println("
  9. <script>alert('账号已存在');</script>");
  10.         } else { //
  11. //插入user表
  12.         sql = "INSERT INTO `user` "
  13.         + "(LoginID, Password, UserName, UserPhone, Identity) VALUES "
  14.         + "(?, ?, ?, ?, ?)";
  15. // PreparedStatement ps = conn.prepareStatement(sql);
  16.         ps = conn.prepareStatement(sql);
  17.         ps.setString(1, login_id);
  18.         ps.setString(2, password);
  19.         ps.setString(3, user_name);
  20.         ps.setString(4, user_phone);
  21.         ps.setString(5, "学生");
  22.         ps.executeUpdate();
  23.  
  24. //插入学生表
  25.         sql = "INSERT INTO STUDENT "
  26.         + "(StudentName, StudentPhone) "
  27.         + "VALUES (?,?)";
  28.         ps = conn.prepareStatement(sql);
  29.         ps.setString(1, user_name);
  30.         ps.setString(2, user_phone);
  31.         ps.executeUpdate();
  32.         out.println("用户名为：" + login_id + "<br>");
  33.  
  34.         out.println("用户密码为：" + password + "<br>");
  35.  
  36.         out.println("姓名为：" + user_name + "<br>");
  37.  
  38.         out.println("电话号码为：" + user_phone + "<br>");
  39.         %>
  40.         恭喜您注册成功！<br>
  41. <!--                您的账号为:<%=login_id%><br>
  42.         您的密码为:<%=password%><br>-->
  43.         请妥善保管好您的密码！<br>
  44. <% }

效果：

六：机构管理员功能实现

1.主页面设计：

（1）左侧栏：

  1. //左侧选择框，这里确保下面几个jsp文件都在
  2. <div id="sidebar">
  3.     <ul>
  4.         <li><a href="#id=teacher" onclick="loadContent('TeacherManage.jsp')">教师信息管理</a></li>
  5.         <li><a href="#id=teach_admin" onclick="loadContent('TeachAdminManage.jsp')">教务员信息管理</a></li>
  6.         <li><a href="#id=return_apply" onclick="loadContent('ReturnApplyManage.jsp')">退费管理</a></li>
  7.         <li><a href="#id=my_info" onclick="loadContent('MyInfo.jsp')">个人中心</a></li>
  8.         <!-- 添加更多菜单项 -->
  9.     </ul>
  10. </div>
  11.  
  12. //在进入机构管理员页面的默认跳转页面
  13. <div id="content">
  14.     <!-- 默认显示的主题内容 -->
  15.     <jsp:include page="TeacherManage.jsp" />
  16. </div>

2.教师信息管理 和 教务员信息管理

（1）右上角的“添加教师信息”按钮

  1. //上侧按钮
  2. <button href='javascript:void(0)' onclick="addTeacher()"
  3.             style="display: flex; margin-left: 1060px; height: 35px; margin-bottom: 10px; font-size: 20px">添加教师信息</button>
  4.  
  5.  
  6. //在addTeacher()方法除法后，要调出的显示框，同时包含了提交信息
  7. //这里提交后会把信息提交给add_teacher_form.jsp文件
  8. <div id="addModal" class="modal">
  9.     <div class="modal-content">
  10.         <!--<span class="close" onclick="closeModal()">&times;</span>关闭-->
  11.         <div class="form_title">添加教师信息</div>
  12.  
  13.         <form action="add_teacher_form.jsp" method="post" class="the_form">
  14.             <!-- 这里放置你的表单内容 -->
  15.  
  16.             <div class="details">
  17.                 <label for="teacher_name">姓名:</label>
  18.                 <input type="text" name="teacher_name">
  19.             </div>
  20.             <br>
  21.             <div class="details">
  22.                 <label for="teacher_sex">性别:</label>
  23.                 <input type="text" name="teacher_sex">
  24.             </div>
  25.             <br>
  26.             <div class="details">
  27.                 <label for="teacher_age">年龄:</label>
  28.                 <input type="text" name="teacher_age">
  29.             </div>
  30.             <br>
  31.             <div class="details">
  32.                 <label for="teacher_phone">电话:</label>
  33.                 <input type="text" name="teacher_phone">
  34.             </div>
  35.             <br>
  36.             <div class="details">
  37.                 <label for="teacher_subject">所教科目:</label>
  38.                 <input type="text" name="teacher_subject" placeholder="(多个科目用  、 分割)">
  39.             </div>
  40.             <br>
  41.             <div class="details">
  42.                 <label for="teacher_phone">科目类别</label>
  43.                 <input type="text" name="teacher_subject_type">
  44.             </div>
  45.             <br>
  46.             <div class="details">
  47.                 <label>登录账号:</label>
  48.                 <input type="text" name="login_id">
  49.             </div>
  50.             <br>
  51.             <div class="details">
  52.                 <label>登录密码：</label>
  53.                 <input type="text" name="password">
  54.             </div>
  55.  
  56.  
  57.             <input type="submit" value="提交">
  58.             <input type="button" value="取消" onclick="closeAddModal()">
  59.         </form>
  60.     </div>
  61. </div>

用到的方法：

  1. function closeAddModal() {
  2.     document.getElementById('addModal').style.display = 'none';
  3. }
  4.  
  5. //添加教师按钮
  6. function addTeacher() {
  7.     document.getElementById('addModal').style.display = 'block';
  8. }
  1. //在add_teacher_form.jsp文件中
  2. //这里要注意教师牵涉三个表：“TEACHER”、“`USER`”、“`SUBJECT`”
  3. //在插入学科表时，可能一个教师教多个学科，所以要对字符串进行处理，切分，分别插入
  4. <%
  5.         request.setCharacterEncoding("UTF-8");
  6.         response.setCharacterEncoding("UTF-8");
  7.         
  8.         
  9.         String teacher_name = request.getParameter("teacher_name");
  10.         String teacher_sex = request.getParameter("teacher_sex");
  11.         int teacher_age = Integer.parseInt(request.getParameter("teacher_age"));
  12.         String teacher_phone = request.getParameter("teacher_phone");
  13.         String teacher_subject_name = request.getParameter("teacher_subject");
  14.         String subject_type = request.getParameter("teacher_subject_type");
  15.         String teach_admin_login_id = request.getParameter("login_id");
  16.         String teach_admin_password = request.getParameter("password");
  17.  
  18.         //连接数据库
  19.         Class.forName("com.mysql.jdbc.Driver");  //加载驱动
  20.         Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/homework?useUnicode=true&characterEncoding=UTF-8", "root", "Lfy666666");
  21.  
  22.         //插入`USER`表
  23.         String sql = "INSERT INTO `USER` (UserName,UserSex,UserAge,UserPhone,Identity,LoginID,Password) "
  24.         + "VALUES (?,?,?,?,'教师',?,?)";
  25.         PreparedStatement ps = conn.prepareStatement(sql);
  26.         ps.setString(1, teacher_name);
  27.         ps.setString(2, teacher_sex);
  28.         ps.setInt(3, teacher_age);
  29.         ps.setString(4, teacher_phone);
  30.         ps.setString(5, teach_admin_login_id);
  31.         ps.setString(6, teach_admin_password);
  32.         ps.executeUpdate();
  33.  
  34.         //插入TEACHER表
  35.         sql = "INSERT INTO TEACHER (TeacherName,TeacherSex,TeacherAge,TeacherPhone) "
  36.         + "VALUES (?,?,?,?)";
  37.         ps = conn.prepareStatement(sql);
  38.         ps.setString(1, teacher_name);
  39.         ps.setString(2, teacher_sex);
  40.         ps.setInt(3, teacher_age);
  41.         ps.setString(4, teacher_phone);
  42.         ps.executeUpdate();
  43.  
  44.         //插入学科表
  45.         sql = "SELECT TeacherID FROM TEACHER WHERE TeacherName=?";
  46.         ps = conn.prepareStatement(sql);
  47.         ps.setString(1, teacher_name);
  48.         ResultSet rs = ps.executeQuery();
  49.  
  50.         int teacher_id = 0;
  51.         if (rs.next()) {
  52.         teacher_id = rs.getInt("TeacherID");
  53.         }
  54.         String[] teacher_subject_names = teacher_subject_name.split("、");
  55.         for (int i = 0; i < teacher_subject_names.length; i++) {
  56.         sql = "INSERT INTO SUBJECT (TeacherID,SubjectType,SubjectName) "
  57.         + "VALUES (?,?,?)";
  58.         ps = conn.prepareStatement(sql);
  59.         ps.setInt(1, teacher_id);
  60.         ps.setString(2, subject_type);
  61.         ps.setString(3, teacher_subject_names[i]);
  62.         ps.executeUpdate();
  63.         }
  64.  
  65.         conn.close();
  66.         response.sendRedirect("OrgAdmin.jsp#id=teacher"); // 或者其他你想要重定向到的页面
  67. %>

（2）修改教师功能

首先明白教师信息是这样渲染的

  1. out.print("<table class='table_info' border='1'>");
  2. out.print("<tr><th>姓名</th><th>性别</th><th>年龄</th><th>电话</th><th>所教科目</th><th>更改</th></tr>");
  3. for (int i = 0; i < teacher_id.size(); i++) {
  4.         out.print("<tr class='tr_info'>");
  5.         out.print("<td id='name-" + i + "'>" + teacher_name.get(i) + "</td>");
  6.         out.print("<td id='sex-" + i + "'>" + teacher_sex.get(i) + "</td>");
  7.         out.print("<td id='age-" + i + "'>" + teacher_age.get(i) + "</td>");
  8.         out.print("<td id='phone-" + i + "'>" + teacher_phone.get(i) + "</td>");
  9.         out.print("<td>" + teacher_subject_name.get(i) + "</td>");
  10.         out.print("<td><button href='javascript:void(0)' "
  11.         + "onclick=\"openModal('" + teacher_id.get(i) + "','" + teacher_name.get(i) + "','" + teacher_sex.get(i) + "','" + teacher_age.get(i) + "','" + teacher_phone.get(i) + "','" + teacher_subject_name.get(i) + "','" + teacher_subject_type.get(i) + "')\">"
  12.         + "修改</button></td>"
  13.         );//此处Javascript.void(0)不执行任何操作，只说明执行后面的JavaScript代码
  14.         out.print("</tr>");
  15. }
  16. out.print("</table>");
  1. function openModal(the_teacher_id, the_teacher_name, the_teacher_sex, the_teacher_age, the_teacher_phone, the_teacher_subject, teacher_subject_type) {
  2.     document.getElementById('myModal').style.display = 'block';
  3.     document.getElementById('first_teacher_name_input').value = the_teacher_name;
  4.     document.getElementById('teacher_id_input').value = the_teacher_id; // 将the_teacher_id传递给模态框中的表单input元素
  5.     document.getElementById('teacher_name_input').value = the_teacher_name;
  6.     document.getElementById('teacher_sex_input').value = the_teacher_sex;
  7.     document.getElementById('teacher_age_input').value = the_teacher_age;
  8.     document.getElementById('teacher_phone_input').value = the_teacher_phone;
  9.     document.getElementById('teacher_subject_input').value = the_teacher_subject;
  10.     document.getElementById('teacher_type_input').value = teacher_subject_type;
  11. }
  12.  
  13. // 关闭模态框
  14. function closeModal() {
  15.     document.getElementById('myModal').style.display = 'none';

弹出的框：

  1. <div id="myModal" class="modal">
  2.     <div class="modal-content">
  3.         <!--<span class="close" onclick="closeModal()">&times;</span>关闭-->
  4.         <div class="form_title">修改教师信息</div>
  5.  
  6.         <form action="change_teacher_form.jsp" method="post" class="the_form">
  7.             <!-- 这里放置你的表单内容 -->
  8.             <input type="hidden" id="teacher_id_input" name="teacher_id">
  9.             <!-- 这里需要特别注意，教师要保存原姓名，不然`USER`和TEACHER无法同步-->
  10.             <input type="hidden" id="first_teacher_name_input" name="first_teacher_name">
  11.             <div class="details">
  12.                 <label for="teacher_name">姓名:</label>
  13.                 <input type="text" id="teacher_name_input" name="teacher_name">
  14.             </div>
  15.             <br>
  16.             <div class="details">
  17.                 <label for="teacher_sex">性别:</label>
  18.                 <input type="text" id="teacher_sex_input" name="teacher_sex">
  19.             </div>
  20.             <br>
  21.             <div class="details">
  22.                 <label for="teacher_age">年龄:</label>
  23.                 <input type="text" id="teacher_age_input" name="teacher_age">
  24.             </div>
  25.             <br>
  26.             <div class="details">
  27.                 <label for="teacher_phone">电话:</label>
  28.                 <input type="text" id="teacher_phone_input" name="teacher_phone">
  29.             </div>
  30.             <br> 
  31.             <div class="details">
  32.                 <label for="teacher_subject">所教科目:</label>
  33.                 <input type="text" id="teacher_subject_input" name="teacher_subject">
  34.             </div>
  35.             <br>
  36.             <input type="hidden" id="teacher_type_input" name="teacher_type" >
  37.             <input type="submit" value="提交">
  38.             <input type="button" value="取消" onclick="closeModal()">
  39.         </form>
  40.     </div>
  41. </div>

这里提交后到change_teacher_form.jsp页面对数据进行处理，需要更新`USER`表和TEACHER表。

这里注意，如果只传了改变之后的TeacherName，虽然能根据TeacherID更改TEACHER表，但`USER`表无法更改，因为名字已经对不上了（这里把最初名字传进去解决）

教务员管理于此相同，不再赘述

效果：

3.退费管理：

核心代码

这里用的是列表（可变长度）不是数组啊各位

  1. out.print("<table class='table_info' border='1'>");
  2. out.print("<tr><th>姓名</th><th>性别</th><th>年龄</th><th>电话</th><th>报名科目</th><th>报名时间</th><th>是否同意</th></tr>");
  3. for (int i = 0; i < apply_student_name.size(); i++) {
  4.     System.out.println("姓名：" + apply_student_name.get(i));
  5.     System.out.println("性别：" + apply_student_sex.get(i));
  6.     System.out.println("年龄：" + apply_student_age.get(i));
  7.     System.out.println("电话：" + apply_student_phone.get(i));
  8.     System.out.println("报名科目：" + apply_student_subject.get(i));
  9.     System.out.println("报名时间：" + apply_student_time.get(i));
  10.  
  11.     out.print("<tr class='tr_info'>");
  12.     out.print("<td id='name-" + i + "'>" + apply_student_name.get(i) + "</td>");
  13.     out.print("<td id='sex-" + i + "'>" + apply_student_sex.get(i) + "</td>");
  14.     out.print("<td id='age-" + i + "'>" + apply_student_age.get(i) + "</td>");
  15.     out.print("<td id='phone-" + i + "'>" + apply_student_phone.get(i) + "</td>");
  16.     out.print("<td id='phone-" + i + "'>" + apply_student_subject.get(i) + "</td>");
  17.     out.print("<td>" + apply_student_time.get(i) + "</td>");
  18.     if (result.get(i).equals("未审批")) {
  19.         out.print("<td><button href='javascript:void(0)' "
  20.         + "onclick=\"agree('" + apply_id.get(i) + "','同意')\">"
  21.         + "同意</button>"
  22.         + "<button href='javascript:void(0)' "
  23.         + "onclick=\"agree('" + apply_id.get(i) + "','不同意')\">"
  24.         + "不同意</button></td>"
  25.     );//此处Javascript.void(0)不执行任何操作，只说明执行后面的JavaScript代码
  26.     } else {
  27.         System.out.println(result.get(i));
  28.         out.print("<td id='phone-" + i + "'>" + result.get(i) + "</td>");
  29.     }
  30.  
  31.     out.print("</tr>");
  32. }
  33. out.print("</table>");

效果：

4.个人中心

这里更是没有什么难点

七：教师相关操作实现

左侧栏、入口文件、个人中心不再解释，非常容易

1.我的课表

（1）首先可以通过下拉选项框选择学期。

课程是在发布之后可以查看的（学生选课页面同理）

  1. //这里实现的是下拉框，在changeSemester()方法中把学期传到相应位置
  2. <div style="display:flex; justify-content: center; align-items: center;">
  3.     <select id="semesterSelect" name="semesterSelect" onchange="changeSemester(this.value)" style="font-size: 25px;">
  4.         <option value="202301">2023-2024学年第1学期</option>
  5.         <option value="202302">2023-2024学年第2学期</option>
  6.         <option value="202401">2024-2025学年第1学期</option>
  7.         <option value="202402">2024-2025学年第2学期</option>
  8.     </select>
  9. </div>
  10. <jsp:include page="./my_class_table.jsp" />
  1. function changeSemester(semester) {
  2.     // 发送请求或执行其他逻辑来获取对应学期的课程数据
  3.     var semesterSelect = document.getElementById("semesterSelect");
  4.     console.log(semesterSelect);
  5.     var semester = semesterSelect.value;
  6.     console.log("this is a line!");
  7.     console.log(semester);
  8.  
  9.     $.ajax({
  10.         url: "my_class.jsp",    //这是数据的来源文件
  11.         type: "GET",
  12.         data: {
  13.             semester: semester
  14.         },
  15.         success: function (response) {
  16.             var selectedSemester = semesterSelect.value;
  17.             refreshTable(selectedSemester);
  18.         }
  19.     });
  20. }
  21. function refreshTable(semester) {
  22.     $.ajax({
  23.         url: "my_class_table.jsp",    //这是数据的目标文件
  24.         method: "GET",
  25.         data: {
  26.             semester: semester
  27.         },
  28.         success: function (response) {
  29.             $("#the_table").html(response);    //将my_class_table.jsp整个渲染
  30.         },
  31.         error: function () {
  32.             // 处理错误情况
  33.         }
  34.     });
  35. }

效果：

（2）在my_class_table.jsp文件渲染相应学期的课程

这里要在教务员进行选课并且发布之后才会渲染

核心代码

  1. <table class="the_table" id="the_table">
  2.     <div style="display:flex; justify-content: center; align-items: center;">
  3.         <tr class="week_tr">
  4.             <td></td> <!-- 空白单元格 -->
  5.             <% for (int i = 0; i < weeks.length; i++) {%>
  6.             <td><%= weeks[i]%></td> <!-- 显示周次 -->
  7.             <% } %>
  8.         </tr>
  9.         //这里留了一个优化空间，就是数组的长度是固定的，如果库中的节次不等于tiems的长度怎么办？——用ArrayList
  10.         <% for (int i = 1; i < times.length + 1; i++) {%>
  11.         <!--改用数据库的section,这里调整的比较多-->
  12.         <tr>
  13.             <td class="section_no"><%= times[i - 1]%></td> <!-- 显示节次 -->
  14.             <% for (int j = 1; j < weeks.length + 1; j++) {
  15.                     // 查询数据库，看这个时间段和星期几是否空闲
  16.                     String section_no = String.format("%02d%02d", j, i);
  17.  
  18.                     PreparedStatement psAvailability = conn.prepareStatement(
  19.                             "SELECT TeacherName, SubjectName, ClassroomName "
  20.                             + "FROM COURSE, TEACHER, `SUBJECT`, CLASSROOM "
  21.                             + "WHERE COURSE.TeacherID=TEACHER.TeacherID AND "
  22.                             + "COURSE.SubjectID=`SUBJECT`.SubjectID AND "
  23.                             + "COURSE.ClassroomID=CLASSROOM.ClassroomID AND "
  24.                             + "COURSE.SectionNo=? AND "
  25.                             + "Term=? AND "
  26.                             + "TEACHER.TeacherID=? AND "
  27.                             + "COURSE.IsShow=1 AND "
  28.                             + "Status=1");
  29.                     psAvailability.setString(1, section_no);
  30.                     psAvailability.setString(2, term);
  31.                     psAvailability.setInt(3, teacher_id);
  32.                     ResultSet rsAvailability = psAvailability.executeQuery();
  33.                     // 如果查询结果有记录，那么表示这个时间段和星期几是空闲的
  34.                     String Tname_Sname = "";
  35.                     boolean isAvailable = false;
  36.                     while (rsAvailability.next()) {
  37.                         isAvailable = true;
  38.                         Tname_Sname = Tname_Sname + rsAvailability.getString("TeacherName") +"<br>";
  39.                         Tname_Sname = Tname_Sname + rsAvailability.getString("SubjectName") + "课<br>";
  40.                         Tname_Sname = Tname_Sname + rsAvailability.getString("ClassroomName")+"<br>"  ;
  41.                     }
  42.                     rsAvailability.close();
  43.                     psAvailability.close();
  44.                     // 根据查询结果，动态设置单元格的状态和文字
  45.                     String cellClass = isAvailable ? "available" : "unavailable";
  46.                     String cellText = isAvailable ? Tname_Sname : "无课";
  47.                     //                            System.out.println("term:"+term);
  48. %>
  49.             <td id="cell_<%= (i)%>_ <%= (j)%>" class="<%= cellClass%>"><%= cellText%></td>
  50.             <% } %>
  51.         </tr>
  52.         <% }%>
  53.     </div>
  54. </table>

效果：

2.空闲时间页面

这里的空闲时间表一学期一扔，所以可以删去学期选择问题（所以只需要获得教师ID和节次信息就可以了）（节次信息由行列的i，j拼接得到）

核心代码

  1. <table class="the_table" id="the_table">
  2.             <div style="display:flex; justify-content: center; align-items: center;">
  3.                 <tr class="week_tr">
  4.                     <td></td> <!-- 空白单元格 -->
  5.                     <% for (int i = 0; i < weeks.length; i++) {%>
  6.                     <td><%= weeks[i]%></td> <!-- 显示周次 -->
  7.                     <% } %>
  8.                 </tr>
  9.                 <% for (int i = 1; i < times.length + 1; i++) {%>
  10.                 <!--改用数据库的section,这里调整的比较多-->
  11.                 <tr>
  12.                     <td class="section_no"><%= times[i - 1]%></td> <!-- 显示节次 -->
  13.                     <% for (int j = 1; j < weeks.length + 1; j++) {
  14.                             // 查询数据库，看这个时间段和星期几是否空闲
  15.                             String section_no = String.format("%02d%02d", j, i);
  16.  
  17.                             PreparedStatement psAvailability = conn.prepareStatement(
  18.                                     "SELECT * FROM LEISURE WHERE SectionNo=? AND TeacherID=?");
  19.                             psAvailability.setString(1, section_no);
  20.                             psAvailability.setInt(2, teacher_id);
  21.                             ResultSet rsAvailability = psAvailability.executeQuery();
  22.                             // 如果查询结果有记录，那么表示这个时间段和星期几是空闲的
  23.                             boolean isAvailable = rsAvailability.next();
  24.                             rsAvailability.close();
  25.                             psAvailability.close();
  26.                             // 根据查询结果，动态设置单元格的状态和文字
  27.                             String cellClass = isAvailable ? "available" : "unavailable";
  28.                             String cellText = isAvailable ? "空闲" : "非空闲";
  29.                     %>
  30.                     <td id="cell_<%= i%>_<%= j%>" class="<%= cellClass%>" onclick="toggleAvailability(<%= i%>, <%= j%>, <%= teacher_id%>)"><%= cellText%></td>
  31.                     <% } %>
  32.                 </tr>
  33.                 <% }%>
  34.             </div>
  35.         </table>
  1. function toggleAvailability(section, week, teacher_id) {
  2.     var cell = document.getElementById("cell_" + section + "_" + week);
  3.     if (cell.innerHTML === "非空闲") {
  4.         cell.innerHTML = "空闲";
  5.         cell.className = "available";
  6.  
  7.         // 这里发送一个请求到服务器，更新数据库
  8.         var sectionStr = String(section).padStart(2, "0");
  9.         var weekStr = String(week).padStart(2, "0");
  10.         var section_no = weekStr + sectionStr;
  11.         var xhttp = new XMLHttpRequest();
  12.         xhttp.onreadystatechange = function () {
  13.             if (this.readyState === 4 && this.status === 200) {
  14.                 // 刷新页面以更新数据
  15.                 location.reload();
  16.             }
  17.         };
  18.         xhttp.open("GET", "change.jsp?section_no=" + section_no + "&teacher_id=" + teacher_id, true);  // 替换为你的agree.jsp的路径
  19.         xhttp.send();
  20.     } else {
  21.         cell.innerHTML = "非空闲";
  22.         cell.className = "unavailable";
  23.         // 这里发送一个请求到服务器，更新数据库
  24.         var sectionStr = String(section).padStart(2, "0");
  25.         var weekStr = String(week).padStart(2, "0");
  26.         var section_no = weekStr + sectionStr;
  27.         var xhttp = new XMLHttpRequest();
  28.         xhttp.onreadystatechange = function () {
  29.             if (this.readyState === 4 && this.status === 200) {
  30.                 // 刷新页面以更新数据
  31.                 location.reload();
  32.             }
  33.         };
  34.         xhttp.open("GET", "change.jsp?section_no=" + section_no + "&teacher_id=" + teacher_id, true);  // 替换为你的agree.jsp的路径
  35.         xhttp.send();
  36.     }
  37. }

八：学生相关操作实现

左侧栏、入口文件、个人中心、下拉选择学期不再解释

1.课程查询：

让学生先选择想选的科目类别

  1. <div class="subject-type">
  2.     <a href="course_list.jsp?subject_type=<%= subjectType%>">
  3.         <img src="subject_type_images/<%= subjectType%>.jpg" alt="<%= subjectType%>">
  4.         <span><%= subjectType%></span>
  5.     </a>
  6. </div>
  7.  
  8. <!-- 这里科目类别的图片与科目类别的名字相同，放在同级文件夹之下 -->

效果：

点进去可以进行选择（这里同理是在教务员排课并发布后可以查看）

这里在“开课时间”要进行一个字符串处理：

  1. //样例：202301,0101|||||||2023~2024上半年周一8:00~9:30
  2. if (year.equals("2023")) {
  3.     insert.append("2023~2024");
  4. } else if (year.equals("2024")) {
  5.     insert.append("2024~2025");
  6. }
  7. if (para.equals("01")) {
  8.     insert.append("上半年");
  9. } else if (para.equals("02")) {
  10.     insert.append("下半年");
  11. }
  12. if (week.equals("01")) {
  13.     insert.append("周一");
  14. } else if (week.equals("02")) {
  15.     insert.append("周二");
  16. } else if (week.equals("03")) {
  17.     insert.append("周三");
  18. } else if (week.equals("04")) {
  19.     insert.append("周四");
  20. } else if (week.equals("05")) {
  21.     insert.append("周五");
  22. } else if (week.equals("06")) {
  23.     insert.append("周六");
  24. } else {
  25.     insert.append("周日");
  26. }
  27. if (section.equals("01")) {
  28.     insert.append("8:00~9:30");
  29. } else if (section.equals("02")) {
  30.     insert.append("9:45~11:15");
  31. } else if (section.equals("03")) {
  32.     insert.append("13:00~14:30");
  33. } else if (section.equals("04")) {
  34.     insert.append("14:45~16:15");
  35. } else if (section.equals("05")) {
  36.     insert.append("18:00~19:30");
  37. } else {
  38.     insert.append("19:45~21:15");
  39. }
  40. subject_time.add(insert.toString());
  41. classroom_name.add(rsCourses.getString("ClassroomName"));

点击选课后，除法函数进行处理

  1. out.print("<td><button href='javascript:void(0)' "
  2.     + " onclick=\"selectCourse('" + course_id.get(i) + "','" + student_id + "')\">"
  3.         + "选课</button></td>"
  4. );//此处Javascript.void(0)不执行任何操作，只说明执行后面的JavaScript代码
  1. function selectCourse(course_id, student_id) {
  2.     // 在控制台输出 "yes", course_id 和 student_id
  3. //                console.log("yes");
  4. //                console.log(course_id);
  5. //                console.log(student_id);
  6.  
  7.     // 弹出弹出框，主体为“是否确认选课？”
  8.     if (confirm("是否确认选课？")) {
  9.         var xhttp = new XMLHttpRequest();
  10.         xhttp.onreadystatechange = function () {
  11.             if (this.readyState === 4 && this.status === 200) {
  12.                 // 刷新页面以更新数据
  13.                 location.reload();
  14.             }
  15.         };
  16.         xhttp.open("GET", "select.jsp?course_id=" + course_id + "&student_id=" + student_id, true);  // 替换为你的agree.jsp的路径
  17.         xhttp.send();
  18.  
  19.     } else {
  20.         // 如果取消则关闭弹出框
  21.         // 需要注意的是，在 `confirm` 弹出框中点击取消会自动关闭弹出框，你不需要写额外的代码来关闭它
  22.     }
  23. }

之后把信息插入到报名表中

效果：

2.我的课表

这里和教师的课表页面很像，不过加入了退课功能，这里如果出现多节课在一个时间段被选会先退下面一节的（因为变量是覆盖的，这里并没有对它进行处理）

  1. boolean isAvailable = false;
  2. while (rsAvailability.next()) {
  3.     isAvailable = true;
  4.     sign_id = rsAvailability.getInt("SignID");
  5.     Tname_Sname = Tname_Sname + rsAvailability.getString("TeacherName") + "<br>";
  6.     Tname_Sname = Tname_Sname + rsAvailability.getString("SubjectName") + "课<br>";
  7.     Tname_Sname = Tname_Sname + rsAvailability.getString("ClassroomName") + "<br>";
  8. }
  9. //这里只对教师名和课进行了处理，没对报名号进行处理，所以退课是覆盖，多节课先退后面选的
  1. <td id="cell_<%=i%>_<%=j%>" class="<%= cellClass%>" <% if (isAvailable) {%> onclick="confirmWithdraw('<%=sign_id%>')" <% }%>>
  2.     <%= cellText%>
  3. </td>
  1. function confirmWithdraw(sign_id) {
  2.     // console.log("sign_id:"+sign_id);
  3.     if (confirm("是否确认退课？")) {
  4.         var xhttp = new XMLHttpRequest();
  5.         xhttp.onreadystatechange = function () {
  6.         if (this.readyState === 4 && this.status === 200) {
  7.             // 刷新页面以更新数据
  8.             location.reload();
  9.     }
  10.     };
  11.     xhttp.open("GET", "return.jsp?sign_id=" + sign_id, true); // 替换为你的agree.jsp的路径
  12.     xhttp.send();
  13.  
  14.     } else {
  15.         // 如果取消则关闭弹出框
  16.         // 需要注意的是，在 `confirm` 弹出框中点击取消会自动关闭弹出框，你不需要写额外的代码来关闭它
  17.     }
  18. }

效果：

 3.申请退课不在多说，与机构管理员同步，等候机构管理员处理

九：教务员相关操作实现

教务员的学生信息管理 与 机构管理员管理的教师信息管理几乎一样，不在多说

教务员的教室信息管理 与 机构管理员管理的教务员信息管理几乎一样，不在多说

教师信息查看和个人中心也不再赘述，非常简单

1.这里着重说一下排课功能：

（1）下拉列表选择学期，与学生查看自己课表一致

教务员点击某个课时后，可以进行排课（学期信息和节次信息会传进去）

在排课页面会显示已经排的课程，如果教务员向取消排课，那么可以点击按钮，把库中COURSE的Status设置为0（其他人在查询时Status=1&IsShow=1才能查询到，而教务员只要Status=1就可以查询到）

  1. // Print the results in a table
  2. out.print("<table class='table_info' border='1'>");
  3. out.print("<tr>
  4.     <th>课程类别</th>
  5.     <th>课程名称</th>
  6.     <th>教师姓名</th>
  7.     <th>开课时间</th>
  8.     <th>上课地点</th>
  9.     <th>调整</th>
  10. </tr>");
  11. for (int i = 0; i < subject_name.size(); i++) { 
  12.     // System.out.println("课程类别：" + subject_type.get(i)); 
  13.     //System.out.println("课程名称：" + subject_name.get(i)); 
  14.     // System.out.println("教师姓名：" + teacher_name.get(i)); 
  15.     //System.out.println("开课时间：" + subject_time.get(i)); 
  16.     // System.out.println("上课地点：" + classroom_name.get(i)); 
  17.     if(status.get(i)==1) { //输出已经排的 out.print("<tr class='tr_info'>");
  18.         out.print("<td id='-" + i + "'>" + subject_type.get(i) + "</td>");
  19.         out.print("<td id='-" + i + "'>" + subject_name.get(i) + "</td>");
  20.         out.print("<td id='-" + i + "'>" + teacher_name.get(i) + "</td>");
  21.         out.print("<td id='-" + i + "'>" + Insert + "</td>");
  22.         out.print("<td id='-" + i + "'>" + classroom_name.get(i) + "</td>");
  23.         out.print("<td><button href='javascript:void(0)' "
  24.                                 + " onclick=\"planCourse('" + course_id.get(i) + "')\">"
  25.                 + "取消选课</button></td>");//此处Javascript.void(0)不执行任何操作，只说明执行后面的JavaScript代码
  26.  
  27.         out.print("</tr>");
  28.     }
  29.  
  30. }

点击退课后，会把库中COURSE的Status设置为0

（2）添加课程：

点击“添加选课信息”后，教务员可以在次级页面上下拉选择能用的教室和空闲的教师

这里的SQL语句可能有点难度（教室查询用到了NOT IN操作，教师与课程查询用到了外连接+嵌套查询）（这里教师和课程的查询难度大，是因为把教师与课程的查询写在了一块，一次查询得到全部信息，还有就是表的冗余过低）

同时的，在下拉列表调用rsXXX.next()，可能也是本项目实现难度最大的一点

  1. <div id="addCourseModal" class="modal">
  2.     <div class="modal-content">
  3.         <!--<span class="close" onclick="closeModal()">&times;</span>关闭-->
  4.         <div class="form_title">添加课程信息</div>
  5.  
  6.         <form action="add_course_form.jsp" method="post" class="the_form">
  7.             <!-- 这里放置你的表单内容 -->
  8.  
  9.             <!--//term和section_no已经有了-->
  10.             <input type="hidden" id="section_no" name="section_no" value="<%=section_no%>">
  11.             <input type="hidden" id="term" name="term" value="<%=term%>">
  12.  
  13.             <%                    // 连接数据库并查询符合条件的教室、教师和科目
  14.                 PreparedStatement psClassroom = null;
  15.                 PreparedStatement psTeacher = null; //包含教师和所教科目
  16.                 ResultSet rsClassroom = null;
  17.                 ResultSet rsTeacher = null;
  18.  
  19.                 try {
  20.                     // 查询教室
  21.                     psClassroom = conn.prepareStatement("SELECT CLASSROOM.ClassroomID, CLASSROOM.ClassroomName "
  22.                             + "FROM CLASSROOM "
  23.                             + "WHERE CLASSROOM.ClassroomID "
  24.                             + "NOT IN (SELECT CLASSROOM.ClassroomID "
  25.                             + "FROM CLASSROOM LEFT JOIN COURSE ON CLASSROOM.ClassroomID = COURSE.ClassroomID "
  26.                             + "WHERE SectionNo = ? AND Term = ? AND "
  27.                             + "Status=1)");
  28.  
  29.                     psClassroom.setString(1, section_no);
  30.                     psClassroom.setString(2, term);
  31.                     rsClassroom = psClassroom.executeQuery();
  32.                     //测试用例 5    122
  33.  
  34.                     // 查询教师和学科
  35.                     psTeacher = conn.prepareStatement("SELECT t.TID, t.TName, `SUBJECT`.SubjectID AS SID, SubjectType,SubjectName "
  36.                             + "FROM `SUBJECT`,(SELECT T.TeacherID AS TID,TeacherName AS TName FROM COURSE "
  37.                             + "RIGHT JOIN (SELECT TEACHER.TeacherID,TEACHER.TeacherName "
  38.                             + "FROM TEACHER,LEISURE WHERE TEACHER.TeacherID=LEISURE.TeacherID "
  39.                             + "AND LEISURE.SectionNo=?) AS T "
  40.                             + "ON T.TeacherID=COURSE.TeacherID WHERE "
  41.                             + "(SectionNo!=? OR Term!=?) OR SectionNo IS NULL OR Status=0) AS t "
  42.                             + "WHERE t.TID=`SUBJECT`.TeacherID");
  43.  
  44.                     psTeacher.setString(1, section_no);
  45.                     psTeacher.setString(2, section_no);
  46.                     psTeacher.setString(3, term);
  47.                     rsTeacher = psTeacher.executeQuery();
  48.                     //测试用例：3	蒋程程	4	健身	瑜伽
  49. //                                    3	蒋程程	6	数学	算数
  50.                 } catch (Exception e) {
  51.                     e.printStackTrace();
  52.                 }
  53.             %>
  54.  
  55.  
  56.  
  57.             <div style="display: flex; height: 200px">
  58.                 <!-- 教室下拉列表 -->
  59.                 <div style="width: 150px; height: 20px;">
  60.                     <div>
  61.                         选择教室
  62.                     </div>
  63.                     <!-- 教室下拉列表 -->
  64.                     <select name="classroom">
  65.                         <% if (!rsClassroom.next()) { %>
  66.                         <option value="" disabled selected>没有空闲教室</option>
  67.                         <% } else {
  68.                             do {
  69.                         %>
  70.                         <option value="<%= rsClassroom.getString("ClassroomID")%>">
  71.                             <%= rsClassroom.getString("ClassroomName")%>
  72.                         </option>
  73.                         <% } while (rsClassroom.next());
  74.                             } %>
  75.                     </select>
  76.                 </div>
  77.  
  78.                 <!-- 教师学科下拉列表 -->
  79.                 <div>
  80.                     <div>
  81.                         选择教师和课程
  82.                     </div>
  83.                     <!-- 教师学科列表 -->
  84.                     <select name="teacher">
  85.                         <% if (!rsTeacher.next()) { %>
  86.                         <option value="" disabled selected>没有空闲老师</option>
  87.                         <% } else {
  88.                             do {
  89.                         %>
  90.                         <option value="<%= rsTeacher.getString("SID") + "-" + rsTeacher.getString("TID")%>">
  91.                             <%= rsTeacher.getString("TName")%> - <%= rsTeacher.getString("SubjectName")%>
  92.                         </option>
  93.                         <% } while (rsTeacher.next());
  94.                             } %>
  95.                     </select>
  96.                 </div>
  97.             </div>
  98.  
  99.  
  100.             <%
  101.                 // 关闭数据库连接和释放资源
  102.                 try {
  103.                     if (rsClassroom != null) {
  104.                         rsClassroom.close();
  105.                     }
  106.                     if (rsTeacher != null) {
  107.                         rsTeacher.close();
  108.                     }
  109.  
  110.                     if (psClassroom != null) {
  111.                         psClassroom.close();
  112.                     }
  113.                     if (psTeacher != null) {
  114.                         psTeacher.close();
  115.                     }
  116.  
  117.                     if (conn != null) {
  118.                         conn.close();
  119.                     }
  120.                 } catch (Exception e) {
  121.                     e.printStackTrace();
  122.                 }
  123.             %>
  124.  
  125.  
  126.             <input type="submit" value="提交">
  127.             <input type="button" value="取消" onclick="closeAddCourseModal()">
  128.         </form>
  129.     </div>
  130. </div>

最后把得到的教师和教室信息在add_course_form.jsp页面进行处理

（这里首先查询该课程是否在COURSE表中，因为可能教务员选之后把Status设为了0，如果不存在插入，如果存在UPDATE COURSE SET Status=1 WHERE……）

效果：

（3）最后，点击“公布！”，把term=所选学期的IsShow设置为1，让学生和教师能够查询到

到此结束

十：总结

1.我们应用的是逻辑外键和逻辑主码，那么查询快的同时就会面临一些其它问题。

比如在修改教师信息的时候，要同步`USER`表和TEACHER表。

我们修改信息传进去的默认是输入的信息也就是改后的姓名，如果我们采取获取两个表的主码那么会相当麻烦，可以采用把教师原姓名传进去解决

2.在做页面设计的时候。要以需求驱动，先确定要展示什么内容，然后再去思考这个sql怎么写（先写sql是盲目的）

我们在设计登录界面的时候，我想到两种方式：（选择的是前者，考虑到查询时连接的表小一点）

（1）加一个用户表，加上身份属性，识别属性并跳转相应页面

（2）一个表，添加权限设置

3.我在写SQL的时候，复杂的总是出错，所以SQL要一点一点写，可以连接一个表就加它与前面表的关系，尤其是复杂连接时（同时可以写一点运行一点看看有没有达到效果）

同理的，大家思考一下这个怎么写：

  1. SELECT t.TID, t.TName, `SUBJECT`.SubjectID AS SID, SubjectType,SubjectName 
  2. FROM `SUBJECT`,(SELECT T.TeacherID AS TID,TeacherName AS TName 
  3. FROM COURSE RIGHT JOIN (SELECT TEACHER.TeacherID,TEACHER.TeacherName 
  4. FROM TEACHER,LEISURE WHERE TEACHER.TeacherID=LEISURE.TeacherID 
  5. AND LEISURE.SectionNo='0101') AS T ON T.TeacherID=COURSE.TeacherID 
  6. WHERE (SectionNo!='0101' OR Term!='202301') OR SectionNo IS NULL OR Status=0) AS t 
  7. WHERE t.TID=`SUBJECT`.TeacherID

4.合理冗余还是好的，可以有效减缓上面的问题

5.表的节次传参问题 0101这样的（最重要的在表结构设计，越合理做着越快）

我在做课表的时候，第一次做的是这样：

但是这样写就写死了，更改程序麻烦，要考虑功能的可扩展性：

修改为：（这里其实更好的是改为ArrayList<String>，这里我承认我偷懒了因为我当时没发现后来发现不想改了……）

6.要考虑到多值处理问题，比如学生选了两节课，他点击退课那是两节课都退吗，还是退下面的一节（考虑代码实现方式）（这里上面解释过了，是先删除后选的课）

这个项目主要目的是对于数据库设计与应用和实际体验，只有在实际开发中个中体会到设计思想的精妙和数据库结构设计的重要

前段时间浅浅了解了一下设计模式和面向对象设计，这次考虑到开发时间短和经验不足可能在ddl前交不了作业，所以这次只简单使用了面向对象的建模方法，不过如此多的代码复用和复杂的项目结构还是让我体会到了它们的魅力所在。

我认为开发前最重要的是把数据库结构设计好，我这次除了COURSE表以外其他表结构基本没有变动，后期开发也只是在课表的行列对应库里面的SECTION节次表时进行了返工重做。同样的，这次项目的问题也有不少，比如我的很多表的属性都没有进行限定，对于插入异常处理很少等。

十一：项目文件结构与提取

1.项目文件结构

2.文件提取：

链接：https://pan.baidu.com/s/1HXEpjzjK1jvH7bhSft1Jbw 
提取码：56mj

      

        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/871748
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号