网站前台验证码(源代码)的实现点击刷新

为了方便想学习网站前台方向读者刚睁开眼睛就决定将自己写的验证码的实现写下来供大家参考 在此基础上其实可以实现运算的验证码、或者是图片展示的验证码、其他样式的验证码。请大家多多评价提供自己的想法这样能够集思广益提供更加多的思路。好了下面发代码:

login.jsp页面的代码主要看中间验证码部分是怎么实现的:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <base href="<%=basePath%>">
    
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Book Store</title>
     <link rel="stylesheet" type="text/css" href="style.css" />


  </head>
  
  <body>
  <jsp:include  page="head.jsp"/> 
    
    <div id="wrap">
    <div class="center_content">
    <div class="left_content">
      <div class="title"><span class="title_icon"><img src="images/bullet1.gif" alt="" title="" /></span>登陆 </div>
      <div class="feat_prod_box_details">
        <p class="details"> 我们是专门做书籍的网站,您想要的书籍我们这里都有只有你想不到,没有我们做不到这就是我们想要的网上书店。我们同时也是一家做特卖的网站。只不过我们做的特卖都是书籍。因为我们相信书籍可以改变世界改变你的人生! </p>
        <div class="contact_form">
          <div class="form_subtitle">登陆 以查看清单</div>
          <form name="register" method="post" action="UserDAO">
            <div class="form_row">
              <label class="contact"><strong>用户名:</strong></label>
              <input type="text" class="contact_input" name="userName" />
            </div>
            <div class="form_row">
              <label class="contact"><strong>密  码:</strong></label>
              <input type="password" class="contact_input" name="password" />
            </div>
             <div class="form_row">
              <label class="contact"><strong>验证码:</strong></label>
              <input type="text" class="contact_input" name="validateCode"  value="请输入正确的验证码"/><img src=ValidateCodeServlet onclick="this.src='ValidateCodeServlet';" class="s1" title="点击更换">
            </div> 
            <div class="form_row">
              <div class="terms"><input type="checkbox" name="terms" />记住密码 </div>
            </div>
            <div class="form_row">
              <input type="submit" class="register" value="登陆" />
            </div>
          </form>
        </div>
         </div>
      <div class="clear"></div>
    </div>
    <jsp:include  page="broadside.jsp"/> 
    </div>
    </div>
  </body>
</html>

然后就是我们的验证码实现的servlet:

package userUtil;

import javax.imageio.ImageIO;
import javax.servlet.*;
import javax.servlet.http.*;

import java.io.*;



import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.*;



public class ValidateCodeServlet extends HttpServlet {

 

  /**
	 * 
	 */
	private static final long serialVersionUID = 1L;

/** 响应客户请求*/
  public void service(HttpServletRequest request,HttpServletResponse response)
    throws ServletException, IOException {
	 
	 //创建内存画板对象
	  BufferedImage image= new BufferedImage(100,30,BufferedImage.TYPE_INT_RGB);
	  Graphics g=image.getGraphics();
	  
	  //产生背景色
	  Random r=new Random();
	  g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
	  
	  //用背景色填充矩形框
	  g.fillRect(0, 0, 100,30);
	  
	  //调用自定义的方法,获取长度为5的字母数字组合的字符串
	  String number=getNumber(5);
	  
	  //将所产生的随机码加入会话
	  HttpSession session=request.getSession();
	  session.setAttribute("code", number);
	  
	  //设置字的颜色与字体,以图形方式画出
	  g.setColor(new Color(0,0,0));
	  g.setFont(new Font(null,Font.BOLD,24));
	  g.drawString(number,5,25);
	  
	  //绘制干扰线
	  for(int i=0;i<8;i++)
	  {
		  g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
		  g.drawLine(r.nextInt(100),r.nextInt(30),r.nextInt(100),r.nextInt(30));
	  }

	  //响应用户请求,绘制图形
	  response.setContentType("image/jpeg");
	  OutputStream ops=response.getOutputStream();
	  ImageIO.write(image, "jpeg",ops);
	  ops.close();
    
  }
  
  private String getNumber(int size)
  {
	  String str="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//要注意的是我这里只提供了大写的A-Z如果想实现小写的自己加进去还有就是本应该将用户的输入不管大写小写都要转化为小写我没做有兴趣的自己实现很简单的
	  String  number="";
	  Random r=new Random();
	  for(int i=0;i<size;i++)
	  {
		  number+=str.charAt(r.nextInt(str.length()));
		  
	  }
	  return number;
  }
  
	
  
}



然后就是配置自己的web.xml这样就实现了简单的验证码:

      <servlet>
        <servlet-name>ValidateCodeServlet</servlet-name>
        <servlet-class>userUtil.ValidateCodeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ValidateCodeServlet</servlet-name>
        <url-pattern>/ValidateCodeServlet</url-pattern>
    </servlet-mapping>

效果如下:



你可能感兴趣的:(网站前台验证码(源代码)的实现点击刷新)