当前位置： 首页 > news >正文

Day14-Servlet后端验证码的实现

news 文章来源：https://blog.csdn.net/github_49984491/article/details/140833961 2025/1/15 18:02:28

图片验证码的生成采用的是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;@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 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>

 

相关文章：

Day14-Servlet后端验证码的实现

图片验证码的生成采用的是Kaptcha&#xff1b; Kaptcha是一个高度可配置的验证码生成工具&#xff0c;由Google开源。它通过一系列配置文件和插件&#xff0c;实现了将验证码字符串自动转换成图片流&#xff0c;并可以与session进行关联&#xff0c;从而在验证过程中使用&#…...

编程日记 2024/8/4 22:21:15

MySQL：数据库权限与角色

权限 MySQL 的权限管理系统是保障数据库安全性的关键组件之一。它允许数据库管理员精确控制哪些用户可以对哪些数据库对象执行哪些操作。 自主存取控制 DAC&#xff08;DiscretionaryAccess Control)&#xff1a;用户对于不同的数据库对象有不同的存取权限&#xff0c;不同的…...

编程日记 2024/8/4 22:20:14

等保测评练习卷25

等级保护初级测评师试题25 姓名&#xff1a; 成绩&#xff1a; 一、判断题&#xff08;10110分&#xff09; 1.安全区域边界对象主要根据系统中网络访问控制设备的部署情况来确定&#xff08;&#xff09;不是网络访问控制设备而…...

编程日记 2024/8/4 22:19:14

《python语言程序设计》2018第6章第28题 掷骰子 两个色子，分别是1到6

2、3、12 玩家输 7、11玩家赢 4、5、6、8、9、10算1点&#xff0c;之后出7玩家输或者和上一次相同。def rolled(num_t):count 0still_win 0second_win 0still_lose 0second_lose 0while count < num_t:a_1 random.randint(1, 6)b_1 random.randint(1, 6)tTen a_1 b…...

编程日记 2024/8/4 22:16:10

Java方法递归

目录 1.方法递归调用 基本介绍 递归能解决什么问题&#xff1f; 八皇后问题 递归举例 递归重要规则 练习 2.递归调用应用实例-迷宫问题 3.递归调用实例-汉诺塔 4.递归调用实例-八皇后问题 1.方法递归调用 基本介绍 简单来说&#xff0c;递归就是自己调用自己。 …...

编程日记 2024/8/4 22:15:08

目标跟踪那些事

目标跟踪那些事 跟踪与检测的区别 目标跟踪和目标检测是计算机视觉中的两个重要概念&#xff0c;但它们的目的和方法是不同的。 目标检测(object Detection)&#xff1a;是指在图像或视频帧中识别并定位一个或多个感兴趣的目标对象的过程 。 目标跟踪(object Tracking)&…...

编程日记 2024/8/4 22:13:06

【Git】 如何将一个分支的某个提交合并到另一个分支

【Git】 如何将一个分支的某个提交合并到另一个分支 在使用 Git 进行版本控制时&#xff0c;常常会遇到这样的需求&#xff1a;将某个分支的特定提交合并到另一个分支中。这种情况下&#xff0c;我们可以使用 cherry-pick 命令来实现。本文将详细介绍 cherry-pick 命令的使用方…...

编程日记 2024/8/4 22:10:02

【嵌入式之RTOS】什么是消息队列

目录 一、FreeRTOS消息队列的基本概念 二、FreeRTOS消息队列的工作原理 三、FreeRTOS消息队列的特点 四、FreeRTOS消息队列的应用 五、示例 消息队列是一种用于任务间通信的机制&#xff0c;它允许一个任务&#xff08;生产者&#xff09;向消息队列发送消息&#xff0c;而…...

编程日记 2024/8/4 22:07:00

9-springCloud集成nacos config

本文介绍spring cloud集成nacos config的过程。 0、环境 jdk 1.8maven 3.8.1Idea 2021.1nacos 2.0.3 1、项目结构 根项目nacos-config-sample下有两个module&#xff0c;这两个module分别是两个springboot项目&#xff0c;都从nacos中获取连接mysql的连接参数。我们开工。 …...

编程日记 2024/8/4 22:04:57

市场主流 AI 视频生成技术的迭代路径

AI视频生成技术的迭代路径经历了从GANVAE、Transformer、Diffusion Model到Sora采用的DiT架构&#xff08;TransformerDiffusion&#xff09;等多个阶段&#xff0c;每个阶段的技术升级都在视频处理质量上带来了飞跃性的提升。这些技术进步不仅推动了AI视频生成领域的快速发展&…...

编程日记 2024/8/4 22:03:56

移情别恋c++ ദ്ദി˶ｰ̀֊ｰ́ ) ——1.c++入门（2）

1. 函数重载 C⽀持在同⼀作⽤域中出现同名函数&#xff0c;但是要求这些同名函数的形参不同&#xff0c;可以是参数个数不同或者 类型不同。这样C函数调⽤就表现出了多态⾏为&#xff0c;使⽤更灵活。C语⾔是不⽀持同⼀作⽤域中出现同 名函数的。 #include<iostream> u…...

编程日记 2024/8/4 22:02:55

【Python系列】深入理解 Python 中的 `nonlocal` 关键字

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2024/8/4 22:00:53

Flask目录结构路由重定向简单实例讲解——轻量级的 Python Web 框架

假设一个flask目录结构如下&#xff1a; my_flask_app/ │ ├── app.py ├── routes/ │ ├── __init__.py │ ├── ZhejiangProvince/ │ │ ├── __init__.py │ │ ├── la.py │ │ └── el.py │ ├── GuangdongProvince/ │ │ ├…...

编程日记 2024/8/4 21:58:52

破解PyCharm插件更新难题：让IDE焕发新生

破解PyCharm插件更新难题&#xff1a;让IDE焕发新生 PyCharm作为业界领先的集成开发环境&#xff08;IDE&#xff09;&#xff0c;其丰富的插件生态是其强大功能的重要来源。然而&#xff0c;插件无法更新的问题可能会困扰许多用户&#xff0c;影响开发体验。本文将详细介绍如…...

编程日记 2024/8/4 21:57:50

cmake常用命令学习

1.include https://blog.csdn.net/qq_38410730/article/details/102677143 CmakeLists.txt才是cmake的正统文件&#xff0c;而.cmake文件是一个模块文件&#xff0c;可以被include到CMakeLists.txt中。 include指令一般用于语句的复用&#xff0c;也就是说&#xff0c;如果有…...

编程日记 2024/8/4 21:55:48

K8S可视化管理平台KubeSphere

什么是 KubeSphere &#xff1f; KubeSphere 是一款开源项目&#xff0c;在目前主流容器调度平台 Kubernetes 之上构建的企业级分布式多租户容器管理平台&#xff0c;提供简单易用的操作界面以及向导式操作方式&#xff0c;在降低用户使用容器调度平台学习成本的同时&#xff…...

编程日记 2024/8/4 21:54:47

Bugku-CTF-聪明的php

pass a parameter and maybe the flag files filename is random :> 传递一个参数&#xff0c;可能标记文件的文件名是随机的: 于是传一下参&#xff0c;在原网页后面加上/?a1,发现网页出现了变化 3.传入参数&#xff0c;一般情况下是文件包含&#xff0c;或者命令执行&…...

编程日记 2024/8/4 21:53:46

【MySQL进阶】MySQL主从复制

目录 MySQL主从复制 概念 主从形式 一主多从 多主一从 双主复制 主从级联复制 主从复制原理 三个线程 两个日志文件 主从复制的主要工作模式 异步复制 半同步复制 全同步复制 MySQL主从复制 概念 MySQL主从复制是一种数据分布机制&#xff0c;允许从一个数据库服…...

编程日记 2024/8/4 21:52:45

本地部署文生图模型 Flux

本地部署文生图模型 Flux 0. 引言1. 本地部署1-1. 创建虚拟环境1-2. 安装依赖模块1-3. 创建 Web UI1-4. 启动 Web UI1-5. 访问 Web UI 0. 引言 2024年8月1日&#xff0c;blackforestlabs.ai发布了 FLUX.1 模型套件。 FLUX.1 文本到图像模型套件&#xff0c;该套件定义了文本到…...

编程日记 2024/8/4 21:49:43

谷粒商城实战笔记-127-全文检索-ElasticSearch-整合-测试复杂检索

文章目录 一&#xff0c;使用Elasticsearch的Java RESTHighLevel Client完成复杂的查询请求1. 创建检索请求 (SearchRequest)2. 构造检索条件 (SearchSourceBuilder)3. 执行检索 (SearchResponse)4. 处理解析结果5. 获取聚合信息 二&#xff0c;AI时代的效率提升 一&#xff0c…...

编程日记 2024/8/4 21:48:41

解锁PyCharm：破解依赖库导入之谜

解锁PyCharm&#xff1a;破解依赖库导入之谜 PyCharm作为Python开发者的强大IDE&#xff0c;提供了丰富的功能来简化开发流程。然而&#xff0c;在使用过程中&#xff0c;开发者可能会遇到导入依赖库时出现的错误。本文将深入探讨PyCharm中导入依赖库报错的问题&#xff0c;并…...

编程日记 2024/8/4 21:47:40

JSON-Viewer插件：json格式查看器

npm install vue-json-viewer 2&#xff0c;main.js 引入 import JsonViewer from vue-json-viewer Vue.use(JsonViewer) 3&#xff0c;组件里写入这个组件 <json-viewer:value"textSecond":expand-depth"5"copyableboxedsort></json-viewer…...

编程日记 2024/8/4 21:46:39

HDFS块信息异常，spark无法读取数据

背景&#xff1a;flume数据落盘到hdfs上时&#xff0c;正在写入的文件一般是以.log.tmp结尾的文件&#xff0c;当flume将文件关闭以后将变为&#xff1a;.log 结尾的文件。由于我们使用阿里云的服务器&#xff0c;经常会有个别节点挂掉(进程在&#xff0c;无法通信&#xff0c;…...

编程日记 2024/8/4 21:45:37

TCP协议概述

TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议。它由IETF的RFC 793定义&#xff0c;并在各种通信系统中广泛应用&#xff0c;为不同但互连的计算机通信网络的主计算机中的成对进程之…...

编程日记 2024/8/4 21:44:36

SpringSecurity-3（认证和授权+SpringSecurity入门案例+自定义认证+数据库认证）

SpringSecurity使用数据库数据完成认证 5 SpringSecurity使用数据库数据完成认证5.1 认证流程分析5.1.1 UsernamePasswordAuthenticationFilter5.1.2 AuthenticationManager5.1.3 AbstractUserDetailsAuthenticationProvider5.1.4 AbstractUserDetailsAuthenticationProvider中…...

编程日记 2024/8/4 21:43:35

英国AI大学排名

计算机学科英国Top10 “计算机科学与信息系统”学科除了最受关注的“计算机科学”专业&#xff0c;还包括了“人工智能”“软件工程”“计算机金融”等众多分支专业。 1.帝国理工学院 Imperial College London 单以计算机专业本科来讲&#xff0c;仅Computing这个专业&#x…...

编程日记 2024/8/4 21:41:33

渗透测试与高级攻防技术（二）网络安全技术的前沿探讨：渗透测试与高级攻防

文章目录 引言 第一章&#xff1a;入侵检测与防御系统&#xff08;IDS/IPS&#xff09;1.1 IDS与IPS的区别1.2 Cisco IDS/IPS系统 第二章&#xff1a;蜜罐技术2.1 蜜罐技术概述2.2 搭建蜜罐系统2.3 蜜罐技术的优缺点 第三章&#xff1a;社会工程攻击3.1 社会工程攻击概述3.2 社…...

编程日记 2024/8/4 21:40:32

Windows系统下安装mujoco环境的教程【原创】

在学习Mujoco仿真的过程中&#xff0c;我先前是在linux系统下进行的研究与学习&#xff0c;今天来试试看在windows系统中安装mujoco仿真环境。 先前在linux中的一些关于mujoco学习记录的博客&#xff1a;Mujoco仿真【xml文件的学习 3】_mujoco打开xml文件-CSDN博客 下面开始wi…...

编程日记 2024/8/4 21:39:31

【秋招笔试】2024-08-03-科大讯飞秋招笔试题(算法岗)-三语言题解(CPP/Python/Java)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 ｜ 编程一对一辅导 ✨ 本系列打算持续跟新 秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 🍖 本次题目难度中等偏上，最后一题又是…...

编程日记 2024/8/4 21:37:28

2024华数杯数学建模竞赛选题建议+初步分析

提示&#xff1a;DS C君认为的难度&#xff1a;C<A<B&#xff0c;开放度&#xff1a;A<B<C。 综合评价来看 A题适合对机械臂和机器人运动学感兴趣的同学&#xff0c;尤其是有一定编程和优化算法基础的同学。不建议非相关专业同学选择。 B题挑战较大&#xff0…...

编程日记 2024/8/4 21:35:26

wordpress 统计/税收大数据

win7日志管理:查:计算机-----》管理---》系统工具---》事件查看器关闭日志功能(不建议这么做)&#xff1a;计算机-----》管理---》服务和应用程序---》服务---》找到Event_log---》鼠标右键---》停止故障小插曲&#xff1a;故障一&#xff1a;windows系统中突然出现打印机无法打…...

编程日记 2025/1/15 10:17:53

做类似猪八戒网的网站/郑州品牌网站建设

文章目录1.sudo !!2.mtr 命令3.nl 命令4.shulf 和tree 、pstreeshulf 命令tree命令pstree 这个是进程按树形结构显示&#xff0c;显示当前进程以及相关子进程&#xff0c;输出信息跟“tree”类似5.last 命令6.curl ifconfig.me7.lsof -i:端口号8.cut 命令9.seq 命令11.关于 脚本…...

编程日记 2025/1/15 9:14:21

如何做网络网站推广/推广文案范例

最近一个项目要用到ActiveMq&#xff0c;并且需要最大程度的保证消息不丢失。以前对activeMq不是很熟悉&#xff0c;完全是摸着石头过河&#xff0c;目前基 本配置都搞定了。只是对于它的自动重连一直找不到好的解决办法&#xff0c;我希望的效果是当一个broker&#xff08;假设…...

编程日记 2025/1/15 8:41:34

怎么做网站报告/百度公司招聘岗位

最近批量刷数据的时候&#xff0c;由于集群资源紧张&#xff0c;需要控制一些 map 的数量&#xff0c;本文从底层代码触发&#xff0c;带大家了解一下 MR 是如何让切分 map 数的。Hive 是基于 Hadoop 的一个数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张数据库表&…...

编程日记 2025/1/15 6:59:57

免费动态网站成品作业/惊艳的网站设计

隐写篇0x01. 通过进制转换隐藏信息0x02. 在图片中隐藏压缩包(图种)加密篇0x03. 伪加密0x04. 爆破/字典/掩码攻击0x05. 明文攻击0x06. CRC32碰撞格式篇0x07. 修改格式0x01. 通过进制转换隐藏信息这种方法比较简单&#xff0c;直接拿一道题讲解(题目来自ISCC 2017 Basic-04)。题目…...

编程日记 2025/1/15 6:15:36

广州网站建设高端/手机百度下载免费

2019独角兽企业重金招聘Python工程师标准>>> 1、问题 通过一个死循环将读取键盘对应的设备文件将触发键盘事件在屏幕上打印出来&#xff0c;按esc退出程序 代码是在unbuntu10.04编译执行通过的 2、input_event描述 在Linux内核中&#xff0c;input设备用input_dev结…...

编程日记 2025/1/15 5:10:04