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

个人博客系统 -- 登录页面添加图片验证码

news 2026/1/12 14:01:52

目录

1. 功能展示

2. 前段代码

3. 后端代码

1. 功能展示

在登录页面添加验证码登录

1. 检测到没有输入验证码或者输入的验证码错误时,进行弹窗提示.并且刷新当前验证码图片

2. 点击验证码进行刷新

 

2. 前段代码

1. 添加验证码标签,在密码的下面,在login.html进行修改

主要改动如下:

2. 在提交的函数中加入验证码的信息 

3. 构造Ajax请求的时候,将验证码也插入到后端,并且判断后端的返回值,当code为-1的时候,表示验证码输入错误. 

 完整的login.html 如下所示:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆页面</title><link rel="stylesheet" href="css/conmmon.css"><link rel="stylesheet" href="css/login.css"><!-- 引入jQuery --><script src="js/jquery.min.js"></script>
</head><body><!-- 导航栏 --><div class="nav"><img src="img/logo2.jpg" alt=""><span class="title">我的博客系统</span><!-- 用来占据中间位置 --><span class="spacer"></span><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="reg.html">注册</a><!-- <a href="#">注销</a> --></div><!-- 版心 --><div class="login-container"><!-- 中间的登陆框 --><div class="login-dialog"><h3>登&nbsp;&nbsp;录</h3><div class="row"><span>用户名</span><input type="text" id="username"></div><div class="row"><span>密&nbsp;&nbsp;&nbsp;&nbsp;码</span><input type="password" id="password"></div><div class="row"><span>验证码</span><input type="text" id="captcha"></div><div class="row"><img id="captchaImg" src="/user/captcha" onclick="refresh()" alt="Captcha"></div><div class="row"><button id="submit" onclick="mysub()">提交</button></div></div></div><script>function mysub(){// 1. 非空校验// 页面加载时生成验证码// 点击验证码图片时刷新验证码var username = jQuery("#username");var password = jQuery("#password");var captcha = jQuery("#captcha");if(username.val() == ""){alert("请输入用户名!");username.focus();return;}if(password.val() == ""){alert("请输入密码!");password.focus();return;}if(captcha.val() == ""){alert("请输入验证码!");captcha.focus();refresh();return;}// 2. 构造ajax请求jQuery.ajax({url:"/user/login",type:"post",data:{"username":username.val(),"password":password.val(),"captcha":captcha.val()},success: function(result){if(result != null && result.code == 200 && result.data != null){// 执行成功 location.href="/myblog_list.html";}else if(result != null && result.code == -1){// 验证码输入错误alert("验证码输入错误,请重新输入!");refresh();}else{alert("用户名或密码错误,请重新登录!");}}})}function refresh() {document.getElementById("captchaImg").src = "/user/captcha?time=" + new Date().getTime();}</script>
</body></html>

3. 后端代码

 我们使用hutool框架进行实现后端验证码的构造

1. 在pom.xml引入hutool的环境依赖

<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.1.0</version></dependency>

2. 在Usercontroller.java 中进行添加代码

先实例化LineCaptcha对象,用来获取验证码,同时获取日志对象,在控制台打印验证码日志.

 在usercontroller中添加下述代码,用来产生随机数字验证码

/*** 生成验证码* @param response*/@RequestMapping("/captcha")public void captcha(HttpServletResponse response) {// 随机生成 4 位验证码RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);// 定义图片的显示大小lineCaptcha = CaptchaUtil.createLineCaptcha(100, 30);response.setContentType("image/jpeg");response.setHeader("Pragma", "No-cache");try {// 调用父类的 setGenerator() 方法，设置验证码的类型lineCaptcha.setGenerator(randomGenerator);// 输出到页面lineCaptcha.write(response.getOutputStream());// 打印日志logger.info("生成的验证码:{}", lineCaptcha.getCode());// 关闭流response.getOutputStream().close();} catch (IOException e) {e.printStackTrace();}}

3. 登录中添加验证码的验证 

 

相关文章：

个人博客系统 -- 登录页面添加图片验证码

目录 1. 功能展示 2. 前段代码 3. 后端代码 1. 功能展示 在登录页面添加验证码登录 1. 检测到没有输入验证码或者输入的验证码错误时,进行弹窗提示.并且刷新当前验证码图片 2. 点击验证码进行刷新 2. 前段代码 1. 添加验证码标签,在密码的下面,在login.html进行修改 主要…...

编程日记 2023/7/31 2:05:56

剑指offer10-I.斐波那契数列

学计算机的对这道题肯定不陌生&#xff0c;我记得是学C语言的时候学递归的时候有这道题&#xff0c;于是我就世界用递归写了如下代码&#xff1a; class Solution {public int fib(int n) {if(n1) return 1;if(n0) return 0;return (fib(n-1) fib(n-2)) % 1000000007;} } 到…...

编程日记 2023/7/31 2:04:55

13年测试经验，性能测试-压力测试指标分析总结，看这篇就够了...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 一般推荐&#xf…...

编程日记 2023/7/31 2:03:53

大数据课程D3——hadoop的Source

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 掌握Source的AVRO Source； ⚪ 掌握Source的Exec Source； ⚪ 掌握Source的Spooling Directory Source； ⚪ 掌握Source的Netcat Source； ⚪ 掌握Source的Sequence Generator Source；…...

编程日记 2023/7/31 2:02:52

F5 LTM 知识点和实验 4-持久化

第四章：持久化 持久化： 大多数应用都是有状态的，比如，使用一个购物网站，最重要的是用户在放入一个商品之后，刷新网页要能继续看到购物车里的东西，这就需要请求报文发到同一个后端服务器上，持久化就能完成这个功能。 持久化支持一下几种场景： 源地址目标地址SSLSIPH…...

编程日记 2023/7/31 2:01:48

SpringBoot之WebMvcConfigurer详解

目录 一、基本介绍 二、WebMvcConfigurer接口展示 三、常用方法列举 3.1 addInterceptors&#xff1a;添加拦截器 3.2 addResourceHandlers&#xff1a;添加静态资源 3.3 addCorsMappings&#xff1a;添加跨域 编写的初衷是为了自己巩固复习&#xff0c;如果能帮到你将是…...

编程日记 2023/7/31 2:00:46

WPF实战学习笔记22-添加自定义询问窗口

添加自定义询问窗口 详细代码&#xff1a;https://github.com/DongLiqiang/Mytodo/commit/221de6b2344d5c861f1d3b2fbb2480e3e3b35c26 添加自定义询问窗口显示方法 修改文件Mytodo.Extensions.DialogExtension 添加内容&#xff0c;类中添加内容 /// <summary> /// …...

编程日记 2023/7/31 1:59:45

Spring Boot项目的创建

hi 大家好,又见面了,今天继续讲解Spring Boot 文章目录 &#x1f436;1.什么是Spring Boot?&#x1f436;2.Spring Boot的优势&#x1f436;3.Spring Boot项目创建&#x1f33c;3.1使用ieda创建&#x1f95d;3.1.1下载插件Spring Boot Helper&#x1f95d;3.1.2创建项目 &…...

编程日记 2023/7/31 1:58:43

Python加载数据的5种方法

大家好&#xff0c;今天回顾五种引入数据的Python技术&#xff0c;并附有代码实例参考。 我们将使用Numpy、Pandas和Pickle包&#xff0c;所以要导入它们&#xff1a; import numpy as np import pandas as pd import pickle Manual功能 这是最困难的&#xff0c;因为你必须…...

编程日记 2023/7/31 1:57:42

QPoint、QLine、QSize、QRect

QPoint、QLine、QSize、QRect QPointQLineQSizeQRect QPoint // 构造函数 // 构造一个坐标原点, 即(0, 0) QPoint::QPoint(); // 参数为 x轴坐标, y轴坐标 QPoint::QPoint(int xpos, int ypos);// 设置x轴坐标 void QPoint::setX(int x); // 设置y轴坐标 void QPoint::setY(in…...

编程日记 2023/7/31 1:56:40

vue+leaflet笔记之地图量测

vueleaflet笔记之地图量测 文章目录 vueleaflet笔记之地图量测开发环境代码简介插件简介与安装使用简介图形量测动态量测 详细源码(Vue3) 本文介绍了Web端使用Leaflet开发库进行距离量测的一种方法 (底图来源:天地图)&#xff0c;结合leaflet-measure-path插件能够快速的实现地…...

编程日记 2023/7/31 1:55:39

“深入理解SpringBoot：从入门到精通的几个关键要点“

标题&#xff1a;深入理解Spring Boot&#xff1a;从入门到精通 摘要&#xff1a;本文将深入探讨Spring Boot的关键要点&#xff0c;帮助读者从入门到精通。我们将从Spring Boot的基本概念开始&#xff0c;介绍自动配置、起步依赖、注解驱动开发等特性&#xff0c;并通过示例代…...

编程日记 2023/7/31 1:54:37

数值线性代数: 共轭梯度法

本文总结线性方程组求解的相关算法&#xff0c;特别是共轭梯度法的原理及流程。 零、预修 0.1 LU分解 设&#xff0c;若对于&#xff0c;均有&#xff0c;则存在下三角矩阵和上三角矩阵&#xff0c;使得。 设&#xff0c;若对于&#xff0c;均有&#xff0c;则存在唯一的下三…...

编程日记 2023/7/31 1:53:36

【JVM】详解对象的创建过程

文章目录 1、创建对像的几种方式1、new关键字2、反射3、clone4、反序列化 2、创建过程步骤 1、检查类是否已经被加载步骤 2、 为对象分配内存空间1、指针碰撞针对指针碰撞线程不安全&#xff0c;有两种方案&#xff1a; 2、空闲列表选择哪种分配方式 步骤3、将内存空间初始化为…...

编程日记 2023/7/31 1:52:35

华纳云：ubuntu下如何搭建nfs服务

在Ubuntu下搭建NFS(Network File System)服务&#xff0c;可以实现网络文件共享。以下是在Ubuntu上搭建NFS服务的步骤&#xff1a; 安装NFS服务器和客户端软件&#xff1a; 打开终端&#xff0c;并使用以下命令安装NFS服务器和客户端软件&#xff1a; sudo apt-get update s…...

编程日记 2023/7/31 1:51:34

HCIA实验二

实验要求&#xff1a; 1.R2为ISP&#xff0c;只能配置IP 2.R1-R2之间为HDLC封装 3.R2-R3之间为PPP封装&#xff0c;pap认证&#xff0c;R2为主认证方 4.R2-R4之间为PPP封装&#xff0c;chap认证&#xff0c;R2为主认证方 5.R1、R2、R3构建MGRE&#xff0c;仅R1的IP地址固定…...

编程日记 2023/7/31 1:50:32

stm32 舵机 cubemx

文章目录 前言一、cubemx配置二、代码1.serve.c2.serve.h3.主函数 总结 前言 stm32对舵机进行控制&#xff0c;很简单直接一个pwm就可以实现 pwm的周期是50HZ占空比分别对应 一个0.5ms的高电平对应于0度 一个1.5ms的高电平对应于90度 一个2.5ms的高电平对应于180度 因此&#…...

编程日记 2023/7/31 1:49:32

无涯教程-jQuery - Spinner组件函数

Widget Spinner 函数可与JqueryUI中的窗口小部件一起使用。Spinner提供了一种从一组中选择一个值的快速方法。 Spinner - 语法 $( "#menu" ).selectmenu(); Spinner - 示例 以下是显示Spinner用法的简单示例- <!doctype html> <html lang"en"…...

编程日记 2023/7/31 1:48:31

Python 有趣的模块之pynupt——通过pynput控制鼠标和键盘

Python 有趣的模块之pynupt ——通过pynput控制鼠标和键盘 文章目录 Python 有趣的模块之pynupt ——通过pynput控制鼠标和键盘1️⃣简介2️⃣鼠标控制与移动3️⃣键盘控制与输入4️⃣结语&#x1f4e2; 1️⃣简介 &#x1f680;&#x1f680;&#x1f680;学会控制鼠标和键盘是…...

编程日记 2023/7/31 1:47:30

docker基于centos7镜像安装python3.7.9

下载centos7镜像 docker pull centos&#xff1a;centos7 启动容器centos-python-3.7 docker run -itd --name centos-python-3.7 -p 60021:22 --privileged centos:centos7 /usr/sbin/init 进入容器 docker exec -it centos-python-3.7 /bin/bash centos7环境下安装python3.7.…...

编程日记 2023/7/31 1:46:28

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/1/8 15:18:34

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/10 4:52:04

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2026/1/11 3:56:33

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/11/27 23:47:29

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2026/1/10 11:26:44

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2026/1/5 2:21:29

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2026/1/9 23:58:26

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2026/1/9 15:32:46