我们总是在登录微信,QQ或者其他一些网页的时候,都会出现一个验证码框,他们有的是数字的,有的是文字的,有的是混合的,各种各样的。
很好奇是怎么实现的。带着这样的疑问。
目录
首先创建一个javaWeb的工程
然后在之前创建的随机数方法里,进行循环答应,输出4个随机数
接下来我们需要定义图片的宽度和高度
BufferedImage对象是图片的缓冲流,用于GRB绘制对象,在内存操作过程中,将内存操作的每一个步骤绘制到内存里面存储起来。将缓冲流进行输出。产生一张图片。
//2.定义图片的高度和宽度
int width =120;
int height =25;
//建立bufferedImage对象,制定图片的长度和宽度以及色彩
BufferedImage bi =new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
//3.获取Graphics2D 绘制对象,开始绘制验证码
Graphics2D g =bi.createGraphics();
//4.设置文字的子图验证和大小
Font font =new Font("微软雅黑", Font.PLAIN, 20);
//5.设置字体的颜色
Color color =new Color(0,0,0);
//将颜色和字体放入
g.setFont(font);
g.setColor(color);
g.setBackground(new Color(226,226,226));//背景颜色
//开始绘制对象
g.clearRect(0, 0, width, height);
//绘制形状,获取距形对象
FontRenderContext context =g.getFontRenderContext();//文字读取上下文
Rectangle2D bounds =font.getStringBounds(code, context);//将生成的验证码放入
//计算文字的坐标和间距
double x =(width -bounds.getWidth())/2;
double y =(height -bounds.getHeight())/2;
double ascent =bounds.getY();
double baseY =y -ascent;
g.drawString(code, (int)x, (int)y);
//结束配置
g.dispose();
//将图片保存到制定地方,输出
try {
ImageIO.write(bi,"jpg",response.getOutputStream());
//刷新响应流
response.flushBuffer();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return code;//用于验证码的对比和存储
做完这些后,我们需要定义一个code.jsp页面
<%@ page import="com.kilig.code.CaptcahCode" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
//1:清空浏览器缓存,目的是为了清空浏览器的缓存,因为浏览器
//会对网站的资源文件和图像进行记忆存储,如果被浏览器加载过的图片就记忆起来,记忆以后
//文件就不会和服务器在交互,如果我们验证不清空的话可能会造成一个问题就是:验证刷新以后没有效果。
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0");
//2:调用编写的生成验证码的工具
String code = CaptcahCode.drawImage(response);
session.setAttribute("code",code);
//3:如何解决getOutputStream异常问题
out.clear();
out = pageContext.pushBody();
%>
然后在编制输出页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Verification Code</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body>
<img src="code.jsp" alt="" id="code">
<a href="javascript:void();" onclick="changeCode()">看不清,点我</a>
<script>
function changeCode(){
document.getElementById("code").src ="code.jsp?d="+new Date().getTime();
}
</script>
</body>
</html>
运行看效果:(每次刷新都不一样)
通过观察算数表达式的验证码图片我们得出:
public static String drawImageVerificate(HttpServletResponse response) throws IOException {
//定义验证码的宽度和高度
int width =100, height =30;
//在内存中创建图片
BufferedImage image =new BufferedImage(width,height, BufferedImage.TYPE_INT_RGB);
//创建图片的上下文
Graphics2D g =image.createGraphics();
//创建随机对象,此随机对象主要用于算数表达式的数字
Random random =new Random();
//设置背景
g.setColor(getRandomColor(240,250));
//设置字体
g.setFont(new Font("微软雅黑", Font.PLAIN,22));
//开始绘制
g.fillRect(0,0,width,height);
//干扰线的绘制 ,绘制线条到图片中
g.setColor(getRandomColor(180,230));
for (int i = 0; i <100 ; i++) {
int x =random.nextInt(width);
int y =random.nextInt(height);
int x1 =random.nextInt(60);
int y1 =random.nextInt(60);
g.drawLine(x, y,x1,y1);
}
//开始对算数验证码表达式进行拼接
int num1 =(int)(Math.random()*10+1);
int num2 =(int)(Math.random()*10+1);
int symbel =random.nextInt(3); //定义符号,产生一个[0,2]之间的随机整数
//记录符号
String symbelstr=null;
int result =0;
switch (symbel){
case 0 : symbelstr ="+";result =num1+num2; break;
case 1 : symbelstr ="-";result =num1-num2; break;
case 2 : symbelstr ="*";result =num1*num2; break;
}
//计算表达式
String calc =num1 + " "+ symbelstr +" "+ num2 +"=?";
//设置随机颜色
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
//绘制表达式
g.drawString(calc, 5, 25);
//结束绘制
g.dispose();
try{
//输出图片到页面
ImageIO.write(image,"JPEG",response.getOutputStream());
return String.valueOf(result);
}catch (Exception ex){
ex.printStackTrace();
return null;
}
//return null;
}
kcaptcha实现技术 点击打开kaptcha的官网 网站需要VPN哦,需要VPN的可以私聊我。
Kaptcha是一个基于SimpleCaptcha的验证码开源项目。
1.在官网上下载Kaptcha的相关jar包。并且倒入到lib文件夹中
2.首先配置web.xml
3.然后创建一个页面的jsp index.jsp
启动服务
那么字母的定义,图片的宽度高度,干扰线的设置怎么去配置呢?
下面,从新引入到web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<display-name>Kaptcha</display-name>
<servlet>
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>200</param-value>
</init-param>
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>50</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>4</param-value>
</init-param>
<init-param>
<param-name>kaptcha.noise.impl</param-name>
<param-value>com.google.code.kaptcha.impl.NoNoise</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>
</web-app>
然后运行,进行参数的修改
具体其他参数的配置修改,我从官网上down下来
举个例子,比方说加入对文字内容的配置 ,要求只可以是123456789数字
让我们运行看一看,就会产生一个只有4位数字,并且宽度200,高度50的没有干扰线的验证码图片
不同方式的组合配置,会有不同的效果:
4.案例学习:
我们引入第三方的框架:jquery
增加一个时间搓,点击功能,当店家页面,实现刷新
在编写一个javascript的方法,看是否可以获取我们的用户输入的验证码
此时我们的客户端以及做好了,我们去完成我们的服务端的设计
在上面的介绍里,我们认识到,获取验证码框的函数是 kaptcha.session.key session key KAPTCHA_SESSION_KEY
如果用户输入的验证码和产生在服务器端的验证码一致,那么用户输入成功
equalsIgnoreCase(); 方法,不用区分大小写
LoginServlet
package com.kilig.code;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.text.StyleConstants.CharacterConstants;
import com.google.code.kaptcha.Constants;
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//需要获取浏览器的输出流对象
PrintWriter out =response.getWriter();
//获取用户传递过来的验证码
String code =request.getParameter("code");
//获取验证码框架产生的验证码
String sessionCode =(String)request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
System.out.println(code+"===="+sessionCode);
if(code != null && sessionCode != null) {
//如果用户输入的验证码和产生在服务器端的验证码一致,那么用户输入成功
if(code.equalsIgnoreCase(sessionCode)) {
System.out.println("Success");
}else {
System.out.println("Fail");
}
}else {
System.out.println("Fail");
}
//刷新和关闭
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>#code{height:25px;}</style>
</head>
<body>
<form action="submit.action">
<p>验证码:<input type="text",name="kaptcha", id="code" maxlength="4" placeholder="请输入验证码">
<img src="kaptcha.jpg" id ="changeCode"/></p>
<p><input type="button" value="登录" id="login"></p>
<div id="result"></div>
</form>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#changeCode").on("click",function(){
$(this).attr("src","kaptcha.jpg?d="+new Date().getTime());
})
//给登录按钮绑定登录事件
$("#login").on("click",function(){
//获取用户输入的验证码
var code =$("#code").val();
var params ={"code":code};
$.post("login",params,function(data){
if(data =="Success"){
$("#result").html("验证码输入正确!!");
}else{
$("#result").html("验证码输入有误,请重新输入。。。");
$("#code").val("").focus();
}
});
});
});
</script>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<display-name>Web</display-name>
<servlet>
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>200</param-value>
</init-param>
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>50</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>4</param-value>
</init-param>
<init-param>
<param-name>kaptcha.noise.impl</param-name>
<param-value>com.google.code.kaptcha.impl.NoNoise</param-value>
</init-param>
<!-- "kcode"生成好的验证码 -->
<!--
<init-param>
<param-name>kaptcha.session.key </param-name>
<param-value>kcode</param-value>
</init-param>
-->
</servlet>
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>
<!-- 注册LoginServlet -->
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.kilig.code.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
</web-app>
文章浏览阅读481次。# swapinfo -tmMb Mb Mb PCTSTART/ MbTYPE AVAIL USED FREEUSED LIMIT RESERVEPRINAMEdev 4096 72 4024 2% 0 - 1/dev/vg00/lvol2reserve..._oracle sga 启动 占用
文章浏览阅读1.6w次,点赞4次,收藏8次。这个错误是把string 类型转byte类型的时候出现的问题下面就会报错print(bytes(str_a))_string argument without an encoding
文章浏览阅读2.6w次,点赞14次,收藏57次。在项目开发中,我们有遇到的对象关系通常是复杂的,每个对象并不是单独的。比如学生和老师之间关系,一个老师有多个学生,每个学生会对应一个老师(这里的老师主要是班主任),这种关系其实就是一对多的关系。Mybatis在处理这种关系的时候,也是有自己的办法的。接下来就讲述一下在Mybatis中处理一对多关系的映射。1、先捋清楚学生和老师的ER模型以及数据库表数据库表中主要是在学生端的表中有一_mybatis一对多插入usegeneratedkeys
文章浏览阅读3.1k次,点赞2次,收藏12次。 Shader "Unlit/BrokenScreen"{ Properties { _MainTex("Texture", 2D) = "white" {} _BumpTex("BumpTex", 2D) = "white" {} _satCount("satCount",Range(0,1)) = 0 _unity玻璃碎掉的动画
文章浏览阅读77次。fhs 文件系统层次化标准ll /bin可执行文件ls /bin可执行文件★★★cd /etc 文本的配置文件proc 进程索引文件里面不包含文件名block 块ls -i所有节点的信息★★★命令pwd:显示工作目录路径cd /dir01/dir02/dir03/ 绝对路径 [root@serv...
文章浏览阅读1.1k次。1.开发板示意图2.刷系统就是利用刷机工具,向开发板中烧录预先编译好的系统镜像,使之在开发板上运行起来。//默认的启动命令设置x210 # printenvbootcmd=movi read kernel 30008000; movi read rootfs 30B00000 300000; bootm 30008000 30B00000mtdpart=80000 4..._s5pv210 sd卡刷机
文章浏览阅读7.4w次,点赞28次,收藏85次。Excel和CSV格式文件的不同之处来源:https://www.guru99.com/excel-vs-csv.htmlExcelCSV这是一个二进制文件,它保存有关工作簿中所有工作表的信息CSV代表CommaSeparatedValues。这是一个纯文本格式,用逗号分隔一系列值_exelce表格是csv文件吗
文章浏览阅读519次。概述 我们日常应用中都离不开日志。可以说日志是我们在排查问题的一个重要依据。但是日志并不是写了就好了,当你想查看日志的时候,你会发现线上日志堆积的长度已经超越了你一行行浏览的耐性的极限了。于是,很有必要通过一些手段来高效地辅助你来快速的从日志中找到你要找的问题。本文通过一个从项目中衍生出来的例子从查找日志,筛选日志和统计日志3个方面层层递进来简述日志文件查看中一些有用的手段。(注_linux日志分析常用哪些命令?awk、grep,sed,wc
文章浏览阅读1.3k次。很久之前自己学习了一丢丢Linux命令,所以书签里放的杂乱无章的各种Linux知识,第一波整理::Vi是Linux的编辑器,visual interfaceVi存在三种模式,并且可以通过很多方式进行切换vim filename 打开文件,如果不存在就创建一个具有这样文件名的文件三种模式的切换在vi一个文件之后,默认进入vi的命令模式,即输入的每一个字符都表示一条命令,在_vim 书签 操作
文章浏览阅读8.8k次,点赞8次,收藏34次。1.右键“源文件”,点击“添加”-->“现有项”2.选择需要添加的文件,点击添加3.右键项目名称,点击“属性”4.选择“C/C++”下的“常规”5.点击“附加包含目录下”下的编辑,完成文件路径添加..._visual studio 新页面生成.cpp .h文件
文章浏览阅读3.7k次,点赞2次,收藏26次。Ubuntu下VSCode安装和配置C/C++运行环境,保姆级详细!!!_vmware下ubuntu系统中安装vscode
文章浏览阅读605次。记录:学习web中背景铺满且固定位置。_怎么webstrom背景铺满网页