IDEA+Java+Servlet+JSP+Bootstrap+Mysql+Tomcat实现学生成绩管理系统(上)

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: IDEA+Java+Servlet+JSP+Bootstrap+Mysql+Tomcat实现学生成绩管理系统

一、系统介绍


软件环境

OS:Windows10

IDEA:2018.2

Java:jdk1.8

Mysql:8.0.13

Bootstrap:bootstrap.min.css

Juqery:jquery-ui-1.10.4.custom.min.css

Tomcat:8.5.23

Browser:Chrome


该图书管理系统实现了学生的成绩管理。学生实现了登录登出功能,查看成绩功能。教师端实现了注册登录,对学生成绩和信息进行增删改查的功能,实现Execl导出成绩功能。

数据库有三张表:一张是学生表(student),一张是教师表(teacher),一张是成绩表(score)。


下面是整个工程的截图


20200617204555498.jpg

20200617204611930.jpg

2020061720462817.jpg

20200617204644335.jpg


二、系统展示


1.注册页面


20200617204742517.jpg


2.注册页面


20200617204827714.jpg


3.教师端(学生信息管理)页面


20200617204932504.jpg


4.教师端(添加学生信息)页面

20200617205009881.jpg


5.教师端(学生成绩管理)页面


2020061720510753.jpg


6.教师端(个人信息)页面


20200617205149269.jpg


7.教师端(登出)页面


20200617205238123.jpg


8.学生端(我的成绩)页面


20200617205342507.jpg


9.学生端(个人信息)页面


20200617205414987.jpg


10.学生端(登出)页面


202006172054441.jpg


三、代码实现


1.前端


student(main.jsp)

<%@ page import="dao.StudentDao" %>
<%@ page import="vo.Student" %>
<%@ page import="dao.ScoreDao" %>
<%@ page import="vo.Score" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>main</title>
    <link href="../resources/css/default.css" rel="stylesheet"/>
</head>
<body style="background: #c3e6cb">
<%
    Student student = (Student) session.getAttribute("info");
%>
<div id="page" class="container">
    <div id="header">
        <div id="logo">
            <img src="../userImg/<%=student.getId()%>.jpeg"/>
            <h1><%=student.getName()%></h1>
        </div>
        <div id="menu">
            <ul>
                <li><a href="personal.jsp">个人信息</a></li>
                <li class="current_page_item"><a href="main.jsp">我的成绩</a></li>
                <li><a onclick="return confirm('确认退出?');" href="../exit">退出登录</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="top">
            <h2 style="color: darkslateblue">我的成绩</h2>
            <hr/>
        </div>
        <div class="table">
            <table width="800" frame="box" align="center">
                <tr>
                    <th height="35">学号/工号</th>
                    <th>姓名</th>
                    <th>学院</th>
                    <th>数据库</th>
                    <th>安卓</th>
                    <th>JSP</th>
                    <%--<th>操作</th>--%>
                </tr>
                <%
                    try {
                        ScoreDao scoD = new ScoreDao();
                        StudentDao stuD = new StudentDao();
                        Score stu = scoD.findWithId(student.getId());
                        String name = stuD.findWithId(student.getId()).getName();
                        String major = stuD.findWithId(student.getId()).getMajor();
                %>
                <tr>
                    <td height="35"><%=stu.getId()%></td>
                    <td><%=name%></td>
                    <td><%=major%></td>
                    <td><%=stu.getDatabase()%></td>
                    <td><%=stu.getAndroid()%></td>
                    <td><%=stu.getJsp()%></td>
                    <%--<td><a href="pdf.jsp?id=<%=stu.getId()%>&name=<%=name%>&major=<%=major%>&database=<%=stu.getDatabase()%>&android=<%=stu.getAndroid()%>&jsp=<%=stu.getJsp()%>">PDF</a></td>--%>
                </tr>
                <%
                    }
                    catch (Exception e){
                        out.print(e);
                    }
                %>
            </table>
        </div>
    </div>
</div>
</body>
</html>

student(person.jsp)

<%@ page import="vo.Student" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>main</title>
    <link rel="stylesheet" href="../resources/css/jquery-ui-1.10.4.custom.min.css">
    <script src="../resources/js/jquery-1.10.2.js"></script>
    <script src="../resources/js/jquery-ui-1.10.4.custom.min.js"></script>
    <link href="../resources/css/default.css" rel="stylesheet"/>
</head>
<body style="background: #c3e6cb">
<%
    Student student = (Student) session.getAttribute("info");
%>
<div id="page" class="container">
    <div id="header">
        <div id="logo">
            <img src="../userImg/<%=student.getId()%>.jpeg"/>
            <h1><%=student.getName()%></h1>
        </div>
        <div id="menu">
            <ul>
                <li class="current_page_item"><a href="personal.jsp" style="color: #10707f">个人信息</a></li>
                <li><a href="main.jsp" style="color: #10707f">我的成绩</a></li>
                <li><a onclick="return confirm('确认退出?');" href="../exit" style="color: #10707f">退出登录</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="top">
            <h2 style="color: darkslateblue">我的成绩</h2>
            <hr/>
        </div>
        <div class="info">
            <img src="../userImg/<%=student.getId()%>.jpeg" class="personalImg"><br>
            <form action="../upload_studentImg" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id" value="<%=student.getId()%>">
                <input type="file" name="img">
                <input type="submit" value="上传头像">
            </form>
            <form action="../update_student_email" method="post">
            <table width="400" frame="box" align="center" style="margin-top: 30px;">
                <tr>
                    <td style="font-size: 25px;font-weight: bold">学号</td>
                    <td style="font-size: 25px;font-weight: bold"><%=student.getId()%></td>
                </tr>
                <tr>
                    <td style="font-size: 25px;font-weight: bold">姓名</td>
                    <td style="font-size: 25px;font-weight: bold"><%=student.getName()%></td>
                </tr>
                <tr>
                    <td style="font-size: 25px;font-weight: bold">性别</td>
                    <td style="font-size: 25px;font-weight: bold"><%=student.getSex()%></td>
                </tr>
                <tr>
                    <td style="font-size: 25px;font-weight: bold">学院</td>
                    <td style="font-size: 25px;font-weight: bold"><%=student.getMajor()%></td>
                </tr>
            </table>
            </form>
            <button class="password-btn" style="margin-top: 30px; height: 40px">修改安全信息</button>
        </div>
    </div>
</div>
<%--修改密码对话框--%>
<div id="password-dialog" title="修改安全信息" style="color: #004085">
    <form id="password-form" method="post">
        <input type="hidden" name="id" value="<%=student.getId()%>">
        <%--邮箱: &nbsp;&nbsp;<input type="email" name="email" value="<%=student.getEmail()%>"><br><br>--%>
        新密码:<input type="password" name="password"><br>
        <hr>
        <input style="float: right " type="submit" value="取消" onclick="function x() {
          $('#add-dialog').dialog('close');
        }">
        <input style="float: right; margin-right: 25px" type="submit" value="保存"
               onclick="this.form.action='../update_student_security'">
    </form>
</div>
<script>
    $('#password-dialog').dialog({
        width: 340,
        autoOpen: false,
        draggable: false,
        modal: true,
        resizable: false
    });
    $('.password-btn').click(function () {
        $('#password-dialog').dialog('open');
    });
</script>
<style>
    .ui-dialog-titlebar-close {
        display: none
    }
</style>
</body>
</html>

student(resetPassword.jsp)

<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/28
  Time: 19:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>重置密码</title>
    <link rel="stylesheet" href="../resources/css/bootstrap.min.css">
    <link href="../resources/css/forget.css" type="text/css" rel="stylesheet" />
</head>
<body style="background: #c3e6cb">
<h1 style="margin: 0px 80px; color:darkslateblue; font-family: STCaiyun">学生成绩管理系统</h1><br>
<%
    String id = request.getParameter("id");
    String email = request.getParameter("email");
    String reset = request.getParameter("reset");
    String code = (String) session.getAttribute("reset");
    if (!reset.equals(code)){
%>
    <script>alert("验证码错误!");window.location.href='../forget.jsp';</script>
<%
    }
    else {
%>
    <div class="main">
        <form role="form" action="../update_student_security" method="post">
            <div class="form-group" align="center">
                <input class="form-control" type="text" name="password" placeholder="新密码"><br>
                <input type="hidden" name="id" value="<%=id%>">
                <input type="hidden" name="email" value="<%=email%>">
                <input type="submit" class="btn btn-success" value="提交">
                <input type="button" class="btn btn-info" value="取消" style="margin-left: 20px" onclick="window.location.href='../login.jsp'">
            </div>
        </form>
    </div>
<%
    }
%>
<script src="../resources/js/jquery-3.2.1.min.js"></script>
<script src="../resources/js/popper.min.js"></script>
<script src="../resources/js/bootstrap.min.js"></script>
</body>
</html>

teacher(main.jsp)

<%@ page import="java.util.ArrayList" %>
<%@ page import="vo.Student" %>
<%@ page import="vo.Teacher" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../resources/css/jquery-ui-1.10.4.custom.min.css">
    <script src="../resources/js/jquery-1.10.2.js"></script>
    <script src="../resources/js/jquery-ui-1.10.4.custom.min.js"></script>
    <title>main</title>
    <link href="../resources/css/default.css" rel="stylesheet"/>
</head>
<body style="background: #c3e6cb">
<%
    Teacher teacher = (Teacher) session.getAttribute("info");
    ArrayList<Student> stus = (ArrayList<Student>) session.getAttribute("onePageStudent");
    int sumIndex = (int) session.getAttribute("sumIndex");
%>
<div id="page" class="container">
    <div id="header">
         logo部分
        <div id="logo">
            <img src="../userImg/<%=teacher.getId()%>.jpeg"/>
            <h1><%=teacher.getId()%>
            </h1>
        </div>
        <%-- 左面的功能栏 --%>
        <div id="menu">
            <ul>
                <li><a href="personal.jsp">个人信息</a></li>
                <li class="current_page_item"><a href="../one_page_student">学生信息管理</a></li>
                <li><a href="../one_page_score">学生成绩管理</a></li>
                <li><a onclick="return confirm('确认退出?');" href="../exit">退出登录</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="top">
            <h2 style="color: darkslateblue">学生成绩管理</h2>
            <hr/>
            <button class="btn-add" style="color: #2980b9">添加学生信息</button>
            <div class="find">
                <form action="../one_page_student" method="post">
                    <input id="find-text" type="text" name="key" placeholder="输入学号/工号或姓名搜索">
                    <input class="find-btn" type="submit" value="搜索">
                </form>
            </div>
        </div>
        <div class="table">
            <table id="table" width="800" frame="box" align="center">
                <tr>
                    <th height="35">学号/工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>学院</th>
                    <th>操作</th>
                </tr>
                <%
                    for (Student stu : stus) {
                %>
                        <tr>
                            <form method="post" action="../update_student">
                                <td height="35"><%=stu.getId()%></td>
                                <td><input value="<%=stu.getName()%>" name="stuname" class="table-input"></td>
                                <td><input value="<%=stu.getSex()%>" name="stusex" class="table-input"></td>
                                <td><%=stu.getSchool_date()%></td>
                                <td><input value="<%=stu.getMajor()%>" name="stumajor" class="table-input" style="width: 110px"></td>
                                <input value="<%=stu.getId()%>" name="stuno" type="hidden">
                                <td><input type="submit" class="update-btn" value="修改">&nbsp;
                                    <a class="btn-delete" onclick="return confirm('确定要删除吗?');"
                                       href=<%="'../delete_student?id=" + stu.getId() + "'"%>>删除</a>&nbsp;&nbsp;
                                    <a href="../one_page_score?id=<%=stu.getId()%>" style="color: #117a8b">学生成绩</a>
                                </td>
                            </form>
                        </tr>
                <%
                    }
                %>
            </table>
        </div>
        <%
            if (sumIndex > 1){
        %>
                <div id="index">
                    <a href="../one_page_student?index=1">首页</a>
                    <%
                        for (int i=1; i<=sumIndex; i++){
                    %>
                            <a href="../one_page_student?index=<%=i%>">第<%=i%>页</a>
                    <%
                        }
                    %>
                    <a href="../one_page_student?index=<%=sumIndex%>">尾页</a>
                </div>
        <%
            }
        %>
    </div>
</div>
<%--添加学生信息对话框--%>
<div id="add-dialog" title="添加学生信息">
    <form id="add-form" method="post">
        学号:<input name="id" type="text"><br>
        姓名:<input name="name" type="text"><br>
        性别:<input name="sex" type="text"><br>
        班级:<input name="school_date" type="text">
        学院:<input name="major" type="text"><br>
        <hr>
        <input style="float: right" type="submit" value="取消" onclick="function x() {
          $('#add-dialog').dialog('close');
        }">
        <input style="float: right; margin-right: 25px" type="submit" value="确定"
               onclick="this.form.action='../add_student'">
    </form>
</div>
<style>
    .ui-dialog-titlebar-close {
        display: none
    }
</style>
<script>
    $('#add-dialog').dialog({
        width: 310,
        autoOpen: false,
        draggable: false,
        modal: true,
        resizable: false
    });
    $('.btn-add').click(function () {
        $('#add-dialog').dialog('open');
    });
</script>
</body>
</html>

teacher(personal.jsp)

<%@ page import="vo.Teacher" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>main</title>
    <link href="../resources/css/default.css" rel="stylesheet"/>
</head>
<body style="background: #c3e6cb">
<%
    Teacher teacher = (Teacher) session.getAttribute("info");
%>
<div id="page" class="container">
    <div id="header">
        <div id="logo">
            <img src="../userImg/<%=teacher.getId()%>.jpeg"/>
            <h1><%=teacher.getId()%>
            </h1>
        </div>
        <div id="menu">
            <ul>
                <li class="current_page_item"><a href="personal.jsp">个人信息</a></li>
                <li><a href="../one_page_student">学生信息管理</a></li>
                <li><a href="../one_page_score">学生成绩管理</a></li>
                <li><a onclick="return confirm('确认退出?');" href="../exit">退出登录</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="top">
            <h2 style="color: darkslateblue">个人信息</h2>
            <hr/>
        </div>
        <div class="info">
            <img src="../userImg/<%=teacher.getId()%>.jpeg" class="personalImg"><br>
            <form action="../upload_teacherImg" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id" value="<%=teacher.getId()%>">
                <input type="file" name="img">
                <input type="submit" value="上传头像">
            </form>
            <form method="post" action="../update_teacher" class="personalForm">
                <input name="uid" value="<%=teacher.getId()%>" type="hidden">
                姓名: <input type="text" name="name" value="<%=teacher.getName()%>" class="personalInput"><br>
                性别: <input type="text" name="sex" value="<%=teacher.getSex()%>" class="personalInput"><br>
                邮箱: <input type="text" name="email" value="<%=teacher.getEmail()%>" class="personalInput"><br>
                密码: <input type="text" name="password" value="<%=teacher.getPassword()%>" class="personalInput"><br>
                <input type="submit" value="保存" style="width: 100px; height: 30px; margin-top: 20px">
            </form>
        </div>
    </div>
</div>
</body>
</html>

teacher(resetPassword.jsp)

<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/28
  Time: 19:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>重置密码</title>
    <link rel="stylesheet" href="../resources/css/bootstrap.min.css">
    <link href="../resources/css/forget.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1 style="margin: 0px 80px; color:darkslateblue; font-family: STCaiyun">学生成绩管理系统</h1><br>
<%
    String id = request.getParameter("id");
    String reset = request.getParameter("reset");
    String code = (String) session.getAttribute("reset");
    if (!reset.equals(code)){
%>
        <script>alert("验证码错误!");window.location.href='../forget.jsp';</script>
<%
    } else {
%>
        <div class="main">
            <form role="form" action="../update_teacher_password" method="post">
                <div class="form-group" align="center">
                    <input type="text" class="form-control" name="password" placeholder="新密码"><br>
                    <input type="hidden" name="id" value="<%=id%>">
                    <input type="submit" class="btn btn-success" value="提交">
                    <input type="button" class="btn btn-info" value="取消" style="margin-left: 20px" onclick="window.location.href='../login.jsp'">
                </div>
            </form>
        </div>
<%
    }
%>
<script src="../resources/js/jquery-3.2.1.min.js"></script>
<script src="../resources/js/popper.min.js"></script>
<script src="../resources/js/bootstrap.min.js"></script>
</body>
</html>

teacher(score.jsp)

<%@ page import="vo.Teacher" %>
<%@ page import="vo.Score" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dao.StudentDao" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>main</title>
    <link href="../resources/css/default.css" rel="stylesheet"/>
</head>
<body style="background: #c3e6cb">
<%
    Teacher teacher = (Teacher) session.getAttribute("info");
    ArrayList<Score> stus = (ArrayList<Score>) session.getAttribute("onePageScore");
    int sumIndex = (int) session.getAttribute("sumScoreIndex");
%>
<div id="page" class="container">
    <div id="header">
        <div id="logo">
            <img src="../userImg/<%=teacher.getId()%>.jpeg"/>
            <h1><%=teacher.getId()%>
            </h1>
        </div>
        <div id="menu">
            <ul>
                <li><a href="personal.jsp">个人信息</a></li>
                <li><a href="../one_page_student">学生信息管理</a></li>
                <li class="current_page_item"><a href="../one_page_score">学生成绩管理</a></li>
                <li><a onclick="return confirm('确认退出?');" href="../exit">退出登录</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div class="top">
            <h2 style="color: darkslateblue">学生成绩管理</h2>
            <hr/>
        </div>
        <form method="post" action="../update_score" style="height: 525px; margin-top: 20px">
            <input type="button" class="btn-add" onclick="location.href='score_excel.jsp';" value="导出EXCEL">
            <input type="submit" class="btn-add" style="float: right;margin-bottom: 30px" value="修改">
            <div class="table" style="margin-top: 20px; height: 525px">
                <table id="table" width="800" frame="box" align="center">
                    <tr>
                        <th height="35">学号</th>
                        <th>姓名</th>
                        <th>学院</th>
                        <th>数据库</th>
                        <th>安卓</th>
                        <th>JSP</th>
                    </tr>
                    <%
                        try {
                            StudentDao stuD = new StudentDao();
                            for (Score stu : stus) {
                                String name = stuD.findWithId(stu.getId()).getName();
                                String major = stuD.findWithId(stu.getId()).getMajor();
                    %>
                    <tr>
                        <td height="35"><%=stu.getId()%></td>
                        <td><%=name%></td>
                        <td><%=major%></td>
                        <td><input value="<%=stu.getDatabase()%>" name="database" class="table-input"></td>
                        <td><input value="<%=stu.getAndroid()%>" name="android" class="table-input"></td>
                        <td><input value="<%=stu.getJsp()%>" name="jsp" class="table-input"></td>
                        <input value="<%=stu.getId()%>" name="id" type="hidden">
                    </tr>
                    <%
                            }
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    %>
                </table>
            </div>
        </form>
        <%-- 展示下面的页签数 --%>
        <%
            if (sumIndex > 1){
        %>
                <div id="index">
                    <a href="../one_page_score?index=1">首页</a>
                    <%
                        for (int i = 1; i <= sumIndex; i++) {
                    %>
                    <a href="../one_page_score?index=<%=i%>">第<%=i%>页</a>
                    <%
                        }
                    %>
                    <a href="../one_page_score?index=<%=sumIndex%>">尾页</a>
                </div>
        <%
            }
        %>
    </div>
</div>
</body>
</html>

teacher(score_excel.jsp)

<%@ page import="dao.ScoreDao" %>
<%@ page import="vo.Score" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="dao.StudentDao" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="application/msexcel" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>main</title>
</head>
<body style="background: #c3e6cb">
<%
    out.clearBuffer();
    response.setHeader("Content-Disposition", "attachment;filename=excel.xls");
%>
<table align="center" border="1">
    <tr>
        <th height="35">学号</th>
        <th>姓名</th>
        <th>学院</th>
        <th>数据库</th>
        <th>安卓</th>
        <th>JSP</th>
    </tr>
    <%
        try {
            ScoreDao scoD = new ScoreDao();
            StudentDao stuD = new StudentDao();
            ArrayList<Score> stus = scoD.getOnePage(1, 10000);
            for (Score stu : stus) {
                String name = stuD.findWithId(stu.getId()).getName();
                String major = stuD.findWithId(stu.getId()).getMajor();
    %>
    <tr>
            <td align="center"><%=stu.getId()%></td>
            <td align="center"><%=name%></td>
            <td align="center"><%=major%></td>
            <td align="center"><%=stu.getDatabase()%></td>
            <td align="center"><%=stu.getAndroid()%></td>
            <td align="center"><%=stu.getJsp()%></td>
    </tr>
    <%
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    %>
</table>
</body>
</html>

code.jsp

<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="javax.imageio.ImageIO" %>
<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/22
  Time: 18:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="image/JPEG;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    response.setCharacterEncoding("utf-8");
    response.setHeader("Cache-Control", "no-cache");
    //创建图像
    int width = 60, height = 20;
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    //获取画笔
    Graphics g = image.getGraphics();
    //设定背景色
    g.setColor(new Color(100, 200, 200));
    g.fillRect(0, 0, width, height);
    //随机产生四位数字
    Random rnd = new Random();
    int randNum = rnd.nextInt(8999) + 1000;
    String randStr = String.valueOf(randNum);
    //将验证码存入session
    session.setAttribute("randStr", randStr);
    //显示到图像中
    g.setColor(Color.BLACK);
    g.setFont(new Font("", Font.PLAIN, 20));
    g.drawString(randStr, 10, 17);
    //随机产生100个干扰点
    for (int i = 0; i < 100; i++) {
        int x = rnd.nextInt(width);
        int y = rnd.nextInt(height);
        g.drawOval(x, y, 1, 1);
    }
    //输出到页面
    ImageIO.write(image, "jpeg", response.getOutputStream());
    out.clear();
    out = pageContext.pushBody();
%>
</body>
</html>

login.jsp

<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>请登陆</title>
    <link rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link href="resources/css/login.css" type="text/css" rel="stylesheet" />
</head>
<body>
<script>
    function check(form){
        if (form.user.value === "") {
            alert("请输入账号!");
            return false;
        }
        if (form.password.value === "") {
            alert("请输入密码!");
            return false;
        }
        return true;
    }
</script>
<h1>学生成绩管理系统</h1><br>
<div class="main">
    <h5 class="title">
        <a href="login.jsp" id="login">登录</a>
        <b>&nbsp;·&nbsp;</b>
        <a href="register.jsp" id="register">注册</a>
    </h5>
    <form action="check_login" method="post" onsubmit="return check(this)">
        <div class="form-group" >
            <input type="text" name="user" class="form-control user" placeholder="请输入用户名">
            <input type="password" name="password" class="form-control password" placeholder="请输入密码">
            <div class="remember-btn">
                <input type="checkbox" name="remember" value="true">
                <span style="color: #d4edda">记住我</span>
            </div>
            <%--<a href="forget.jsp" class="help" style="color: #1b1e21">登录遇到问题?</a>--%>
            <input type="submit" value="登录" class="btn btn-primary btn-lg btn-block" />
        </div>
    </form>
</div>
<script src="resources/js/jquery-3.2.1.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
</body>
</html>

register.jsp

<%--
  Created by IntelliJ IDEA.
  User: 007
  Date: 2018/11/1
  Time: 20:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>注册</title>
    <link rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link href="resources/css/register.css" type="text/css" rel="stylesheet" />
</head>
<body>
<script>
    function check(form){
        if (form.user.value === "") {
            alert("请输入账号!");
            return false;
        }
        if (form.password1.value === "") {
            alert("请输入密码!");
            return false;
        }
        return true;
    }
    function refresh() {
        var i=Math.random();
        document.getElementById("image").src = "code.jsp?a="+i;
    }
</script>
<h1>学生成绩管理系统</h1><br>
<div class="main">
    <h5 class="title" >
        <a href="login.jsp" id="login">登录</a>
        <b>&nbsp;·&nbsp;</b>
        <a href="register.jsp" id="register">注册</a>
    </h5>
    <form action="check_register" method="post" onsubmit="return check(this)">
        <div class="form-group">
            <input type="email" name="email" class="form-control email" placeholder="安全邮箱">
            <input type="text" name="user" class="form-control user" placeholder="用户名">
            <input type="password" name="password1" class="form-control password1" placeholder="密码">
            <input type="text" name="code" placeholder="验证码" class="code">
            <img src="code.jsp" id="image" style="float: right; width: 90px;height: 50px; margin-top: 10px" onclick="refresh()">
            <input type="submit" value="注册" class="btn btn-primary btn-lg btn-block we" />
        </div>
    </form>
</div>
<script src="resources/js/jquery-3.2.1.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
</body>
</html>


相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2月前
|
关系型数据库 MySQL Java
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
98 0
|
11天前
|
NoSQL Java 关系型数据库
Liunx部署java项目Tomcat、Redis、Mysql教程
本文详细介绍了如何在 Linux 服务器上安装和配置 Tomcat、MySQL 和 Redis,并部署 Java 项目。通过这些步骤,您可以搭建一个高效稳定的 Java 应用运行环境。希望本文能为您在实际操作中提供有价值的参考。
72 26
|
21天前
|
关系型数据库 MySQL Java
Servlet+MySQL增删改查 原文出自[易百教程] 转载请保留原文链接: https://www.yiibai.com/geek/1391
对于任何项目开发,创建,读取,更新和删除(CRUD)记录操作是应用程序的一个最重要部分。
60 20
|
2月前
|
Java 关系型数据库 MySQL
自动化测试项目实战笔记(一):JDK、Tomcat、MySQL、Jpress环境安装和搭建
这篇文章是关于自动化测试项目实战笔记,涵盖了JDK、Tomcat、MySQL、Jpress环境的安装和搭建过程,以及测试用例和常见问题总结。
53 1
自动化测试项目实战笔记(一):JDK、Tomcat、MySQL、Jpress环境安装和搭建
|
2月前
|
SQL 存储 关系型数据库
MySQL 与 IntelliJ IDEA 同时兼容的注释
MySQL 与 IntelliJ IDEA 同时兼容的注释
47 2
|
2月前
|
数据可视化 关系型数据库 MySQL
【IDEA】配置mysql环境并创建mysql数据库
【IDEA】配置mysql环境并创建mysql数据库
205 0
|
2月前
|
NoSQL 关系型数据库 MySQL
Tomcat、MySQL、Redis最大支持说明
综上所述,Tomcat、MySQL、Redis的并发处理能力均非固定值,而是通过合理的配置与优化策略,结合系统硬件资源,共同决定了它们在实际应用中的表现。开发者应根据应用的具体需求和资源条件,对这些组件进行细致的调优,以达到最佳性能表现。
39 0
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
70 0
|
前端开发 容器
|
前端开发 容器
下一篇
DataWorks