Web⽹页实现登录验证码功能
三部分内容
1、在登录页⾯⽣成验证码图⽚
2、点击图⽚更换新的验证码图⽚
3、点击登录，判定输⼊验证码与实际验证码是否⼀致
1、如何⽣成⼀个验证码图⽚，放置在登录页⾯？
servlet：
package com.Servlet;
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;
import javax.servlet.http.HttpSession;
/**
web端登录
* Servlet implementation class yzmServlet
*/
@WebServlet("/yzmServlet")
public class yzmServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public yzmServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  // ⾸先设置浏览器不缓存
response.setHeader("cache-control", "no-cache");
response.setHeader("Expire", "-1"); // >0为缓存
response.setHeader("pragma", "no-cache");
// 存储正确的验证码
String vali_code = "";
String Vali_str = "abcdefghijklmnopqrstuvwsyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ";    Color[] colors =
{ Color.BLACK, Color.RED, Color.BLUE };
// 1.创建图像
int width = 110, height = 40;
int x_offset = 5, y_offset = 28;
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
// 2.创建画布
Graphics2D g = ateGraphics();
// 3.为画布添加背景颜⾊为亮灰⾊
g.setColor(Color.LIGHT_GRAY);
g.fillRect(0, 0, width, height);//fillRect是包括矩形框内部
// 4.为画布添加边框
g.setColor(Color.BLUE);
g.drawRect(0, 0, width - 1, height - 1);//drawRect是绘制矩形边框
// 5.绘制⼲扰线
for (int i = 0; i < 10; i++)
{
g.setColor(new Color(randNum(0, 255), randNum(0, 255), randNum(0, 255)));
g.drawLine(randNum(0, width), randNum(0, height), randNum(0, width), randNum(0, height));
}
g.setFont(new Font("⿊体", Font.BOLD, 20));
for (int i = 0; i < 4; i++)
{
int r = randNum(-180, 180);
String code = Vali_str.charAt(randNum(0, Vali_str.length() - 1)) + "";
g.setColor(colors[randNum(0, colors.length)]);
g.drawString(code, x_offset + i * 30, y_offset);
vali_code += code;
}
//将验证码的内容存储在HttpSession中
//将验证码的内容存储在HttpSession中
HttpSession session = Session();
session.setAttribute("Valicode", vali_code);
// 通过response的输出流打给浏览器
ImageIO.write(img, "jpg", OutputStream());
}
private Random random = new Random();
/
/随机⽣成begin和end之间的⼀个int值
private int randNum(int begin, int end)
{
Int(end - begin) + begin;
}
}
html页⾯：
<input type="text" placeholder="⽤户名" /><!-- ⽤户名 -->
<input type="password"  id="password"/><!-- 密码 -->
<img src="/ZXTM/yzmServlet" οnclick="changeValiImage(this)" /><!-- 验证码图⽚ -->
<input type="text" placeholder="输⼊验证码" name="ValiImage" /><!-- 输⼊验证码⽂本 --> <button οnclick="doLogin()" >登录</button>
2、如何切换验证图⽚？
<!-- 验证码图⽚点击切换 -->
<!-- 通过Date来改变每次访问的url不同 -->
<script type="text/javascript">
function changeValiImage(img){
img.src = "/ZXTM/yzmServlet?time=" + new Date().getTime();
}
</script>
2、如何判定验证码的⼀致性？
在  doLogin() 登录的⽅法⾥⾯：
获取⽹页⽂本信息
再获取getSession().getAttribute("Valicode")⾥⾯保存的⽣成的验证码信息
String vali_user = getRequest().getParameter("ValiImage");
String vali_sys =  getSession().getAttribute("Valicode").toString();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。