当进入登录界面时,验证码图片自动生成,验证码图片颜色随机,字母颜色随机,该代码只是随机生成小写英文字母,没有设置大写字母和数字
点击验证码图片重新生成验证码
验证码输入错误时,提示出来
验证码输入正确后才进行登录账号和密码的验证
中大型项目中用到的,现把关键代码展示如下
login.jsp界面(注意此时已经导入过jquery包了)
<img src="CheckCodeServlet" width="100%" height="30" id="checkCodeImg"/>
<script type="text/javascript">
$("#checkCodeImg").click(function () {
//重新设置属性的值,当点击该图片时
$("#checkCodeImg").attr("src","CheckCodeServlet?m="+Math.random());
});
</script>
CheckCodeServlet类
package com.it.servlets;
import javax.imageio.ImageIO;
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;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过java中awt中提供的类绘制验证码图片
// 1.创建一张图片
int height=90;//验证码高度
int width=300;//验证码宽度
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//实例化一个图片对象
// 2.绘制图片对象,从图片对象中获取绘制图片的笔
Graphics2D pen = image.createGraphics();
//a.绘制背景
pen.setColor(getRandomColor());
pen.fillRect(0,0,width,height);//绘制实心矩形
//b.绘制验证码字符串
int letterNum=4;//验证码图片上的字符的个数
int space=20;//验证码图片上两个字母之间的空隙
int letterWidth=(width-(letterNum+1)*space)/letterNum;//计算每个字母占据的宽度
// for循环每循环一次,绘制一个字母(小写字母的ascii码:97-122)
Random random = new Random();
String code ="";
for (int i=0;i<letterNum;i++){
// 随机生成一个小写字母
int ascii = random.nextInt(26) + 97;//97-122
byte[] bytes={(byte) ascii};
String letter=new String(bytes);
code = code + letter;//为了保存验证码字符到session
// 绘制字母
pen.setColor(getRandomColor());
pen.setFont(new Font("Gulim",Font.BOLD,70));
pen.drawString(letter,space+(letterWidth+space)*i,height-space);//把该字母写在画布上
}
HttpSession session = req.getSession();
session.setAttribute("code",code);
//添加图片干扰,防止机器自动识别
// 图片绘制完成后,将图片通过response输出流响应到客户端
ImageIO.write(image,"png",resp.getOutputStream());
}
private Color getRandomColor() {
Random random = new Random();
int r=random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
Color color = new Color(r, g, b);
return color;
}
}
ManagerLoginServlet类
String checkCode = req.getParameter("checkCode");
//先校验验证码,只有验证码正确时,才校验登录的账号和密码
//首先获取session,再获取session中的code属性的值,与输入框的值进行比较
if (req.getSession().getAttribute("code").equals(checkCode)){
//验证码正确时,执行登录名和登录密码的验证
}else {
//验证码错误
req.setAttribute("tips","<label style='color:red'>登录失败,验证码错误!</label>");
req.getRequestDispatcher("login.jsp").forward(req,resp);
}
下面是完整类中的代码
login.jsp界面(注意此时已经导入过jquery包了)
<%--
Created by IntelliJ IDEA.
User: lijianglin
Date: 2022/5/19
Time: 17:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="css/style.css"/>
<script src="assets/js/ace-extra.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<title>登录</title>
</head>
<body class="login-layout Reg_log_style" style="background: url(images/login_bg.png);">
<div class="logintop">
<span>欢迎后台管理界面平台</span>
<ul>
<li><a href="#">返回首页</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div class="loginbody">
<div class="login-container">
<div class="center"></div>
<div class="space-6"></div>
<div class="position-relative">
<div id="login-box" class="login-box widget-box no-border visible" style="margin-top: 50px;">
<div class="widget-body" >
<div class="widget-main" >
<h4 class="header blue lighter bigger">
<i class="icon-coffee green"></i>
管理员登录
</h4>
<div class="login_icon"><img src="images/login.png" /></div>
<form class="" id="form1" action="ManagerLoginServlet" method="post">
<fieldset>
<ul>
<li class="frame_style form_error">
<label class="user_icon"></label>
<input name="loginName" title="登录名" type="text" id="username"/><i>用户名</i>
</li>
<li class="frame_style form_error">
<label class="password_icon"></label>
<input name="loginPwd" title="登录密码" type="password" id="userpwd"/><i>密码</i>
</li>
<li class="frame_style form_error">
<label class="Codes_icon"></label>
<input name="checkCode" title="验证码" type="text" id="Codes_text"/><i>验证码</i>
<div class="Codes_region">
<img src="CheckCodeServlet" width="100%" height="30" id="checkCodeImg"/>
<script type="text/javascript">
$("#checkCodeImg").click(function () {
//重新设置属性的值,当点击该图片时
$("#checkCodeImg").attr("src","CheckCodeServlet?m="+Math.random());
});
</script>
</div>
</li>
</ul>
<div class="space"></div>
<div class="clearfix">
<label class="inline">
<input type="checkbox" class="ace">
<span class="lbl">保存密码</span>
</label>
<button type="submit" class="width-35 pull-right btn btn-sm btn-primary" id="login_btn">
<i class="icon-key"></i>
登录
</button>
</div>
<div class="space-4"></div>
</fieldset>
</form>
<div class="social-or-login center">
<span class="bigger-110">通知</span>
</div>
<div class="social-login center">
<%-- 从ManagerLoginServlet类中获取过来提示信息,取属性的value--%>
提示 ${tips}
</div>
</div><!-- /widget-main -->
<div class="toolbar clearfix"></div>
</div><!-- /widget-body -->
</div><!-- /login-box -->
</div><!-- /position-relative -->
</div>
</div>
<div class="loginbm">版权所有 2021</div><strong></strong>
</body>
</html>
<script>
$('#form1').on('submit', function(){
var num=0;
var str="";
$("input[type$='text'],input[type$='password']").each(function(n){
if($(this).val()=="")
{
layer.alert(str+=""+$(this).attr("title")+"不能为空!\r\n",{
title: '提示框',
icon:0,
});
num++;
return false;
}
});
if(num>0){ return false;}
else{
// 管理员已经输入了密码,登录名,验证码
return true;
}
});
$(document).ready(function(){
$("input[type='text'],input[type='password']").blur(function(){
var $el = $(this);
var $parent = $el.parent();
$parent.attr('class','frame_style').removeClass(' form_error');
if($el.val()==''){
$parent.attr('class','frame_style').addClass(' form_error');
}
});
$("input[type='text'],input[type='password']").focus(function(){
var $el = $(this);
var $parent = $el.parent();
$parent.attr('class','frame_style').removeClass(' form_errors');
if($el.val()==''){
$parent.attr('class','frame_style').addClass(' form_errors');
} else{
$parent.attr('class','frame_style').removeClass(' form_errors');
}
});
})
</script>
CheckCodeServlet类
package com.it.servlets;
import javax.imageio.ImageIO;
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;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//通过java中awt中提供的类绘制验证码图片
// 1.创建一张图片
int height=90;//验证码高度
int width=300;//验证码宽度
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//实例化一个图片对象
// 2.绘制图片对象,从图片对象中获取绘制图片的笔
Graphics2D pen = image.createGraphics();
//a.绘制背景
pen.setColor(getRandomColor());
pen.fillRect(0,0,width,height);//绘制实心矩形
//b.绘制验证码字符串
int letterNum=4;//验证码图片上的字符的个数
int space=20;//验证码图片上两个字母之间的空隙
int letterWidth=(width-(letterNum+1)*space)/letterNum;//计算每个字母占据的宽度
// for循环每循环一次,绘制一个字母(小写字母的ascii码:97-122)
Random random = new Random();
String code ="";
for (int i=0;i<letterNum;i++){
// 随机生成一个小写字母
int ascii = random.nextInt(26) + 97;//97-122
byte[] bytes={(byte) ascii};
String letter=new String(bytes);
code = code + letter;//为了保存验证码字符到session
// 绘制字母
pen.setColor(getRandomColor());
pen.setFont(new Font("Gulim",Font.BOLD,70));
pen.drawString(letter,space+(letterWidth+space)*i,height-space);//把该字母写在画布上
}
HttpSession session = req.getSession();
session.setAttribute("code",code);
//添加图片干扰,防止机器自动识别
// 图片绘制完成后,将图片通过response输出流响应到客户端
ImageIO.write(image,"png",resp.getOutputStream());
}
private Color getRandomColor() {
Random random = new Random();
int r=random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
Color color = new Color(r, g, b);
return color;
}
}
ManagerLoginServlet类
package com.it.servlets;
import com.it.entity.Manager;
import com.it.service.ManagerService;
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.SQLException;
//用于管理员登录验证的servlet
@WebServlet("/ManagerLoginServlet")
public class ManagerLoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// doGet中写了doPost方法,可以所有方法都在doPost方法,这样不管传过来是get还是post都可以成功调用方法
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 1.接收账号、密码、验证码
req.setCharacterEncoding("utf-8");
// 从输入框中获取输入的内容,参数是输入框的名字。
String loginName = req.getParameter("loginName");
String loginPwd = req.getParameter("loginPwd");
String checkCode = req.getParameter("checkCode");
//先校验验证码,只有验证码正确时,才校验登录的账号和密码
//首先获取session,再获取session中的code属性的值,与输入框的值进行比较
if (req.getSession().getAttribute("code").equals(checkCode)){
//验证码正确时,执行登录名和登录密码的验证
// 2.调用ManagerService进行校验
ManagerService managerService = new ManagerService();
try {
Manager manager = managerService.checkManagerLogin(loginName, loginPwd);
// 3.判断验证结果
if (manager==null){
// 登录失败,跳转到登录界面并进行错误提示
req.setAttribute("tips","<label style='color:red'>登录失败,密码或账号错误!</label>");
req.getRequestDispatcher("login.jsp").forward(req,resp);
}else {
// 登录成功,跳转到index.jsp界面
resp.sendRedirect("index.jsp");
}
} catch (SQLException e) {
e.printStackTrace();
}
}else {
//验证码错误
req.setAttribute("tips","<label style='color:red'>登录失败,验证码错误!</label>");
req.getRequestDispatcher("login.jsp").forward(req,resp);
}
}
}