网站首页 > 知识剖析 正文
能力提升-生成图形验证码
<!--访问静态资源和访问控制器的结果都是一样的---一个是静态访问图片路径------另一个是动态获取图片流 -->
(一)动态获取图片两种方法:
1.静态HTML获取图片地址(通过JSP脚本动态更换图片路径地址)
2.动态控制器Servlet(Java的I/O流控制输出)
步骤一、
编写JSP静态获取图片地址页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <img alt="" src="/SecurityCode(安全码)/WebRoot/images/ea111ec9e85c9a06f7756b488bfaae60.jpg"> </body></html>
浏览器输出:
第二、通过Servlet控制器输出I/O流文件的形式
package com.wq.Servlet;import java.io.File;import java.io.FileInputStream;import java.io.IOException;import java.io.InputStream;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/demo")public class DemoSrtvlet extends HttpServlet{ /** * */ private static final long serialVersionUID = 1L; @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 输出文字流(获取文字) //PrintWriter outPrintWriter=resp.getWriter(); //获取响应流(图片,视频,文件等字节流) ServletOutputStream os = resp.getOutputStream(); //IO流获取文件,getRealPath(arg0)获取文件具体路径;;File(getServletContext().getRealPath(""),"ea111ec9e85c9a06f7756b488bfaae60.jpg"));//文件路径+文件名 InputStream iStream=new FileInputStream(new File(getServletContext().getRealPath("images"),"ea111ec9e85c9a06f7756b488bfaae60.jpg")); //输入流转输出流(JavaSE I/O的时候必须会写的代码) int index=-1; while((index=iStream.read())!=-1){ //index读取文件流直到等于-1 os.write(index); //同时写入到http中--os.write(index); } }}
浏览器输出:文件的形式
JSP获取src路径文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <img alt="" src="demo"><!--直接返回一个Servlet的图片流 --> <!--访问静态资源和访问控制器的结果都是一样的---一个是静态访问图片路径------另一个是动态获取图片流 --> </body></html>
浏览器输出;(效果一样)
实现步骤
一、实现原理
public class BufferedImage
extends Image
implements WritableRenderedImage, Transparency所述BufferedImage亚类描述了一种Image与图像数据的访问的缓冲器。 A BufferedImage由图像数据的ColorModel和Raster组成。 SampleModel中SampleModel中的Raster的数量和类型必须与ColorModel所要求的数字和类型相匹配,以表示其颜色和Alpha组件。 所有BufferedImage对象的左上角坐标为(0,0)。 Raster用于构建BufferedImage的任何BufferedImage必须具有minX = 0和minY = 0。
这个类依赖的数据获取和设置方法Raster ,并在颜色表征方法ColorModel 。
JavaWeb Jquery Ajax实现验证码局部刷新和校验
一:设置JSP页面
(1):给form表单中的 "登录" 按钮设置onsubmit验证点击后调用checkCode()返回结果为true页面跳转,为false页面不跳转。
(2):通过标签设置当点击"看不清?"时调用flushImage();进 行验局部证码刷新。
(3):点击注册按钮转发到"register.jsp"页面。
<body><form action="login.do" method="post" onsubmit="return checkCode()"> <h1>登录页面</h1> 用户名:<input type="text" name="username"> </br></br> 密码:<input type="password" name="password"> </br></br> 验证码:<input type="text" id="txt_code" name="code" size="5"> <img alt="验证码" id="code" src="image.do"> <a href="javascript:flushInamge();">看不清?</a> <span id="s_code"></span> </br></br> <input type="submit" value="登录"> <a href="register.jsp"><input type="button" value="注册"></a>
二:制作验证码
(1)制作java验证码并把产生的验证码字符串存储在
(2)request.getSession().setAttribute("code", str);存储在session中。
(3)利用ImageIO.write(image, "png", out);把图片返回给ajax的回调函数。
else if("/image.do".equals(path)) {//生成验证码 //避免浏览器缓存 response.addHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); //1.动态的创建一个图片 //第一个参数高度 第二个参数高度 第三个参数图片类型RGB BufferedImage image = new BufferedImage(100, 30, BufferedImage.TYPE_INT_RGB); //2.在图片上画字符 Graphics graphics = image.getGraphics(); graphics.setColor(Color.white);//改变图片背景色默认黑色 graphics.fillRect(0, 0, 100, 30);//画矩形 String str = ""; Random rand = new Random(); Font font = new Font(null,Font.BOLD,20); for (int i = 0; i < 5; i++) { int index = rand.nextInt(chars.length); Color color = new Color(rand.nextInt(255),rand.nextInt(255),rand.nextInt(255)); //生成一个随机颜色字符 graphics.setColor(color); graphics.setFont(font); graphics.drawString(chars[index]+"", 30+i*10, 20); str+=chars[index]; } for (int i = 0; i < 4; i++) { Color color = new Color(rand.nextInt(255),rand.nextInt(255),rand.nextInt(255)); graphics.setColor(color); graphics.drawLine(rand.nextInt(100), rand.nextInt(30), rand.nextInt(100), rand.nextInt(30)); } //3.将图片上的文字保存到session中 request.getSession().setAttribute("code", str); //将图片利用response输出 OutputStream out = response.getOutputStream(); ImageIO.write(image, "png", out); }
三:创建jquery ajax请求通过Java进行校验
(1):flushImamge();通过选择器选择名字为"code"的对象,发送image.do请求调用Java程序对'"code"对象进行刷新。
(2):checkCode();通过选择器选择id为"txt_code"的对象获取参数,然后发送checeked.do请求调用Java程序进行校验,如果验证码正确活动的data为 '验证码正确' 返回true,为空或者是 "验证码错误" 就是false。
function flushInamge(){ $("#code").attr("src","image.do?r"+Math.random());//实现局部刷新 }function checkCode(){ var check = true; //获取用户输入的验证码信息 var code = $("#txt_code").val().trim(); if(code == ''){ $("#s_code").html("验证码不能为空"); return false; } //验证码不为空就进行校验 $.ajax({ url:"checked.do", type:"post", async:false, data:{"code":code}, dataType:"text", success:function(data){//data是服务器返回的消息 $("#s_code").html(data); if(data == '验证码错误'){check = false;} } }) return check;}
四:用Java对验证码进行校验
通过request.getParameter("code");获取ajax请求传递的参数,然后通过request.getSession().getAttribute("code");获取session作用域中设置的参数,
最后通过if(code.equalsIgnoreCase(scode))无视大小写对输入的验证码和生成的验证码进行匹配相同out.print("验证码正确"),不相同out.print("验证码错误");将参数返回给ajax。
else if("/checked.do".equals(path)) { //接收请求code参数 String code = request.getParameter("code"); System.out.println("code"+code); //获取session中验证码信息 String scode = (String) request.getSession().getAttribute("code"); System.out.println("scode"+scode); //比对输出 response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); if(code.equalsIgnoreCase(scode)) { System.out.println(true); out.print("验证码正确"); }else { out.print("验证码错误"); System.out.println(false); } out.close();
效果
猜你喜欢
- 2024-11-15 JavaScript网页截屏方法,你get到了嘛?
- 2024-11-15 老师的职业生涯-作为教师,如何规划自己的职业生涯
- 2024-11-15 Vue 3 组件开发(一):搭建表格编辑系统 - 环境搭建
- 2024-11-15 Vue 3学习:2. 项目结构及变化点(vuecli2项目结构)
- 2024-11-15 Blob-对象介绍(blob类型数据)
- 2024-11-15 管理用户焦点的前端3大顶级库(前端如何设置管理系统权限)
- 2024-11-15 html基础必备-图像标记,前端小白一看就会
- 2024-11-15 使用原生js、css和html实现图片画廊组件
- 2024-11-15 Python爬虫,高清美图我全都要!爬取你想要的,嘿嘿嘿
- 2024-11-15 齐博多张组图的标签调用(青岛齐博卓晟科技有限公司)
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)