博客
关于我
验证码的简单实现
阅读量:358 次
发布时间:2019-03-04

本文共 1937 字,大约阅读时间需要 6 分钟。

本质:图片

目的:防止恶意表单注册

文章目录

一、基本实现

@WebServlet("/checkCodeServlet")public class CheckCodeServlet extends HttpServlet {       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {           int width = 100;        int height = 50;        //1.创建一对象,在内存中图片(验证码图片对象)        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);        //2.美化图片        //2.1 填充背景色        Graphics g = image.getGraphics();//画笔对象        g.setColor(Color.PINK);//设置画笔颜色        g.fillRect(0,0,width,height);        //2.2画边框        g.setColor(Color.BLUE);        g.drawRect(0,0,width - 1,height - 1);        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";        //生成随机角标        Random ran = new Random();        for (int i = 1; i <= 4; i++) {               int index = ran.nextInt(str.length());            //获取字符            char ch = str.charAt(index);//随机字符            //2.3写验证码            g.drawString(ch+"",width/5*i,height/2);        }        //2.4画干扰线        g.setColor(Color.GREEN);        //随机生成坐标点        for (int i = 0; i < 10; i++) {               int x1 = ran.nextInt(width);            int x2 = ran.nextInt(width);            int y1 = ran.nextInt(height);            int y2 = ran.nextInt(height);            g.drawLine(x1,y1,x2,y2);        }        //3.将图片输出到页面展示        ImageIO.write(image,"jpg",response.getOutputStream());    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {           this.doPost(request,response);    }}

结果如图:

在这里插入图片描述

二、配合 html 表单实现

    
Title 看不清换一张?

这里为了达到点击图片自动更换的效果,加了个时间戳

image.src = "/code?" + time;

这里的?和 time,没有任何意义,效果是让浏览器认为这是次新的刷新,不会去读取浏览器缓存

在这里插入图片描述
但是这里也存在个问题,点击图片实现自动更改,但是实际上是跳转到了另外一个注册码的页面,没有停留在 register.html 页面,所以点击文字"看不清,换一张",只会出现一次效果

所以实际上,<a> 标签实现的是本页面的一个跳转,可以用以前学的一个

看不清换一张

然后通过 id ,添加事件即可

    
验证码 看不清换一张

转载地址:http://lxxr.baihongyu.com/

你可能感兴趣的文章
Node.js 函数是什么样的?
查看>>
Node.js 函数计算如何突破启动瓶颈,优化启动速度
查看>>
Node.js 切近实战(七) 之Excel在线(文件&文件组)
查看>>
node.js 初体验
查看>>
Node.js 历史
查看>>
Node.js 在个推的微服务实践:基于容器的一站式命令行工具链
查看>>
Node.js 实现类似于.php,.jsp的服务器页面技术,自动路由
查看>>
Node.js 异步模式浅析
查看>>
node.js 怎么新建一个站点端口
查看>>
Node.js 文件系统的各种用法和常见场景
查看>>
Node.js 模块系统的原理、使用方式和一些常见的应用场景
查看>>
Node.js 的事件循环(Event Loop)详解
查看>>
node.js 简易聊天室
查看>>
Node.js 线程你理解的可能是错的
查看>>
Node.js 调用微信公众号 API 添加自定义菜单报错的解决方法
查看>>
node.js 配置首页打开页面
查看>>
node.js+react写的一个登录注册 demo测试
查看>>
Node.js中环境变量process.env详解
查看>>
Node.js之async_hooks
查看>>
Node.js也分裂了-开源社区动态
查看>>