网站建设教育平台,自适应网页设计教程,宁德seo优化,重庆建网站推广价格图片验证码的生成采用的是Kaptcha#xff1b; Kaptcha是一个高度可配置的验证码生成工具#xff0c;由Google开源。它通过一系列配置文件和插件#xff0c;实现了将验证码字符串自动转换成图片流#xff0c;并可以与session进行关联#xff0c;从而在验证过程中使用#…图片验证码的生成采用的是Kaptcha Kaptcha是一个高度可配置的验证码生成工具由Google开源。它通过一系列配置文件和插件实现了将验证码字符串自动转换成图片流并可以与session进行关联从而在验证过程中使用
具体实现步骤如下
第一步添加依赖 dependencygroupIdcom.github.penggle/groupIdartifactIdkaptcha/artifactIdversion2.3.2/version/dependency 第二步配置验证码工具类
WebServlet(/KaptchaCode)
public class Kaptcha extends HttpServlet {private Producer producer;Overridepublic 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方法Overrideprotected 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: 21222Date: 2024/7/29Time: 上午10:35To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学生信息管理系统登录页/title
%-- 这里的样式代码放在文章末尾了太占位置了--%
/head
body
div classboxh1学生信息管理系统登录页/h1form action/javaweb/Login methodpostdiv classform-grouplabel foruser账号/labelinput typetext iduser nameuser placeholder请输入账号/divdiv classform-grouplabel forpw密码/labelinput typetext idpw namepw placeholder请输入密码/divdiv classcaptcha-containerdiv classform-grouplabel foryzm验证码/labelinput typetext idyzm nameyzm placeholder请输入验证码/div
%-- 验证码的引入--%img src/javaweb/KaptchaCode alt验证码 width120 onclickthis.srcthis.src?Math.random()/divbutton typesubmit登录/button/form
/div
/body
/html
css样式代码
stylebody {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[typetext] {padding: 10px;border: 1px solid #ddd;border-radius: 5px;box-sizing: border-box;width: 100%;}.form-group input[typetext]: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
