記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😄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章