JavaWeb——登录界面验证码的实现

前言

前段时间写了一个B2B电商城的项目，怎么说呢，真的是学到了很多的东西，jQuery，js，jsp，css，mysql，servlet等等知识的使用，都更加的熟练了，可惜也没有太多的时间，就简单的说一下验证码吧，这个验证码的学习是网上的一个大佬写的，我自己开始写的没这个好看，就不拿出来献丑了。（最近学一个脚手架的后台管理，猿来入此的，里面的验证码比我现在说的这个漂亮，，，你们有兴趣就去看一下，没兴趣，就将就用我写的吧）

思路

1. 后台生成一个图片
2. 前台引用这个图片
3. 后台的Servlet获取后台图片类中的写到验证码上的字符串
4. 后台的Servlet获取用户输入的字符串
5. 对比两个字符串，如果成功，进行页面的重定向或者是跳转（自己爱咋弄都行），不成功，，，不成功，自己看着办，有点jsp基础的都知道咋办

效果图

效果是这样的，有点丑（不接受吐槽，哥是搞后台的，不是搞美工的，想要美工好，去找个前端小姐姐吧，拐回家就好了。。。）

文本目录

demo和forgetPwd，那些对应的是这四个，自己写，我就不放在这里了

makeCertPic是一个图片jsp，不知道图片jsp的可以推荐看一下这篇博客
https://blog.csdn.net/qq_43918130/article/details/102760519

后台代码的实现

package pic;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;
/**
 * 功能:生成彩色验证码图片
 * 参数width为生成图片的宽度,参数height为生成图片的高度,参数os为页面的输出流
 * 
 */
public class makeCertPic {
	private String yzm;
	//验证码图片中可以出现的字符集，可根据需要修改
    private final char mapTable[]={
       'a','b','c','d','e','f',
       'g','h','i','j','k','l',
       'm','n','o','p','q','r',
       's','t','u','v','w','x',
       'y','z','0','1','2','3',
       '4','5','6','7','8','9'};
    private final int colors[]={
    	0xFFFFFF,0x800000,
    	0x008000,0x808000,
    	0x000080,0x800080,
    	0x008080,0x808080,
    	0xC0C0C0,0xFF0000,
    	0xFFFF00,0x0000FF,
    	0xFF00FF,0x00FFFF,
    };
    
    //字体的设置
    private final String[] fontNames = new String[]{
			"黑体", "宋体", "Courier", "Arial", 
			"Verdana", "Times", "Tahoma", "Georgia",
			"Atlantic Inline"};
    
    
    
    public String getCertPic(int width, int height, OutputStream os) {
    	if(width<=0)width=60;
    	if(height<=0)height=20;
    	BufferedImage image = new BufferedImage(width, height,
    	BufferedImage.TYPE_INT_RGB);
   
   // 获取图形上下文
   Graphics g = image.getGraphics();
   // 设定背景色
   int c = (int)(0+Math.random()*(colors.length ));
   g.setColor(new Color(colors[c]));
   
   
   g.fillRect(0, 0, width, height);
   //画边框
   g.setColor(Color.black);
   g.drawRect(0,0,width-1,height-1);
   
   // 取随机产生的认证码
   String strEnsure = "";
   // 4代表4位验证码,如果要生成更多位的认证码,则加大数值
   for(int i=0; i<4; ++i) {
	   strEnsure+=mapTable[(int)(mapTable.length*Math.random())];
   } 
   yzm=strEnsure;
   //将认证码显示到图像中,如果要生成更多位的认证码,增加strEnsure语句
   g.setColor(Color.black);
   
   int f = (int)(0+Math.random()*(fontNames.length ));
   g.setFont(new Font(fontNames[f],Font.PLAIN,18));
   //截取字符串
   String str = strEnsure.substring(0,1);
   g.drawString(str,8,17);
   str = strEnsure.substring(1,2);
   g.drawString(str,20,15);
   str = strEnsure.substring(2,3);
   g.drawString(str,35,18);  
   str = strEnsure.substring(3,4);
   g.drawString(str,45,15);
   //由于每次产证的字符不同，所以可以感觉是歪歪扭扭的在动
   // 随机产生20个干扰点
   Random rand = new Random();
   for (int i=0;i<20;i++) {
    int x = rand.nextInt(width);
    int y = rand.nextInt(height);
    g.drawOval(x,y,2,2);
   }
   
   // 释放图形上下文
   g.dispose();  
   
   try {
    // 输出图像到页面
	   ImageIO.write(image, "JPEG", os);
   } catch (IOException e) {
	   	return "";
   } 
   		return strEnsure;
   }
   //获取原本输入的验证码
   public String getYzm(){
	   return this.yzm;
   }
}

前台验证码的引用

创建图片jsp

看一下生成图片的jsp，也就是上面说的 makeCertPic.jsp

<%@page contentType="image/jpeg" %>
<jsp:useBean id="image" scope="page" class="pic.makeCertPic" />
<%
String str=image.getCertPic(0,0,response.getOutputStream());
String yzm=image.getYzm();//获取实际的验证码
session.setAttribute("YZM", yzm);//塞在session中，方便Servlet中进行提取和事件处理
session.setAttribute("certCode", str);
out.clear();
out = pageContext.pushBody();
%>

引入这个图片

我是引入在我的demo.jsp中的，也就是这个页面
具体代码

核心代码
对了，刚给img加了一个title属性，这个属性的效果是，鼠标放在图片上，图片上会显示提示，移开，提示就消失。

点击，切换图片的实现

主要是用的js，点击事件。也就是onclick的实现
具体代码如下

<script type="text/javascript">
  function reloadcode(){
      var verify=document.getElementById('code');
      verify.setAttribute('src','makeCertPic.jsp?it='+Math.random());
}
</script>

用户输入与图片验证码的字符比对

后台处理

这是怎么来的呢，其实就是jsp的基础，submit提交，获得页面中用户输入的东西，获取的方法是通过name进行获取的，注意，js和jQuery，一般是通过id来进行操作的，jsp是通过name。
看这，这是用户输入的

这是原本的正确的字符串