利用阿里云服务器实现JSP语言下的登录注册界面

2017-10-17

前言

前几天刚刚在服务器上搭建好了数据库，在测试可用后便开始着手写一个玩家的登录注册页面。

过程

1、首先，创建出登录界面login.jsp，并写好当前界面的样式。

body标签

<div id="bg">
        <form action ="loginCh.jsp" method="post">  
        <div id="login" class="absol">
            
            <div id="logo" class="absol">
                <img src="images/logo.png">
            </div>

            <div id="usernameimg" class="absol" >
                <img src="images/mobileicon.png">
            </div>
            <div id="passwordimg" class="absol">
                <img src="images/keyicon.png">
            </div>

            <input type="text" id="username" name="username" placeholder="手机号" class="absol" maxlength=11 autocomplete="new-password">
            <input type="password" name="password1"  style="display:none"/>   
            <input type="password" id="password" name="password" placeholder="密码" class="absol" autocomplete="new-password">

            <input type="submit" id="signin" class="absol" value="登录">

            <div id="signup" class="absol">还没有账号？ <span style="color:#ffffff" onclick="clickSignUpBt()">马上注册</span> </div>

        </div>  
        </form>

    </div>

主要通过CSS3制定样式，JQuery辅助动态调节控件大小。

JS制定样式自适应所有屏幕大小

function AutoLoad(){
    changeWindowAuto();
}

function changeWindowAuto(){
    var width=$(window).width();
    var height=$(window).height();
    var panelwidth;
    $("#bg").css({
        "height":height
    });

    if(width>360)
    {
        panelwidth=360;
        var left=(width-360)/2;
        var top=(height-636)/2;
        $("#login").css({
            "width":"360px",
            "height":"636px",
            "top":top+"px",
            "left":left+"px",
        });
    }
    else
    {
        panelwidth=width;
        $("#login").css({
            "width":width,
            "height":height,
            "top":"0px",
            "left":"0px",
        });
    }

    $("#logo").css({
        "height":panelwidth*0.52222,
        "width":panelwidth*0.50276243,
        "left":panelwidth*0.2416667,
        "top":panelwidth*0.205556,
    });
    $("#username").css({
        "top":panelwidth*1.02209945,
        "left":panelwidth*0.0805556,
        "height":panelwidth*0.1444,
        "width":panelwidth*0.686111,
        "font-size":panelwidth*0.05,
        "padding-left":panelwidth*0.1527778,
    });
    $("#password").css({
        "top":panelwidth*1.17222,
        "left":panelwidth*0.0805556,
        "height":panelwidth*0.1444,
        "width":panelwidth*0.686111,
        "font-size":panelwidth*0.05,
        "padding-left":panelwidth*0.1527778,
    });
    $("#usernameimg").css({
        "top":panelwidth*1.047222,
        "left":panelwidth*0.116667,
        "height":panelwidth*0.097222,
        "width":panelwidth*0.063889,
    });
    $("#passwordimg").css({
        "top":panelwidth*1.2,
        "left":panelwidth*0.116667,
        "height":panelwidth*0.097222,
        "width":panelwidth*0.063889,
    });
    $("#signin").css({
        "top":panelwidth*1.47778,
        "left":panelwidth*0.0805556,
        "height":panelwidth*0.1444,
        "width":panelwidth*0.838889,
        "font-size":panelwidth*0.05,
    });
    $("#signup").css({
        "top":panelwidth*1.675,
        "left":panelwidth*0.258333,
        "font-size":panelwidth*0.04444,
    });
}

CSS打造自定义样式

*{
    padding: 0;
    margin:0;
    font-family: '黑体';
} 


img {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

input-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #333;
}

.absol{
    position: absolute;
}
.button{
    pointer-events: auto;
}

#bg{
    position: relative;
    height: 100%;
    background-image: url("../images/bg.jpg");
    background-size: cover;
    overflow:auto;
}

#login{
    background-image: url("../images/panelbg.png");
    
}

#username,#password{
    display: inline-block;
    padding-left: 1.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: #FFFFFF;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#signin{
    background-color: #ff3366;
    border-radius:30px;
    border:none;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    display: table-cell;
    vertical-align:middle;
}

#signup{
    color: #ABA8AE;
}

2、创建新的.jsp文件loginCh.jsp，验证login.jsp表单中的账号信息

主要代码段

<%
String iscorrect="0";
String username=null;
%>
    <%
            String DBDRIVER="net.sourceforge.jtds.jdbc.Driver";
            String DBURL="jdbc:jtds:sqlserver://106.14.151.117:1433/Database";
            String DBUSER="*数据库账号";
            String PASSWORD="*数据库密码";
            String Tel = request.getParameter("username");
            String loginKey = request.getParameter("password");
            String sql = "SELECT name FROM Player WHERE Tel = '"+Tel+"'"+" and loginkey = '"+loginKey+"'";
            try{
                Class.forName(DBDRIVER);
                Connection cn=DriverManager.getConnection(DBURL,DBUSER,PASSWORD);
                Statement st=cn.createStatement();
                ResultSet rs=st.executeQuery(sql);
                if(rs.next()){
                    iscorrect="1";
                    username=rs.getString("name");
                    out.print("欢迎您！"+username);
                }
                else{
                    response.sendRedirect("login.jsp?errNo");//密码不对返回到登陆  
                }
                rs.close();//关闭结果集
                cn.close();//关闭操作
            }
            catch(Exception ex){
                System.out.println(ex.getMessage());
                System.out.println("连接异常");
                ex.printStackTrace();
            }
    %>

通过连接服务器端的数据库检索用户输入的账号密码信息，如果re.next()返回值为true，代表检索到了数据，则证明验证通过。反之，则说明在数据库中不存在用户所输入的用户信息，从而将错误信息传给login.jsp，返回之前页面输出错误信息。

3、注册页面与之亦同

只不过sql数据库上用来验证的select语句修改为insert

主要代码段

1	PreparedStatement tmt = cn.prepareStatement("Insert into Player values('" + username + "','" + password + "','" + email + "','" + name + "',0,0,'无',0,0,0)");