数据库程序设计第二天--登陆界面
一、说在前面
今天目标完成登陆界面的创建以及与login表的链接
二、任务进度
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package Bean; /** * *@author 作者:高宇豪 *@version 创建时间:2020年7月11日上午8:34:27 *类说明:登陆包装类 */ public class LoginBean { private String account; private String password; private int level;//等级权限0管理员1隔离场所2隔离人员 //用于注册 public LoginBean(String account, String password) { super(); this.account = account; this.password = password; this.level=2; } public LoginBean(String account, String password, int level) { super(); this.account = account; this.password = password; this.level = level; } public String getAccount() { return account; } public void setAccount(String account) { this.account = account; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public int getLevel() { return level; } public void setLevel(int level) { this.level = level; } }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package Dao; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import Bean.LoginBean; import DBUtil.DBUtil; /** * *@author 作者:高宇豪 *@version 创建时间:2020年7月11日上午8:38:34 *类说明:登陆对数据库的操作 */ public class LoginDao { //添加 public boolean insert(LoginBean login){ String sql="insert into login (account,password,level) values ('"+login.getAccount()+"','"+login.getPassword()+"','"+login.getLevel()+"')"; Connection conn=DBUtil.getConn(); Statement state=null; try { state=conn.createStatement(); state.executeUpdate(sql); }catch (Exception e) { // TODO: handle exception e.printStackTrace(); }finally { DBUtil.close(state,conn); } return true ; } //删除 public boolean delete(String account){ String sql="delete from login where account='"+account+"'"; Connection conn=DBUtil.getConn(); Statement state=null; try { if(!select(account)) { return false; } state=conn.createStatement(); state.executeUpdate(sql); }catch (Exception e) { // TODO: handle exception e.printStackTrace(); }finally { DBUtil.close(state,conn); } return true ; } //判断是否存在 public boolean select(LoginBean login){ boolean flag=false; String sql="select * from login where account='"+login.getAccount()+"' and password='"+login.getPassword()+"' "; //判断语句正确 //System.out.println(sql); Connection conn=DBUtil.getConn(); Statement state=null; ResultSet rs = null; try { state=conn.createStatement(); rs=state.executeQuery(sql); while (rs.next()) { flag = true; } }catch (Exception e) { // TODO: handle exception e.printStackTrace(); }finally { DBUtil.close(state,conn); } return flag; } public boolean select(String account){ boolean flag=false; String sql="select * from login where account='"+account+"' "; //判断语句正确 //System.out.println(sql); Connection conn=DBUtil.getConn(); Statement state=null; ResultSet rs = null; try { state=conn.createStatement(); rs=state.executeQuery(sql); while (rs.next()) { flag = true; } }catch (Exception e) { // TODO: handle exception e.printStackTrace(); }finally { DBUtil.close(state,conn); } return flag; } //搜索 public LoginBean search(String account){ boolean flag=false; String sql="select * from login where account='"+account+"' "; //判断语句正确 //System.out.println(sql); Connection conn=DBUtil.getConn(); Statement state=null; ResultSet rs = null; LoginBean bean=null; try { state=conn.createStatement(); rs=state.executeQuery(sql); while (rs.next()) { String password=rs.getString("password"); int level=rs.getInt("level"); bean=new LoginBean(account, password, level); } }catch (Exception e) { // TODO: handle exception e.printStackTrace(); }finally { DBUtil.close(state,conn); } return bean; } //遍历 public List<LoginBean> list(){ String sql="select * from login order by level asc"; List<LoginBean>list=new ArrayList<>(); //给集合list创造(new)一个存储空间用于存放数据 Connection conn=DBUtil.getConn(); Statement state=null; ResultSet rs=null; try { state=conn.createStatement(); rs=state.executeQuery(sql); LoginBean bean=null; while(rs.next()) { String account=rs.getString("account"); String password=rs.getString("password"); int level=rs.getInt("level"); bean=new LoginBean(account, password, level); list.add(bean); } }catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(state, conn); } return list; } //更改 public boolean update(LoginBean login){ String sql="update login set password='"+login.getPassword()+"',level='"+login.getLevel()+"' where account='"+login.getAccount()+"'"; //System.out.println(sql); Connection conn=DBUtil.getConn(); Statement state=null; try { state=conn.createStatement(); state.executeUpdate(sql); }catch (Exception e) { // TODO: handle exception e.printStackTrace(); }finally { DBUtil.close(state,conn); } return true ; } }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>登录</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/login.css"> <link rel="stylesheet" href="css/sign-up-login.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/inputEffect.css" /> <link rel="stylesheet" href="css/tooltips.css" /> <link rel="stylesheet" href="css/spop.min.css" /> <link rel="stylesheet" href="css/form.css" /> <script src="js/jquery.min.js"></script> <script src="js/snow.js"></script> <script src="js/jquery.pure.tooltips.js"></script> <script src="js/spop.min.js"></script> <script src="js/form.js"></script> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script> (function() { // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim if (!String.prototype.trim) { (function() { // Make sure we trim BOM and NBSP var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; String.prototype.trim = function() { return this.replace(rtrim, ''); }; })(); } [].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) { // in case the input is already filled.. if( inputEl.value.trim() !== '' ) { classie.add( inputEl.parentNode, 'input--filled' ); } // events: inputEl.addEventListener( 'focus', onInputFocus ); inputEl.addEventListener( 'blur', onInputBlur ); } ); function onInputFocus( ev ) { classie.add( ev.target.parentNode, 'input--filled' ); } function onInputBlur( ev ) { if( ev.target.value.trim() === '' ) { classie.remove( ev.target.parentNode, 'input--filled' ); } } })(); $(function() { $('#login #login-password').focus(function() { $('.login-owl').addClass('password'); }).blur(function() { $('.login-owl').removeClass('password'); }); $('#login #register-password').focus(function() { $('.register-owl').addClass('password'); }).blur(function() { $('.register-owl').removeClass('password'); }); $('#login #register-repassword').focus(function() { $('.register-owl').addClass('password'); }).blur(function() { $('.register-owl').removeClass('password'); }); $('#login #forget-password').focus(function() { $('.forget-owl').addClass('password'); }).blur(function() { $('.forget-owl').removeClass('password'); }); }); function goto_register(){ $("#register-username").val(""); $("#register-password").val(""); $("#register-repassword").val(""); $("#register-code").val(""); $("#tab-2").prop("checked",true); $("#tab-1").prop("checked",false); $("#tab-3").prop("checked",false); } function goto_login(){ $("#login-username").val(""); $("#login-password").val(""); $("#tab-1").prop("checked",true); $("#tab-2").prop("checked",false); $("#tab-3").prop("checked",false); } function goto_forget(){ $("#forget-username").val(""); $("#forget-password").val(""); $("#forget-code").val(""); $("#tab-3").prop("checked",true); $("#tab-1").prop("checked",false); $("#tab-2").prop("checked",false); } function login(){//登录 var username = $("#login-username").val(), password = $("#login-password").val(), validatecode = null, flag = false; //判断用户名密码是否为空 if(username == ""){ $.pt({ target: $("#login-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名不能为空" }); flag = true; } if(password == ""){ $.pt({ target: $("#login-password"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"密码不能为空" }); flag = true; } //用户名只能是15位以下的字母或数字 var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$"); if(!regExp.test(username)){ $.pt({ target: $("#login-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名必须为15位以下的字母或数字" }); flag = true; } if(flag){ return false; }else{//登录 //调用后台登录验证的方法 document.loginpage.submit(); //alert('登录成功'); return false; } } //注册 function register(){ var username = $("#register-username").val(), password = $("#register-password").val(), repassword = $("#register-repassword").val(), flag = false, validatecode = null; //判断用户名密码是否为空 if(username == ""){ $.pt({ target: $("#register-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名不能为空" }); flag = true; } if(password == ""){ $.pt({ target: $("#register-password"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"密码不能为空" }); flag = true; }else{ if(password != repassword){ $.pt({ target: $("#register-repassword"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"两次输入的密码不一致" }); flag = true; } } //用户名只能是15位以下的字母或数字 var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$"); if(!regExp.test(username)){ $.pt({ target: $("#register-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名必须为15位以下的字母或数字" }); flag = true; } //alert("heih"); //检查用户名是否已经存在 //调后台代码检查用户名是否已经被注册 /* if(!flag){ alert("ddd"); $.get( "registerServlet", {"account":username,"password",password}, function(data){ alert(data); } ); } */ /* $.ajax({ url:"/registerServlet", type:"get", data:{"account":username, "password":password} success:function(){ //if(status) alert("heih"); } }); */ //注册码功能之后添加 //检查注册码是否正确 //调后台方法检查注册码,这里写死为11111111 /* if(code != '11111111'){ $.pt({ target: $("#register-code"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"注册码不正确" }); flag = true; } */ if(flag){ return false; }else{//注册 spop({ template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录', position: 'top-center', style: 'success', autoclose: 3000, onOpen : function(){ var second = 2; var showPop = setInterval(function(){ if(second == 0){ clearInterval(showPop); } $('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于'+second+'秒后返回登录'); second--; },1000); }, onClose : function(){ goto_login(); } }); return false; } } //重置密码 function forget(){ var username = $("#forget-username").val(), password = $("#forget-password").val(), code = $("#forget-code").val(), flag = false, validatecode = null; //判断用户名密码是否为空 if(username == ""){ $.pt({ target: $("#forget-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名不能为空" }); flag = true; } if(password == ""){ $.pt({ target: $("#forget-password"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"密码不能为空" }); flag = true; } //用户名只能是15位以下的字母或数字 var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$"); if(!regExp.test(username)){ $.pt({ target: $("#forget-username"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"用户名必须为15位以下的字母或数字" }); flag = true; } //检查用户名是否存在 //调后台方法 //检查注册码是否正确 if(code != '11111111'){ $.pt({ target: $("#forget-code"), position: 'r', align: 't', width: 'auto', height: 'auto', content:"注册码不正确" }); flag = true; } if(flag){ return false; }else{//重置密码 spop({ template: '<h4 class="spop-title">重置密码成功</h4>即将于3秒后返回登录', position: 'top-center', style: 'success', autoclose: 3000, onOpen : function(){ var second = 2; var showPop = setInterval(function(){ if(second == 0){ clearInterval(showPop); } $('.spop-body').html('<h4 class="spop-title">重置密码成功</h4>即将于'+second+'秒后返回登录'); second--; },1000); }, onClose : function(){ goto_login(); } }); return false; } } </script> <style type="text/css"> html{width: 100%; height: 100%;} body{ background-repeat: no-repeat; background-position: center center #2D0F0F; background-color: #00BDDC; background-image: url(images/snow.jpg); background-size: 100% 100%; } .snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001; } </style> </head> <body> <!-- 雪花背景 --> <div class="snow-container"></div> <!-- 登录控件 --> <div id="login"> <input id="tab-1" type="radio" name="tab1" class="sign-in hidden" checked /> <input id="tab-2" type="radio" name="tab2" class="sign-up hidden" /> <input id="tab-3" type="radio" name="tab" class="sign-out hidden" /> <div class="wrapper"> <!-- 登录页面 --> <div class="login sign-in-htm"> <form action="loginServlet" method="post" class="container offset1 loginform" id="loginpage" name="loginpage"> <!-- 猫头鹰控件 --> <div id="owl-login" class="login-owl"> <div class="hand"></div> <div class="hand hand-r"></div> <div class="arms"> <div class="arm"></div> <div class="arm arm-r"></div> </div> </div> <div class="pad input-container"> <section class="content"> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" name="login_userName" id="login-username" autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" /> <label class="input__label input__label--hideo" for="login-username"> <i class="fa fa-fw fa-user icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" name="login_passWord" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15"/> <label class="input__label input__label--hideo" for="login-password"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> </section> </div> <div class="form-actions"> <a tabindex="4" class="btn pull-left btn-link text-muted" onClick="goto_forget()">忘记密码?</a> <a tabindex="5" class="btn btn-link text-muted" onClick="goto_register()">注册</a> <!-- <input class="btn btn-primary" type="submit" tabindex="3" value="登录" style="color:white;"> --> <input class="btn btn-primary" type="button" tabindex="3" onClick="login()" value="登录" style="color:white;"/> </div> </form> </div> <!-- 忘记密码页面 --> <div class="login sign-out-htm"> <form action="#" method="post" class="container offset1 loginform"> <!-- 猫头鹰控件 --> <div id="owl-login" class="forget-owl"> <div class="hand"></div> <div class="hand hand-r"></div> <div class="arms"> <div class="arm"></div> <div class="arm arm-r"></div> </div> </div> <div class="pad input-container"> <section class="content"> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" id="forget-username" autocomplete="off" placeholder="请输入用户名"/> <label class="input__label input__label--hideo" for="forget-username"> <i class="fa fa-fw fa-user icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" id="forget-code" autocomplete="off" placeholder="请输入注册码"/> <label class="input__label input__label--hideo" for="forget-code"> <i class="fa fa-fw fa-wifi icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" id="forget-password" placeholder="请重置密码" /> <label class="input__label input__label--hideo" for="forget-password"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> </section> </div> <div class="form-actions"> <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a> <input class="btn btn-primary" type="button" onClick="forget()" value="重置密码" style="color:white;"/> </div> </form> </div> <!-- 注册页面 --> <div class="login sign-up-htm"> <form action="registerServlet" method="post" class="container offset1 loginform" id="Form1"> <!-- 猫头鹰控件 --> <div id="owl-login" class="register-owl"> <div class="hand"></div> <div class="hand hand-r"></div> <div class="arms"> <div class="arm"></div> <div class="arm arm-r"></div> </div> </div> <div class="pad input-container"> <section class="content"> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="text" name="signup_userName" id="register-username" autocomplete="off" placeholder="请输入用户名" maxlength="15"/> <label class="input__label input__label--hideo" for="register-username"> <i class="fa fa-fw fa-user icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" name="signup_passWord" id="register-password" placeholder="请输入密码" maxlength="15"/> <label class="input__label input__label--hideo" for="register-password"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <span class="input input--hideo"> <input class="input__field input__field--hideo" type="password" name="signup_passWord1" id="register-repassword" placeholder="请确认密码" maxlength="15"/> <label class="input__label input__label--hideo" for="register-repassword"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span> <!-- <span class="input input--hideo"> <input type ="text" id="text" class="yz_text" required placeholder="请输入验证码"> <input type="button" id="code" onclick="Code()" title='点击更换验证码' > <label class="input__label input__label--hideo" for="register-repassword"> <i class="fa fa-fw fa-lock icon icon--hideo"></i> <span class="input__label-content input__label-content--hideo"></span> </label> </span>--> </section> </div> <div class="form-actions"> <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a> <input class="btn btn-primary" type="button" onClick="register()" value="注册" style="color:white;"/> </div> </form> </div> </div> </div> <div style="text-align:center;"> </div> </body> </html>