数据库程序设计第二天--登陆界面

一、说在前面

　　今天目标完成登陆界面的创建以及与login表的链接

二、任务进度

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;
    }
    
    
}

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 ;
    }
}

<!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 = /^[suFEFFxA0]+|[suFEFFxA0]+$/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',
                 'auto',
                height: 'auto',
                content:"用户名不能为空"
            });
            flag = true;
        }
        if(password == ""){
            $.pt({
                target: $("#login-password"),
                position: 'r',
                align: 't',
                 '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',
                 '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',
                 'auto',
                height: 'auto',
                content:"用户名不能为空"
            });
            flag = true;
        }
        if(password == ""){
            $.pt({
                target: $("#register-password"),
                position: 'r',
                align: 't',
                 'auto',
                height: 'auto',
                content:"密码不能为空"
            });
            flag = true;
        }else{
            if(password != repassword){
                $.pt({
                    target: $("#register-repassword"),
                    position: 'r',
                    align: 't',
                     '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',
                 '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',
                 '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',
                 'auto',
                height: 'auto',
                content:"用户名不能为空"
            });
            flag = true;
        }
        if(password == ""){
            $.pt({
                target: $("#forget-password"),
                position: 'r',
                align: 't',
                 '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',
                 'auto',
                height: 'auto',
                content:"用户名必须为15位以下的字母或数字"
            });
            flag = true;
        }
        //检查用户名是否存在
        //调后台方法
        
        //检查注册码是否正确
        if(code != '11111111'){
            $.pt({
                target: $("#forget-code"),
                position: 'r',
                align: 't',
                 '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{ 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;  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>