JavaWeb——登录界面验证码的实现
文章目录
- 前言
- 思路
- 效果图
- 文本目录
- 后台代码的实现
- 前台验证码的引用
- 创建图片jsp
- 引入这个图片
- 点击，切换图片的实现
- 用户输入与图片验证码的字符比对
- 后台处理
前言
前段时间写了一个B2B电商城的项目，怎么说呢，真的是学到了很多的东西，jQuery，js，jsp，css，mysql，servlet等等知识的使用，都更加的熟练了，可惜也没有太多的时间，就简单的说一下验证码吧，这个验证码的学习是网上的一个大佬写的，我自己开始写的没这个好看，就不拿出来献丑了。（最近学一个脚手架的后台管理，猿来入此的，里面的验证码比我现在说的这个漂亮，，，你们有兴趣就去看一下，没兴趣，就将就用我写的吧）
思路
- 后台生成一个图片
- 前台引用这个图片
- 后台的Servlet获取后台图片类中的写到验证码上的字符串
- 后台的Servlet获取用户输入的字符串
- 对比两个字符串，如果成功，进行页面的重定向或者是跳转（自己爱咋弄都行），不成功，，，不成功，自己看着办，有点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。
看这，这是用户输入的
这是原本的正确的字符串
