記ssm中的驗證碼問題

問題情況

想實現一個用戶登錄的驗證碼驗證，我參考了這篇博文

但是致命的問題出現了…

不能刷新！！！！！！

解決

• 博主給的方法是在驗證碼上觸發onclick事件

<img src="checkCode" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" οnclick="this.src=this.src+'?'">

但問題是，它沒用啊！！！！

思路是對的，在src屬性後面加入參數，但是好像只有?，似乎不行？？

• 我做出瞭如下更改

<img src="checkCode" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" οnclick="this.src=this.src+'?data'+Math.random()">

失敗了，哈哈？？

難道是路由的路徑不對？？？？我再來！！！

• 更改路徑

<img src="/user/checkCode" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" οnclick="this.src=this.src+'?data'+Math.random()">

又錯了，就這？？？

於是乎我想用AJAX，但一而再再而三的失敗，我要崩潰啦！！！！！

在我要放棄時候，我想到了JS的onclick事件，把它寫在外面，寫具體。雖然還是不行，但至少思路在向正了走了。行，那我拿個a標籤套一下，畢竟今天第一次知道a標籤可以不寫href哈哈哈哈哈（蒟蒻狂笑

<a id="newPic" onclick="getPic()"><img src="/user/checkCode" id="checkCode" title="看不清，點擊換一張" alt="" width="100" height="32" class="center-block" style="height:43px;cursor:pointer;"/></a>
<script type="text/javascript">
    function getPic(){
        $("#checkCode").attr("src","/user/checkCode?flag="+Math.random());
    };
</script>

哎呀媽呀！！成了啊！！！但是還有問題…爲什麼我點圖片周圍也能換？？？沒錯！！就是a標籤做的妖！！！

大膽點，去掉a標籤試試！！！

<img src="/user/checkCode" id="checkCode" title="看不清，點擊換一張" alt="" width="100" height="32" class="center-block" style="height:43px;cursor:pointer;" onclick="getPic()"/>
<script type="text/javascript">
    function getPic(){
        $("#checkCode").attr("src","/user/checkCode?flag="+Math.random());
    };
</script>

成了！！！！！！！！！！！！！！！！！

舒服了！！！！！！

覆盤時刻

原來的οnclick="this.src=this.src+'?'"這種方式，在debug下會發現根本沒辦法請求成功，所以問題就在於怎麼成功發出請求。

• 給出參數?flag="+Math.random()

• 改變src屬性$("#checkCode").attr()，相當於setAttribute【設置參數】

• 觸發請求onclick="getPic()"

OK!!!

驗證碼製作流程

• 在util中寫一個工具類，通過awt畫圖畫出來

package com.microsoft.util;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;

/*
驗證碼
 */
public class RandomValidateCode {

    public static final String RANDOMCODEKEY = "randomcode_key";//放到session中的key
    private Random random = new Random();
    private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//隨機產生的字符串

    private int width = 80;//圖片寬
    private int height = 26;//圖片高
    private int lineSize = 40;//干擾線數量
    private int stringNum = 4;//隨機產生字符數量

    /**
     * 生成隨機圖片
     */
    public void getRandcode(HttpServletRequest request,
                            HttpServletResponse response) {
        HttpSession session = request.getSession();
        //BufferedImage類是具有緩衝區的Image類,Image類是用於描述圖像信息的類
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
        //產生Image對象的Graphics對象,改對象可以在圖像上進行各種繪製操作
        Graphics g = image.getGraphics();
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Times New Roman",Font.ROMAN_BASELINE,18));
        g.setColor(getRandColor(160, 200));
        //繪製干擾線
        for(int i=0;i<=lineSize;i++){
            drowLine(g);
        }
        //繪製隨機字符
        String randomString = "";
        for(int i=1;i<=stringNum;i++){
            randomString=drowString(g,randomString,i);
        }
        session.removeAttribute(RANDOMCODEKEY);
        session.setAttribute(RANDOMCODEKEY, randomString);
        g.dispose();
        try {
            //將內存中的圖片通過流動形式輸出到客戶端
            ImageIO.write(image, "JPEG", response.getOutputStream());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /*
     * 獲得字體
     */
    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);
    }

    /*
     * 繪製字符串
     */
    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));
    }
}

• 控制層裏寫上代碼

/**
 * 獲取生成驗證碼顯示到 UI 界面
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 */
@RequestMapping(value="/checkCode")
public void checkCode(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    //設置相應類型,告訴瀏覽器輸出的內容爲圖片
    response.setContentType("image/jpeg");

    //設置響應頭信息，告訴瀏覽器不要緩存此內容
    response.setHeader("pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expire", 0);

    RandomValidateCode randomValidateCode = new RandomValidateCode();
    try {
        randomValidateCode.getRandcode(request, response);//輸出圖片方法
    } catch (Exception e) {
        e.printStackTrace();
    }
}

• JSP頁面請求

<img src="/user/checkCode" id="checkCode" title="看不清，點擊換一張" alt="" width="100" height="32" class="center-block" style="height:43px;cursor:pointer;" onclick="getPic()"/>
<script type="text/javascript">
    function getPic(){
        $("#checkCode").attr("src","/user/checkCode?flag="+Math.random());
    };
</script>

• 要求SSM環境

///狗頭保護///

另外，我的代碼寫的不太規範，就比如驗證碼這個英文單詞，我竟然寫的是checkCode…應該用varification

最後貼上我的GayHub😄