JSP+Servlet培训班作业管理系统[19] -完结篇之前端源代码
兄弟们，今日头条搜索
三线城市程序员老陈关注我，我将持续不断推出视频教程。
本篇释放所有前端源码，包括4个css文件、一个web.xml和15个jsp网页。
![JSP+Servlet培训班作业管理系统[19] -完结篇之前端源代码_第1张图片](http://img.e-com-net.com/image/info8/f389e5ed8454451ab1450b5469c4957a.jpg)
web.xml:
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<filter>
<filter-name>SessionFilterfilter-name>
<filter-class>servlet.SessionFilterfilter-class>
filter>
<filter-mapping>
<filter-name>SessionFilterfilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
<servlet>
<servlet-name>ActionServletservlet-name>
<servlet-class>servlet.ActionServletservlet-class>
<init-param>
<param-name>profileparam-name>
<param-value>WEB-INF/log4j.propertiesparam-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>ActionServletservlet-name>
<url-pattern>/ActionServleturl-pattern>
servlet-mapping>
web-app>
css部分：
/*content.css*/
/*一定需要注意，该页面因为和index.jsp有嵌套关系，
所以通过id选取元素时，id千万别和index.jsp中重名了
其余部分之前都讲过了，不再详述*/
#content_top{
height:30px;
font-family:"微软雅黑";
font-size:16px;
border-bottom: 1px solid #D4D5D7;
}
#content_mid{
height:400px;
margin-top:5px;
}
#content_bottom{
background-color:#D4D5D7;
margin:5px auto;
width:240px;
height:20px;
line-height:20px;
text-align:center;
}
/*css/index.css*/
/*星号表示选择全部，设置外边距0，内边距0，字体大小12px，宋体*/
*{
margin:0px;
padding:0px;
font-size:12px;
font-family:"宋体";
}
/*整个body区域背景色为#F5F5F5，这个很简单，自己下载个取色器，找个漂亮的网页，取个颜色就行*/
body {
background-color: #FCFCFC;
}
/*在top、left、right外面套用一层main是为了控制宽度，并且整体居中*/
#main{
width:1000px;
margin:0px auto;
}
/*宽度占满它爹的宽度，高度64px是瞎试的，不好看再调整，猫哥喜欢用16px、32px、64px、128px这些，你懂的。
背景色猫哥继续取色器
line-height表示文字占用的高度，它也是64那就是文字占用高度跟top区域高度是一样的嘛，所以文字就居中了*/
#top{
width:100%;
height:64px;
background-color:#000000;
line-height:64px;
}
/*文字颜色取色器，标题部分啊文字用微软雅黑，大气！*/
#top_title{
line-height:64px;
font-family:"微软雅黑";
color:#FFFFFF;
float:left;
font-size:32px;
margin-left:16px;
}
/*颜色依然是自己取色的*/
#top_info{
color:#71777D;
float:right;
line-height:64px;
font-size:16px;
margin-right:16px;
}
/*宽度占200px差不多了吧
float表示漂浮，left的话就是靠左了，所以这个left区域就得靠左飘飘了
内部的东西跟边距有点距离好看点，暂时定为10px，上下左右都是哦*/
#left{
width:200px;
height:536px;/*猫哥认为600-64=536*/
float:left;
background-color:#EEEEEE;
padding:10px;
}
/*调整id=left的div中的ul标签下的li标签的样式为上边距10px，左边距15px*/
#left ul li{
margin:10px 0px 0px 15px;
}
/*注意逗号表示同时设置两组对象的CSS属性
a:link表示未访问的链接,a:visited表示已访问的链接，颜色凭爱好了*/
#left a:link, #left a:visited {
color: #333333;
text-decoration:none;/*不要下划线*/
}
/*a:hover表示鼠标悬停的链接,a:active表示被选择的链接*/
#left a:hover, #left a:active {
color: #0AA770;
text-decoration:none;
}
/*同理right向右飘*/
#right{
width:760px;/*1000-200-10*4=760,此处一定要注意padding的内容会拓宽div整体宽度，有志于前端的可以专门去研究下*/
min-width:600px;
height:536px;/*猫哥认为600-64=536*/
float:right;
background-color:#FFFFFF;
padding:10px;
}
/*login.css*/
/*应用于全部内容的格式*/
*{
margin:0px;
padding:0px;
font-size:12px;
font-family:"宋体";
width:auto;
}
/*设定顶部样式*/
#top{
height:70px;/*一般顶部标题栏的高度差不多70px*/
line-height:70px;/*保证标题栏文字居中显示（从上往下方向）*/
font-family:"微软雅黑";/*标题栏使用微软雅黑，高端大气上档次*/
font-size:32px;/*标题栏字体要大*/
color:#DE7D74;/*这个颜色注意了，是图片中较深的粉红色*/
border-bottom: medium solid #B0B2B6;/*顶部下方设置了一个边框，用以分割顶部和中间内容区域*/
padding-left:16px;/*顶部左侧内边距16px，避免文字太靠左边*/
font-weight:600;/*文字加粗，具体多少好看慢慢调节*/
}
#mid{
height:500px;/*电脑高度一般600px、768px或者更多，去掉70px顶部和很少的底部，留个500px算合理*/
text-aligh:center;/*内容在中间显示*/
background-image:url(../images/back.jpg);/*把背景图片设置进来*/
background-size: 100% 100%;/*背景图片铺满整个区域，这样好看*/
}
#login_input{
border:thin solid #FFEFD6;
width:400px;
height:240px;
margin:32px auto;
text-align:center;
}
.row{
width:100%;
margin:32px auto;
}
.row span{
width:60px;
}
.row input{
width:120px;
}
.row .submit{
border-radius:8px;
background-color: #FFE5D5;
}
/*底部，很简单，没啥好说的*/
#bottom{
margin-top:16px;
text-align:center;
}
/*table.css*/
/* 以下为表格美工*/
.table_theme1 thead, .table_theme1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
.table_theme1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}
/* Padding and font style */
.table_theme1 td, .table_theme1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}
/* Alternating background colors */
.table_theme1 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
.table_theme1 tr:nth-child(odd) {
background: .FFF
}
/*注意逗号表示同时设置两组对象的CSS属性
a:link表示未访问的链接,a:visited表示已访问的链接，颜色凭爱好了*/
.table_theme1 tr td a:link, .table_theme1 tr td a:visited {
color: #0000EE;
text-decoration:none;/*不要下划线*/
}
/*a:hover表示鼠标悬停的链接,a:active表示被选择的链接*/
.table_theme1 tr td a:hover, .table_theme1 tr td a:active {
color: #59A827;
text-decoration:none;
}
jsp网页：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>courseManage.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="content_top">
课程列表
div>
<div id="content_mid">
<table class="table_theme1">
<thead>
<tr>
<th>课程编号th>
<th>课程名称th>
<th>课程教师th>
<th>操作th>
tr>
thead>
<c:forEach items="${courses}" var="item">
<tr>
<td>${item.courseId}td>
<td>${item.courseName}td>
<td>${item.courseUser.userName}td>
<td><a href="/HomeworkSystem/ActionServlet?method=view&entityType=Work&byCourseId=${item.courseId}">查看课程作业a>td>
tr>
c:forEach>
<tr><td colspan="4">共${maxPage}页 当前是第${currentPage}页 <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Course&page=${currentPage-1}">上一页a> <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Course&page=${currentPage+1}">下一页a>td>tr>
table>
div>
<div id="content_bottom">
div>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>courseManageByStudent.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="content_top">
学生选课
div>
<div id="content_mid">
<table class="table_theme1">
<thead>
<tr>
<th>课程编号th>
<th>课程名称th>
<th>课程教师th>
<th>操作th>
tr>
thead>
<c:forEach items="${courses}" var="item">
<tr>
<td>${item.courseId}td>
<td>${item.courseName}td>
<td>${item.courseUser.userName}td>
<td><a href="/HomeworkSystem/ActionServlet?method=save&entityType=Lesson&courseId=${item.courseId}">选课a>td>
tr>
c:forEach>
<tr><td colspan="5">共${maxPage}页 当前是第${currentPage}页 <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Course&page=${currentPage-1}">上一页a> <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Course&page=${currentPage+1}">下一页a>td>tr>
table>
div>
<div id="content_bottom">
div>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>courseManageByTeacher.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="content_top">
课程列表
div>
<div id="content_mid">
<table class="table_theme1">
<thead>
<tr>
<th>课程编号th>
<th>课程名称th>
<th>课程教师th>
<th>操作th>
<th>操作th>
tr>
thead>
<c:forEach items="${courses}" var="item">
<tr>
<td>${item.courseId}td>
<td>${item.courseName}td>
<td>${item.courseUser.userName}td>
<td><a href="/HomeworkSystem/ActionServlet?method=edit&entityType=Course&entityId=${item.courseId}">编辑a>td>
<td><a href="/HomeworkSystem/ActionServlet?method=view&entityType=Work&byCourseId=${item.courseId}">查看课程作业a>td>
tr>
c:forEach>
<tr><td colspan="5">共${maxPage}页 当前是第${currentPage}页 <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Course&page=${currentPage-1}">上一页a> <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Course&page=${currentPage+1}">下一页a>td>tr>
table>
div>
<div id="content_bottom">
<a href="/HomeworkSystem/ActionServlet?method=add&entityType=Course">新增a>
div>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>courseUpdate.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<form action="/HomeworkSystem/ActionServlet?method=save&entityType=Course" method="post">
<div id="content_top">
课程信息更新
div>
<div id="content_mid">
<table class="table_theme1">
<tr>
<td>课程名称:td>
<td>
<input type="text" name="courseName" value="${course.courseName}"/>
<input type="hidden" name="entityId" value="${course.courseId}"/>
td>
tr>
table>
div>
<div id="content_bottom">
<input type="submit" value="保存">input>
div>
form>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>index.jsptitle>
<link href="css/index.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="main">
<div id="top">
<div id="top_title">
猫哥培训班作业管理系统
div>
<div id="top_info">
欢迎您，尊敬的：${sessionUser.userName}
div>
div>
<div id="left">
<ul>
<c:forEach items="${sessionRoleMenu}" var="menu">
<li>
<a href="/HomeworkSystem/ActionServlet?method=${menu[1]}&entityType=${menu[2]}">${menu[0]}a>
li>
c:forEach>
ul>
div>
<div id="right">
<c:if test="${empty actionUrl}">
欢迎来到猫哥培训班管理系统
c:if>
<c:if test="${not empty actionUrl}">
<jsp:include page="${actionUrl}" flush="true">jsp:include>
c:if>
div>
div>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>jobManageByStudent.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="content_top">
做作业 do my job
div>
<div id="content_mid">
<table class="table_theme1">
<thead>
<tr>
<th>作业编号th>
<th>题目th>
<th>操作th>
tr>
thead>
<c:forEach items="${jobs}" var="item">
<tr>
<td>${item.jobId}td>
<td>${item.jobWork.workTitle}td>
<td><a href="/HomeworkSystem/ActionServlet?method=editJobContent&entityType=Job&entityId=${item.jobId}">做作业a>td>
tr>
c:forEach>
<tr><td colspan="4">共${maxPage}页 当前是第${currentPage}页 <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Job&page=${currentPage-1}">上一页a> <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Job&page=${currentPage+1}">下一页a>td>tr>
table>
div>
<div id="content_bottom">
div>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>jobManageByTeacher.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="content_top">
作业批阅
div>
<div id="content_mid">
<table class="table_theme1">
<thead>
<tr>
<th>作业编号th>
<th>题目th>
<th>学生th>
<th>提交时间<th>
<th>操作th>
tr>
thead>
<c:forEach items="${jobs}" var="item">
<tr>
<td>${item.jobId}td>
<td>${item.jobWork.workTitle}td>
<td>${item.jobUser.userName}td>
<td>${item.jobTime}td>
<td><a href="/HomeworkSystem/ActionServlet?method=editJobScore&entityType=Job&entityId=${item.jobId}">批阅作业a>td>
tr>
c:forEach>
<tr><td colspan="5">共${maxPage}页 当前是第${currentPage}页 <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Job&page=${currentPage-1}">上一页a> <a href="/HomeworkSystem/ActionServlet?method=view&entityType=Job&page=${currentPage+1}">下一页a>td>tr>
table>
div>
<div id="content_bottom">
div>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>jobUpdateByStudent.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<form action="/HomeworkSystem/ActionServlet?method=save&entityType=Job" method="post">
<div id="content_top">
做作业
div>
<div id="content_mid">
<table class="table_theme1">
<tr>
<td>作业编号:td>
<td>
${job.jobId}
<input type="hidden" name="entityId" value="${job.jobId}"/>
td>
tr>
<tr>
<td>题目:td>
<td>
${job.jobWork.workTitle}
<input type="hidden" name="workId" value="${job.jobWork.workId}"/>
td>
tr>
<tr>
<td>作业内容:td>
<td>
<textarea name="jobContent" rows="8" cols="30">textarea>
td>
tr>
table>
div>
<div id="content_bottom">
<input type="submit" value="提交作业">input>
div>
form>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>jobUpdateByTeacher.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<form action="/HomeworkSystem/ActionServlet?method=save&entityType=Job" method="post">
<div id="content_top">
作业批阅
div>
<div id="content_mid">
<table class="table_theme1">
<tr>
<td>作业编号:td>
<td>
${job.jobId}
<input type="hidden" name="entityId" value="${job.jobId}"/>
td>
tr>
<tr>
<td>题目:td>
<td>
${job.jobWork.workTitle}
<input type="hidden" name="workId" value="${job.jobWork.workId}"/>
td>
tr>
<tr>
<td>作业内容:td>
<td>
<textarea name="jobContent" rows="8" cols="30" >${job.jobContent}textarea>
td>
tr>
<tr>
<td>打分:td>
<td>
<select name="jobScore">
<option value="0">优秀option>
<option value="1">良好option>
<option value="2">合格option>
<option value="3">不合格option>
select>
td>
tr>
table>
div>
<div id="content_bottom">
<input type="submit" value="确认">input>
div>
form>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>login.jsptitle>
<link href="css/login.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="top">
培训班作业管理系统登录
div>
<div id="mid">
<div id="login_input">
<form id="mainForm" method="post" action="/HomeworkSystem/ActionServlet?method=login&entityType=User">
<div class="row">
<span>编号：span><input type="text" name="userId" />
div>
<div class="row">
<span>密码：span><input type="password" name="userPassword"/>
div>
<div class="row">
<input class="submit" type="submit" value="登录"/>
div>
form>
div>
div>
<div id="bottom">
Copyright:PandaBrother 2017.2.22
div>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>tip.jsptitle>
head>
<body>
<c:if test="${empty tipInfo}">
欢迎使用猫哥培训班管理系统
c:if>
<c:if test="${not empty tipInfo}">
提示信息：${tipInfo}<br/>
c:if>
body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>userManage.jsptitle>
<link href="css/content.css" type="text/css" rel="stylesheet"/>
<link href="css/table.css" type="text/css" rel="stylesheet"/>
head>
<body>
<div id="content_top">
人员管理
div>
<div id="content_mid">
<table class="table_theme1">
<thead>
<tr>
<th>人员编码th>
<th>姓名th>
<th>角色th>
<th>操作th>
<th>操作th>
tr>
thead>
<c:forEach items="${users}" var="item">
<tr>
<td>${item.userId}td>
<td>${item.userName}td>
<td>${item.userRole.roleName}td>
<td><a href="/HomeworkSystem/ActionServlet?method=edit&entityType=User&entityId=${item.userId}">编辑a>td>