vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能
源碼:https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master
1.前端有一個(gè)img引入,這里this.src=this.src+'?'就會(huì)調(diào)用映射到后臺(tái)的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="請(qǐng)輸入驗(yàn)證碼" style="width: 100px; float:center" auto-complete="off"></el-input> </el-form-item>
2.后臺(tái)返回一個(gè)圖片
@RequestMapping(value="/checkCode") public void checkCode(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //設(shè)置相應(yīng)類型,告訴瀏覽器輸出的內(nèi)容為圖片 response.setContentType("image/jpeg"); HttpSession session = request.getSession(); //設(shè)置響應(yīng)頭信息,告訴瀏覽器不要緩存此內(nèi)容 response.setHeader("pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expire", ); RandomValidateCode randomValidateCode = new RandomValidateCode(); try { randomValidateCode.getRandcode(request, response); } catch (Exception e) { e.printStackTrace(); } }
3.是通過(guò)RandomValidateCode生成隨機(jī)字符串以及圖片。下面這個(gè)代碼可以直接用一下。來(lái)自:
http://www.dbjr.com.cn/article/152255.htm
public class RandomValidateCode { public static final String RANDOMCODEKEY = "randomcode_key";//放到session中的key private Random random = new Random(); private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//隨機(jī)產(chǎn)生的字符串 private int width = 80;//圖片寬 private int height = 26;//圖片高 private int lineSize = 40;//干擾線數(shù)量 private int stringNum = 4;//隨機(jī)產(chǎn)生字符數(shù)量 /** * 生成隨機(jī)圖片 */ public void getRandcode(HttpServletRequest request, HttpServletResponse response) { HttpSession session = request.getSession(); //BufferedImage類是具有緩沖區(qū)的Image類,Image類是用于描述圖像信息的類 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR); //產(chǎn)生Image對(duì)象的Graphics對(duì)象,改對(duì)象可以在圖像上進(jìn)行各種繪制操作 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); } //繪制隨機(jī)字符 String randomString = ""; for(int i=1;i<=stringNum;i++){ randomString=drowString(g,randomString,i); } session.removeAttribute(RANDOMCODEKEY); session.setAttribute(RANDOMCODEKEY, randomString); g.dispose(); try { //將內(nèi)存中的圖片通過(guò)流動(dòng)形式輸出到客戶端 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); } /* * 獲取隨機(jī)的字符 */ public String getRandomString(int num){ return String.valueOf(randString.charAt(num)); } }
--------------------------------------------------------------------------------
4.至于驗(yàn)證驗(yàn)證碼就是我弄了半天的東西。。。
因?yàn)槲也惶珪?huì)vue 然后寫(xiě)前端研究了會(huì)會(huì)才知道它是怎么用的。然后我開(kāi)始是想從前端拿到后端的session,但是vue這個(gè)是html頁(yè)面,不能<%@ %>
引入java代碼,然后我又試了一下js的ajax引入,但是報(bào)錯(cuò),vue框架我也不太懂。。然后還是交給后端驗(yàn)證嘛。
然后就很簡(jiǎn)單了,從login那里驗(yàn)證,提交的時(shí)候多了一個(gè)驗(yàn)證碼,但是我覺(jué)得這樣做其實(shí)是不太好的,因?yàn)轵?yàn)證碼跟登錄一起驗(yàn)證,有點(diǎn)耗時(shí),分開(kāi)比較好。
submitForm(login) { this.$refs[login].validate((valid) => { if (valid) { this.loadings(); //加載動(dòng)畫(huà) // 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格式數(shù)據(jù),不然娶不到數(shù)據(jù) if (result.body.success) { alert("success"); window.location.href = "/listStudentInfo"; this.loading.close(); //關(guān)閉動(dòng)畫(huà)加載 } else { // 彈出錯(cuò)誤信息框 this.$emit( 'submit-form', this.$message({ message:result.body.message, type: 'warning', duration: 6000 }), ); // 清空表單狀態(tài) 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 有問(wèn)題"); return new Result(false, error); } //System.out.println(password); //System.out.println("調(diào)試"); Subject subject=SecurityUtils.getSubject(); UsernamePasswordToken token=new UsernamePasswordToken(username,password); if (remember != null) { if (remember.equals("true")) { //說(shuō)明選擇了記住我 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( "登陸出錯(cuò)"); error = "用戶賬戶不存在,錯(cuò)誤信息:" + e.getMessage(); }catch (IncorrectCredentialsException ex) { System.out.println( "用戶名和密碼不匹配"); error = "用戶名或密碼錯(cuò)誤,錯(cuò)誤信息:" + ex.getMessage(); }catch (AuthenticationException e) { System.out.println( "其他的登陸錯(cuò)誤"); error = "錯(cuò)誤信息:" + e.getMessage(); } return new Result(false, error); }
5.session
簡(jiǎn)單說(shuō)一下我理解的session和cookie的區(qū)別吧,session是保存在服務(wù)端的,cookie是保存在客戶端的,就是本地會(huì)有一個(gè)文件夾專門(mén)保存cookie。cookie主要是為了保存用戶狀態(tài)嘛,因?yàn)閔ttp是無(wú)狀態(tài)的連接,每次連接完就不會(huì)知道下一次是不是同一個(gè)用戶。但是保存用戶信息在很多應(yīng)用場(chǎng)景中都是必要的。而session比cookie更加安全,因?yàn)閟ession信息保存在服務(wù)端的,不容易被盜用。所以重要登陸信息還是應(yīng)該保存在session上。而且服務(wù)端能夠保存的session比較大,而單個(gè)cookie一般不超過(guò)20k.
session是怎么保存用戶信息的呢?就是一個(gè)用戶有一個(gè)sessionId,通過(guò)sessionId保存用戶信息。
session的使用:
session.setAttribute("key","value"); session.getAttribute("key");
6.登陸界面
總結(jié)
以上所述是小編給大家介紹的vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- vuejs簡(jiǎn)單驗(yàn)證碼功能完整示例
- vue+element-ui集成隨機(jī)驗(yàn)證碼+用戶名+密碼的form表單驗(yàn)證功能
- Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼
- vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能
- vue實(shí)現(xiàn)驗(yàn)證碼按鈕倒計(jì)時(shí)功能
- 在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程
- vue中手機(jī)號(hào),郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例
- 簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能
- vue生成隨機(jī)驗(yàn)證碼的示例代碼
- vue驗(yàn)證碼組件應(yīng)用實(shí)例
相關(guān)文章
Vue.directive 實(shí)現(xiàn)元素scroll邏輯復(fù)用
這篇文章主要介紹了Vue.directive 實(shí)現(xiàn)元素scroll邏輯復(fù)用功能,文中給大家提到元素實(shí)現(xiàn)滾動(dòng)的條件有兩個(gè),具體內(nèi)容詳情大家參考下本文2019-11-11Vue v2.5 調(diào)整和更新不完全問(wèn)題
這篇文章主要介紹了Vue v2.5 調(diào)整和更新不完全問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-10-10vue-element-admin開(kāi)發(fā)教程(v4.0.0之后)
由于vue-element-admin的架構(gòu)再4.0.0版本后做了重構(gòu),整體結(jié)構(gòu)上和之前的還是很相似的,但是也有些變化,本文就介紹vue-element-admin開(kāi)發(fā)教程(v4.0.0之后),感興趣的可以了解一下2022-04-04vue-music關(guān)于Player播放器組件詳解
這篇文章主要為大家詳細(xì)介紹了vue-music關(guān)于Player播放器組件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11vue 自定指令生成uuid滾動(dòng)監(jiān)聽(tīng)達(dá)到tab表格吸頂效果的代碼
這篇文章主要介紹了vue 自定指令生成uuid滾動(dòng)監(jiān)聽(tīng)達(dá)到tab表格吸頂效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09解決el-select數(shù)據(jù)量過(guò)大的3種方案
最近做完一個(gè)小的后臺(tái)管理系統(tǒng),快上線了,發(fā)現(xiàn)一個(gè)問(wèn)題,有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測(cè)試環(huán)境都是幾百的,所以導(dǎo)致頁(yè)面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09詳解Vue源碼之?dāng)?shù)據(jù)的代理訪問(wèn)
這篇文章主要介紹了詳解Vue源碼之?dāng)?shù)據(jù)的代理訪問(wèn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12