1.先上效果图
首页
教师发布作业页面一
教师发布作业页面二
教师添加学生页面一
教师添加学生页面二
教师查询作业页面
学生提交作业页面
2.部分代码说明
代码结构展示：
该项目由课上练习继承而来，顾有几个没用的文件。
首页代码index.jsp，主要实现了页面的布局（新学习的内容为左菜单右内容布局的实现）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <%-- 在IE运行最新的渲染模式 --%>
<meta name="viewport" content="width=device-width, initial-scale=1"> <%-- 初始化移动浏览显示 --%>
<meta name="Author" content="Dreamer-1.">
<!-- 引入各种CSS样式表 -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index.css"> <!-- 修改自Bootstrap官方Demon，你可以按自己的喜好制定CSS样式 -->
<link rel="stylesheet" href="css/font-change.css"> <!-- 将默认字体从宋体换成微软雅黑（个人比较喜欢微软雅黑，移动端和桌面端显示效果比较接近） -->
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>- 作业管理系统 -</title>
</head>
<body>
<!-- 顶部菜单（来自bootstrap官方Demon）==================================== -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.jsp">Homework.com</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="###" onclick="showAtRight('assignHW.jsp')"><i class="fa fa-users"></i> 教师操作列表</a></li>
<li><a href="###" onclick="showAtRight('SubmitHW.jsp')"><i class="fa fa-list-alt"></i> 学生操作列表</a></li>
</ul>
</div>
</div>
</nav>
<!-- 左侧菜单选项========================================= -->
<div class="container-fluid">
<div class="row-fluie">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<!-- 一级菜单 -->
<li class="active"><a href="#teacherMenu" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-user"></i> 教师操作列表 <span class="sr-only">(current)</span></a>
</li>
<!-- 二级菜单 -->
<!-- 注意一级菜单中<a>标签内的href="#……"里面的内容要与二级菜单中<ul>标签内的id="……"里面的内容一致 -->
<ul id="teacherMenu" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('assignHW.jsp')"><i class="fa fa-users"></i> 发布作业</a></li>
<li><a href="###" onclick="showAtRight('studentList.jsp')"><i class="fa fa-users"></i> 添加学生</a></li>
<li><a href="###" onclick="showAtRight('QueryHW.jsp')"><i class="fa fa-users"></i> 查询作业</a></li>
</ul>
<li><a href="#studentMenu" class="nav-header menu-first collapsed" data-toggle="collapse">
<i class="fa fa-globe"></i> 学生操作列表 <span class="sr-only">(current)</span></a>
</li>
<ul id="studentMenu" class="nav nav-list collapse menu-second">
<li><a href="###" onclick="showAtRight('SubmitHW.jsp')"><i class="fa fa-list-alt"></i> 作业提交</a></li>
</ul>
</ul>
</div>
</div>
</div>
<!-- 右侧内容展示================================================== -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header"><i class="fa fa-cog fa-spin"></i> 控制台<small> 欢迎使用作业管理系统</small></h1>
<!-- 载入左侧菜单指向的jsp（或html等）页面内容 -->
<div id="content">
<h4>
<strong>使用指南：</strong><br>
<br><br>默认页面内容……
</h4>
</div>
</div>
<script type="text/javascript">
/*
* 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
* （实现左侧菜单中的标签点击后变色的效果）
*/
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
//e.preventDefault(); 加上这句则导航的<a>标签会失效
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
/*
* 解决ajax返回的页面中含有javascript的办法：
* 把xmlHttp.responseText中的脚本都抽取出来，不管AJAX加载的HTML包含多少个脚本块，我们对找出来的脚本块都调用eval方法执行它即可
*/
function executeScript(html)
{
var reg = /<script[^>]*>([^\x00]+)$/i;
//对整段HTML片段按<\/script>拆分
var htmlBlock = html.split("<\/script>");
for (var i in htmlBlock)
{
var blocks;//匹配正则表达式的内容数组，blocks[1]就是真正的一段脚本内容，因为前面reg定义我们用了括号进行了捕获分组
if (blocks = htmlBlock[i].match(reg))
{
//清除可能存在的注释标记，对于注释结尾-->可以忽略处理，eval一样能正常工作
var code = blocks[1].replace(/<!--/, '');
try
{
eval(code) //执行脚本
}
catch (e)
{
}
}
}
}
/*
* 利用div实现左边点击右边显示的效果（以id="content"的div进行内容展示）
* 注意：
* ①：js获取网页的地址，是根据当前网页来相对获取的，不会识别根目录；
* ②：如果右边加载的内容显示页里面有css，必须放在主页（即例中的index.jsp）才起作用
* （如果单纯的两个页面之间include，子页面的css和js在子页面是可以执行的。 主页面也可以调用子页面的js。但这时要考虑页面中js和渲染的先后顺序 ）
*/
function showAtRight(url) {
var xmlHttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest(); //创建 XMLHttpRequest对象
}
else {
// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function() {
//onreadystatechange — 当readystate变化时调用后面的方法
if (xmlHttp.readyState == 4) {
//xmlHttp.readyState == 4 —— finished downloading response
if (xmlHttp.status == 200) {
//xmlHttp.status == 200 —— 服务器反馈正常
document.getElementById("content").innerHTML=xmlHttp.responseText; //重设页面中id="content"的div里的内容
executeScript(xmlHttp.responseText); //执行从服务器返回的页面内容里包含的JavaScript函数
}
//错误状态处理
else if (xmlHttp.status == 404){
alert("出错了☹ （错误代码：404 Not Found），……！");
/* 对404的处理 */
return;
}
else if (xmlHttp.status == 403) {
alert("出错了☹ （错误代码：403 Forbidden），……");
/* 对403的处理 */
return;
}
else {
alert("出错了☹ （错误代码：" + request.status + "），……");
/* 对出现了其他错误代码所示错误的处理 */
return;
}
}
}
//把请求发送到服务器上的指定文件（url指向的文件）进行处理
xmlHttp.open("GET", url, true); //true表示异步处理
xmlHttp.send();
}
</script>
</body>
</html>
assignHW.jsp主要实现了数据库homework表中内容的展示：
<%@ page import="com.java.code.class12.jdbc.StudentHomeworkJdbc" %>
<%@ page import="com.java.code.class12.model.assignHWModel" %>
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<table align="center" width="960" border="1"
bgcolor="black" cellpadding="1" cellspacing="1">
<tr align="center" bgcolor="#7fffd4" height="50">
<td>作业编号</td>
<td>作业内容</td>
</tr>
<%
List<assignHWModel> list = StudentHomeworkJdbc.QueryAssignmentHW();
if(null == list || list.size() <= 0){
out.print("None data.");
}else {
for (assignHWModel sh : list){
%>
<tr align="center" bgcolor="white" height="30">
<td><%=sh.getId()%></td>
<td><%=sh.getContent()%></td>
</tr>
<%
}
}
%>
</table>
</div>
<br>
<p><input class="log" name="login" type="button" value="发布新作业" onclick="showAtRight('assign.jsp')";></p>
<br>
</body>
</html>
assign.jsp主要实现了收集数据表格的生成：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="login" align="center">
<p align="center"><strong>作业发布 </strong></p>
<form action="assign1.jsp" method="post" onsubmit = "return validate();">
<table frame=void width=800px border="1" align="center">
<tr>
<td class="td1"><strong>作业ID:</strong></td>
<td class="td2"><input id="name" name="name" type="text" class="inputText" placeholder="请输入作业ID" onfocus="YHMonfocu()" onblur="YHMonblus()" required/><span id="YHMerror"></span></td>
</tr>
<tr>
<td class="td1"><strong>作业内容:</strong></td>
<td class="td2"><input id="workid" name="workid" type="text" class="inputText" placeholder="请输入作业内容" onfocus="GHMonfocu()" onblur="GHMonblus()" required/><span id="GHMerror"></span></td>
</tr>
<tr>
<td class="td1"> </td>
<td class="td2">
<input type="submit" name="submit" class="submitBtn" value="确定" >
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
assign1.jsp实现了Table数据提交到数据库的功能，提交后返回首页：
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
/* login */
Class.forName("org.postgresql.Driver");
Connection connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/student","root","123456");
/* load */
String sql = "insert into homework values (?,?)";
PreparedStatement stmt=connect.prepareStatement(sql);
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");/* 使用 request.getParameter() 方法来获取表单参数的值 */
String content = request.getParameter("content");
stmt.setString(1,id);
stmt.setString(2,content);
int n=stmt.executeUpdate();
if(n==1){
out.println("<script language = 'javaScript'> alert('发布成功');</script>");
response.setHeader("refresh","1;url = index.jsp");
}else{
out.println("<script language = 'javaScript'> alert('发布失败');</script>");
response.setHeader("refresh","1;url = index.jsp");
}
stmt.close();
connect.close();
%>
</body>
</html>
其他模块的代码实现与以上类似，不在一一列举。
GitHub地址：https://github.com/yangjixin-coder/JAVA-EE-homework
数据库结构：
3.遗留的问题
1.可不可以将assign.jsp和assign1.jsp合为一个jsp中就实现表格数据的收集和与数据库的交互。
2.JSP中富文本编辑器的应用。
3.数据库交互中数据类型转换的问题。
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
