Idea中maven項(xiàng)目實(shí)現(xiàn)登錄驗(yàn)證碼功能
1、配置maven環(huán)境變量，將maven安裝的bin⽬錄添加到path路徑中（此電腦->屬性->高級(jí)系統(tǒng)設(shè)置->環(huán)境變量->）
路徑為maven安裝目錄
2、找到ValidateCode.jar包的本地路徑
3、制作Jar包
原jar包地址：鏈接: https://pan.baidu.com/s/1QpqiZaF_ZYhW1Qn3ifn2eg 提取碼: uc47
無(wú)法直接使用，需要命令行制作，命令如下：
mvn install:install-file -DgroupId=it.source -DartifactId=ValidateCode -Dversion=1.0 -Dpackaging=jar -Dfile=C:UsersxiyangDesktopValidateCode-1.0.jar
‘C:UsersxiyangDesktopValidateCode-1.0.jar’為jar包路徑
4、成功效果
5、在maven項(xiàng)目的pom.xml文件中添加依賴
<dependency><groupId>cn.dsna.util.images</groupId><artifactId>ValidateCode</artifactId><version>1.0</version></dependency>
注意：‘cn.dsna.util.images’為依賴的路徑，筆者是將jar包放在本地maven倉(cāng)庫(kù)的cn/dsna/util/images路徑下
6、前端html實(shí)現(xiàn)
<!DOCTYPE html><html lang='cn' xmlns:th='http://www.thymeleaf.org'><head> <meta charset='utf-8'> <title>后臺(tái)登錄</title> <meta name='renderer' content='webkit'> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> <meta name='apple-mobile-web-app-status-bar-style' content='black'> <meta name='apple-mobile-web-app-capable' content='yes'> <meta name='format-detection' content='telephone=no'> <link rel='icon' href='http://www.lshqa.cn/bcjs/img/ico.ico' rel='external nofollow' > <link rel='stylesheet' href='http://www.lshqa.cn/bcjs/layui/css/layui.css' rel='external nofollow' media='all' /> <link rel='stylesheet' href='http://www.lshqa.cn/bcjs/css/public.css' rel='external nofollow' media='all' /></head><body class='loginBody'> <form > <div class='login_face'><img src='http://www.lshqa.cn/bcjs/15966.html' style='width: 100%;height: 100%'></div> <div class='layui-form-item input-item'> <label for='userName'>用戶名</label> <input type='text' placeholder='請(qǐng)輸入用戶名' autocomplete='off' name='username' lay-verify='required'> </div> <div class='layui-form-item input-item'> <label for='password'>密碼</label> <input type='password' placeholder='請(qǐng)輸入密碼' autocomplete='off' name='password' lay-verify='required'> </div> <div id='imgCode'> <label for='code'>驗(yàn)證碼</label> <input type='text' placeholder='請(qǐng)輸⼊驗(yàn)證碼' autocomplete='off' name='code' class='layui-input'> <img src='http://localhost:8080/home/code' onclick='changeCode()' id='codeImg'> </div> <div class='layui-form-item'> <button lay-filter='login' lay-submit>登錄</button> </div> </form> </body><script type='text/javascript' src='http://www.lshqa.cn/bcjs/layui/layui.js'></script><script type='text/javascript' src='http://www.lshqa.cn/bcjs/js/login.js'></script></html>
注意：頁(yè)面是layui框架渲染的，layui官網(wǎng)： https://www.layui.com/
也可以在網(wǎng)盤中下載：鏈接: https://pan.baidu.com/s/1QpqiZaF_ZYhW1Qn3ifn2eg 提取碼: uc47
7、前端js代碼(login.js)
//點(diǎn)擊驗(yàn)證碼進(jìn)⾏刷新驗(yàn)證碼，（登陸失敗以后，重新調(diào)⽤該⽅法去刷新驗(yàn)證碼）function changeCode(){ var img = document.getElementById('codeImg'); //注意:如果請(qǐng)求⽹址完全相同 則瀏覽器不會(huì)幫你刷新 //可以拼接當(dāng)前時(shí)間 讓每次請(qǐng)求的⽹址都不⼀樣 img.src ='http://localhost:8080/home/code?time='+new Date().getTime(); }
8、后端java代碼（控制層）
//獲取驗(yàn)證碼 @GetMapping('code') public void getCode(HttpServletRequest request, HttpServletResponse response){//參數(shù)列表：寬度，⾼度，字符數(shù)，⼲擾線數(shù)量 ValidateCode vs = new ValidateCode(120,40,5,100); //獲取文本 //String code = vs.getCode(); //將文本放入session中，一個(gè)公共的存儲(chǔ)空間，存值的方式是key-value try { request.getSession().setAttribute('code',vs.getCode()); request.getSession().setMaxInactiveInterval(300);//永不過(guò)期為-1 vs.write(response.getOutputStream()); } catch (IOException e) {//有io流就可能有io流異常，就要加try catch語(yǔ)句 e.printStackTrace(); } }
9、最終效果
點(diǎn)擊驗(yàn)證碼自動(dòng)刷新
到此這篇關(guān)于Idea中maven項(xiàng)目實(shí)現(xiàn)登錄驗(yàn)證碼功能的文章就介紹到這了,更多相關(guān)Idea maven登錄驗(yàn)證碼內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP常用日期格式化函數(shù) FormatDate()2. chat.asp聊天程序的編寫方法3. CSS 使用Sprites技術(shù)實(shí)現(xiàn)圓角效果4. phpstudy apache開啟ssi使用詳解5. 詳解瀏覽器的緩存機(jī)制6. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法7. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？8. HTML中的XML數(shù)據(jù)島記錄編輯與添加9. 利用FastReport傳遞圖片參數(shù)在報(bào)表上展示簽名信息的實(shí)現(xiàn)方法10. 推薦一個(gè)好看Table表格的css樣式代碼詳解
網(wǎng)公網(wǎng)安備