首页 > 编程 > Java > 正文

springboot登陆页面图片验证码简单的web项目实现

2019-11-26 09:08:11
字体:
来源:转载
供稿:网友

写在前面

前段时间大家都说最近大环境不好,好多公司在裁员,换工作的话不推荐轻易的裸辞,但是我想说的是我所在的公司好流弊,有做不完的业务需求,还有就是招不完的人......

最近我也是比较繁忙,但是还是要抽一点时间来进行自我复盘和记录,最近也写一个简单的小功能,就是登陆界面的图片验证码功能

环境:Tomcat9、Jdk1.8

1 生成验证码的工具类

public class RandomValidateCodeUtil {  public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key  private String randString = "0123456789";//随机产生只有数字的字符串 private String  //private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串  //private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串  private int width = 95;// 图片宽  private int height = 25;// 图片高  private int lineSize = 40;// 干扰线数量  private int stringNum = 4;// 随机产生字符数量  private static final Logger logger = LoggerFactory.getLogger(RandomValidateCodeUtil.class);  private Random random = new Random();  /**   * 获得字体   */  private Font getFont() {    return new Font("Fixedsys", Font.CENTER_BASELINE, 18);  }  /**   * 获得颜色   */  private Color getRandColor(int fc, int bc) {    if (fc > 255)      fc = 255;    if (bc > 255)      bc = 255;    int r = fc + random.nextInt(bc - fc - 16);    int g = fc + random.nextInt(bc - fc - 14);    int b = fc + random.nextInt(bc - fc - 18);    return new Color(r, g, b);  }  /**   * 生成随机图片   */  public void getRandcode(HttpServletRequest request, HttpServletResponse response) {    HttpSession session = request.getSession();    // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);    Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作    g.fillRect(0, 0, width, height);//图片大小    g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//字体大小    g.setColor(getRandColor(110, 133));//字体颜色    // 绘制干扰线    for (int i = 0; i <= lineSize; i++) {      drowLine(g);    }    // 绘制随机字符    String randomString = "";    for (int i = 1; i <= stringNum; i++) {      randomString = drowString(g, randomString, i);    }    logger.info(randomString);    //将生成的随机字符串保存到session中    session.removeAttribute(RANDOMCODEKEY);    session.setAttribute(RANDOMCODEKEY, randomString);    g.dispose();    try {      // 将内存中的图片通过流动形式输出到客户端      ImageIO.write(image, "JPEG", response.getOutputStream());    } catch (Exception e) {      logger.error("将内存中的图片通过流动形式输出到客户端失败>>>>  ", e);    }  }  /**   * 绘制字符串   */  private String drowString(Graphics g, String randomString, int i) {    g.setFont(getFont());    g.setColor(new Color(random.nextInt(101), random.nextInt(111), random        .nextInt(121)));    String rand = String.valueOf(getRandomString(random.nextInt(randString        .length())));    randomString += rand;    g.translate(random.nextInt(3), random.nextInt(3));    g.drawString(rand, 13 * i, 16);    return randomString;  }  /**   * 绘制干扰线   */  private void drowLine(Graphics g) {    int x = random.nextInt(width);    int y = random.nextInt(height);    int xl = random.nextInt(13);    int yl = random.nextInt(15);    g.drawLine(x, y, x + xl, y + yl);  }  /**   * 获取随机的字符   */  public String getRandomString(int num) {    return String.valueOf(randString.charAt(num));  }}

这个类不用动,可以直接拿来用

2 页面代码

<!--html/bady代码--><div >  <div >    <div >      <input type="tel" id="verify_input" placeholder="请输入验证码" maxlength="4">    </div>  </div>  <div >    <a href="javascript:void(0);" rel="external nofollow" title="点击更换验证码">      <img id="imgVerify" src="login/getVerify" alt="更换验证码" height="36" width="170" onclick="getVerify(this);">    </a>  </div>  <input type="button" onclick="aVerify()" value="提交"></div></body><!--js中的代码--><script type="text/javascript" src="./js/jquery.min.js"></script><script>  //获取验证码  /*function getVerify(obj){    obj.src = "login/getVerify?"+Math.random();//原生js方式  }*/    //获取验证码  function getVerify() {    // $("#imgCode").on("click", function() {    $("#imgVerify").attr("src", 'login/getVerify?' + Math.random());//jquery方式    // });  }  function aVerify(){    var value =$("#verify_input").val();    // alert(value);    $.ajax({      async: false,      type: 'post',      url: 'login/checkVerify',      dataType: "json",      data: {        verifyInput: value      },      success: function (result) {        if (result) {          alert("success!");        } else {          alert("failed!");        }        // window.location.reload();        getVerify();      }    });  }</script>

注意:这里有2种获取验证码图片的方法

3 获取code和验证code的类

@RestController@RequestMapping("/login")public class Picverifyaction {  private final static Logger logger = LoggerFactory.getLogger(Picverifyaction.class);  /**   * 生成验证码   */  @RequestMapping(value = "/getVerify")  public void getVerify(HttpServletRequest request, HttpServletResponse response) {    try {      response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片      response.setHeader("Pragma", "No-cache");//设置响应头信息,告诉浏览器不要缓存此内容      response.setHeader("Cache-Control", "no-cache");      response.setDateHeader("Expire", 0);      RandomValidateCodeUtil randomValidateCode = new RandomValidateCodeUtil();      randomValidateCode.getRandcode(request, response);//输出验证码图片方法    } catch (Exception e) {      logger.error("获取验证码失败>>>>  ", e);    }  }  /**   * 校验验证码   */  @RequestMapping(value = "/checkVerify", method = RequestMethod.POST,headers = "Accept=application/json")  public boolean checkVerify(@RequestParam String verifyInput, HttpSession session) {    try{      //从session中获取随机数      String inputStr = verifyInput;      String random = (String) session.getAttribute("RANDOMVALIDATECODEKEY");      if (random == null) {        return false;      }      if (random.equals(inputStr)) {        return true;      } else {        return false;      }    }catch (Exception e){      logger.error("验证码校验失败", e);      return false;    }  }}

4 效果图镇楼

5 源码

当然上面代码只是核心部分,如果有问题可去github自行下载 charmsongo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表