您好,登錄后才能下訂單哦!
利用IDEA怎么制作一個登錄注冊頁面?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
application.yml
spring: datasource: username: root password: 123456 url: jdbc:mysql://localhost:3306/bd1906?serverTimezone=GMT%2B8 driver-class-name: com.mysql.cj.jdbc.Driver server: port: 8080
Controller層
@Controller public class loginController { @Autowired private JdbcTemplate jdbcTemplate; @RequestMapping("/index") public String border(){ return "/index.html"; } @RequestMapping("/login") public String getUserFront(){ return "/login.html"; } @RequestMapping(value = "/log",method = RequestMethod.POST) @ResponseBody public String log(String name,String psd){ String sql = "select * from user where username = '"+ name +"' and password = '"+psd+"'"; List<Map<String,Object>> list = jdbcTemplate.queryForList(sql); if(list.size() == 0){ return "0"; } else{ return "1"; } } }
登錄頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/jquery-3.4.1.min.js"></script> <title>login</title> <style> html,body{ width: 100%;height: 100%;margin: 0;padding: 0; } body{ background-image: url('./img/bg1.jpg'); background-size: 100% 100%; background-repeat: no-repeat; } /* 標題 */ .head{color: whitesmoke;font-size: 30px;text-align: center;margin-top: 10px;margin-bottom: 10px;} /* 刀盤圖片 */ .cutter{text-align: center;margin-bottom: 10px;} body .login_fields { margin-top: 40px; margin-left: 45%; height: 208px; position: absolute; left: 0; } body .login_fields .icon { position: absolute; z-index: 1; left: 36px; top: 8px; opacity: .5; } body .login_fields input[type='password'],body .login_fields input[type='text'] { color: #61BFFF !important; } body .login_fields input[type='text'], body .login_fields input[type='password'] { color: #afb1be; width: 190px; margin-top: -2px; background: rgba(57, 61, 82, 0); left: 0; padding: 10px 65px; border-top: 2px solid rgba(57, 61, 82, 0); border-bottom: 2px solid rgba(57, 61, 82, 0); border-right: none; border-left: none; outline: none; font-family: 'Gudea', sans-serif; box-shadow: none; } body .login_fields__user, body .login_fields__password { position: relative; } body .login_fields__submit { position: relative; top: 17px; left: 0; width: 80%; right: 0; margin: auto; } body .login_fields__submit .forgot a { color: #606479; } body .login_fields__submit input { border-radius: 50px; background: transparent; padding: 10px 50px; border: 2px solid #4FA1D9; color: #4FA1D9; text-transform: uppercase; font-size: 11px; -webkit-transition-property: background,color; transition-property: background,color; -webkit-transition-duration: .2s; transition-duration: .2s; } body .login_fields__submit input:focus { box-shadow: none; outline: none; } body .login_fields__submit input:hover { color: white; background: #4FA1D9; cursor: pointer; -webkit-transition-property: background,color; transition-property: background,color; -webkit-transition-duration: .2s; transition-duration: .2s; } </style> </head> <body> <div class="head"> 智能互聯(lián)裝備協(xié)同管理平臺 </div> <div class="cutter"> <img src="./img/cutter.png" alt="" id="img" width="450px" height="450px"> </div> <div class='login_fields'> <div class='login_fields__user'> <div class='icon' > <img alt="" src='./img/user.png'> </div> <input id="userName" name="userName" placeholder='請輸入用戶名' maxlength="16" type='text' autocomplete="off" > </div> <div class='login_fields__password'> <div class='icon' > <img alt="" src='./img/lock.png'> </div> <input id="userPsd" name="userPsd" placeholder='請輸入密碼' maxlength="16" type='text' autocomplete="off" > </div> <div class='login_fields__submit'> <input type='button' value='登錄' id="btLogin"> </div> </div> </body> </html> <script type="text/javascript"> //刀盤旋轉(zhuǎn) var rotateVal = 0 // 旋轉(zhuǎn)角度 var InterVal // 定時器 window.onload = function () { // 網(wǎng)頁加載完成后即運行rotate函數(shù) rotate() } // 設(shè)置定時器 function rotate () { InterVal = setInterval(function () { var img = document.getElementById('img') rotateVal += 1 // 設(shè)置旋轉(zhuǎn)屬性(順時針) img.style.transform = 'rotate(' + rotateVal + 'deg)' // 設(shè)置旋轉(zhuǎn)時的動畫 勻速0.1s img.style.transition = '0.1s linear' }, 100) } //判斷及請求 $(function () { $("#btLogin").click(function () { var name = $("#userName").val(); var psd = $("#userPsd").val(); console.log(name,psd); if (name == "" || name == null){ alert("用戶名不能為空!") return; } if (psd == "" || psd == null){ alert("密碼不能為空!") return; } $.ajax({ type: "post", url: "/log", data: {name: name,psd: psd}, success:function(data){ if(data == "1"){ window.location.href="./index" rel="external nofollow" ; }else{ alert("登錄失敗,賬號密碼不匹配!") } } }) }) }) </script>
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。