文章目录
Javaweb实现验证码前端后台Springboot添加验证码项目结构依赖控制类前端页面效果图Javaweb实现验证码
前端
添加样式
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>FM_blog</title><link rel="stylesheet" type="text/css" href="res/layui/css/layui.css"><link rel="stylesheet" type="text/css" href="res/css/main.css"><script src="/jquery/1.12.3/jquery.min.js"></script><script src="layer/layer.js"></script>
编写代码
<div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>锋芒博客登录</legend></fieldset></div> <div class="layui-container fly-marginTop"><div class="fly-panel fly-panel-user"><div class="layui-tab layui-tab-brief" ><ul class="layui-tab-title"><li class="layui-this">登入</li><li><a href="reg.jsp">注册</a></li></ul><div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;"><div class="layui-tab-item layui-show"><div class="layui-form layui-form-pane"><form role="form" method="POST" name="login" action="LoginServlet"><div class="layui-form-item"><label for="L_username" class="layui-form-label">用户名</label><div class="layui-input-inline"><input type="text" class="layui-input" name="userName" id="L_username" placeholder="Admin..."/></div></div> <div class="layui-form-item"><label for="L_pass" class="layui-form-label">密码</label><div class="layui-input-inline"><input class="layui-input" type="password" name="userPassword" placeholder="Password..."></div></div><div class="layui-form-item"><label for="L_vercode" class="layui-form-label">验证码</label><div class="layui-input-inline"><input type="text" class="layui-input" placeholder="点击图片切换" autocomplete="off" required name = "validationCode" ></div><div class="layui-form-mid"><span><img src="ValidationCodeServlet" id="CreateCheckCode" onclick="change()"/></span></div></div><div class="layui-form-item"><input class="layui-btn" type="submit" name="login" value="登录"/></div></form></div></div></div></div></div></div>
<script type="text/javascript">function change(){document.getElementById("CreateCheckCode").src="ValidationCodeServlet?"+Math.random(); } </script>
配置web.xml文件
<servlet><description>com.FM.servlet</description><display-name>com.FM.servlet.ValidationCodeServlet</display-name><servlet-name>ValidationCodeServlet</servlet-name><servlet-class>com.FM.servlet.ValidationCodeServlet</servlet-class></servlet>
<servlet-mapping><servlet-name>ValidationCodeServlet</servlet-name><url-pattern>/ValidationCodeServlet</url-pattern></servlet-mapping>
后台
package com.FM.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.imageio.ImageIO;import javax.servlet.http.HttpSession;import java.awt.*;import java.awt.image.BufferedImage;import java.io.OutputStream;import java.util.Random;public class ValidationCodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;public ValidationCodeServlet() {super();}protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获得验证码集合的长度int charsLength = codeChars.length();//下面3条记录是关闭客户端浏览器的缓冲区//这3条语句都可以关闭浏览器的缓冲区，但是由于浏览器的版本不同，对这3条语句的支持也不同//因此，为了保险起见，同时使用这3条语句来关闭浏览器的缓冲区resp.setHeader("ragma", "No-cache");resp.setHeader("Cache-Control", "no-cache");resp.setDateHeader("Expires", 0);//设置图形验证码的长和宽int width = 90, height = 30;BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics(); //获得用于输出文字的Graphics对象Random random = new Random();g.setColor(getRandomColor(180, 250));g.fillRect(0, 0, width, height);g.setFont(new Font("Times New Roman",Font.ITALIC,height));g.setColor(getRandomColor(120, 180));//用户保存最后随机生成的验证码StringBuilder validationCode = new StringBuilder();//验证码的随机字体String[] fontNames = {"Times New Roman","Book antiqua","Arial"};//随机生成4个验证码for(int i = 0; i < 4; i++){//随机设置当前验证码的字符的字体g.setFont(new Font(fontNames[random.nextInt(3)],Font.ITALIC,height));//随机获得当前验证码的字符char codeChar = codeChars.charAt(random.nextInt(charsLength));validationCode.append(codeChar);//随机设置当前验证码字符的颜色g.setColor(getRandomColor(10, 100));//在图形上输出验证码字符，x和y都是随机生成的g.drawString(String.valueOf(codeChar), 16*i + random.nextInt(7), height-random.nextInt(6));}//获得HttpSession对象HttpSession session = req.getSession();//设置session对象5分钟失效session.setMaxInactiveInterval(5*60);//将验证码保存在session对象中,key为validation_codesession.setAttribute("validation_code", validationCode.toString());//关闭Graphics对象g.dispose();OutputStream outS = resp.getOutputStream();ImageIO.write(image, "JPEG", outS);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}//图形验证码的字符集，系统将随机从这个字符串中选择一些字符作为验证码private static String codeChars = "123456789abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ";//返回一个随机颜色private static Color getRandomColor(int minColor, int maxColor){Random random = new Random();if(minColor > 255){minColor = 255;}if(maxColor > 255){maxColor = 255;}//获得r的随机颜色值int red = minColor + random.nextInt(maxColor-minColor);//gint green = minColor + random.nextInt(maxColor-minColor);//bint blue = minColor + random.nextInt(maxColor-minColor);return new Color(red,green,blue);}}
效果图：
Springboot添加验证码
项目结构
依赖
<!-- 验证码 --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>
控制类
CommonController
package com.habse.car_position.Controller;import com.google.code.kaptcha.impl.DefaultKaptcha;import org.springframework.beans.factory.annotation.Autowired;import org.ponent;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import javax.imageio.ImageIO;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.awt.image.BufferedImage;import java.io.ByteArrayOutputStream;/*验证码*/@Controllerpublic class CommonController {@Autowiredprivate DefaultKaptcha captchaProducer;@GetMapping("/common/kaptcha")public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {byte[] captchaOutputStream = null;ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();try {//生产验证码字符串并保存到session中String verifyCode = captchaProducer.createText();httpServletRequest.getSession().setAttribute("verifyCode", verifyCode);BufferedImage challenge = captchaProducer.createImage(verifyCode);ImageIO.write(challenge, "jpg", imgOutputStream);} catch (IllegalArgumentException e) {httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);return;}captchaOutputStream = imgOutputStream.toByteArray();httpServletResponse.setHeader("Cache-Control", "no-store");httpServletResponse.setHeader("Pragma", "no-cache");httpServletResponse.setDateHeader("Expires", 0);httpServletResponse.setContentType("image/jpeg");ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();responseOutputStream.write(captchaOutputStream);responseOutputStream.flush();responseOutputStream.close();}}
KaptchaConfig
package com.habse.car_position.config;import com.google.code.kaptcha.impl.DefaultKaptcha;import com.google.code.kaptcha.util.Config;import org.springframework.context.annotation.Bean;import org.ponent;import java.util.Properties;@Componentpublic class KaptchaConfig {@Beanpublic DefaultKaptcha getDefaultKaptcha(){DefaultKaptcha defaultKaptcha = new DefaultKaptcha();Properties properties = new Properties();properties.put("kaptcha.border", "no");properties.put("kaptcha.textproducer.font.color", "blue");properties.put("kaptcha.image.width", "140");properties.put("kaptcha.image.height", "40");properties.put("kaptcha.textproducer.font.size", "30");properties.put("kaptcha.session.key", "verifyCode");properties.put("kaptcha.textproducer.char.space", "5");Config config = new Config(properties);defaultKaptcha.setConfig(config);return defaultKaptcha;}}
前端页面
<label class="block input-icon"><input type="text" name="verifyCode" placeholder="请输入验证码" style="width: 130px"><img alt="单击图片刷新！" class="pointer" src="/common/kaptcha"onclick="this.src='/common/kaptcha?d='+new Date()*1" style="margin-left: 10px;"></label>
