可以做設(shè)計(jì)兼職的網(wǎng)站有哪些工作室搜外seo
前言
我們注意到我們登錄網(wǎng)站的時(shí)候經(jīng)常會(huì)用到網(wǎng)絡(luò)驗(yàn)證碼,今天我們就簡(jiǎn)單實(shí)現(xiàn)一個(gè)驗(yàn)證碼的前后端交互問(wèn)題,做一個(gè)小demo
準(zhǔn)備
我們這里并不需要依靠原生的java來(lái)實(shí)現(xiàn),而是只需要引入一個(gè)maven依賴(lài),使用現(xiàn)成的封裝好的即可,這是我使用的是hutool工具包
網(wǎng)址:Hutool🍬一個(gè)功能豐富且易用的Java工具庫(kù)，涵蓋了字符串、數(shù)字、集合、編碼、日期、文件、IO、加密、數(shù)據(jù)庫(kù)JDBC、JSON、HTTP客戶端等功能。
參考文檔:入門(mén)和安裝 (hutool.cn)
注意:這里我們?nèi)aven倉(cāng)庫(kù)去尋找的時(shí)候,一定不要去找最新版本的
我們可以先去使用一下這里的驗(yàn)證碼,先會(huì)用,不必先理解原理
當(dāng)我么執(zhí)行完這類(lèi)代碼就會(huì)發(fā)現(xiàn),對(duì)應(yīng)的文件夾出現(xiàn)了類(lèi)似于這樣的圖片
后端
首先我們得先設(shè)計(jì)接口
我們這里第一個(gè)接口負(fù)責(zé)以流的方式寫(xiě)入數(shù)據(jù)給web客戶端
第二個(gè)接口負(fù)責(zé)檢查輸入的驗(yàn)證碼與實(shí)際的驗(yàn)證碼是否一致
至于頁(yè)面的跳轉(zhuǎn),我們交給前端即可
現(xiàn)在開(kāi)始寫(xiě)接口
我們將需要設(shè)置的常量放在配置文件中,使用一個(gè)對(duì)象進(jìn)行注入即可
spring:application:name: Captcha//驗(yàn)證碼的長(zhǎng)寬captcha:width: 200height: 100//驗(yàn)證碼設(shè)置的時(shí)間(為了設(shè)置過(guò)期時(shí)間) //key為了保存驗(yàn)證碼的值session:key: captcha_session_keydate: captcha_session_date//個(gè)人喜好server:port: 9090這些常量都是無(wú)狀態(tài)的,我們將其交給Spring管理
@Component @Data @ConfigurationProperties(prefix = "captcha") public class CaptchaProperties {private Integer width;private Integer height;private Session session;@Datapublic static class Session{private String key;private String date;} }我們將剛剛測(cè)試的代碼改一改就可以將驗(yàn)證碼圖片寫(xiě)入web網(wǎng)站上
首先創(chuàng)建驗(yàn)證碼對(duì)象,然后將驗(yàn)證碼寫(xiě)入其輸出流即可
然后為了多線程的問(wèn)題,我們不可以將驗(yàn)證碼屬性提出成公共屬性,以防被修改,我們可以使用session保存驗(yàn)證碼和生成驗(yàn)證碼的時(shí)間
獲取驗(yàn)證碼
@RequestMapping("/captcha") @RestController public class CaptchaController { //過(guò)期時(shí)間為一分鐘private final static long session_valid_timeout = 60 * 1000; //對(duì)象注入@Autowiredprivate CaptchaProperties captchaProperties;@RequestMapping("/get")public void getCaptcha(HttpSession session, HttpServletResponse response){ //獲取驗(yàn)證碼對(duì)象LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());try { //寫(xiě)入輸出流lineCaptcha.write(response.getOutputStream()); //將驗(yàn)證碼設(shè)置到session中,方便驗(yàn)證session.setAttribute(captchaProperties.getSession().getKey(), lineCaptcha.getCode());session.setAttribute(captchaProperties.getSession().getDate(), new Date());} catch (IOException e) {throw new RuntimeException(e);}}下面我們開(kāi)始設(shè)計(jì)檢查驗(yàn)證碼的邏輯
注:后端代碼最好是寫(xiě)一點(diǎn)檢查一點(diǎn),這樣方便排除錯(cuò)誤
?檢查驗(yàn)證碼
首先需要一個(gè)輸入的input獲取輸入框的數(shù)據(jù),從而和session中的數(shù)據(jù)進(jìn)行比較,注意先判空
@RequestMapping("/check")public Boolean check(String input,HttpSession session) {if(!StringUtils.hasLength(input)) {return false;}String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());Date savedDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());if(input.equalsIgnoreCase(savedCode)) {if(savedDate!=null && System.currentTimeMillis() - savedDate.getTime() < session_valid_timeout) {return true;}else{return false;}}return false;} }
前端
前端書(shū)寫(xiě)大致了解會(huì)寫(xiě)就行
主要邏輯就是獲取輸入框中的文本交給后端的接口即可
注:這里的圖片地址建議加上一個(gè)時(shí)間戳,防止瀏覽器緩存
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>驗(yàn)證碼</title><style>#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}</style> </head><body><h1>輸入驗(yàn)證碼</h1><div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？換一張" /><input type="button" value="提交" id="checkCaptcha"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({url:"/captcha/check",type:"post",data:{input:$("#inputCaptcha").val(),},success:function(result){if(result) {location.href="success.html"}else{alert("驗(yàn)證碼錯(cuò)誤或超時(shí)")}}});});</script> </body></html>
成果展示
成功則跳轉(zhuǎn),另一個(gè)網(wǎng)頁(yè)隨便寫(xiě)寫(xiě)就行
失敗則提示
