JavaEE之--登录页面(用户名、密码、验证码)

1.登陆界面(简易制作,丑勿喷):
login.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="js/js.js"></script>
<html>
<head>
    <title>登录页面</title>
</head>
<body>
<div id="top"><span style="color:red">${errors}</span></div>
<form id="login" action="/servlet/LoginServlet" method="post">
    用户名:<input type="text" name="user" id="user" /><br>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd" id="pwd" /><br>
    验证码(点击图片更换验证码):<br>
    <input name="check" type="text" id="check" maxlength="4" class="check_input" /><br>
    <img src="images/checkcode.png" id="safecode" onclick="reloadcode()"/><br>
    <input type="submit" value="确定">
    <input type="reset" value="重置">

    </form>
</body>
</html>

在这里插入图片描述
注:
1.action="/servlet/LoginServlet"为登录界面表单提交后,将页面请求转发到LoginServlet处理登录请求。
2. < src=“images/checkcode.png” id=“safecode” οnclick=“reloadcode()”/>该语句用于处理更换验证码操作。
3. <script type=“text/javascript” src=“js/js.js” 用于响应js.js文件中的函数。
4.

${errors}
用于传递登录出现问题时的信息.

2.页面验证码制作:

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
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 java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

@WebServlet(name = "CheckCodeServlet",urlPatterns = {"/images/checkcode.png"})
public class CheckCodeServlet extends HttpServlet {
    private String code = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";

    /*
    随机选取一个字符
     */
    private char ranCheckCode(){
        int randomIndex=new Random().nextInt(code.length());//得到随机的位置
        return code.charAt(randomIndex);
    }

    /*
    产生0-200的随机数设置颜色
     */
    private int ranNum(){
        return new Random().nextInt(200);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        StringBuffer checkcode =new StringBuffer();
        for (int i = 0; i <4 ; i++) {
            checkcode.append(ranCheckCode());//将四个随机得到的字符拼接为验证码
        }

        String check =checkcode.toString();//得到验证码

        request.getSession().setAttribute("checkcode",check);//将生成的验证码存起来,用于验证

        //1.在内存中生成图片
        BufferedImage img =new BufferedImage(44,20,BufferedImage.TYPE_INT_RGB);
        //2.从图片缓存中取出画笔对象(该画笔对象用于修改图片缓存区的像素数据)
        Graphics2D g2d = (Graphics2D) img.getGraphics();
        //3.用画笔将图片缓存填充为白色背景
        g2d.setColor(new Color(255,255,255));//将画笔设置为白色
        g2d.fillRect(0,0,44,20);//从原点坐标开始44X20的区域画为白色
        //4.在得到的白色背景板上开始画验证码
        for (int i = 0; i < check.length(); i++) {
            g2d.setColor(new Color(ranNum(),ranNum(),ranNum()));//随机生成画笔颜色
            String c=check.charAt(i)+"";
            g2d.drawString(c,11*i,16);//从x坐标开始画单个字符串,循环四次,得到画好的验证码图片
        }

        //将验证码图片转换成某种图片格式写到客户端
        response.setContentType("image/jpeg");
        OutputStream output = response.getOutputStream();
        //得到压缩后jpeg字节,(通过缓存输出流)
        JPEGImageEncoder encoder= JPEGCodec.createJPEGEncoder(output);
        //encoder.encode将图片缓存流编码
        encoder.encode(img);

    }
}
注: JPEGImageEncoder 在JDK8之后已被取消,有新方法代替之。

3.LoginServlet:登陆请求处理服务器

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 java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

@WebServlet(name = "LoginServlet", urlPatterns = {"/servlet/LoginServlet"})
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取表单提交的数据
        String user = request.getParameter("user");
        String pwd = request.getParameter("pwd");
        String chknumber = request.getParameter("check");
        //校验验证码
        String chkcode = (String)request.getSession().getAttribute("checkcode");

        Connection conn = null;
        PreparedStatement prst = null;
        ResultSet rs = null;
        try {
            //获取表单提交的数据
            //输入验证码时不区分大小写
            if(chknumber.toUpperCase().equals(chkcode.toUpperCase())){
                //校验登陆帐号
                String sql = "select * from user where user = ?" ;
                conn = DB.getConnection();						//博主自己整合好的jdbc连接类
                prst = conn.prepareStatement(sql);
                prst.setString(1,"admin");			//向sql语句传入"admin"参数,得到数据库中用户名为"admin"的用户信息用来与表单传递来的参数进行比对操作
                rs = prst.executeQuery();
                if(rs.next()){
                    String user1 = rs.getString("user");
                    String pwd1 = rs.getString("pwd");
                    if(user1.equals(user) ){
                        //校验密码
                        if(pwd1.equals(pwd)){
                            //选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失
                            response.sendRedirect("/登录成功.jsp");
                        }else{
                            request.getSession().setAttribute("errors","密码输入错误!");
                            //选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失
                            response.sendRedirect("/login.jsp");
                        }
                    }else{
                        request.getSession().setAttribute("errors","用户名输入错误!");
                        //转回登陆页面
                        //选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失
                        response.sendRedirect("/login.jsp");
                    }
                }
            }else{
                request.getSession().setAttribute("errors","验证码错误!");
                //选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失
                response.sendRedirect("/login.jsp");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DB.closeConnection(conn);
        }
    }
    }
注:数据库表中已从在用户名为admin,密码admin的用户。

4.刷新验证码
目录下新建一个js文件,编写一个可以使验证码响应刷新的函数

function reloadcode(){
    var verify=document.getElementById('safecode');
    verify.src = "/images/checkcode.png?" + Math.random();
}

分析:通过document.getElementById得到验证码图片路径,通过在图片路径后添加随机数使得服务器(CheckCodeservlet)每次响应后都会产生不同的图片路径,从而得到新的验证码图片,实现刷新操作。

在这里插入图片描述
5.登陆成功.jsp
用户名,密码,验证码输入无误登录成功后转到此页面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>当你看到这个界面说明你已经成功登录!</title>
</head>
<body>
</body>
</html>
版权声明:本文为qq_44779506原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44779506/article/details/89459187