SSM初入门（ 七）在登录界面添加图形验证码

登陆界面图片验证码功能实现

参考了一颗小梪梪的验证码设计——验证码功能参考，十分感谢！

设计应该实现的效果
1.在登录界面有输入验证码的框，还有验证码图片
2.输入验证码正确提示正确，错误提示错误
3.看不清，点击图片刷新验证码内容
功能搭建思路
1.生成验证码
2.获取到验证码内容
3.获取到输入的验证码
4.二者比较正确与否，给出相应响应

功能实现流程
1.login.jsp添加输入验证码的框，还有验证码图片

 <div class="form-group row">
                                    <label  class="col-sm-3 control-label">验证码</label>
                                    <div class="col-sm-7">
                                        <input type="text" name="code" placeholder="请输入验证码"  class="form-control"/>
                                    </div>
                                    <div class="col-sm-3">
                                        <img id="img1" title="点击获取新验证码" src="<%=path%>/verifycode/getVerifyCodeImage.do" onclick="changeimg()" width="95" height="50" alt="" style="display:inline-block;">
                                    </div>
                                </div>

上述页面中，点击验证码可更新的changeimg()方法
js实现如下
先要引入jquery-3.3.1.min.js、将随机字符转化成图片相关的DD_belatedPNG_0.0.8a-min.js。
然后在js代码块中需要引入DD_belatedPNG.fix(‘div, ul, img, li, input,p,ul,ol,h1,h2,h3,a,span,i’);

 <script type="text/javascript" src="/js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript" src=/js/jquery-3.1.1.min"></script>
   <script language="javascript" type="text/javascript">
        function changeimg(){
            var img=document.getElementById("img1");
            //防止页面缓存
             img.src="<%=path%>/verifycode/getVerifyCodeImage.do?num"+Math.random();
        }
        DD_belatedPNG.fix('div, ul, img, li, input,p,ul,ol,h1,h2,h3,a,span,i');
    </script>

登录页面加载和点击验证码时，同时调用Controller类下的/verifycode/getVerifyCodeImage.do

package com.shopping.controller;

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.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping(value = "/verifycode")
public class VerifyCodeController {

    /**
     * Controller Method
     */

    @RequestMapping(value = "/getVerifyCodeImage.do")
    public void getVerifyCodeImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 设置验证码字符的字体和字号。
        Font mFont = new Font("Arial Black", Font.PLAIN, 22);

        //清除缓存，每次访问该页面时都从服务器端读取
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        response.setContentType("image/jpeg");

        // 设置验证码图片的长度和高度。
        int width = 86, height = 40;
        BufferedImage image = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_RGB);

        //画图画板
        Graphics g = image.getGraphics();
        //定义一个随机数
        Random random = new Random();
        //设置画板背景颜色
//          g.setColor(getRandColor(200, 250));
        g.setColor(new Color(160, 177, 185));
        //设置画板的填充范围
        g.fillRect(1, 1, width - 1, height - 1);
//          g.setColor(new Color(102, 102, 102));
        g.drawRect(0, 0, width - 1, height - 1);
        //设置字体
        g.setFont(mFont);

        //显示字符串，4位长度。
        String sRand = "";
        for (int i = 0; i < 4; i++) {
            String tmp = getRandomChar();
            sRand += tmp;
            //设置每个数字的颜色
            g.setColor(new Color(20 + random.nextInt(110), 20 + random
                    .nextInt(110), 20 + random.nextInt(110)));
            //在画板上写数字，起始位置
            g.drawString(tmp, 20 * i + 5, 27);
        }

        HttpSession session = request.getSession();
        // 把验证码防到session中，用来前台对比。
        session.setAttribute("verifycode", sRand.toLowerCase());
        // System.out.println(sRand.toLowerCase()+"--------------------------》");
        //显示图片
        g.dispose();
        //转换成一张图片，格式为JPEG
        ImageIO.write(image, "JPEG", response.getOutputStream());
    }

    /**
     * 随机获得颜色，RGB格式
     *
     * @param fc
     * @param bc
     * @return
     */
    Color getRandColor(int fc, int bc) {
        Random random = new Random();
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

    private String getRandomChar() {
        int rand = (int) Math.round(Math.random() * 2);
        long itmp = 0;
        char ctmp = '\u0000';
        switch (rand) {
            case 1:
                itmp = Math.round(Math.random() * 25 + 65);
                ctmp = (char) itmp;
                return String.valueOf(ctmp);
            case 2:
                itmp = Math.round(Math.random() * 25 + 97);
                ctmp = (char) itmp;
                return String.valueOf(ctmp);
            default:
                itmp = Math.round(Math.random() * 9);
                return String.valueOf(itmp);
        }
    }
}

上述实现类中，先随机生成一个四位数的随机数字+字母，然后将数字放到session中，最后使用ImageIO技术将随机字符转化成图片。

我直接在用到验证码的jsp页面用

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="javafx.scene.control.Alert" %>
<%@ page import="sun.font.Script" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">

实现java的getsession方法

 <%
        String incode = (String)request.getParameter("code");
        String rightcode = (String)session.getAttribute("verifycode");

        if(incode != null && rightcode != null){
            if(incode.equals(rightcode)){
                out.println("<script>alert('验证码输入正确！');window.location='login.jsp'</script>");
            }else{
                out.println("<script>alert('验证码输入不正确，请重新输入！');window.location='login.jsp'</script>");
            }
        }
    %>

效果演示