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="data: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>

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

uniapp登录页面加入图片验证码
uniapp登录页面加入图片验证码记录效果图参考文章 (侵删) https://www.jb51.net/article/210830.htm 该文章是在vue内实现图片验证码,和uniapp有一 ...
MSA 2040 默认登录地址/用户名密码
MSA 2040 默认登录地址/用户名密码 IP:10.0.0.2/10.0.0.3 用户名:manage 密码:!manage
nacos1.1.3登录显示用户名密码错误
nacos1.1.3登录显示用户名密码错误,401 事情是这样的解决总结事情是这样的跟一个2020年的视频项目,为了保持springboot能顺利注册到nacos,就采取了和视频上的nacos ...
登录页面自动刷新验证码，并校验输入验证码和后台生成的验证码是否一致
登录jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEn ...
WEB登录页面加入简单验证码
1.0 找了几张数字图片,在登录页面做了简单的验证码,如下图: 2.0 验证码正确,登录系统,否则返回登录页面 3.0 index.jsp: <%@ page language="ja ...
vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
谷粒商城笔记+踩坑（17）——【认证模块】登录，用户名密码登录+微博社交登录+SpringSession+xxl-sso单点登录
导航: 谷粒商城笔记+踩坑汇总篇目录 5. 用户名密码登录 5.1[认证模块]登录业务 5.1.1 模型类,接收用户名密码 5.1.2 feign客户端新增登录功能 5.1.3 LoginContr ...
禅道登录显示用户名密码错误
问题描述: 上次说的问题又出现了,已经确认用户名密码正确,但是登录的时候还是显示密码错误. 总结一下处理的方案,看是否有符合的使用场景. 1.刷新浏览器之后重新输入密码(禅道秘密进行md5加密过程中会 ...
python注册用户名和密码登录_Python_36用户名密码登录注册的例子
def panduan (username,passwd):#验证用户米明码是否存在 with open('G:\liumang.txt','r+',encoding='utf-8')as f: fo ...

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

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

最新文章

热门文章