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时代的效率提升 一，…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...