登录界面验证码的实现

文章目录

    • Javaweb实现验证码
      • 前端
      • 后台
    • Springboot添加验证码
      • 项目结构
      • 依赖
      • 控制类
      • 前端页面
      • 效果图

Javaweb实现验证码

前端

添加样式

<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>FM_blog</title><link rel="stylesheet" type="text/css" href="res/layui/css/layui.css"><link rel="stylesheet" type="text/css" href="res/css/main.css"><script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script><script src="layer/layer.js"></script>

编写代码

        <div>  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>锋芒博客登录</legend></fieldset></div>            
<div class="layui-container fly-marginTop"><div class="fly-panel fly-panel-user"><div class="layui-tab layui-tab-brief" ><ul class="layui-tab-title"><li class="layui-this">登入</li><li><a href="reg.jsp">注册</a></li></ul><div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;"><div class="layui-tab-item layui-show"><div class="layui-form layui-form-pane"><form role="form" method="POST" name="login" action="LoginServlet"><div class="layui-form-item"><label for="L_username" class="layui-form-label">用户名</label><div class="layui-input-inline"><input type="text" class="layui-input" name="userName" id="L_username" placeholder="Admin..."/></div></div>   <div class="layui-form-item"><label for="L_pass" class="layui-form-label">密码</label><div class="layui-input-inline"><input class="layui-input" type="password" name="userPassword" placeholder="Password..."></div></div><div class="layui-form-item"><label for="L_vercode" class="layui-form-label">验证码</label><div class="layui-input-inline"><input type="text" class="layui-input" placeholder="点击图片切换" autocomplete="off" required name = "validationCode" ></div><div class="layui-form-mid"><span><img  src="ValidationCodeServlet" id="CreateCheckCode" onclick="change()"/></span></div></div><div class="layui-form-item"><input class="layui-btn" type="submit" name="login" value="登录"/></div></form></div></div></div></div></div>
</div>		

<script type="text/javascript">
function change(){ document.getElementById("CreateCheckCode").src="ValidationCodeServlet?"+Math.random(); } 
</script>

配置web.xml文件

<servlet><description>com.FM.servlet</description><display-name>com.FM.servlet.ValidationCodeServlet</display-name><servlet-name>ValidationCodeServlet</servlet-name><servlet-class>com.FM.servlet.ValidationCodeServlet</servlet-class></servlet>

<servlet-mapping><servlet-name>ValidationCodeServlet</servlet-name><url-pattern>/ValidationCodeServlet</url-pattern></servlet-mapping>

后台

package com.FM.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.OutputStream;
import java.util.Random;public class ValidationCodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;public ValidationCodeServlet() {super();}protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获得验证码集合的长度int charsLength = codeChars.length();//下面3条记录是关闭客户端浏览器的缓冲区//这3条语句都可以关闭浏览器的缓冲区，但是由于浏览器的版本不同，对这3条语句的支持也不同//因此，为了保险起见，同时使用这3条语句来关闭浏览器的缓冲区resp.setHeader("ragma", "No-cache");resp.setHeader("Cache-Control", "no-cache");resp.setDateHeader("Expires", 0);//设置图形验证码的长和宽int width = 90, height = 30;BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics(); //获得用于输出文字的Graphics对象Random random = new Random();g.setColor(getRandomColor(180, 250));g.fillRect(0, 0, width, height);g.setFont(new Font("Times New Roman",Font.ITALIC,height));g.setColor(getRandomColor(120, 180));//用户保存最后随机生成的验证码StringBuilder validationCode = new StringBuilder();//验证码的随机字体String[] fontNames = {"Times New Roman","Book antiqua","Arial"};//随机生成4个验证码for(int i = 0; i < 4; i++){//随机设置当前验证码的字符的字体g.setFont(new Font(fontNames[random.nextInt(3)],Font.ITALIC,height));//随机获得当前验证码的字符char codeChar = codeChars.charAt(random.nextInt(charsLength));validationCode.append(codeChar);//随机设置当前验证码字符的颜色g.setColor(getRandomColor(10, 100));//在图形上输出验证码字符，x和y都是随机生成的g.drawString(String.valueOf(codeChar), 16*i + random.nextInt(7), height-random.nextInt(6));}//获得HttpSession对象HttpSession session = req.getSession();//设置session对象5分钟失效session.setMaxInactiveInterval(5*60);//将验证码保存在session对象中,key为validation_codesession.setAttribute("validation_code", validationCode.toString());//关闭Graphics对象g.dispose();OutputStream outS = resp.getOutputStream();ImageIO.write(image, "JPEG", outS);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		doGet(request, response);}//图形验证码的字符集，系统将随机从这个字符串中选择一些字符作为验证码private static String codeChars = "123456789abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ";//返回一个随机颜色private static Color getRandomColor(int minColor, int maxColor){Random random = new Random();if(minColor > 255){minColor = 255;}if(maxColor > 255){maxColor = 255;}//获得r的随机颜色值int red = minColor + random.nextInt(maxColor-minColor);//gint green = minColor + random.nextInt(maxColor-minColor);//bint blue = minColor + random.nextInt(maxColor-minColor);return new Color(red,green,blue);}
}

效果图：
在这里插入图片描述

Springboot添加验证码

项目结构

在这里插入图片描述

依赖

	<!-- 验证码 --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>

控制类

CommonController

package com.habse.car_position.Controller;import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;/*
验证码*/@Controller
public class CommonController {@Autowiredprivate DefaultKaptcha captchaProducer;@GetMapping("/common/kaptcha")public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {byte[] captchaOutputStream = null;ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();try {//生产验证码字符串并保存到session中String verifyCode = captchaProducer.createText();httpServletRequest.getSession().setAttribute("verifyCode", verifyCode);BufferedImage challenge = captchaProducer.createImage(verifyCode);ImageIO.write(challenge, "jpg", imgOutputStream);} catch (IllegalArgumentException e) {httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);return;}captchaOutputStream = imgOutputStream.toByteArray();httpServletResponse.setHeader("Cache-Control", "no-store");httpServletResponse.setHeader("Pragma", "no-cache");httpServletResponse.setDateHeader("Expires", 0);httpServletResponse.setContentType("image/jpeg");ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();responseOutputStream.write(captchaOutputStream);responseOutputStream.flush();responseOutputStream.close();}
}

KaptchaConfig

package com.habse.car_position.config;import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;import java.util.Properties;@Component
public class KaptchaConfig {@Beanpublic DefaultKaptcha getDefaultKaptcha(){DefaultKaptcha defaultKaptcha = new DefaultKaptcha();Properties properties = new Properties();properties.put("kaptcha.border", "no");properties.put("kaptcha.textproducer.font.color", "blue");properties.put("kaptcha.image.width", "140");properties.put("kaptcha.image.height", "40");properties.put("kaptcha.textproducer.font.size", "30");properties.put("kaptcha.session.key", "verifyCode");properties.put("kaptcha.textproducer.char.space", "5");Config config = new Config(properties);defaultKaptcha.setConfig(config);return defaultKaptcha;}
}

前端页面

 <label class="block input-icon"><input type="text" name="verifyCode" placeholder="请输入验证码" style="width: 130px"><img alt="单击图片刷新！" class="pointer"  src="/common/kaptcha"onclick="this.src='/common/kaptcha?d='+new Date()*1" style="margin-left: 10px;"></label>

效果图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/530985.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Javaweb MVC设计模式、Modle发展史、项目分层和三层架构

Javaweb MVC设计模式、Modle发展史、项目分层和三层架构

文章目录MVC设计模式MVC的目的MVC举例jspservletjavabean模式MVC的优点MVC的缺点Modle 发展史项目分层三层架构MVC设计模式 MVC模式&#xff08;Model-View-Controller&#xff09;是软件工程中的一种软件架构模式&#xff0c;把软件系统分为三个基本部分&#xff1a;模型&…
阅读更多...
HTML表格和HTML表单

HTML表格和HTML表单

HTML 表格 表格由 <table> 标签来定义每个表格均有若干行&#xff08;由 <tr> 标签定义&#xff09;&#xff0c;每行被分割为若干单元格&#xff08;由 <td> 标签定义&#xff09; 字母 td 指表格数据&#xff08;table data&#xff09;&#xff0c;即数据…
阅读更多...
解决虚拟机没有ens33网卡的问题

解决虚拟机没有ens33网卡的问题

话不多说&#xff0c;直接操作 解决办法 1.在终端中输入: sudo vim /etc/network/interfaces进入interfaces文件后&#xff0c;然后输入以下代码&#xff0c;然后保存退出 auto ens33 iface ens33 inet dhcp 2.重启虚拟机 输入ifconfig命令&#xff0c;成功启动ens33网卡
阅读更多...
Springboot分层图解

Springboot分层图解

阅读更多...
HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)

HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)

作为作者&#xff0c;强烈不建议进行格式化hadoop&#xff0c;毕竟开发数据是最为重要的&#xff01; Hadoop 3.1 hdfs dfs -put /源文件路径 /目的文件路径解决方案 第一步&#xff1a;停止主节点&#xff08;Master&#xff09;和子节点服务&#xff08;Slave&#xff09; …
阅读更多...
图（Graph）的学习

图（Graph）的学习

文章目录图的认识图的概念无向图有向图简单图完全图子图连通、连通图、连通分量边的权和网加权图邻接和关联路径简单路径、简单回路环顶点的度、入度和出度割点&#xff08;关节点&#xff09;桥(割边)距离有向树图的表示邻接列表邻接矩阵图的遍历深度优先遍历广度优先遍历生成…
阅读更多...
并查集（Disjiont Set）

并查集（Disjiont Set）

并查集 并查集的最大作用是检测一个图上面存不存在环。 无向图&#xff0c;六个顶点 显然 1-2-4-3连成一个环 #include<stdio.h> #include<stdlib.h>#define VERTICES 6void initialise(int parent[]){int i;for(i0;i<VERTICES;i){parent[i]-1; }}int find_…
阅读更多...
采用Kruskal算法生成最小生成树，并采用并查集的合并优化和查询优化。

采用Kruskal算法生成最小生成树，并采用并查集的合并优化和查询优化。

文章目录最小生成树1.什么是图的最小生成树&#xff08;MST&#xff09;?2.最小生成树用来解决什么问题&#xff1f;Kruskal&#xff08;克鲁斯卡尔&#xff09;算法算法描述图解最小生成树 1.什么是图的最小生成树&#xff08;MST&#xff09;? 用N-1条边连接N个点&#x…
阅读更多...
Java连接Mysql数据库（JDBC）

Java连接Mysql数据库（JDBC）

文章目录导入包con、stmt、rs 三者存在一定的关系getInt和getStringinput.nextInt();简单使用讲解ResultSet和StatementPreparedStatement的用法JDBC连接代码更多样例导入包 import java.sql.Connection; import java.sql.DriverManager; import java.sql.statement; import j…
阅读更多...
Linux编程考前测试题

Linux编程考前测试题

文章目录选择题多选题判断题填空题简答题编程题选择题 1:当打开vi文本编辑器编辑文件时&#xff0c;vi处于&#xff08;A&#xff09;模式 A: 命令模式 B: 编辑模式 C: 实模式 D: 虚模式 2:下列有关fork&#xff08;&#xff09;函数返回值说法错误的是&#xff08;D&#xf…
阅读更多...
MySQL考试复习（知识点、练习题）

MySQL考试复习（知识点、练习题）

文章目录数据库的管理技术的三个阶段发展的三个阶段数据库的锁数据库设计的基本步骤事务的四大特性什么是视图如果关系模式设计不好&#xff0c;可能带来哪几个问题数据库管理系统的主要功能有哪些数据库系统中的常见故障有哪些简述SQL语言的组成说明关系模型有哪三类完整性规则…
阅读更多...
Oracle复习（知识点、练习题、实验）

Oracle复习（知识点、练习题、实验）

文章目录第一章 数据库概念数据库的三级模式结构&#xff1a;模式、外模式、内模式三级模式之间的映射第二章 Oracle12g体系结构Oracle的逻辑存储结构Oracle物理存储结构Oracle11g服务器结构系统全局区&#xff08;SGA&#xff09;程序全局区&#xff08;PGA&#xff09;第三章…
阅读更多...
Openstack面试题和知识点总结

Openstack面试题和知识点总结

文章目录知识点云计算起源定义特点分类服务类型平台分类应用虚拟化虚拟化技术定义分类云计算和虚拟化的关系虚拟化的优点OpenStack简介核心架构Openstack组件共享服务组件核心组件组件详解RabbitMQ概念特点rabbitmq中的概念工作原理常用操作MemcachedKeystoneGlance工作原理Nov…
阅读更多...
auto.js 实现信息发送、QQ点赞、微信点赞、健康日报签到

auto.js 实现信息发送、QQ点赞、微信点赞、健康日报签到

文章目录auto.js开发文档安装total control在手机端安装auto.js apk安装vscode短信多条发送QQ点赞微信点赞健康日报填写叠猫猫auto.js开发文档 点击学习 安装total control total control 用于手机投屏在电脑屏幕上 在手机端安装auto.js apk 链接&#xff1a;https://pan.…
阅读更多...
MapReduce综合学习含Wordcount案例

MapReduce综合学习含Wordcount案例

文章目录MapReduce简介MapTaskReduceTaskMapper阶段解读Reducer阶段解读MapReduce适用的问题MapReduce的特点MapReduce基本思想大数据处理思想&#xff1a;分而治之构建抽象模型&#xff1a;Map 函数和 Reduce 函数上升到架构&#xff1a;并行自动化并隐藏底层细节MapReduce计算…
阅读更多...
基于Spring boot+Vue的在线考试系统

基于Spring boot+Vue的在线考试系统

文章目录spring boot 分层图解安装idea配置阿里云镜像项目启动前端项目结构项目前端中index.htmlApp.vuemain.jsrouter整个页面渲染过程关于矢量图图标的使用引入JQuery依赖github-markdown-css样式文件-一般用作文章正文的样式美化spring boot 分层图解 安装idea 安装参考 id…
阅读更多...
Java基础总结之（面试）

Java基础总结之（面试）

文章目录Java标识符Java修饰符访问权限修饰符访问控制和继承非访问权限修饰符局部变量修饰符接口接口中方法修饰符运算符算术运算符一元运算符二元运算符算术赋值运算符赋值运算符逻辑运算符&#xff08;&&、||和!&#xff09;关系运算符自增和自减运算符&#xff08;和…
阅读更多...
Javaweb练手项目

Javaweb练手项目

文章目录学生管理系统音乐网站锋芒博客中医药管理系统博客天梯CMS系统锋芒社团官网学生管理系统 实现技术&#xff1a;ServletMVC&#xff08;模式&#xff09;Filter(过滤器&#xff09;html 主要功能&#xff1a;学生信息的增删查改&#xff0c;文件&#xff08;图片&#x…
阅读更多...
Spark之scala学习（基础篇）待更新

Spark之scala学习（基础篇）待更新

文章目录引言大数据介绍大数据与云计算区别大数据和人工智能的区别大数据和传统的分析&#xff08;excel&#xff09;的区别scala的特性面向对象特性函数式编程函数式编程的特点&#xff1a;函数式编程的优势静态类型扩展性并发性为什么要学scalascala安装简单测试了解ScalaSca…
阅读更多...
Jupyter Notebook的安装及问题解决方案

Jupyter Notebook的安装及问题解决方案

文章目录下载并安装Anaconda3更改主界面路径但是如果没有jupyter_notebook_config.py文件怎么办&#xff1f;如果更改过路径后&#xff0c;不生效怎么办&#xff1f;使用参考pycharm导入pyspark下载并安装Anaconda3 官网下载个人版 Anaconda3安装参考 点击&#xff0c;然后进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023