Servlet之 验证码(初级)

需求:

　　　　使用Servlet向页面响应验证码,并且点击验证码或者"看不清楚,换一张"可以刷新验证码

需求分析:

Servlet中需要完成的需求:

  • 验证码的本质:就是一张图片
  • 使用Servlet向页面响应验证码和现实中使用画板绘画一样:
  1. 设置画布的尺寸:宽度(width),高度(height)
  2. 有了画布之外还需要画笔
  3. 设置画笔的颜色,使用RGB颜色,red,green,blue三种颜色随机组合
  4. 要组合颜色就需要使用Random随机生成器对象
  5. 画布的背景颜色默认为black,我们需要随机更改画布的背景色
  • 画布准备就绪以后,就需要准备验证码的素材了

　　　　准备一串字符串,包含26个大写字母、26个小写字母、0-9数字字母

  • 一般验证码的位数为4位,我们在验证码素材字符串中随机选择4位即可
  • 将随机选择的字符写入画布中;写入画布的验证码的颜色也是随机的
  • 画干扰线(在画布上使用不同的颜色画上几条干扰线)
  • 将完成的画布响应到页面即可

 HTML页面中需要完成的需求:

    简单显示几个标签即可(本需求重点不在HTML页面)
    使用JavaScript实现点击验证码和点击"看不清楚,换一张"刷新验证码的需求

HTML页面代码实现:

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>login</title>

 6

 7 </head>

 8 <body>

 9

10 <form action="/day28_response/checkcodeServlet" method="post">

11     <table>

12         <tr>

13             <td>用户名</td>

14             <td><input type="text" name="username"/></td>

15         </tr>

16         <tr>

17             <td>密码</td>

18             <td><input type="password" name="password"/></td>

19         </tr>

20         <tr>

21             <td>验证码：</td>

22             <td><input type="password" name="checkcode"/></td>

23         </tr>

24         <tr>

25             <td></td>

26             <td><img id="img" src="/day28_response/checkcodeServlet"/></td>

27             <td><a href="javascript:void(0)" id="change">看不清楚,换一张</a></span></td>

28         </tr>

29

30         <tr>

31             <td></td>

32             <td><input type="submit" value="登录"/></td>

33         </tr>

34     </table>

35 </form>

36

37 </body>

38 </html>

39

40 <script>

41

42     //给验证码和"看不清楚,换一张"绑定单机事件

43     window.onload = function () {

44

45         var img = document.getElementById("img");

46         img.onclick=function () {

47             img.src="/day28_response/checkcodeServlet?r="+new Date().getTime();

48         };

49         var change = document.getElementById("change");

50         change.onclick = function () {

51             img.src="/day28_response/checkcodeServlet?r="+new Date().getTime();

52         }

53     }

54

55 </script>

Servlet中代码实现:

 1 package servlet;

 2

 3 import javax.imageio.ImageIO;

 4 import javax.servlet.ServletException;

 5 import javax.servlet.annotation.WebServlet;

 6 import javax.servlet.http.HttpServlet;

 7 import javax.servlet.http.HttpServletRequest;

 8 import javax.servlet.http.HttpServletResponse;

 9 import java.awt.*;

10 import java.awt.image.BufferedImage;

11 import java.io.IOException;

12 import java.util.Random;

13

14 @WebServlet("/checkcodeServlet")

15 public class CheckcodeServlet extends HttpServlet {

16     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

17         this.doGet(request, response);

18     }

19

20     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

21         //创建画布

22         //画布的宽,高

23         int width = 120;

24         int height = 40;

25         BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

26

27         //获得画笔

28         Graphics graphics = bufferedImage.getGraphics();

29

30         //获取随机对象

31         Random random = new Random();

32

33         //设置画笔颜色随机生成

34         //graphics.setColor(Color.gray);//固定颜色

35         graphics.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));

36         //填充背景颜色

37         graphics.fillRect(0, 0, width, height);

38

39         //生成随机字符

40         //准备数据

41         String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";

42

43         //声明变量存储生成的验证码

44         String code = "";

45

46         //随机生成4个字符

47         for (int i = 1; i <= 4; i++) {

48             //设置字体

49             graphics.setFont(new Font("宋体", Font.HANGING_BASELINE, 30));

50             //随机生成颜色

51             graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));

52             //随机生成字符索引

53             int index = random.nextInt(str.length());

54             String cha = str.charAt(index) + "";

55             //将随机生成的字符写入画布

56             graphics.drawString(cha, 120 / 5 * i, random.nextInt(height / 2) + height / 2);

57             code += cha;

58         }

59

60

61         //画干扰线:

62         for (int i = 0; i < 10; i++) {

63             //随机生成画笔颜色

64             graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));

65             //画干扰线到画布中

66             graphics.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));

67         }

68

69

70

71         //将画布写到浏览器中

72         ImageIO.write(bufferedImage, "png", response.getOutputStream());

73     }

74 }

实现效果:

  • 打开HTML页面显示效果:

  • 刷新HTML页面,验证码也随即刷新:

  • 点击验证码图片,验证码也随即刷新:

  • 单击"看不清楚,换一张"也可以实现刷新验证码的需求:

Servlet-随机生成验证码(初级版本)的更多相关文章

  1. Python随机生成验证码的两种方法

    Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法方法一:利用range Python随机生成验证码的方法有很多,今天给大家列举两种 ...

  2. Android锁定EditText内容和随机生成验证码

    昨天写了个小Demo,实现了随机生成验证码,和锁定EditText两个小功能,先看一下效果图: 锁定EditText在我们不须要用户编辑EditText内容的时候能够用到,实现还是非常easy的,一行 ...

  3. servlet中生成验证码

    在servlet中生成验证码 package login; import java.awt.Color; import java.awt.Graphics; import java.awt.image ...

  4. 随机生成验证码及python中的事务

    1.随机生成验证码 # import random # print(random.random()) #-1的小数 # print(random.randint(,)) #包括1和3 # print( ...

  5. js随机生成验证码以及随机颜色

    Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...

  6. 随机生成验证码（JS）

    效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所 ...

  7. 使用Servlet动态生成验证码

    最近在重新看了一遍servlert,看到篇优质博客推荐给大家:https://www.cnblogs.com/xdp-gacl/p/3798190.html 顺便把学习过程中的知识记录下来. 今天是如 ...

  8. php随机生成验证码代码

    <?php session_start(); //产生一个随机的字符串验证码 $checkcode=""; for ($i=0;$i<4;$i++){ $checkco ...

  9. JavaWeb学习记录（五）——Servlet随机产生验证码

    随机产生验证码的工具类: import java.awt.Color;import java.awt.Graphics;import java.awt.image.BufferedImage;impo ...

  10. .Net (MVC) 随机生成验证码

    以前一直对C#的GDI画图部分知识点不怎么用所以忘得差不多了,这两天正好公司要做一个博客系统,其中一个需求就是留言时为了防止恶意攻击必须填写验证码,正好借着这个机会复习了一下,以下是实现代码,写的比较 ...

随机推荐

  1. 分享自己亲测过的Visualstudio 2019中开发Typescript时，设置自动编译生成js，无需手工运行命令生成的方法。

    步骤1)右键web项目,添加 tsconfig.json文件. 步骤2)确保配置如下,编译版本可自行设置,这里主要关注编译目标目录和自动编译设置: { "compileOnSave" ...

  2. 论文解读（CAN）《Contrastive Adaptation Network for Unsupervised Domain Adaptation》

    论文信息 论文标题:Contrastive Adaptation Network for Unsupervised Domain Adaptation论文作者:Guoliang Kang, Lu Ji ...

  3. A. Greatest Convex【Codeforces Round #842 (Div. 2)】

    A. Greatest Convex You are given an integer \(k\). Find the largest integer \(x\), where \(1≤x<k\ ...

  4. BOM、DOM、两者查找标签的方式和操作标签的方式、操作class和css的方法、事件、jQuery类库

    今日内容 BOM操作 BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". windows对象 windo ...

  5. 迷宫机器人最短路径使用tkinter绘制

    起因 我想要写一个玩家和机器对战的迷宫游戏.这个项目我没有写完,我实现了最短机器人路径并绘制在tkinter上,以及玩家移动的功能.更多的关于GUI的设计太花时间了我没有写完. 算法介绍 我在写机器人 ...

  6. ChatGPT开发实战

    1.概述 前段时间使用体验了ChatGPT的用法,感受到ChatGPT的强大,通过搜索关键字或者输入自己的意图,能够快速得到自己想要的信息和结果.今天笔者将深挖一下ChatGPT,给大家介绍如何使用C ...

  7. 论文翻译：2022_腾讯DNS 1th TEA-PSE: Tencent-ethereal-audio-lab personalized speech enhancement system for ICASSP 2022 DNS CHALLENGE

    论文地址:TEA-PSE: 用于ICASSP 2022 DNS挑战赛的Tencent-ethereal-audio-lab 个性化语音增强系统 论文代码: 引用格式:Ju Y, Rao W, Yan ...

  8. vue学习笔记（一） ----- vue指令（菜单列表案例）

    一.渲染品牌列表 <div id="app"> <div class="panel panel-primary"> <div cl ...

  9. Hangfire .NET任务调度框架实例

    1.介绍 Hangfire是一个开源的.NET任务调度框架,提供了内置集成化的控制台(后台任务调度面板),可以直观明了的查看作业调度情况. 2.Nuget安装 3.编写代码 1)测试服务:FirstS ...

  10. Unreal 各种指针类型是怎么回事

    引言 读完本篇文章,你会了解为何UE中C++作为其开发语言,使用的指针,为何各式各样. 你需要对UE有所了解,如果不了解也没关系,也可以看下这篇文章,就当了解一下最复杂的应用的系统指针设计是如何. 可 ...