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

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

news 2026/5/23 7:07:22

目录

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

WarcraftHelper终极教程：5分钟搞定魔兽争霸3现代化优化

WarcraftHelper终极教程&#xff1a;5分钟搞定魔兽争霸3现代化优化 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为《魔兽争霸3》这款经典游戏在…...

编程新知 2026/5/23 7:01:15

STM32H7 QSPI Flash程序调试全攻略：从MDK配置到单步调试，解决‘算法加载失败’的常见问题

STM32H7 QSPI Flash程序调试实战&#xff1a;破解算法加载失败的终极指南 当你第一次看到MDK弹窗提示"Download Algorithm Failed"时&#xff0c;那种挫败感我深有体会。作为使用STM32H7系列开发过多个量产项目的工程师&#xff0c;我曾在QSPI Flash调试过程中踩过所…...

编程新知 2026/5/23 5:46:27

opencode使用安装

确保已经安装好node npm安装opencode C:\WINDOWS\system32>npm install -g opencode-aiadded 3 packages in 2mC:\WINDOWS\system32>npm安装mcp-chrome C:\WINDOWS\system32>npm...

编程新知 2026/5/23 4:12:44

Keil调试中局部变量修改限制的解决方案

1. 问题现象与背景解析在嵌入式开发过程中&#xff0c;调试环节往往占据整个开发周期的40%以上时间。作为Keil Vision的资深用户&#xff0c;我最近在调试一个基于C166架构的通信协议栈时&#xff0c;遇到了一个看似简单却令人困扰的问题&#xff1a;当我在receive_data函数内部…...

编程新知 2026/5/23 4:00:39

SQL Server报错注入原理与实战：从错误机制到WAF绕过

1. 报错注入不是“碰运气”&#xff0c;而是对SQL Server错误机制的精准利用很多人一听到“报错注入”&#xff0c;第一反应是“得看目标网站开不开错误提示”“得撞运气看有没有报错回显”。这种理解停留在表层&#xff0c;甚至会误导初学者放弃深入——其实恰恰相反&#xff…...

编程新知 2026/5/23 3:34:08

从Polar靶场“中等”难度题，聊聊新手CTFer最容易踩的5个Web安全坑

从Polar靶场“中等”难度题&#xff0c;聊聊新手CTFer最容易踩的5个Web安全坑 当你第一次踏入CTF的Web安全领域&#xff0c;Polar靶场的中等难度题目就像一座看似平缓却暗藏陷阱的山峰。许多新手在这里反复跌倒&#xff0c;不是因为技术门槛过高&#xff0c;而是忽略了那些本该…...

编程新知 2026/5/23 3:09:26

量子加速，多模态跃迁：国产大模型的下一站机遇

量子加速&#xff0c;多模态跃迁&#xff1a;国产大模型的下一站机遇 引言 当国产多模态大模型在理解图文、生成内容上不断突破时&#xff0c;一个更具颠覆性的技术变量正在悄然融入——量子计算。这不仅是实验室里的前沿概念&#xff0c;更是百度、华为、阿里等科技巨头竞相布…...

编程新知 2026/5/23 3:01:25

Logback 日志框架使用与配置指南

1. Logback 核心概念与架构 Logback 是 Java 生态中最主流的日志框架之一&#xff0c;其配置体系主要围绕以下三个核心概念展开&#xff1a; Logger&#xff08;日志记录器&#xff09;&#xff1a;负责捕获日志事件。它通过 name 属性&#xff08;通常是包名或类名&#xff09…...

编程新知 2026/5/23 2:25:04

递归提示策略：构建高效可靠的自然语言转SQL系统

1. 引言&#xff1a;当自然语言撞上结构化查询作为一名和数据打了十几年交道的“老码农”&#xff0c;我见过太多业务同学对着数据库“望洋兴叹”的场景。他们能清晰地用中文描述需求&#xff1a;“帮我找出上个月华东地区销售额超过10万&#xff0c;但客户满意度低于平均值的所…...

编程新知 2026/5/23 2:00:34

C++继承与组合设计

C继承与组合设计继承和组合是面向对象设计中两种重要的代码复用机制。继承表示"是一个"关系&#xff0c;而组合表示"有一个"关系。理解何时使用继承、何时使用组合是设计良好系统的关键。继承允许派生类继承基类的属性和方法&#xff0c;实现代码复用和多态…...

编程新知 2026/5/23 1:03:49