(Java大作业)基于Java和HTML5的学生成绩管理系统web版
一:
一:小组成员及分工:
组长:陈宇博,组员:朱泳臻
二:项目名称:
一. 学生成绩管理
三:以下是功能介绍:
1.添加学生功能:姓名、学号、性别、出生年月日。
2.添加学生成绩功能:假设每个人都选修了数学、Java与体育。
3.根据学生学号查找学生成绩,并在界面上显示姓名、学号和成绩。
4. 根据学生姓名(支持模糊匹配)查找学生成绩,并在界面上显示姓名、学号和成绩,如果有多个相同姓名学生存在,一起显示出来,姓名不存在的给出提示信息
5. 支持对学生信息的修改与删除(要在文件或数据库中有所体现),不能修改学号。
6.测试:支持随机生成10万个学生及其姓名、学号、成绩放入文本文件,以进行测试。(学号不能相同,每颗的成绩以80分为中心成正态分本)(重要加分项)
7.支持用户登录、验证操作
8:界面: Web
9:数据存储在数据库,使用JDBC封装DBUtil和DAO模式完成对数据库的访问。
四:系统概念模型:
系统功能架构模型
功能流程图:
五:本系统所运用到的技术栈:
前端技术:html、css、javascript
Web应用服务器:Tomcat
数据库技术:MySql
后端技术:Spring
六:本系统所运用的编程工具
代码编写:IntelliJ IDEA
数据库:SQLyog
Web应用服务器:Tomcat8.5
项目管理工具:Maven
代码托管服务:gitee
八:HTML端 (实现该项目界面在web端的呈现)
代码
以下展示各个界面主要代码
登录界面代码展示:
<%--
Created by IntelliJ IDEA.
User: 30890
Date: 2023/4/16
Time: 21:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录界面</title>
<style>
#outerLoginFrame{
width: 500px;
height: 400px;
margin-left: 400px;
margin-top: 20px;
}
#innerLoginFrame{
width: 360px;
margin-left: 100px;
margin-top: 45px;
color: grey;
font-size: 25px;
}
input{
width: 220px;
height: 30px;
}
#head{
width: 1450px;
height: 130px;
background-image: url("20230425171706.png");
background-size: cover;
background-position: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="outerLoginFrame" style="border: grey 2px solid">
<%-- <span style="position: center"></span>--%>
<h1 style="margin-top: 40px;margin-left: 100px;">学 生 成 绩 管 理 系 统</h1>
<div id="innerLoginFrame" style="font-size: 30px">
<form action="userLogin" method="post" onsubmit="return checkLogin()">
账户:<input type="text" style="font-size: 28px" id="userAccount" name="userAccount" class="myText"><br><br>
密码:<input type="password" style="font-size: 28px" id="userPassword" name="userPassword" class="myText"><br><br>
<input style="width: 140px;margin-left: 20px" type="submit" value="登录">
<span style="color: red;font-size: 15px" id="tip">${tip}</span>
</form>
</div>
</div>
</body>
</html>
<script>
function checkLogin() {
let userAccount = document.getElementById("userAccount").value;
let userPassword = document.getElementById("userPassword").value;
if(userAccount==null||userAccount.trim()==""){
document.getElementById("tip").innerHTML = "账户不能为空";
return false;
}
if(userPassword==null||userPassword.trim()==""){
document.getElementById("tip").innerHTML = "密码不能为空";
return false;
}
return true;
}
</script>
添加学生信息界面代码展示:
<%--
Created by IntelliJ IDEA.
User: 30890
Date: 2023/4/17
Time: 9:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
table{
width: 1350px;
}
tr,td{
border: grey 1px ;
}
td{
height: 40px;
}
table td{
height: 60px;
vertical-align: middle!important; /*设置文字垂直居中*/
text-align: center;
}
tr,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}
.con-b .row .lf{
width: 15%;
text-align: center;
padding: 10px;
}
.con-b .row .rg{
width: 85%;
}
.con-b tr:nth-of-type(odd){
background-color: #f2f2f2;
}
#content{
width: 1300px;
height: 70px;
float: right;
border: grey 1px solid;
margin-right: 40px;
color: grey;
font-size: 50px;
}
</style>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
</head>
<body>
<%--<div style=" width:1300px;height:100px;margin-lef:450px;background-color: aliceblue;border: red 1px solid"></div>--%>
<div id="content">
<%-- searchMyStudent matchText--%>
<div style="float: right;height: 70px">
<c:if test="${session_person.getUserIdentify()==0}">
<form action="student.action?action=searchTeacher" method="post">
</c:if>
<c:if test="${session_person.getUserIdentify()==1}">
<form action="tea.action?action=searchMyStudent" method="post">
</c:if>
<c:if test="${session_person.getUserIdentify()==2}">
<form action="man.action?action=search" method="post">
</c:if>
<input type="text" name="matchText" style="height: 35px;width: 500px;font-size: 28px;color: darkslateblue;border: grey solid 1px;">
<input type="submit" style="margin-left: 6px;margin-right: 30px" value="查询">
</form>
</div>
</div>
<br><br>
<table border="1" cellspacing="0" align="center" class="con-b">
<thead>
<%-- `userAccount``userName``userSex``userBirthday``userIdCard``userIdentify``userOtherName`--%>
<tr class="row" style="color: black;font-size: 25px" >
<td class="lf">账户</td>
<td class="lf">姓名</td>
<td class="lf" style="width: 10%">性别</td>
<c:if test="${session_person.getUserIdentify()!=0}">
<td class="lf">生日</td>
<td class="lf">身份证号码</td>
<td class="lf">角色</td>
</c:if>
<c:if test="${session_person.getUserIdentify()!=0}">
<td class="lf">java成绩</td>
<td class="lf">math成绩</td>
<td class="lf">English成绩</td>
</c:if>
<td class="lf">其他名称</td>
<c:if test="${session_person.getUserIdentify()!=0}">
<td>删除</td>
</c:if>
<c:if test="${session_person.getUserIdentify()!=2}">
<td style="width: 10%">操作</td>
</c:if>
</tr>
</thead>
<tbody>
<c:forEach items="${arr}" var="person">
<tr>
<td class="lf">${person.getUserAccount()}</td>
<td class="lf">${person.getUserName()}</td>
<td class="lf">${person.getUserSex()}</td>
<c:if test="${session_person.getUserIdentify()!=0}">
<td class="lf">${person.getUserBirthday()}</td>
<td class="lf">${person.getUserIdCard()}</td>
<td class="lf">
<c:if test="${person.getUserIdentify()==0}">
学生
</c:if>
<c:if test="${person.getUserIdentify()==1}">
老师
</c:if>
</td>
<td class="lf">${person.getUserjavascore()}</td>
<td class="lf">${person.getUsermathscore()}</td>
<td class="lf">${person.getUserenglishscore()}</td>
</c:if>
<td class="lf">${person.getUserOtherName()}</td>
<c:if test="${session_person.getUserIdentify()==1}">
<td>
<img src="del.png" onclick="deleteThisPersonByTeacher('${person.getUserAccount()}')">
</td>
</c:if>
<c:if test="${session_person.getUserIdentify()==2}">
<td>
<img src="del.png" onclick="delThisPerson('${person.getUserAccount()}','${person.getUserIdentify()}')">
</td>
</c:if>
<c:if test="${session_person.getUserIdentify()!=0}">
<td>
<c:if test="${session_person.getUserIdentify()==1}">
<img style="width: 40px;height: 40px" src="detail.jpg" onclick="detailTask('${person.getUserAccount()}')">
<%-- <img src="detail.jpg" onclick="detailTask('${person.getUserAccount()}')">--%>
</c:if>
</td>
</c:if>
<c:if test="${session_person.getUserIdentify()==0}">
<td><img style="width:40px;height: 40px" onclick="addTeacher('${person.getUserAccount()}')" src="addTeacher.png"></td>
</c:if>
</tr>
</c:forEach>
</tbody>
</table>
</body>
<script>
function delThisPerson(userAccount,userIdentify) {
window.location.href = "man.action?action=delThisPerson&userAccount="+userAccount+"&userIdentify="+userIdentify
}
function addTeacher(teacherAccount) {
window.location.href = "student.action?action=addTeacher&teacherAccount="+teacherAccount
}
function detailTask(studentAccount) {
window.location.href = "tea.action?action=goStudentTaskDetail&studentAccount="+studentAccount;
}
function deleteThisPersonByTeacher(studentAccount) {
alert(studentAccount)
window.location.href = "tea.action?action=deleteThisPersonByTeacher&studentAccount="+studentAccount
}
function upThisPerson(userAccount) {
alert("修改:"+userAccount)
}
</script>
</html>
web界面
居中的图片:
九:Java端
部分代码
//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//
package cm.stu.servlet;
import cm.stu.bean.Person;
import cm.stu.service.UserLoginService;
import cm.stu.service.UserLoginServiceImpl;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet({"/userLogin"})
public class UserLoginServlet extends HttpServlet {
public UserLoginServlet() {
}
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String userAccount = req.getParameter("userAccount");
String userPassword = req.getParameter("userPassword");
Person person = new Person(userAccount, userPassword);
UserLoginService ul = new UserLoginServiceImpl();
Person newPerson = ul.getLogin(person);
if (newPerson != null) {
HttpSession session = req.getSession();
session.setAttribute("session_person", newPerson);
req.setAttribute("mainRight", "blank.jsp");
req.getRequestDispatcher("main.jsp").forward(req, resp);
} else {
req.setAttribute("tip", "账户密码不一致");
req.getRequestDispatcher("userLogin.jsp").forward(req, resp);
}
}
}
十:数据库端(创建Maven工程,导入相关jar包依赖)
数据库表设计:
部分代码展示
<%--
Created by IntelliJ IDEA.
User: 30890
Date: 2023/4/17
Time: 19:52
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
#BigBodyFrame{
width: 1600px;
height: 120px;
border: grey 2px solid;
background-image: url("20230425171706.png");
}
#daohang{
width: 250px;
/*height: 100%;*/
float: left;
border: grey 1px solid;
}
#file{
width: 230px;
height: 50px;
margin-left: 11px;
margin-top: 10px;
border: grey 1px solid;
background-color: blue;
}
a{
color: white;
font-size: 26px;
margin-left: 30px;
margin-top: 25px;
}
</style>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link href="${pageContext.request.contextPath}/css/css.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="BigBodyFrame"></div>
<br>
<span style="float: right;color: grey;margin-right: 120px"> 当前用户:${session_person.userName}</span><br>
<c:if test="${session_person.userName=='李四'}">hahha</c:if>
<br>
<div id="daohang">
<c:if test="${session_person.userIdentify == 0}">
<li id="file"><a href="common.action?action=index">查看首页</a></li>
<li id="file"><a href="student.action?action=list">选择老师</a></li>
<li id="file"><a href="student.action?action=goMyTeacher">我的老师</a></li>
<li id="file"><a href="common.action?action=goMyDetail">我的信息</a></li>
<li id="file"><a href="outLogin">退出系统</a></li>
</c:if>
<c:if test="${session_person.userIdentify == 1}">
<li id="file"><a href="common.action?action=index">查看首页</a></li>
<li id="file"><a href="tea.action?action=list">学生管理</a></li>
<li id="file"><a href="tea.action?action=goMyTask">任务管理</a></li>
<li id="file"><a href="tea.action?action=goAddTask">添加任务</a></li>
<li id="file"><a href="common.action?action=goMyDetail">我的信息</a></li>
<li id="file"><a href="outLogin">退出系统</a></li>
</c:if>
<c:if test="${session_person.userIdentify == 2}">
<li id="file"><a href="common.action?action=index">查看首页</a></li>
<li id="file"><a href="man.action?action=list">学生管理</a></li>
<li id="file"><a href="man.action?action=goAddPerson">信息录入</a></li>
<li id="file"><a href="common.action?action=goMyDetail">我的信息</a></li>
<li id="file"><a href="outLogin">退出系统</a></li>
</c:if>
<%-- <div id="file" onclick="clickThis()"></div>--%>
</div>
<jsp:include page="${mainRignt=null?'blank.jsp':mainRight}"></jsp:include>
</body>
</html>
十一:gitee代码托管
链接: link.
十二:心得体会:
制作学生成绩管理系统 web 版是一项全面的工作,需要掌握众多技能和知识。以下是小组在开发这样一个项目中所得到的一些心得体会:
在制作时需要熟悉前端和后端的技术栈要想开发一款良好的学生成绩管理系统,首先需要熟悉前端和后端的技术栈。在前端方面,需要掌握 HTML、CSS、JavaScript 和相关的框架和库。在后端方面需要掌握Java,并且需要了解 Web 开发框架和数据库MySQL。
设计数据库并管理数据
在学生成绩管理系统中,数据库是一个非常重要的组成部分。需要设计出合理的数据库结构,并保证数据的安全性和完整性。此外,需要掌握对数据的读取、添加、修改和删除等操作,以及对数据进行查询和过滤的技巧。
实现基本功能和交互体验
在学生成绩管理系统中,需要实现许多基本功能,如学生信息的添加、编辑和删除,成绩信息的录入和计算,数据的展示和查询等。
总之,制作学生成绩管理系统 web 版需要掌握众多技术和知识,除了以上提到的方面,还需要注意代码的可读性和可维护性,并且要时刻关注用户需求和反馈,不断优化和改进系统的功能和体验。