javascriptp如何实现简单图片验证码功能

互联网
快乐不是一种回归，它是内心世界的一种担当，它不必要服从命运的意志，却需要自己一种独立承担。

本文实例为大家分享了jsp实现简单图片验证码的具体代码，供大家参考，具体内容如下

一、实现的功能分析

（1）在登陆页面加验证码的功能，起到一定的安全性。在输入正确的验证码，用户名和密码的情况下，才可以实现登录。（2）实现查询数据库的功能。在登陆后的页面中，显示用户名和密码，并且设置有一个超链接，实现查询数据库的功能。（3）代码核心是：随机生成验证码，并且显示在页面上。同时要和输入框中的输入验证码进行校验。（4）主页面使用img标签的src属性引入验证页面的jsp文件。（5）验证码的实现页面使用BufferedImage类的方法产生图片。（6）使用Graphics类的各种方法实现验证码的构成。

二、代码实现

（1）登录页面：index.jsp文件。

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
</head>
<body>
<form action="LoginServlet" method="post">
   用户名：<input name="username" type="text" value=""/><br/><br/>
   密码：<input name="password" type="password" value=""/><br/><br/>
   
   
    验证码: <input type="text" name="checkCode" height="20px " value=""/>
   <img src="CodeServlet"/><span>${error_code}</span><br/>
   <input type="submit" value="提交">

</form>
</body>
</html>

（2）登录后的页面：user.jsp文件。

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<%@ page import = "com.entity.Author"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示登录用户的用户名和密码页面</title>
</head>
<body>
<% 
  //内置对象
  request.setCharacterEncoding("utf-8");
  //获取交互层放入session中的obj
  Author obj = (Author)session.getAttribute("authorInfo");
 
  if(obj != null){
   out.print("<p>用户名："+obj.getName()+"</p>");
   out.print("<p>密码："+obj.getId()+"</p>");
  }
  else{
   response.sendRedirect("index.jsp");
  }
%>
<br/>
<a rel="nofollow noopener noreferrer" href="AuthorServlet">用户信息查询 </a>
</body>
</html>

（3）实现数据查询页面：ueslist.jsp文件。

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查询信息显示页面</title>
</head>
<body>
<table border="1">
 <tr>
    <td>编号</td>
    <td>名称</td>
    <td>价格</td>
    <td>数量</td>
    <td>日期</td>
    <td>风格</td>
 </tr>

 <c:forEach items="${authorList}" var="author">
 <tr>
  <td>${author.id}</td>
  <td>${author.name }</td>
  <td>${author.price }</td>
  <td>${author.num }</td>
  <td>${author.dates}</td>
  <td>${author.style}</td>
 </tr>
 </c:forEach>
</table>
</body>
</html>

（4）定义一个Author类，用于接收数据库中的元素。

package com.entity;
//用于获取数据库中的元素对象
public class Author {
 private int id;
 private String name;
 private int price ;
 private int num;
 private String dates;
 private String style;
 public int getId() {
  return id;
 }
 public void setId(int id) {
  this.id = id;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public int getPrice() {
  return price;
 }
 public void setPrice(int price) {
  this.price = price;
 }
 public int getNum() {
  return num;
 }
 public void setNum(int num) {
  this.num = num;
 }
 public String getDates() {
  return dates;
 }
 public void setDates(String dates) {
  this.dates = dates;
 }
 public String getStyle() {
  return style;
 }
 public void setStyle(String style) {
  this.style = style;
 }

}

（5）登录页面的交互层：LoginServlet.java文件。用于登录检验和验证码匹配。

//交互层（客户端和服务器的交互）
package com.servlet;

import java.io.IOException;
import java.sql.SQLException;

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

import com.dao.AuthorDao;
import com.entity.Author;

/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
   
  /**
  * @see HttpServlet#HttpServlet()
  */
  public LoginServlet() {
    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，response
  request.setCharacterEncoding("utf-8");
  
  HttpSession session = request.getSession();
  
  //获取用户输入验证码
  String checkCode = request.getParameter("checkCode");
  //获取session中的验证码,也就是CodeServlet中生成的四个字符
  String sessionCode = (String)session.getAttribute("sCode");
  
  
  //验证码正确
  if(checkCode.equals(sessionCode)) {
   //获取表单数据
   String username = request.getParameter("username");
   int password = Integer.valueOf(request.getParameter("password"));
   
   //判断用户信息是否正确，查询数据库获取用户信息
    AuthorDao ad = new AuthorDao();
     Author obj = ad.check(username, password);
    
     //判断
     if(obj != null) {
     
      //重新放入用户信息
    //  HttpSession session = request.getSession();
      session.setAttribute("authorInfo", obj);
      //设置session的有效期为10秒
      session.setMaxInactiveInterval(10);
     
      //页面转发
      response.sendRedirect("user.jsp");
     }
     else {
     
      //页面重定向到登录页面
      response.sendRedirect("index.jsp");
     }
  }
  else {
   //验证码不正确
   request.setAttribute("error_code", "验证码不匹配");
   request.getRequestDispatcher("index.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);
 }

}

（6）数据库查询的交互层：AuthorServlet.java文件。

package com.servlet;

import java.io.IOException;
import java.util.List;

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

import com.dao.AuthorDao;
import com.entity.Author;

/**
* Servlet implementation class AuthorServlet
*/
@WebServlet("/AuthorServlet")
public class AuthorServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
   
  /**
  * @see HttpServlet#HttpServlet()
  */
  public AuthorServlet() {
    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");
  
   //查询用户列表
   AuthorDao ad = new AuthorDao();
   //将Dao层中的结果放入list中
   List<Author> list = ad.queryAuthorList();
   request.setAttribute("authorList", list);
  
   //请求转发的方式将查询结果放入request中，再将超链接直接访问AuthorServlet就将信息显示出来了。
   request.getRequestDispatcher("uselist.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);
 }

}

（7）定义一个AuthorDao类实现查询数据库和检验登录的用户名和密码。

//用于检验登录页面所填入信息是否正确
package com.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.entity.Author;

public class AuthorDao {
 
 public Author check(String username ,int password)
 {
  Author obj = null ;
  try {
    DBConnection db = new DBConnection();
    //获取数据库连接
    Connection conn = db.getConn();
    //设置要执行的数据库语句
    String sql = "select *from furnitures where name = ? and id = ?";
    
    PreparedStatement ps = conn.prepareStatement(sql);
    //设置用户名和密码放入sql语句
    ps.setString(1, username);
    ps.setInt(2, password);
    
    //执行sql查询语句 , 并将执行结果放入结果集中
     ResultSet rs = ps.executeQuery();
    
     //用户名和密码都正确
     if(rs.next()) {
      
      //新创建一个obj 将查询结果放入
      obj = new Author();
      obj.setId(rs.getInt(1));
      obj.setName(rs.getString(2));
      obj.setPrice(rs.getInt(3));
      obj.setNum(rs.getInt(4));
      obj.setDates(rs.getString(5));
      obj.setStyle(rs.getString(6));
     }
  
  } catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  
  return obj;
 }
 
 public List<Author> queryAuthorList(){
  
  
  Author obj = null;
  //定义一个list集合，用于存放查询结果
  List<Author> list = new ArrayList<Author>() ;
  try {
   
   
   DBConnection db = new DBConnection();
   //获取数据库连接
   Connection conn = db.getConn();
   //设置数据库要查询的语句
   String sql = "select *from furnitures ";
   
   PreparedStatement ps = conn.prepareStatement(sql);
   
   //执行数据库查询语句,并将查询结果放入结果集
   ResultSet rs = ps.executeQuery();
   
   //利用循环将obj放入list集合中
   while(rs.next()) {
    obj = new Author();
    
    obj.setId(rs.getInt(1));
    obj.setName(rs.getNString(2));
    obj.setPrice(rs.getInt(3));
    obj.setNum(rs.getInt(4));
    obj.setDates(rs.getString(5));
    obj.setStyle(rs.getString(6));
    
    //将obj加入到list
    
    list.add(obj);
    
   }
   
   
  } catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  
  
  return list;
 }
 
}

（8）定义一个验证码生成CodeServlet类，用于生成验证码。

package com.servlet;

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

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

@WebServlet("/CodeServlet")
public class CodeServlet extends HttpServlet{
 
 //定义验证码的源码
 private static final String str ="abcdefghijklmnopqrstuvwxyaABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
 
 //定义随机数
 private Random random = new Random();
 
 //随机生成四个字符
 public String getStr()
 {
  String s = "";
  int len = str.length();
  for(int i=0;i<4;i++) {
   s+=str.charAt(random.nextInt(len));
  }
  return s;
 }
 
 //随机颜色
 public Color getColor() {
  
  int red = random.nextInt(256);
  int green = random.nextInt(256);
  int blue = random.nextInt(256);
  Color color = new Color(red,green,blue);
  
  return color;
 }
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  // TODO Auto-generated method stub
  
  
  //生成验证码图片
  //画板
  BufferedImage image = new BufferedImage(70,20,BufferedImage.TYPE_INT_RGB );
  //画笔
  Graphics pen = image.getGraphics();
  //矩形
  pen.fillRect(0, 0, 70, 20);
  //字体
  pen.setFont(new Font("微软雅黑",Font.BOLD,20));
  
  //获取4个字符
  String code = getStr();
  
  //绘制图片
  for(int i=0;i<code.length();i++) {
   pen.setColor(getColor());
   pen.drawString(String.valueOf(code.charAt(i)), i*15+5, 20);;
  }
  
  //response对象绘制图片到页面,Servle输出流进行图片的输出
  ServletOutputStream sos = resp.getOutputStream();
  ImageIO.write(image, "png", sos);
  
  sos.flush();
  sos.close();
  
  //验证码放入session
  HttpSession session = req.getSession();
  session.setAttribute("sCode", code);
  
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  // TODO Auto-generated method stub
  doPost(req, resp);
 }
}

（9）创建DBConnectoin.java类用户获取数据库连接。（我用的是mysql）

//获取数据库连接
package com.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {
 private static String username="填入自己的数据库名";
 private static String password="填入自己的数据库密码";
 private static String driver = "com.mysql.jdbc.Driver";
 private static String url="jdbc:mysql://localhost:3306/已经创建数据库名";
 
 private Connection conn;
 
 static {
  try {
   //加载驱动，捕获异常
   Class.forName(driver);
  } catch (ClassNotFoundException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 }
 
 public DBConnection () throws SQLException {
  //连接数据库
  conn = DriverManager.getConnection(url,username,password);
 }
 
 //用于获取conn
 public Connection getConn() {
  return conn;
 }

 public void setConn(Connection conn) {
  this.conn = conn;
 }
 

}

三、页面

（1）登录页面

（2）数据查询页面

（3）查询结果显示页面

到此这篇关于javascriptp如何实现简单图片验证码功能就介绍到这了。不要为失去的事物后悔，这是一种无比豁达的心态，过去的事情就让他过去把。更多相关javascriptp如何实现简单图片验证码功能内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
javascriptp response.sendRedirect()用法详解
javascriptp如何使用sessionScope获取session案例详解
javascriptp+mysql如何实现网页的分页查询
javascriptp如何实现登录界面
javascriptp request.getParameter() 和request.getAttribute()方法区别详解