Day14-Servlet后端验证码的实现
图片验证码的生成采用的是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； Kaptcha是一个高度可配置的验证码生成工具，由Google开源。它通过一系列配置文件和插件，实现了将验证码字符串自动转换成图片流，并可以与session进行关联，从而在验证过程中使用&#…...
MySQL：数据库权限与角色
权限 MySQL 的权限管理系统是保障数据库安全性的关键组件之一。它允许数据库管理员精确控制哪些用户可以对哪些数据库对象执行哪些操作。 自主存取控制 DAC（DiscretionaryAccess Control)：用户对于不同的数据库对象有不同的存取权限，不同的…...
等保测评练习卷25
等级保护初级测评师试题25 姓名： 成绩： 一、判断题（10110分） 1.安全区域边界对象主要根据系统中网络访问控制设备的部署情况来确定（）不是网络访问控制设备而…...
《python语言程序设计》2018第6章第28题 掷骰子 两个色子，分别是1到6
2、3、12 玩家输 7、11玩家赢 4、5、6、8、9、10算1点，之后出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…...
Java方法递归
目录 1.方法递归调用 基本介绍 递归能解决什么问题？ 八皇后问题 递归举例 递归重要规则 练习 2.递归调用应用实例-迷宫问题 3.递归调用实例-汉诺塔 4.递归调用实例-八皇后问题 1.方法递归调用 基本介绍 简单来说，递归就是自己调用自己。 …...
目标跟踪那些事
目标跟踪那些事 跟踪与检测的区别 目标跟踪和目标检测是计算机视觉中的两个重要概念，但它们的目的和方法是不同的。 目标检测(object Detection)：是指在图像或视频帧中识别并定位一个或多个感兴趣的目标对象的过程 。 目标跟踪(object Tracking)&…...
【Git】 如何将一个分支的某个提交合并到另一个分支
【Git】 如何将一个分支的某个提交合并到另一个分支 在使用 Git 进行版本控制时，常常会遇到这样的需求：将某个分支的特定提交合并到另一个分支中。这种情况下，我们可以使用 cherry-pick 命令来实现。本文将详细介绍 cherry-pick 命令的使用方…...
【嵌入式之RTOS】什么是消息队列
目录 一、FreeRTOS消息队列的基本概念 二、FreeRTOS消息队列的工作原理 三、FreeRTOS消息队列的特点 四、FreeRTOS消息队列的应用 五、示例 消息队列是一种用于任务间通信的机制，它允许一个任务（生产者）向消息队列发送消息，而…...
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，这两个module分别是两个springboot项目，都从nacos中获取连接mysql的连接参数。我们开工。 …...
市场主流 AI 视频生成技术的迭代路径
AI视频生成技术的迭代路径经历了从GANVAE、Transformer、Diffusion Model到Sora采用的DiT架构（TransformerDiffusion）等多个阶段，每个阶段的技术升级都在视频处理质量上带来了飞跃性的提升。这些技术进步不仅推动了AI视频生成领域的快速发展&…...
移情别恋c++ ദ്ദി˶ｰ̀֊ｰ́ ) ——1.c++入门（2）
1. 函数重载 C⽀持在同⼀作⽤域中出现同名函数，但是要求这些同名函数的形参不同，可以是参数个数不同或者 类型不同。这样C函数调⽤就表现出了多态⾏为，使⽤更灵活。C语⾔是不⽀持同⼀作⽤域中出现同 名函数的。 #include<iostream> u…...
【Python系列】深入理解 Python 中的 `nonlocal` 关键字
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
Flask目录结构路由重定向简单实例讲解——轻量级的 Python Web 框架
假设一个flask目录结构如下： my_flask_app/ │ ├── app.py ├── routes/ │ ├── __init__.py │ ├── ZhejiangProvince/ │ │ ├── __init__.py │ │ ├── la.py │ │ └── el.py │ ├── GuangdongProvince/ │ │ ├…...
破解PyCharm插件更新难题：让IDE焕发新生
破解PyCharm插件更新难题：让IDE焕发新生 PyCharm作为业界领先的集成开发环境（IDE），其丰富的插件生态是其强大功能的重要来源。然而，插件无法更新的问题可能会困扰许多用户，影响开发体验。本文将详细介绍如…...
cmake常用命令学习
1.include https://blog.csdn.net/qq_38410730/article/details/102677143 CmakeLists.txt才是cmake的正统文件，而.cmake文件是一个模块文件，可以被include到CMakeLists.txt中。 include指令一般用于语句的复用，也就是说，如果有…...
K8S可视化管理平台KubeSphere
什么是 KubeSphere ？ KubeSphere 是一款开源项目，在目前主流容器调度平台 Kubernetes 之上构建的企业级分布式多租户容器管理平台，提供简单易用的操作界面以及向导式操作方式，在降低用户使用容器调度平台学习成本的同时ÿ…...
Bugku-CTF-聪明的php
pass a parameter and maybe the flag files filename is random :> 传递一个参数，可能标记文件的文件名是随机的: 于是传一下参，在原网页后面加上/?a1,发现网页出现了变化 3.传入参数，一般情况下是文件包含，或者命令执行&…...
【MySQL进阶】MySQL主从复制
目录 MySQL主从复制 概念 主从形式 一主多从 多主一从 双主复制 主从级联复制 主从复制原理 三个线程 两个日志文件 主从复制的主要工作模式 异步复制 半同步复制 全同步复制 MySQL主从复制 概念 MySQL主从复制是一种数据分布机制，允许从一个数据库服…...
本地部署文生图模型 Flux
本地部署文生图模型 Flux 0. 引言1. 本地部署1-1. 创建虚拟环境1-2. 安装依赖模块1-3. 创建 Web UI1-4. 启动 Web UI1-5. 访问 Web UI 0. 引言 2024年8月1日，blackforestlabs.ai发布了 FLUX.1 模型套件。 FLUX.1 文本到图像模型套件，该套件定义了文本到…...
谷粒商城实战笔记-127-全文检索-ElasticSearch-整合-测试复杂检索
文章目录 一，使用Elasticsearch的Java RESTHighLevel Client完成复杂的查询请求1. 创建检索请求 (SearchRequest)2. 构造检索条件 (SearchSourceBuilder)3. 执行检索 (SearchResponse)4. 处理解析结果5. 获取聚合信息 二，AI时代的效率提升 一，…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
宇树科技，改名了！
提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。 最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...