**
验证码工具类
**
package ajax.utils;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.*;
/**
* @Author Administrator
* @Date 2022/4/1 23:52
* 验证码工具类
*/
public class VerifyCode{
public static Map<String,BufferedImage> getMap(){
// 使用map存储<string,BufferedImage>
// 1.获取bufferedImage对象 宽、高、图片配色 蓝绿红三色
BufferedImage image = new BufferedImage(150,50,BufferedImage.TYPE_3BYTE_BGR);
// 2.获取画笔对象
Graphics g = image.getGraphics();
// 3.设置画笔颜色
g.setColor(Color.WHITE);
// 4.画一个矩形方框，填充为白色
g.fillRect(0,0,150,50);
// 5.更换画笔颜色，画黑色边框
g.setColor(Color.BLACK);
// 6.画黑色边框
g.drawRect(0,0,149,49);
// 7.定义随机变量
Random r = new Random();
// 8.定义一个字符串对象存储字符
StringBuffer sb = new StringBuffer();
// 循环随机字符
for (int i = 1; i < 5; i++) {
// 随机画笔颜色
Color color = new Color(r.nextInt(255)+1,r.nextInt(255)+1,r.nextInt(255)+1);
g.setColor(color);
// 设置字体大小
g.setFont(new Font("宋体",Font.BOLD,20));
// 利用阿斯克码随机字符
char ch = (char) (r.nextInt(26)+65);
// 将字体添加到图片上去
g.drawString(String.valueOf(ch),i*26,33);
sb.append(ch);
}
// 9.构建map
Map<String,BufferedImage> map = new HashMap<>();
map.put(sb.toString(),image);
return map;
}
/**
* 封装迭代map中的key
* @param map
* @return
*/
public static String getMapCode(Map<String,BufferedImage> map){
// 1.获取键值对像
Set<Map.Entry<String,BufferedImage>> entrySet = map.entrySet();
// 获取map迭代器
Iterator<Map.Entry<String,BufferedImage>> it = entrySet.iterator();
// 因为只有一个对象，所以可以直接返回
Map.Entry<String,BufferedImage> entry = it.next();
return entry.getKey();
}
/**
* 封装迭代map的value
* @param map
* @return
*/
public static BufferedImage getMapImage(Map<String,BufferedImage> map){
// 1.获取键值对像 每一个map都是一个entry
Set<Map.Entry<String,BufferedImage>> entrySet = map.entrySet();
// 2.获取map迭代器
Iterator<Map.Entry<String,BufferedImage>> it = entrySet.iterator();
// 3.获取对象
Map.Entry<String,BufferedImage> entry = it.next();
return entry.getValue();
}
}
将验证码显示到网页中
package ajax.servlet;
import ajax.utils.VerifyCode;
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.image.BufferedImage;
import java.io.IOException;
import java.util.Map;
/**
* @Author Administrator
* @Date 2022/4/2 0:23
*/
@WebServlet("/ajax/vcode")
public class VerifyCodeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 通过验证码类获取图片对象
Map<String, BufferedImage> map = VerifyCode.getMap();
BufferedImage image = VerifyCode.getMapImage(map);
// 设置响应类型
resp.setContentType("image/jpeg");
req.setCharacterEncoding("utf-8");
// 获取与图片相对应的文字
String code = VerifyCode.getMapCode(map);
// 存储到session中
HttpSession session = req.getSession();
session.setAttribute("code1",code);
ImageIO.write(image,"jpeg",resp.getOutputStream());
}
}
jsp文件
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2022/3/24
Time: 8:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%-- 引入js文件--%>
<script src="../js/checkSo.js"></script>
</head>
<body>
<form action="#" method="get">
用户名:<input type="text" name="username" οnblur="checkUsername(this)">
<span></span><br />
<img src="/ajax/vcode" id="ImageCode" οnclick="changeCodeImag()">
<a href="/ajax/vcode" οnclick="changeCodeImag()">看不清楚?换一张</a>
<input type="text" id="userCode" placeholder="请输入验证码" οnblur="verifyCode(this)"><span></span>
<input type="submit" value="提交">
</form>
</body>
</html>
js脚本
function checkUsername(obj) {
// 1. 获取Ajax内置对象
let xhr = new XMLHttpRequest();
// 2.定义请求(不是发送请求)
xhr.open('get','/ajax/checkUsername?username='+obj.value,true)
// 3.注册监听器
xhr.onreadystatechange = function () {
// 通过readystate状态码监听它们的状态
// 如果请求成功
if (xhr.readyState==4&&xhr.status==200){
// 4.接收服务器响应的文本或xml
let num = Number.parseInt(xhr.responseText);
// span对象
let sp = obj.nextElementSibling
if (num == 1){
sp.innerText = "U•ェ•*U用户名可以使用";
sp.style.color = "green";
}else {
sp.innerText = "×用户名已经被使用，请更换";
sp.style.color = "red";
}
}
}
// 5.发送请求
xhr.send(null);
}
function checkUsername2(obj) {
// 1. 获取Ajax内置对象
let xhr = new XMLHttpRequest();
// 2.定义请求(不是发送请求)
xhr.open('post','/ajax/checkUsername',true)
// 设置请求头
//xhr.setRequestHeader("content-Type",
// "application/x-www-form-urlencoded");)
// 3.注册监听器
xhr.onreadystatechange = function () {
// 通过readystate状态码监听它们的状态
// 如果请求成功
if (xhr.readyState==4&&xhr.status==200){
// 4.接收服务器响应的文本或xml
let num = Number.parseInt(xhr.responseText);
// span对象
let sp = obj.nextElementSibling
if (num == 1){
sp.innerText = "U•ェ•*U用户名可以使用";
sp.style.color = "green";
}else {
sp.innerText = "×用户名已经被使用，请更换";
sp.style.color = "red";
}
}
}
// 5.发送请求
xhr.send("username="+obj.value);
}
function changeCodeImag() {
let imageCode = document.getElementById("ImageCode");
imageCode.src = "/ajax/vcode?time="+new Date();
}
function verifyCode(obj) {
// 1.获取异步对象
var xhr = new XMLHttpRequest;
// 2.定义请求
xhr.open('get','/ajax/checkVC?code2='+obj.value,true);
// 3.注册监听
xhr.onreadystatechange = function () {
// 如果请求成功，则获取请求返回的内容
if (xhr.readyState == 4 && xhr.status == 200){
// 获取服务器响应的文本
let txt = xhr.responseText;
// 将文本设置在span标签中
let checkTips = obj.nextElementSibling;
if (txt == '验证码正确'){
checkTips.style.color = "green";
}else {
checkTips.style.color = "red";
}
checkTips.innerText = txt;
}
};
// 4.发送请求
xhr.send(null);
}
验证用户输入的验证码是否正确
package ajax.servlet;
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.io.PrintWriter;
/**
* @Author Administrator
* @Date 2022/4/2 0:57
*/
@WebServlet("/ajax/checkVC")
public class CheckVerifyCodeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("utf-8");
// 获取session中code的值
String code1 = (String) req.getSession().getAttribute("code1");
// 获取地址栏上用户输入的code的值
String code2 = req.getParameter("code2");
PrintWriter pw = resp.getWriter();
// 判断是否一致
if (code1.equalsIgnoreCase(code2)){
pw.println("验证码正确");
}else {
pw.println("验证码错误");
}
}
}
