一、项目概述
本项目所完成的是一个web端的学生点名系统,可以根据不同的学生名单来记录各个学生的考勤记录与课堂表现分。为了简化开发流程,数据并没有采用数据库管理,而是直接使用了csv文件来储存。项目很简单,下面就来开始开发吧。
二、实际开发
一、项目结构介绍
首先来看看此项目的目录结构。
项目各包作用:
包名 | 作用 |
---|---|
dao | 存放处理csv文件的类 |
data | 存放csv文件 |
pojo | 实体类 |
servlet | 存放servlet的包 |
views | 存放前端页面 |
style | 存放css文件 |
scripts | 存放js文件 |
WEB-INF | 存放应用配置文件 |
注意:由于本项目使用了jstl库,所以需要大家自己去网上下载对应的版本库来加入到自己的项目中,这样项目才能成功运行。
二、开发流程
一、data包内数据的获取
此包内都是csv文件,大家请自行获取。
给大家写一个demo。
序号,状态,学号,姓名,2020.11.02,2020.11.16,2020.11.30,2020.12.14,2020.12.16,2020.12.28,2021.05.31,2021.06.01,2021.06.02,2021.06.03,2021.06.04,2021.06.05,2021.06.06,2021.06.07,2021.06.08,2021.06.09,2021.06.10,2021.06.11,2021.06.12,2021.08.18,2021.08.21
1,OK,1925101002,姓名,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,0,0
2,OK,1925101007,姓名,0,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0
3,OK,1925102007,姓名,2,2,2,2,2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0
4,OK,1925102017,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
5,OK,1925102022,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
6,OK,1925102024,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
7,OK,1925102026,姓名,0,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0
8,OK,1925102037,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
9,OK,1925103003,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
10,OK,1925103006,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
11,OK,1925103007,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
12,OK,1925103022,姓名,0,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0
13,OK,1925103028,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
14,OK,1925104022,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
15,OK,1925104037,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
16,OK,1725121039,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
17,OK,1925105057,姓名,0,0,0,0,0,X,X,X,0,0,0,0,0,0,0,0,0,0,0,0,0
二、pojo包内实体类的创建
此包内存放的都是我们需要用到的实体类。
Attendance.java
package cn.egret.pojo;
import java.util.Arrays;
public class Attendance {
private String id;
private String status;
private String sequence;
private String name;
private String[] marks;
private int marksLength;
public Attendance() {
// TODO Auto-generated constructor stub
}
public Attendance(String sequence, String status, String id, String name, String[] marks) {
this.id = id;
this.status = status;
this.sequence = sequence;
this.name = name;
this.marks = marks;
this.marksLength = marks.length;
}
@Override
public String toString() {
// TODO Auto-generated method stub
return this.sequence + "," + this.status + "," + this.id + "," + this.name + getMarksString();
}
private String getMarksString() {
String m = "";
for (int i = 0; i < this.marks.length; i++) {
m = m + "," + marks[i];
}
return m;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getSequence() {
return sequence;
}
public void setSequence(String sequence) {
this.sequence = sequence;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String[] getMarks() {
return marks;
}
public void setMarks(String[] marks) {
this.marks = marks;
}
public void setMarksLength(int marksLength) {
this.marksLength = marksLength;
}
public int getMarksLength() {
return marksLength;
}
}
Clazz.java
package cn.egret.pojo;
public class Clazz {
private int id;
private String name;
public Clazz() {
// TODO Auto-generated constructor stub
}
public Clazz(int id, String name) {
this.id = id;
this.name = name;
}
@Override
public String toString() {
// TODO Auto-generated method stub
return this.id + " " + this.name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
User
package cn.egret.pojo;
public class User {
private String userName;
private String passWard;
public User() {
}
public User(String userName, String passWard) {
this.userName = userName;
this.passWard = passWard;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassWard() {
return passWard;
}
public void setPassWard(String passWard) {
this.passWard = passWard;
}
}
三、dao包内类的创建
此包存放的是与csv文件直接交互的类AttendanceDao.java
下面附上源码:
package cn.egret.dao;
import cn.egret.pojo.Attendance;
import cn.egret.pojo.Clazz;
import java.io.*;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
public class AttendanceDao {
private String path = "C:\\Users\\14489\\IdeaProjects\\StudentRollCallSystem\\src\\cn\\egret\\data";
public List<Clazz> getAllClasses() {
List<Clazz> clazz = null;
File file = new File(path);
if (file.isDirectory()) {
String[] list = file.list();
clazz = new ArrayList<>();
int idIndex = 0;
for (int i = 0; i < list.length; i++) {
if (list[i].endsWith(".csv")) {
// System.out.println(list[i]);
Clazz c = new Clazz(idIndex, list[i]);
idIndex++;
clazz.add(c);
}
}
} else {
System.out.println("非文件夹");
}
return clazz;
}
public List<Attendance> findAllByClassId(int id) {
List<Attendance> attendance = new ArrayList<>();
File Reader = new File(path);
String[] list = Reader.list();
int idIndex = 0;
String fileName = "";
for (int i = 0; i < list.length; i++) {
if (id == idIndex) {
fileName = list[i];
break;
}
if (list[i].endsWith(".csv")) {
idIndex++;
}
}
try {
File csvReader = new File(path, fileName);
BufferedReader br = new BufferedReader(new FileReader(csvReader));
String line = "";
while ((line = br.readLine()) != null) // 读取到的内容给line变量
{
String tempLine = line;
String[] items = tempLine.split(",");
if (items.length > 1) {
Attendance tempa = new Attendance(items[0], items[1], items[2], items[3],
Arrays.copyOfRange(items, 4, items.length));
attendance.add(tempa);
}
}
br.close();
FileWriter fw = new FileWriter(csvReader);
BufferedWriter bw = new BufferedWriter(fw);
Date date = new Date(System.currentTimeMillis());
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy.MM.dd");
String datenow = simpleDateFormat.format(date);
boolean isToday = true;
int flag = 0;
for (Attendance att : attendance) {
if (flag == 0) {
if (!att.getMarks()[att.getMarks().length - 1].equals(datenow)) {
String[] newMarks = new String[att.getMarks().length + 1];
for (int i = 0; i < att.getMarks().length; i++) {
newMarks[i] = att.getMarks()[i];
}
newMarks[att.getMarks().length] = datenow;
att.setMarks(newMarks);
isToday = false;
}
} else {
if (!isToday) {
String[] newMarks = new String[att.getMarks().length + 1];
for (int i = 0; i < att.getMarks().length; i++) {
newMarks[i] = att.getMarks()[i];
}
newMarks[att.getMarks().length] = "0";
att.setMarks(newMarks);
}
}
flag++;
}
for (Attendance a : attendance) {
bw.write(a.toString().trim() + '\n');
}
bw.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return attendance;
}
public boolean saveAllByClassId(int id, List<Attendance> list) {
File Reader = new File(path);
String[] listName = Reader.list();
int idIndex = 0;
String fileName = "";
for (int i = 0; i < listName.length; i++) {
if (id == idIndex) {
fileName = listName[i];
break;
}
if (listName[i].endsWith(".csv")) {
idIndex++;
}
}
File csvWriter = new File(path, fileName);
BufferedWriter writer;
try {
writer = new BufferedWriter(new FileWriter(csvWriter));
for (Attendance a : list) {
writer.write(a.toString().trim() + '\n');
}
writer.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return true;
}
public void changeSelf(Attendance a, Attendance attendance) {
a.setId(attendance.getId());
a.setStatus(attendance.getStatus());
a.setSequence(attendance.getSequence());
a.setName(attendance.getName());
a.setMarks(attendance.getMarks());
a.setMarksLength(attendance.getMarks().length);
}
}
四、servlet包内各类的创建
dealAttServlet.java
package cn.egret.servlet;
import cn.egret.dao.AttendanceDao;
import cn.egret.pojo.Attendance;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;
public class dealAttServlet extends HttpServlet {
AttendanceDao attendanceDao = new AttendanceDao();
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int classId = Integer.parseInt(request.getParameter("classId"));
String student = request.getParameter("student");
student.trim();
String []items = student.split(",");
Attendance attendance = new Attendance(items[0], items[1], items[2], items[3],
Arrays.copyOfRange(items, 4, items.length));
List<Attendance> studentlist = attendanceDao.findAllByClassId(classId);
for(Attendance a : studentlist){
if(a.getSequence().equals(attendance.getSequence())){
attendanceDao.changeSelf(a,attendance);
}
}
attendanceDao.saveAllByClassId(classId, studentlist);
PrintWriter printWriter = response.getWriter();
printWriter.write(student);
printWriter.flush();
printWriter.close();
}
}
SessionFilter.java
package cn.egret.servlet;
import cn.egret.pojo.User;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
public class SessionFilter implements Filter {
@Override
public void destroy()
{
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) arg0;
HttpServletResponse response = (HttpServletResponse) arg1;
HttpSession session = request.getSession();
System.out.println(session.getAttribute("userName"));
//判断session是否过期
if (session.getAttribute("userName") == null) {
System.out.println(11111);
//跳转至登录页面
response.sendRedirect("http://localhost:8081/StudentRollCallSystem_war_exploded/");
} else {
arg2.doFilter(request, response);
}
}
@Override
public void init(FilterConfig arg0) throws ServletException
{
// TODO Auto-generated method stub
}
}
SystemServlet.java
package cn.egret.servlet;
import cn.egret.dao.AttendanceDao;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class SystemServlet extends HttpServlet {
AttendanceDao attendanceDao = new AttendanceDao();
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
StringBuffer urL = request.getRequestURL();
String action = urL.substring(urL.lastIndexOf("/") + 1, urL.lastIndexOf("."));
switch (action) {
case "top": {
topDispose(request, response);
break;
}
case "left": {
leftDispose(request, response);
break;
}
case "attendance": {
attendanceDispose(request, response);
break;
}
case "main": {
mainDispose(request, response);
break;
}
}
}
private void topDispose(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("userName", request.getSession().getAttribute("userName"));
request.getRequestDispatcher("/views/top.jsp").forward(request, response);
}
private void leftDispose(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("classList", attendanceDao.getAllClasses());
request.getRequestDispatcher("/views/left.jsp").forward(request, response);
}
private void attendanceDispose(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("classId",Integer.parseInt(request.getParameter("classId")));
request.setAttribute("studentList", attendanceDao.findAllByClassId(Integer.parseInt(request.getParameter("classId"))));
request.getRequestDispatcher("/views/attendance.jsp").forward(request, response);
}
private void mainDispose(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.getRequestDispatcher("/views/main.jsp").forward(request, response);
}
}
UserServlet.java
package cn.egret.servlet;
import cn.egret.pojo.User;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
public class UserServlet extends HttpServlet {
List<User> userList;
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
userList = new ArrayList<>();
userList.add(new User("Egret","123456"));
userList.add(new User("Admin","123456"));
HttpSession session = request.getSession();
String userName = request.getParameter("userName");
String passWard = request.getParameter("passWord");
System.out.println(userName);
System.out.println(passWard);
boolean flag = false;
for(User user : userList){
if(user.getUserName().equals(userName) && user.getPassWard().equals(passWard)){
flag = true;
session.setAttribute("userName",userName);
session.setAttribute("passWard",passWard);
break;
}
}
if(flag){
request.getRequestDispatcher("/views/main.jsp").forward(request,response);
}else{
request.getRequestDispatcher("/views/login.jsp").forward(request,response);
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
五、views内各页面
login.jsp
<%--
Created by IntelliJ IDEA.
User: 14489
Date: 2021/6/18
Time: 17:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录页面</title>
</head>
<body>
<form method="post" action="${pageContext.request.contextPath}/views/UserServlet">
<p align="center">用户名:<input type="text" name="userName"></p>
<p align="center">密 码:<input type="password" name="passWord"></p>
<p align="center"><input type="submit" name="submit" value="登录"></p>
</form>
</body>
</html>
main.jsp
<%--
Created by IntelliJ IDEA.
User: 14489
Date: 2021/6/10
Time: 23:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page language="java"
pageEncoding="UTF-8" import="java.util.*" %>
<!DOCTYPE html HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>主页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<frameset rows="10%,*" frameborder="no">
<frame id="top" src="top.html" scrolling="none" style="border: rgb(70,130,180)"/>
<frameset cols="20%,*" frameborder="no">
<frame id="left" src="left.html" scrolling="auto" style="border:medium double rgb(70,130,190)"/>
<frame id="attendance" name="views/attendance" src="attendance.html?classId=0" scrolling="auto"
style="border:medium double rgb(70,130,190)"/>
</frameset>
</frameset>
</html>
top.jsp
<%--
Created by IntelliJ IDEA.
User: 14489
Date: 2021/6/10
Time: 23:17
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Top</title>
<link rel="stylesheet" href="../style/topStyle.css" type="text/css"/>
</head>
<body>
<h1>点名与提问计分系统</h1>
<h3>
${userName}
</h3>
<div class="btn">
<button>退出中心</button>
</div>
<div id="time">
</div>
<script type="text/javascript">
setInterval("time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
</script>
</body>
</html>
left.jsp
<%--
Created by IntelliJ IDEA.
User: 14489
Date: 2021/6/10
Time: 23:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%@ page import="cn.egret.pojo.Clazz" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Left</title>
<link rel="stylesheet" href="../style/leftStyle.css" type="text/css"/>
</head>
<body>
<div id="left">
<div style="display:flex; width: 100%; height: 50px; font-size: 16pt;
background-color: azure; align-items: center; background-color: cornflowerblue">
<p style="color: white; font-size: 16px;"> 班级</p>
</div>
<% List<Clazz> classList = (List<Clazz>) request.getAttribute("classList");%>
<a href="views/main.html">
<div style="width:100%; display: flex; flex-direction: column; margin-left: 2px;">
<c:forEach var="cla" items="${classList}">
<div style="width: 160px; text-align:center; margin: 10px 0 10px 0; font-size: 10px;">
<a href="attendance.html?classId=${cla.getId()}"
target='views/attendance'>* ${cla.getName()}</a></br>
</div>
</c:forEach>
</div>
</a>
</div>
</body>
</html>
attendance.jsp
<%--
Created by IntelliJ IDEA.
User: 14489
Date: 2021/6/10
Time: 23:17
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.List" %>
<%@ page import="cn.egret.pojo.Attendance" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Attendance</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="../style/attendanceStyle.css" type="text/css"/>
<script type="text/javascript" src="../scripts/attendanceJs.js"></script>
</head>
<body>
<div class="bigButtons">
<button class="bigButton" οnclick="randomGet()">随机</button>
<button class="bigButton" οnclick="orderGet(1)">正序</button>
<button class="bigButton" οnclick="orderGet(-1)">反序</button>
</div>
<%
List<Attendance> studentList = (List<Attendance>) request.getAttribute("studentList");
int classId = (int) request.getAttribute("classId");
%>
<table id="attendanceTable" οnmοuseοver="rowTouch()">
<c:set var="flag" value="${0}"></c:set>
<c:forEach var="attendance" items="${studentList}">
<tr>
<c:if test="${flag == 0}">
<td class="tdHead">${attendance.getSequence()}</td>
<td class="tdHead">${attendance.getStatus()}</td>
<td class="tdHead">${attendance.getId()}</td>
<td class="tdHead">${attendance.getName()}</td>
<c:forEach var="temp" begin="0" end="${attendance.getMarksLength()}">
<td class="tdHead">${attendance.getMarks()[temp]}</td>
</c:forEach>
</c:if>
<c:if test="${flag != 0}">
<c:set var="res" value="${flag % 2}"></c:set>
<c:if test="${res == 0}">
<td class="gra">${attendance.getSequence()}</td>
<td class="gra">${attendance.getStatus()}</td>
<td class="gra">${attendance.getId()}</td>
<td class="gra">${attendance.getName()}</td>
<c:forEach var="temp" begin="0" end="${attendance.getMarksLength()}">
<td class="gra">${attendance.getMarks()[temp]}</td>
</c:forEach>
</c:if>
<c:if test="${res != 0}">
<td>${attendance.getSequence()}</td>
<td>${attendance.getStatus()}</td>
<td>${attendance.getId()}</td>
<td>${attendance.getName()}</td>
<c:forEach var="temp" begin="0" end="${attendance.getMarksLength()}">
<td>${attendance.getMarks()[temp]}</td>
</c:forEach>
</c:if>
</c:if>
</tr>
<c:set var="flag" value="${flag+1}"></c:set>
</c:forEach>
</table>
<div id="popBox">
<div class="infoAndColButtons">
<div class="info">
<p id="text1" class="text1"></p>
<p id="text2" class="text2"></p>
</div>
<div class="colButtons">
<button class="colButton" οnclick="quit()">关闭</button>
<button class="colButton" οnclick="changeScore(+1,${classId})">+1</button>
<button class="colButton" οnclick="changeScore(+2,${classId})">+2</button>
<button class="colButton" οnclick="changeScore(+5,${classId})">+5</button>
<button class="colButton" οnclick="changeScore(-2,${classId})">-2</button>
</div>
</div>
<div class="rowButtons">
<button class="rowButton" οnclick="notTake(${classId})">未修</button>
<button class="rowButton" οnclick="changeState('J',${classId})">请假</button>
<button class="rowButton" οnclick="changeState('X',${classId})">旷课</button>
<button class="rowButton" οnclick="changeState('L',${classId})">迟到</button>
<button class="rowButton" οnclick="reSet(${classId})">还原</button>
<button class="rowButton" οnclick="changeStudent(-1)">上一个</button>
<button class="rowButton" οnclick="changeStudent(1)">下一个</button>
</div>
</div>
</body>
</html>
六、style内各文件
attendanceStyle.css
body {
background-color: white;
}
.bigButtons {
background-color: #ADD8E6;
width: 100%;
height: 6em;
margin-bottom: 0.8em;
}
.bigButton {
width: 30%;
height: 80%;
color: #3E6AA2;
font-size: 35px;
margin: 12px;
}
.high {
height: 100px;
color: red;
font-size: 25px;
}
td {
border: 1px solid cornflowerblue;
text-align: center;
background-color: white;
}
td:active {
background: lightblue;
}
.tdHead {
color: midnightblue;
background-color: #C4EDFF;
}
.gra {
background-color: lightgray;
}
#popBox {
display: none;
position: fixed;
bottom: 8em;
left: 20em;
width: 30em;
height: 20em;
border: 3px solid darkblue;
z-index: 10;
background-color: #EEEEEE;
}
.infoAndColButtons {
display: flex;
flex-direction: row;
width: 30em;
height: 16em;
}
.info {
width: 20em;
height: 16em;
}
.text1 {
font-size: 1.5em;
color: red;
margin: 4em 4em 0em 4.5em;
text-align: center;
}
.text2 {
font-size: 1.5em;
color: red;
margin: 0.5em 4em 0em 4.5em;
text-align: center;
}
.colButtons {
display: flex;
flex-direction: column;
width: 10em;
height: 16em;
}
.colButton {
background-color: #EEEEEE;
margin: 0.8em 0em 0.8em 4em;
font-size: 1em;
color: #2E5097;
width: 4em;
}
.rowButtons {
display: flex;
flex-direction: row;
width: 30em;
height: 4em;
}
.rowButton {
background-color: #EEEEEE;
margin: 0.4em;
font-size: 1em;
color: #2E5097;
height: 2em;
}
leftStyle.css
body {
background-color: white;
margin: 0 0 0 0;
}
#left {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 0 0;
}
a {
text-decoration: none;
}
a:hover {
color: cornflowerblue;
}
topStyle.css
body {
display: flex;
background-color: #E6FFFF;
}
h1 {
color: darkgoldenrod;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 20px 0 30px;
letter-spacing: 8px;
font-family: 华光胖头鱼_CNKI;
}
h3 {
color: black;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 20px 0 0;
}
button {
width: auto;
height: 30px;
background-color: aqua;
}
.btn {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 0 0;
}
#time {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 0 45em;
}
七、scripts内文件
attendance.js
let sequence = "", status = "", id = "", name = "", marks = "";
function rowTouch() {
let rows = document.getElementById("attendanceTable").rows;
for (let i = 1; i < rows.length; i++) {
let cells = rows[i].cells;
for (let j = 0; j < cells.length; j++) {
cells[j].addEventListener("click", function () {
for (let k = 1; k < rows.length; k++) {
if (rows[k].classList.contains("high")) {
rows[k].classList.remove("high");
}
}
sequence = cells[0].innerText;
status = cells[1].innerText;
id = cells[2].innerText;
name = cells[3].innerText;
marks = "";
for (let k = 4; k < cells.length; k++) {
if (k == cells.length - 1) {
marks += cells[k].innerText;
} else {
marks += cells[k].innerText + ",";
}
}
rows[i].classList.add("high");
document.getElementById("text1").innerText = id;
document.getElementById("text2").innerText = name;
document.getElementById("popBox").style.display = "block";
})
}
}
}
function quit() {
let rows = document.getElementById("attendanceTable").rows;
for (let i = 0; i < rows.length; i++) {
if (rows[i].classList.contains("high")) {
rows[i].classList.remove("high");
}
}
document.getElementById("popBox").style.display = "none";
}
function changeScore(num, classId) {
let rows = document.getElementById("attendanceTable").rows;
let tempMarks = marks.trim().split(",");
let index = tempMarks.length - 1;
let score = tempMarks[index];
score = parseInt(score) + parseInt(num);
while (isNaN(score)) {
score = tempMarks[index - 1];
score = parseInt(score) + parseInt(num);
index--;
}
tempMarks[index] = score;
marks = "";
for (let i = 0; i <= index; i++) {
if (i == index) {
marks += tempMarks[i];
} else {
marks += tempMarks[i] + ",";
}
}
try {
let httpRequest;
if (window.XMLHttpRequest) {
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
for (let i = 1; i < rows.length; i++) {
if (i == sequence) {
let cells = rows[i].cells;
cells[index + 4].innerText = score;
break;
}
}
httpRequest.open("GET", "dealAttServlet?classId=" + classId + "&student=" + sequence + "," + status + "," + id + "," + name + "," + marks + "&time=" + new Date().getTime(), true);
httpRequest.send();
} catch (e) {
}
}
function notTake(classId) {
let rows = document.getElementById("attendanceTable").rows;
status = "NotTake";
try {
let httpRequest;
if (window.XMLHttpRequest) {
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
for (let i = 1; i < rows.length; i++) {
if (i == sequence) {
let cells = rows[i].cells;
cells[1].innerText = httpRequest.responseText.split(",")[1];
break;
}
}
}
}
}
httpRequest.open("GET", "dealAttServlet?&classId=" + classId + "&student=" + sequence + "," + status + "," + id + "," + name + "," + marks + "&time=" + new Date().getTime(), true);
httpRequest.send();
} catch (e) {
}
}
function changeState(st, classId) {
let rows = document.getElementById("attendanceTable").rows;
let tempMarks = marks.trim().split(",");
let index = tempMarks.length - 1;
let flag = tempMarks[index];
while (isNaN(parseInt(flag) || !(flag == "J" || flag == "X" || flag == "L"))) {
index--;
flag = tempMarks[index];
}
tempMarks[index] = st;
marks = "";
for (let i = 0; i <= index; i++) {
if (i == index) {
marks += tempMarks[i];
} else {
marks += tempMarks[i] + ",";
}
}
try {
let httpRequest;
if (window.XMLHttpRequest) {
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
for (let i = 1; i < rows.length; i++) {
if (i == sequence) {
let cells = rows[i].cells;
cells[index + 4].innerText = st;
break;
}
}
httpRequest.open("GET", "dealAttServlet?classId=" + classId + "&student=" + sequence + "," + status + "," + id + "," + name + "," + marks + "&time=" + new Date().getTime(), true);
httpRequest.send();
} catch (e) {
}
}
function reSet(classId) {
let rows = document.getElementById("attendanceTable").rows;
let tempMarks = marks.trim().split(",");
let index = tempMarks.length - 1;
let flag = tempMarks[index];
while (isNaN(parseInt(flag) || !(flag == "J" || flag == "X" || flag == "L"))) {
index--;
flag = tempMarks[index];
}
tempMarks[index] = "0";
marks = "";
status = "OK";
for (let i = 0; i <= index; i++) {
if (i == index) {
marks += tempMarks[i];
} else {
marks += tempMarks[i] + ",";
}
}
try {
let httpRequest;
if (window.XMLHttpRequest) {
//在IE6以上的版本以及其他内核的浏览器(Mozilla)等
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//在IE6以下的版本
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
for (let i = 1; i < rows.length; i++) {
if (i == sequence) {
let cells = rows[i].cells;
cells[index + 4].innerText = "0";
cells[1].innerText = "OK";
break;
}
}
httpRequest.open("GET", "dealAttServlet?classId=" + classId + "&student=" + sequence + "," + status + "," + id + "," + name + "," + marks + "&time=" + new Date().getTime(), true);
httpRequest.send();
} catch (e) {
}
}
function changeStudent(num) {
let rows = document.getElementById("attendanceTable").rows;
for (let i = 1; i < rows.length; i++) {
let cells = rows[i].cells;
if (sequence === cells[0].innerText) {
let index = parseInt(i) + parseInt(num);
if (index <= 0) {
index = rows.length - 1;
}
if (index >= rows.length) {
index = 1;
}
cells = rows[index].cells;
for (let k = 1; k < rows.length; k++) {
if (rows[k].classList.contains("high")) {
rows[k].classList.remove("high");
}
}
sequence = cells[0].innerText;
status = cells[1].innerText;
id = cells[2].innerText;
name = cells[3].innerText;
marks = "";
for (let k = 4; k < cells.length; k++) {
if (k == cells.length - 1) {
marks += cells[k].innerText;
} else {
marks += cells[k].innerText + ",";
}
}
rows[index].classList.add("high");
document.getElementById("text1").innerText = id;
document.getElementById("text2").innerText = name;
break;
}
}
}
function randomGet() {
let rows = document.getElementById("attendanceTable").rows;
let rowLength = rows.length - 1;
let ran = parseInt(Math.random() * parseInt(rowLength), 10) + 1;
let cells = rows[ran].cells;
for (let k = 1; k < rows.length; k++) {
if (rows[k].classList.contains("high")) {
rows[k].classList.remove("high");
}
}
sequence = cells[0].innerText;
status = cells[1].innerText;
id = cells[2].innerText;
name = cells[3].innerText;
marks = "";
for (let k = 4; k < cells.length; k++) {
if (k == cells.length - 1) {
marks += cells[k].innerText;
} else {
marks += cells[k].innerText + ",";
}
}
rows[ran].classList.add("high");
document.getElementById("text1").innerText = id;
document.getElementById("text2").innerText = name;
document.getElementById("popBox").style.display = "block";
}
function orderGet(num) {
let rows = document.getElementById("attendanceTable").rows;
let flag = false;
for (let k = 1; k < rows.length; k++) {
if (rows[k].classList.contains("high")) {
flag = true;
break;
}
}
if (flag) {
changeStudent(num);
} else {
let index;
if (num == 1) {
index = 1;
} else {
index = rows.length - 1;
}
cells = rows[index].cells;
sequence = cells[0].innerText;
status = cells[1].innerText;
id = cells[2].innerText;
name = cells[3].innerText;
marks = "";
for (let k = 4; k < cells.length; k++) {
if (k == cells.length - 1) {
marks += cells[k].innerText;
} else {
marks += cells[k].innerText + ",";
}
}
rows[index].classList.add("high");
document.getElementById("text1").innerText = id;
document.getElementById("text2").innerText = name;
document.getElementById("popBox").style.display = "block";
}
}
八、web.xml的创建
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<welcome-file-list>
<welcome-file>/views/login.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>myServlet</servlet-name>
<servlet-class>cn.egret.servlet.SystemServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>myServlet</servlet-name>
<url-pattern>/views/main.html</url-pattern>
<url-pattern>/views/top.html</url-pattern>
<url-pattern>/views/left.html</url-pattern>
<url-pattern>/views/attendance.html</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>dealAttServlet</servlet-name>
<servlet-class>cn.egret.servlet.dealAttServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dealAttServlet</servlet-name>
<url-pattern>/views/dealAttServlet</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>cn.egret.servlet.UserServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserServlet</servlet-name>
<url-pattern>/views/UserServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>1</session-timeout>
</session-config>
<filter>
<filter-name>SessionFilter</filter-name>
<filter-class>cn.egret.servlet.SessionFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>SessionFilter</filter-name>
<url-pattern>/views/main.html</url-pattern>
<url-pattern>/views/attendance.html</url-pattern>
</filter-mapping>
</web-app>
三、最终效果
登录页面
主页面