javaweb之登录页面的验证码操作，从前端的更换验证码到后端的验证码验证是否正确（内附原代码）

这里一共有四个程序，注释都写在了代码里，逻辑很清晰

首先是一个JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/Demo3/Testimagecode" method="post">
	姓名：<input type="text" name="username"><br>
	密码：<input type="password" name="password"><br>
	<!-- 设置一个源，然后点击事件为换一张图片，先获取图片，然后修改src属性，附上时间戳，表示每个事件获取的验证码都是不同的，用EL表达式来获取imagecodemsg的信息，也就是返回的信息 -->
	验证码：<input type="text" name="imagecode"><span>${requestScope.imagecodemsg}</span><br>
	<img id="i1" title="换一张" style="padding-top:10px" src="/Demo3/Testcode" onclick="change()"><br>
	<input type="submit" value="提交">
</form>
</body>
<script type="text/javascript">
	function change(){
		var img=document.getElementById("i1");
		img.src="/Demo3/Testcode?time="+new Date().getTime();
	}
</script>
</html>

效果：

登录成功的jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>恭喜验证码正确</h1>
</body>
</html>

画出验证码的servlet：

package tools;

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

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Testcode
 */
@WebServlet("/Testcode")
public class Testcode extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Testcode() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		int width=120;
		int height=40;
		//获取画布
		BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
		//获取画笔
		Graphics2D g=(Graphics2D) image.getGraphics();
		//设置实心矩形的颜色
		g.setColor(Color.GRAY);
		//画一个实心的矩形,将画布覆盖
		g.fillRect(0, 0,width,height);
		//设置矩形边框的颜色
		g.setColor(Color.BLUE);
		//画出矩形的边框，由于边框也是有像素的，所以是宽度高度分别减去一
		g.drawRect(0, 0, width-1, height-1);
		//设置验证码中的数据
		String words="QWERTYUIOPASDFGHJKLZXCVBNM1234567890";
		//获取随机这个对象使得可以在String中随机获得字母
		Random random=new Random();
		//设置验证码中的字体颜色
		g.setColor(Color.yellow);
		//改变字体
		g.setFont(new Font("宋体",Font.BOLD,35));
		//x和y是字母在画布中的相对位置，x是不断变得，y是不变的
		int x=20;
		int y=30;
		String msg="";
		for(int i=0;i<4;i++) {
			//在words的长度范围内获取一个随机的索引值
			int index=random.nextInt(words.length());
			//通过那个索引值找到相应的字母
			char ch=words.charAt(index);
			//获取正负30的角度
			int jiaodu=random.nextInt(60)-30;
			double hudu=jiaodu*Math.PI/180;
			g.rotate(hudu,x,y);
			//把字母画在画布上
			g.drawString(ch+"", x, y);
			//把每次旋转的再旋转回来
			g.rotate(-hudu,x,y);
			//每次向右移动20像素
			x+=20;
			msg+=ch;
		}
		//将内容存到session域中
		request.getSession().setAttribute("imagecode", msg);
		//画干扰线
		int x1;int x2;int y1;int y2;
		for(int i=1;i<4;i++) {
			x1=random.nextInt(width);
			x2=random.nextInt(width);
			y1=random.nextInt(height);
			y2=random.nextInt(height);
			g.drawLine(x1, y1, x2, y2);
		}
		//将画的内容以图片的形式输出
		ImageIO.write(image, "jpg", response.getOutputStream());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

验证验证码是否正确的servlet：

package tools;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Testimagecode
 */
@WebServlet("/Testimagecode")
public class Testimagecode extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Testimagecode() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		//获取request中的，也就是输入的imagecode，也就是那个input标签的内容
		String imagecode=request.getParameter("imagecode");
		//获取存入session的码
		String imagecode1=(String)request.getSession().getAttribute("imagecode");
		//获取之后得删除，防止下次验证错误
		request.getSession().removeAttribute("imagecode");
		//这两句话是用来检测是否自己的代码有错误，看是jsp写错了，还是验证码写错了
		System.out.println(imagecode);
		System.out.println(imagecode1);
		if(!(imagecode!=null&&imagecode1.equals(imagecode))) {
			//回复错误信息并转发到原来的页面
			request.setAttribute("imagecodemsg", "code error");
			request.getRequestDispatcher("/JSP/login.jsp").forward(request, response);
			return;
		}
		//转发到成功的页面
		request.getRequestDispatcher("/JSP/success.jsp").forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

javaweb之登录页面的验证码操作，从前端的更换验证码到后端的验证码验证是否正确（内附原代码）

猜你喜欢