展示
项目结构
jar包
主要用到是第一个和第二个
CodeServlet类
验证码请求(会创建二维码并保存)
package com.tmg.code;
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 java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/code.do")
public class CodeServlet extends HttpServlet {
public static final int WIDTH = 110;
public static final int HEIGHT = 42;
public static final int FONT_SIZE = 25;
// 验证码设置为数字,字母
public static final String CHARS = "1234567890abc";
public static final Color[] COLORS = {Color.PINK,Color.YELLOW,Color.MAGENTA,Color.GREEN,Color.BLACK,Color.RED};
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// doGet(req,resp);
// System.out.println("-------+++--------");
String code = req.getParameter("doPost-》code");
// System.out.println(code);
//获得Session中的验证码
// String code2 = (String) req.getSession().getAttribute("code");
// if(code2 == null || !code2.equals(code)){
//验证码错误
// resp.getWriter().print("n");
//
// return;
// }
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("----------------");
//创建图片对象
BufferedImage image = new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_ARGB);
//获得绘图对象
Graphics graphics = image.getGraphics();
//设置背景色
graphics.setColor(Color.GRAY);
//填充长方形
graphics.fillRect(0,0,WIDTH,HEIGHT);
//设置字体
graphics.setFont(new Font("宋体", Font.ITALIC,FONT_SIZE));
Random random = new Random();
StringBuilder stringBuilder = new StringBuilder();
//随机生成4个文字,绘制到图片上
for (int i = 0; i < 4; i++) {
char c = CHARS.charAt(random.nextInt(CHARS.length()));
stringBuilder.append(c);
//颜色随机
graphics.setColor(COLORS[random.nextInt(COLORS.length)]);
//绘制字母
graphics.drawString(String.valueOf(c),FONT_SIZE * i + 10 ,FONT_SIZE);
}
//保存验证码到Session中
req.getSession().setAttribute("code",stringBuilder.toString());
//设置不缓存图片的响应头
resp.addHeader("Cache-Control","no-cache");
//将图片通过输出流发给浏览器
ImageIO.write(image,"PNG",resp.getOutputStream());
}
}
login.jsp
页面显示二维码,设置点击事件刷新验证码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱购登录页面</title>
<link rel="icon" type="image/x-icon" href="img/title-icon.jpg"/>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="css/login.css" />
</head>
<body>
<!--登录/注册的头部-->
<div class="lr-top w1230">
<a href="index.jsp"><img src="img/logo.png" width="150px" height="60px"/></a>
<div class="top-link">
<a href="#"class="top-link1"></a>
<a href="#" class="top-link2"></a>
<a href="#" class="top-link3"></a>
</div>
</div>
<!--登录/注册的中部-->
<div class="lr-main">
<div class="w1230">
<div class="reg-div">
<h3 class="login-title">登录爱购</h3>
<p class="go-reg">还没有爱购账号?<a href="register.html">在此注册</a></p>
<form action="/user.do?m=adduser" method="post">
<%-- <input type="hidden" name="m" value="adduser">--%>
<p><span class="icon-account"></span><input type="text" name="username" placeholder="请输入已注册的账号"/></p>
<p><span class="icon-pwd"></span><input type="password" name="password" placeholder="请输入密码"/></p>
<p class="clear-float"><input type="text" placeholder="验证码" name="code" class="code"/>
<img src="/code.do" id="code" width="110px" onclick="changeCode()" height="42px" class="code-img"/>
<%-- <img src="img/code.jpg" width="110px" height="42px" class="code-img"/>--%>
</p>
<%-- <p><input type="checkbox" class="chk-login"/><span>7天免登录</span></p>--%>
<input type="submit" value="登录" class="sum-btn" />
</form>
</div>
</div>
</div>
<!--登录/注册的底部-->
<div class="lr-footer footer">
<p class="w1230">
<a href="#">关于爱购</a>
<a href="#">合作伙伴</a>
<a href="#">营销中心</a>
<a href="#">廉正举报</a>
<a href="#">联系客服</a>
<a href="#">开发平台</a>
<a href="#">诚征英才</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a>
<a href="#">知识产权</a><span>|</span>
<span>©2018-2020 igo.com 版权所有</span>
</p>
</div>
</body>
<script>
function changeCode() {
document.getElementById("code").src = "/code.do?x="+Math.random();
}
</script>
</html>