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时代的效率提升 一，…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
大数据学习（132）-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言Ǵ…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...