图片验证码的生成采用的是Kaptcha；
Kaptcha是一个高度可配置的验证码生成工具，由Google开源。它通过一系列配置文件和插件，实现了将验证码字符串自动转换成图片流，并可以与session进行关联，从而在验证过程中使用；
具体实现步骤如下：
第一步：添加依赖
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>第二步：配置验证码工具类
@WebServlet("/KaptchaCode")
public class Kaptcha extends HttpServlet {
private Producer producer;
@Override
public void init() {
Properties properties = new Properties();
//设置图片边框
properties.setProperty("kaptcha.border", "yes");
//设置图片边框为蓝色
properties.setProperty("kaptcha.border.color", "blue");
//背景颜色渐变开始
properties.put("kaptcha.background.clear.from", "127,255,212");
//背景颜色渐变结束
properties.put("kaptcha.background.clear.to", "240,255,255");
// 字体颜色
properties.put("kaptcha.textproducer.font.color", "black");
// 文字间隔
properties.put("kaptcha.textproducer.char.space", "10");
//如果需要去掉干扰线
properties.put("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
// 字体
properties.put("kaptcha.textproducer.font.names", "Arial,Courier,cmr10,宋体,楷体,微软雅黑");
// 图片宽度
properties.setProperty("kaptcha.image.width", "200");
// 图片高度
properties.setProperty("kaptcha.image.height", "50");
// 从哪些字符中产生
properties.setProperty("kaptcha.textproducer.char.string", "0123456789abcdefghijklmnopqrsduvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");
// 字符个数
properties.setProperty("kaptcha.textproducer.char.length", "4");
Config config = new Config(properties);
producer = config.getProducerImpl();
}
//这里要注意了这个验证码生成只支持get方法
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 生成一个文本验证码
String code = producer.createText();
// 根据验证码文本生成一张图片
BufferedImage image = producer.createImage(code);
// 设置响应的内容类型为图片格式
resp.setContentType("image/jpeg");
// 将图片写入到响应的输出流中，以jpg格式保存
ImageIO.write(image, "jpg", resp.getOutputStream());
//session是给登录验证的逻辑代码传参的
HttpSession session = req.getSession();
session.setAttribute("code", code);
}
}第三步：前端/后端渲染代码引入
<%--
Created by IntelliJ IDEA.
User: 21222
Date: 2024/7/29
Time: 上午10:35
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息管理系统登录页</title>
<%-- 这里的样式代码放在文章末尾了太占位置了--%>
</head>
<body>
<div class="box">
<h1>学生信息管理系统登录页</h1>
<form action="/javaweb/Login" method="post">
<div class="form-group">
<label for="user">账号</label>
<input type="text" id="user" name="user" placeholder="请输入账号">
</div>
<div class="form-group">
<label for="pw">密码</label>
<input type="text" id="pw" name="pw" placeholder="请输入密码">
</div>
<div class="captcha-container">
<div class="form-group">
<label for="yzm">验证码</label>
<input type="text" id="yzm" name="yzm" placeholder="请输入验证码">
</div>
<%-- 验证码的引入--%>
<img src="/javaweb/KaptchaCode" alt="验证码" width="120" onclick="this.src=this.src+'?'+Math.random()">
</div>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>css样式代码
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
width: 360px;
background-color: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 26px;
margin-bottom: 20px;
color: #333;
text-align: center;
}
form {
width: 100%;
}
.form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 5px;
font-size: 14px;
color: #555;
}
.form-group input[type="text"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
width: 100%;
}
.form-group input[type="text"]:focus {
border-color: #4CAF50;
outline: none;
}
.captcha-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.captcha-container img {
margin-left: 10px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
width: 100%;
}
button:hover {
background-color: #45a049;
}
</style>
