简单作业管理系统设计
程序员文章站
2024-01-27 14:00:46
...
作业管理系统
源码:github
系统设计
使用人员:
老师 (添加学生,布置作业,检查作业)
学生 (提交相对应作业)
流程图
完整详细的结构功能可参考代码注释
功能分布
mysql相关函数
函数 | 作用 |
---|---|
addStudentHomework() | 提交作业到数据库 |
addStudent() | 添加学生到数据库 |
addHomework() | 添加作业到数据库 |
selectAllhw() | 从数据库找出已布置的所有作业 |
selectStudentHomeworkbyid() | 从数据库找出某作业已提交的所有答案 |
selectHomeworkbyid() | 从数据库找出某作业 |
selectAllstudent() | 从数据库找出所有学生 |
界面设计
- 主界面:
用户选择四个主要功能的使用,使用超链接进行对其它jsp或servlet的连接
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>欢迎使用本系统!</title>
</head>
<body>
<div align="center">
<h2>请选择你要进行的操作:</h2>
<ul>
<a href="function/Add_student.jsp">添加学生</a>
<a href="function/Add_homework.jsp">布置作业</a>
<a href="${pageContext.request.contextPath}/Add_student_homework">提交作业</a>
<a href="${pageContext.request.contextPath}/show_homework">查询情况</a>
</ul>
</div>
</body>
</html>
本摘要只粘贴部分代码,完整源码和代码结构存储于github
- 添加学生
输入学生的学号和姓名即,点击提交即可成功添加学生。若想检查已添加的学生可点击下方超链接进行查看
Add_student.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>添加学生</title>
</head>
<body>
<div align="center">
<h2>新学生信息</h2>
<form action="${pageContext.request.contextPath}/Add_student" method="post">
请输入学号:<input type="number" name="sid" maxlength="20" style="font-family: arial" required><br/>
请输入姓名:<input type="text" name="sname" maxlength="20" style="font-family: arial" required><br/>
<input type="reset" value="清空">
<input type="submit" value="提交"><br/>
</form>
<a align="center" href="show_student.jsp">查看已添加学生</a>
</div>
</body>
</html>
show_student.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>添加学生</title>
</head>
<body>
<div align="center">
<h2>新学生信息</h2>
<form action="${pageContext.request.contextPath}/Add_student" method="post">
请输入学号:<input type="number" name="sid" maxlength="20" style="font-family: arial" required><br/>
请输入姓名:<input type="text" name="sname" maxlength="20" style="font-family: arial" required><br/>
<input type="reset" value="清空">
<input type="submit" value="提交"><br/>
</form>
<a align="center" href="show_student.jsp">查看已添加学生</a>
</div>
</body>
</html>
若添加成功可跳出确认界面,用户可选择返回首页或查看学生名单
3. 布置作业
用户可以从首页进入,选择布置新的作业
需输入的信息有作业id,作业题目和作业内容。作业内容有140字的限制,输入完成后可进行提交。提交成功有提示图和超链接,点击可返回首页
Add_homework.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>布置作业</title>
</head>
<body>
<div align="center">
<h2>输入新作业相关信息</h2>
<form action="${pageContext.request.contextPath}/Add_homework" method="post">
请输入作业id:<input type="number" name="hid" maxlength="20" required><br/>
请输入作业题目:<input type="text" name="title" maxlength="20" required><br/>
请输入作业内容:<textarea cols="13" rows="10" name="content" onpropertychange="if(this.scrollHeight>10) this.style.posHeight=this.scrollHeight+5"
required>输入内容不得超过140个字</textarea><br/>
<input type="reset" value="清空">
<input type="submit" value="提交"><br/>
</form>
</div>
</body>
</html>
4. 提交作业
用户从主界面选择提交作业时,首先会选出当前所有已布置的作业:
用户找到自己想要提交的作业后便可点击最右提交按钮,进行作业的作答和提交。
Add_student_homework_1.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>提交作业列表</title>
<%-- 将指定的作业id传给/submit,以便提交作业--%>
<script>
function jump(id) {
let homework = document.getElementById('homeworkId')
homework.setAttribute("value",id)
let sub = document.getElementById('sub')
sub.submit()
}
</script>
</head>
<body>
<div align="center">
<h2>已布置作业</h2>
<form id="sub" method="get" action="${pageContext.request.contextPath}/submit_homework">
<input id="homeworkId" name="id" type="hidden">
<table align="center" width="960" border="1" cellpadding="1" cellspacing="1">
<tr align="center" bgcolor="#7fffd4" height="50">
<th>作业编号</th>
<th>作业题目</th>
<th>作业内容</th>
<th>提交作业</th>
</tr>
<%
List<Homework> list = (List<Homework>)request.getAttribute("list");
if (list == null || list.size() <= 0){
// out.print("None data");
}else {
for (Homework homework : list) {
%>
<tr>
<td width="5%"><%=homework.getId()%></td>
<td width="20%" style="word-break: break-all;word-wrap: break-word"><%=homework.getTitle()%></td>
<td width="65%" style="word-break: break-all;word-wrap: break-word"><%=homework.getContent()%></td>
<td width="10%"><input type="button" value="提交作业" onclick="jump(<%=homework.getId()%>)"> </td>
</tr>
<%
}
}
%>
</table>
</form>
</div>
</body>
</html>
需要输入的内容有学生id,学生姓名,作答内容。作答完成后点击提交即可,若有错误可选择左下角按钮一键清空。提交成功会出现成功提示和返回首页超链接。
Add_student_homework_1.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>提交作业(学生)</title>
</head>
<body>
<div align="center">
<h2>提交作业</h2>
<form method="post" action="${pageContext.request.contextPath}/submit_homework">
<table align="center" border="1" width="960" cellpadding="1" cellspacing="1">
<%
Homework homework = (Homework) request.getAttribute("homework");
%>
<tr>
<th width="10%" bgcolor="#7fffd4">作业题目:</th>
<td width="90%"><%=homework.getTitle()%></td>
</tr>
<tr>
<th width="10%" bgcolor="#7fffd4">作业内容:</th>
<td width="90%"><%=homework.getContent()%></td>
</tr>
<tr>
<th width="10%" bgcolor="#7fffd4">学号:</th>
<td width="90%"><input type="number" name="studentId"
maxlength="20" style="font-family: Arial; width: 100%" required>
</td>
</tr>
<input type="hidden" name="title" value="<%=homework.getTitle()%>">
<input type="hidden" name="homeworkId" value="<%=homework.getId()%>">
<input type="hidden" name="content" value="<%=homework.getContent()%>">
<tr>
<th width="10%" bgcolor="#7fffd4">答案内容</th>
<td width="90%"><textarea rows="10" name="student_answer" style="width: 100%" onpropertychange="if(this.scrollHeight>10) this.style.posHeight=this.scrollHeight+5"
required></textarea></td>
</tr>
<tr style="border: none">
<td align="center"><input type="reset" value="清空"></td>
<td align="center"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
- 查看详情
用户还可查看所有作业的提交情况,同样是从首页进入,点击最后一个查询情况超链接。首先我们可以查看目前所有的已布置作业。
check_homework.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>已布置作业</title>
<script>
function jump(id) {
let homework = document.getElementById('homeworkId')
homework.setAttribute("value",id)
let choose = document.getElementById('choose')
choose.submit()
}
</script>
</head>
<body>
<div align="center">
<h2>已布置作业</h2>
<form id="choose" method="get" action="${pageContext.request.contextPath}/submitted_homework">
<input id="homeworkId" name="id" type="hidden">
<table align="center" width="960" border="1"
cellpadding="1" cellspacing="1">
<tr align="center" bgcolor="#7fffd4" height="50">
<th width="5%">作业编号</th>
<th width="20%">作业题目</th>
<th width="65">作业内容</th>
<th width="10%">已提交作业</th>
</tr>
<%
List<Homework> list = (List<Homework>)request.getAttribute("homework");
if (list == null || list.size() <= 0){
out.print("None data");
}else {
for (Homework homework : list) {
%>
<tr align="center" bgcolor="white" height="30">
<td><%=homework.getId()%></td>
<td><%=homework.getTitle()%></td>
<td><%=homework.getContent()%></td>
<td><input type="button" value="已提交作业" onclick="jump(<%=homework.getId()%>)"> </td>
</tr>
<%
}
}
%>
</table>
</form>
</div>
</body>
</html>
之后我们便可点击已提交作业按钮进行查询,显示的结果为对应作业的所有已提交答案
check_situation.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>作业情况</title>
</head>
<body>
<div align="center">
<h2>该题目已提交作业</h2>
<table align="center" width="960" border="1"
cellpadding="1" cellspacing="1">
<tr align="center" bgcolor="#7fffd4" height="50">
<td>学生学号</td>
<td>作业编号</td>
<td>作业题目</td>
<td>作业内容</td>
<td>学生答案</td>
<td>创建时间</td>
</tr>
<%
List<StudentHomework> list = (List<StudentHomework>)request.getAttribute("list");
if(null == list || list.size() <= 0){
out.print("None data.");
}else {
for (StudentHomework sh : list){
%>
<tr align="center" bgcolor="white" height="30">
<td><%=sh.getStudentId()%></td>
<td><%=sh.getHomeworkId()%></td>
<td><%=sh.getHomeworkTitle()%></td>
<td><%=sh.getHomeworkContent()%></td>
<td><%=sh.getStudentAnswer()%></td>
<td><%=sh.getCreateTime()%></td>
</tr>
<%
}
}
%>
</table>
</div>
</body>
</html>
感想
在之前并没有使用过jsp和Servlet,tomcat虽然使用过但已经忘记了不少,这一次虽然做的只是很简单也很粗陋的一个小系统,还是学到了不少新东西,感慨学海无涯,人生一定要一直钻研才有着无限的乐趣啊。