vue+SSM驗證碼實現

時間 2019-11-25

標籤 vue+ssm vue ssm 驗證碼實現简体版

原文原文鏈接

源碼：https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master

1.前端有一個img引入，這裏this.src=this.src+'?'就會調用映射到後臺的checkCode

<el-form-item prop="code">

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

                              <el-input v-model="login.code" placeholder="請輸入驗證碼" style="width: 100px; float:center"  auto-complete="off"></el-input>

</el-form-item>

2.後臺返回一個圖片

 1 @RequestMapping(value="/checkCode")
 2 
 3 public void checkCode(HttpServletRequest request, HttpServletResponse response)
 4 
 5             throws ServletException, IOException {
 6 
 7 //設置相應類型,告訴瀏覽器輸出的內容爲圖片
 8 
 9         response.setContentType("image/jpeg");
10 
11         HttpSession session = request.getSession();
12 
13         //設置響應頭信息，告訴瀏覽器不要緩存此內容
14 
15         response.setHeader("pragma", "no-cache");
16 
17         response.setHeader("Cache-Control", "no-cache");
18 
19         response.setDateHeader("Expire", 0);
20 
21         RandomValidateCode randomValidateCode = new RandomValidateCode();
22 
23         try {
24 
25             randomValidateCode.getRandcode(request, response);
26 
27         } catch (Exception e) {
28 
29             e.printStackTrace();
30 
31         }
32 
33 }

3.是經過RandomValidateCode生成隨機字符串以及圖片。下面這個代碼能夠直接用一下。來自博客：

https://blog.csdn.net/weidong_y/article/details/80630383html

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));

    }

}

4.至於驗證驗證碼就是我弄了半天的東西。。。

由於我不太會vue 而後寫前端研究了會會才知道它是怎麼用的。而後我開始是想從前端拿到後端的session，可是vue這個是html頁面，不能<%@ %>引入java代碼，而後我又試了一下js的ajax引入，可是報錯，vue框架我也不太懂。。而後仍是交給後端驗證嘛。前端

而後就很簡單了，從login那裏驗證，提交的時候多了一個驗證碼，可是我以爲這樣作實際上是不太好的，由於驗證碼跟登陸一塊兒驗證，有點耗時，分開比較好。vue

submitForm(login) {

            this.$refs[login].validate((valid) => {

                if (valid) {

                    this.loadings(); //加載動畫

                // window.alert(this.login.code);



                    this.$http.post('/login', {

                        username: this.login.username,

                        password: this.login.password,

                        remember: this.login.remember,

                        code:this.login.code

                    }).then(result => {

                    //window.alert(result);



                        // 判斷用戶是否登陸成功，後端返回JSON格式數據，否則娶不到數據

                        if (result.body.success) {

                        alert("success");

                            window.location.href = "/listStudentInfo";

                            this.loading.close(); //關閉動畫加載

                        } else {



                            // 彈出錯誤信息框

                            this.$emit(

                                'submit-form',

                                this.$message({

                                    message:result.body.message,

                                    type: 'warning',

                                    duration: 6000

                                }),

                            );

                            // 清空表單狀態

                            this.$refs[login].resetFields();

                        }

                    });

          }

                else {



                    this.$emit(

                        'submit-form',

                        this.$message({

                            message: '輸入信息有誤！',

                            type: 'warning',

                            duration: 6000

                        }),

                    );

                    return false;

                }

            });

        },

@RequestMapping("/login")

public Result Login( @RequestParam(value = "username", required = false) String username,

            @RequestParam(value = "password", required = false) String password,

            @RequestParam(value = "remember", required = false) String remember,

            @RequestParam(value = "code", required = false) String code,

            HttpServletRequest request

            ) {

String error = null;

HttpSession session = request.getSession();

  System.out.println(code);

  //System.out.println(session.getAttribute( RandomValidateCode.RANDOMCODEKEY));

if(username==null||session.getAttribute( RandomValidateCode.RANDOMCODEKEY).equals(code)) {

//System.out.println("code 有問題");

return new Result(false, error);

}

//System.out.println(password);

//System.out.println("調試");

Subject subject=SecurityUtils.getSubject();

UsernamePasswordToken token=new UsernamePasswordToken(username,password);

if (remember != null) {

            if (remember.equals("true")) {

                //說明選擇了記住我

                token.setRememberMe(true);

            } else {

                token.setRememberMe(false);

            }

        } else {

            token.setRememberMe(false);

        }

System.out.println(token.isRememberMe());

try {

subject.login(token);

Result re=new Result(true, "success");

return new Result(true,error);

} catch (UnknownAccountException e) {

      System.out.println( "登錄出錯");

        error = "用戶帳戶不存在，錯誤信息：" + e.getMessage();

    }catch (IncorrectCredentialsException ex) {

    System.out.println( "用戶名和密碼不匹配");

    error = "用戶名或密碼錯誤，錯誤信息：" + ex.getMessage();

    }catch (AuthenticationException e) {

    System.out.println( "其餘的登錄錯誤");

    error = "錯誤信息：" + e.getMessage();



    }

return new Result(false, error);

}

5.session

簡單說一下我理解的session和cookie的區別吧，session是保存在服務端的，cookie是保存在客戶端的，就是本地會有一個文件夾專門保存cookie。cookie主要是爲了保存用戶狀態嘛，由於http是無狀態的鏈接，每次鏈接完就不會知道下一次是否是同一個用戶。可是保存用戶信息在不少應用場景中都是必要的。而session比cookie更加安全，由於session信息保存在服務端的，不容易被盜用。因此重要登錄信息仍是應該保存在session上。並且服務端可以保存的session比較大，而單個cookie通常不超過20k.java

session是怎麼保存用戶信息的呢？就是一個用戶有一個sessionId,經過sessionId保存用戶信息。git

session的使用：程序員

session.setAttribute("key","value");github

session.getAttribute("key");ajax