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

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

news 文章来源：https://blog.csdn.net/weixin_46114074/article/details/131957952 2025/2/7 20:16: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

JavaScript中的switch语句

switch语句和if语句一样&#xff0c;同样是运用于条件循环中&#xff1b; 下面例子我们用switch实现 例如如果今天是周一就学习HTML&#xff0c;周二学习CSS和JavaScript&#xff0c;周三学习vue&#xff0c;周四&#xff0c;周五学习node.js&#xff0c;周六周日快乐玩耍&…...

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

Jquery笔记

DOM对象通过jquery获取 所有的代码都是基于引入jquery.js文件 var mydiv $(#div);//直接获取到DOM对象元素id var mydiv$(.div)&#xff1b;//通过class获取DOM对象&#xff0c;如果有同名class只会获取第一个 var mysapn$(span);//通过元素的标签名获取DOM对象 var divarr$(…...

编程日记 2023/7/31 1:44:24

【C++】优先级队列的基本概念以及其模拟实现

文章目录 补充知识&#xff1a;仿函数一、优先级队列&#xff1a;1.引入2.介绍 二、priority_queue的模拟实现1.大体框架2.私有成员函数&#xff1a;1.向下调整&#xff08;AdjustDown&#xff09;2.向上调整&#xff08;AdjustUp&#xff09; 3.公有成员函数1大小&#xff08;…...

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

TextClamp for Vue3.0（Vue3.0的文本展开收起组件）

呦&#xff01;大家好&#xff0c;好久没有更新博客了&#xff0c;最近实现了一个一直想自己完成的一个东西&#xff0c;就是文本的展开收起组件&#xff0c;以前项目需要用到&#xff0c;自己实现一个又太繁琐&#xff0c;所以那个时候都是用的别人的轮子&#xff0c;现在自己…...

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

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测

区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 目录 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 区间预测 | MATLAB实现VAR向量自回归时间序列区间预测 VAR（Vector Autoregression）模型是一种广泛应用于时…...

编程日记 2023/7/31 1:41:21

在 Windows 上搭建 NTP 服务器

文章目录 一、基础环境二、适用场景三、操作步骤四、常用的NTP服务器五、参考资料 版权声明&#xff1a;本文为博主原创文章&#xff0c;于2023年7月30日首发于CSDN&#xff0c;转载请附上原文出处链接和本声明。本文链接&#xff1a;https://blog.csdn.net/u011046671 一、基础…...

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

应急响应经典案例-FTP 暴力破解

应急响应经典案例-FTP 暴力破解 应急场景日志分析应急处理措施 应急场景 从昨天开始&#xff0c;网站响应速度变得缓慢&#xff0c;网站服务器登录上去非常卡&#xff0c;重启服务器就能保证一段时间的正常访问&#xff0c;网站响应状态时而飞快时而缓慢&#xff0c;多数时间是…...

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

41. linux通过yum安装postgresql

文章目录 1.下载安装包2.关闭内置PostgreSQL模块:3.安装postgresql服务:4.初始化postgresql数据库:5.设置开机自启动:6.启动postgresql数据库7.查看postgresql进程8.通过netstat命令或者lsof 监听默认端口54329.使用find命令查找了一下postgresql.conf的配置位置10.修改postgre…...

编程日记 2023/7/31 1:38:17

SpringBoot启动流程及自动配置

SpringBoot启动流程源码&#xff1a; 1、启动SpringBoot启动类SpringbootdemoApplication中的main方法。 SpringBootApplication public class SpringbootdemoApplication {public static void main(String[] args) {SpringApplication.run(SpringbootdemoApplication.class, …...

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

【Linux】进程轻松入门

目录 一&#xff0c; 冯* 诺依曼体系结构 1&#xff0c;存储结构 ​编辑 二&#xff0c; 操作系统 1&#xff0c;概念 2&#xff0c;设计OS的目的 3&#xff0c;定位 4&#xff0c;如何理解 "管理" 5&#xff0c; 总结 三&#xff0c;进程 1. 概念 那么…...

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

好听的建筑公司名字大全/搜索引擎优化seo培训

安装PHPStudy2014,打开端口出现80端口 PID4 进程&#xff1a;System后来发现原来是我本地电脑安装了SQL SERVER 2008R2占用了端口&#xff0c;把它Reporting Services停止后就正常了&#xff1a;转载于:https://blog.51cto.com/myjieli/1845461...

编程日记 2025/2/7 17:20:06

网站建设推广销售好做吗/贵阳网站建设

华为emui10.1系统正式版跟随这次p40系列新品发布会一起到来了&#xff0c;全新升级的版本打造&#xff0c;为新款手机提供了更为优质的软件使用体验&#xff0c;有效结合了硬件的优质&#xff0c;更好地发挥了手机的强大功能&#xff0c;实现了更为高效的操作功能服务&#xff…...

编程日记 2025/2/7 16:48:53

wordpress 搜索 很慢/网站排名优化软件联系方式

欢迎大家关注本博&#xff0c;同时欢迎大家评论交流&#xff0c;可以给个赞哦&#xff01;&#xff01;&#xff01; 在进行Web开发过程中&#xff0c;都会直接或间接的接触到Servlet&#xff0c;比如最基本的基于Servlet的应用、基于Spring技术栈的应用。在依赖Spring技术栈进…...

编程日记 2025/2/7 16:24:10

在线网站优化公司/昆明网络推广

本文介绍如何在Ubuntu上玩Windows游戏的方法&#xff0c;使用Wine、PlayOnLinux或使用Winetricks。当前并非每个Windows游戏都有Linux版本&#xff0c;而且很多游戏都没有发布Linux版本的计划&#xff0c;这个时候可以试试本文介绍的方法。一、使用WineWine是一个开源的Windows…...

编程日记 2025/2/7 15:21:31

wordpress 怎么改密码忘记/优秀网站设计

flask系列---反转函数url_for与重定向redirect&#xff08;二&#xff09; 返回html文件 我们之前的视图函数&#xff0c;返回的都是简单的Hello Wolrd之类的字符串&#xff0c;怎么返回一个html呢&#xff1f;首先我们在templates文件夹建立一个html文件&#xff0c;内容随便…...

编程日记 2025/2/7 9:58:06

怎么用二维动画做网站首页步骤/爱站网怎么用

在MySQL服务器出现短暂(5~30秒)的性能波动的时候&#xff0c;一般的性能监控工具都很难抓住故障现场&#xff0c;也就很难收集对应较细粒度的诊断信息。另外&#xff0c;如果这种波动出现的频率很低&#xff0c;例如几天才一次&#xff0c;我们也很难人为的抓住现场&#xff0c…...

编程日记 2025/2/7 9:28:38