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

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

news 2025/6/9 10:08:45

目录

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

【C/C++】EBO空基类优化介绍

空对象优化&#xff08;Empty Base Optimization&#xff0c;简称 EBO&#xff09;是 C 编译器的一种 优化技术&#xff0c;用于消除空类作为基类时占用的内存空间&#xff0c;从而避免浪费空间、提升结构体或类的存储效率。 1 什么是“空对象”&#xff1f; 一个**空类&#…...

编程新知 2025/6/9 9:55:35

Ubuntu18.6 学习QT问题记录以及虚拟机安装Ubuntu后的设置

Ubuntu安装 1、VM 安装 Ubuntu后窗口界面太小 Vmware Tools 工具安装的有问题 处理办法&#xff1a; 1、重新挂载E:\VMwareWorkstation\linux.iso文件&#xff0c;该文件在VMware安装目录下 2、Ubuntu桌面出现vmtools共享文件夹&#xff0c;将gz文件拷贝至本地&#xff0c;解…...

编程新知 2025/6/8 22:34:18

学习STC51单片机30（芯片为STC89C52RCRC）

每日一言 当你感到疲惫时&#xff0c;正是成长的关键时刻&#xff0c;再坚持一下。 IIC协议 是的&#xff0c;IIC协议就是与我们之前的串口通信协议是同一个性质&#xff0c;就是为了满足模块的通信&#xff0c;其实之前的串口通信协议叫做UART协议&#xff0c;我们千万不要弄…...

编程新知 2025/6/8 22:28:02

ROS2，工作空间中新建了一个python脚本，需要之后作为节点运行。告诉我步骤？

提问 ROS2&#xff0c;工作空间中新建了一个python脚本&#xff0c;需要之后运行。告诉我步骤&#xff1f; 大概要包括而不限于&#xff1a;chmod给可执行权限、setup.py中entry point的配置&#xff0c;如果在launch文件中要使用&#xff0c;还涉及到launch.py文件的配置。最…...

编程新知 2025/6/8 21:34:13

深入理解 Java 多线程：原理剖析与实战指南

深入理解 Java 多线程&#xff1a;原理剖析与实战指南 一、引言 在现代软件开发中&#xff0c;多线程编程已经成为提升应用性能与响应能力的重要手段。Java 作为一门成熟的编程语言&#xff0c;自 JDK 1.0 起就提供了对多线程的原生支持。本文将深入剖析 Java 多线程的底层原…...

编程新知 2025/6/8 13:51:21

DelayQueue、ScheduledThreadPoolExecutor 和 PriorityBlockingQueue ：怎么利用堆实现定时任务

DelayQueue DelayQueue 的最大亮点&#xff1a; 并不是简单全局锁的“单调队列”实现&#xff0c;而是用Leader-Follower 模式极大减少了线程唤醒的开销。插入与唤醒、等待与 leader 变更&#xff0c;都通过巧妙的锁和条件变量组合完成。 如果只关注“线程安全的优先队列全局…...

编程新知 2025/6/8 13:27:15

双碳时代，能源调度的难题正从“发电侧”转向“企业侧”

安科瑞刘鸿鹏 摘要 在“双碳”战略和能源结构转型的大背景下&#xff0c;企业储能电站逐步成为提升能源利用效率、增强用能韧性的重要手段。随着系统规模扩大与运行复杂度提升&#xff0c;如何对光伏、储能、负荷等流进行实时调控&#xff0c;成为智慧用能的关键。ACCU100微…...

编程新知 2025/6/8 12:31:13

几种简单的排序算法（C语言）

目录 1 简介 2 冒泡排序 2.1 基本思路 2.2 代码实现 3 选择排序 3.1 基本思路 3.2 代码实现 4 插入排序 4.1 基本思路 4.2 代码实现 5 快速排序 5.1 基本思路 5.2 代码实现 6 归并排序 6.1 基本思路 6.2 代码实现 7 基数排序 7.1 基本思路 7.2 代码实现 8 …...

编程新知 2025/6/8 10:52:24

分布式微服务系统架构第144集：FastAPI全栈开发教育系统

加群联系作者vx&#xff1a;xiaoda0423 仓库地址&#xff1a;https://webvueblog.github.io/JavaPlusDoc/ https://1024bat.cn/ https://github.com/webVueBlog/fastapi_plus https://webvueblog.github.io/JavaPlusDoc/ 使用docker搭建常用开发环境 docker安装mysql docker ru…...

编程新知 2025/6/8 7:56:24

NGINX `ngx_stream_core_module` 模块概览

一、模块定位与功能 通用 TCP/UDP 代理 支持同时处理 TCP 和 UDP 流量&#xff0c;透明转发请求到后端服务器组&#xff08;upstream&#xff09;。可作为四层负载均衡&#xff0c;根据客户端 IP、权重、最少连接等策略将连接分发给后端。 预读&#xff08;preread&#xff09…...

编程新知 2025/6/8 7:15:12