JavaWeb项目——学生点名系统

一、项目概述

​ 本项目所完成的是一个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">密&nbsp;&nbsp;码：<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;">&nbsp;&nbsp;&nbsp;班级</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'>*&nbsp;${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" onclick="randomGet()">随机</button>
    <button class="bigButton" onclick="orderGet(1)">正序</button>
    <button class="bigButton" onclick="orderGet(-1)">反序</button>
</div>

<%
    List<Attendance> studentList = (List<Attendance>) request.getAttribute("studentList");
    int classId = (int) request.getAttribute("classId");
%>

<table id="attendanceTable" onmouseover="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" onclick="quit()">关闭</button>
            <button class="colButton" onclick="changeScore(+1,${classId})">+1</button>
            <button class="colButton" onclick="changeScore(+2,${classId})">+2</button>
            <button class="colButton" onclick="changeScore(+5,${classId})">+5</button>
            <button class="colButton" onclick="changeScore(-2,${classId})">-2</button>
        </div>
    </div>

    <div class="rowButtons">
        <button class="rowButton" onclick="notTake(${classId})">未修</button>
        <button class="rowButton" onclick="changeState('J',${classId})">请假</button>
        <button class="rowButton" onclick="changeState('X',${classId})">旷课</button>
        <button class="rowButton" onclick="changeState('L',${classId})">迟到</button>
        <button class="rowButton" onclick="reSet(${classId})">还原</button>
        <button class="rowButton" onclick="changeStudent(-1)">上一个</button>
        <button class="rowButton" onclick="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>

三、最终效果

登录页面

主页面