登录注册页面的实现

使用css美化界面

通过css可以美化界面。

界面样式及框架设定:

/*文件名:style.css*/
body
{
    /*添加背景图片*/
    background-image:url(../images/regbg.jpg);
    background-attachment: fixed;
    -moz-background-size:100% 100%;
    background-size:100% 100%;
    color:#5d5d5d;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    align-items: center;
    justify-content: center;
}

 * {
     padding: 0;
     margin: 0;
 }
#myBox {
    width: 500px;
    height: 540px;
    /*边框颜色*/
    /*border: 1px solid #000000;*/
    /*背景颜色*/
    background: #eee;
    color: #333;
}

#myBox {
    width: 500px;
    height: 540px;
    /*边框颜色*/
    /*border: 1px solid #000000;*/
    /*背景颜色*/
    background: #eee;
    color: #333;
}

div {
    height: 500px;
}
form{
    width:400px;
    height:480px;
    margin:10px auto;
    padding-top:10px;
}
span{
    display: inline-block;
    width: 400px;

    text-align: center;
    font-size: 40px;
}
/*
text-decoration 修饰文本
a:link 链接自未点击上去时候
a:visited 链接已经点击过的
a:hover鼠标放在链接上未点击
a:active 是介于hover visited 之间的一个状态,可以说是链接被按下时候的状态
*/
a:link {
    text-decoration: none;
    color: #000000;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
    color: #0000CD;
    cursor: pointer;
}
a:active {
    text-decoration: none;
    color: #0000CD;
}

.btn{
    display: inline-block;
    /*外边框*/
    margin-top: 10px;
    /*这个表格单元的上和下内边距是10px,左和右内边距是185px*/
    padding: 10px 185px;
    border-radius: 4px;
    background-color: #63b7ff;
    color: #fff;
    cursor: pointer;
}
.btn:hover{
    background-color: #99c6ff;
}
input[type="text"],[type="password"]{
    background:#ffffff ;
    -web-kit-appearance:none;
    -moz-appearance:none;
    font-size: 0.9em;
    display: block;
    outline: 0;
    box-sizing: border-box;
    color: #6a6f77;
    border-radius:7px;
    border:1px solid #c7cccf;
}

登录页面效果图:

QQ图片20201025213948.png

登录界面设计:

<!--文件名:login.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="css/style.css">
</head>
    <body>
    <div id="myBox" >
        <form id="loginFrom" method="post" action="./LoginInformation.jsp" style="width:400px; height:480px; margin:10px auto; padding-top:15px;" >
            <table>
                <tr>
                    <td><span>用户登录</span></td>
                </tr><tr><td>&nbsp;</td></tr>
                <tr>
                    <td>用户名</td>
                </tr>
                <tr>
                    <td><input type="text"  id="id" name="cdp_id" placeholder="请输入用户名" style="width: 100%;height: 35px"></td>
                </tr><tr><td>&nbsp;</td></tr>
                <tr>
                    <td>密码</td>
                </tr>
                <tr>
                    <td><input type="password" id="pwd" name="cdp_pwd" placeholder="请输入密码" style="width: 100%;height: 35px"></td>
                </tr><tr><td>&nbsp;</td></tr>
                <tr>
                    <td><p align="left"><input type="checkbox">记住我</p>
                        <p align="right">
                            <a href="register.html">注册账号</a>&#12288;&#12288;
                            <a href="retrieve.html">忘记密码</a>
                        </p>
                    </td>
                </tr><tr></tr>
                <tr>
                    <td><input class="btn" type="button" value="登录" onclick="GetLogin()"></td>
                </tr><tr><td>&nbsp;</td></tr><tr>
                <tr>
                    <td align="center" valign="middle">第三方登录</td>
                </tr>
            </table>
        </form>
    </div>

    <script type="text/javascript">
        function GetLogin() {
            let id = document.getElementById('id');
            let pwd = document.getElementById('pwd');
            id=id.value;
            pwd=pwd.value;

            if(id == "" || pwd == ""){
                alert("请输入登陆信息!");
                return false;
            }
            document.getElementById("loginFrom").submit();
        }
    </script>

    </body>
</html>

注册界面和密码找回界面的背景图片与登录界面的一致,在这里只作表单展示。

            

注册页面设计:

<!--文件名:register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="myBox">
    <form id="registerFrom" action="./RegisterInformation.jsp" method="post">
        <table>
            <tr>
                <td><span>用户注册</span></td>
            </tr><tr style="height: 8px"><td></td></tr>
            <tr>
                <td>用户名</td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="userid" name="cdp_id" placeholder="请输入用户名" style="width: 100%;height: 35px">
                </td>
            </tr><tr style="height: 3px"><td></td></tr>
            <tr>
                <td>密码</td>
            </tr>
            <tr>
                <td><input type="password" id="pwd1" name="pwd" placeholder="请输入密码" style="width: 100%;height: 35px"></td>
            </tr><tr style="height: 3px"><td></td></tr>
            <tr>
                <td>确认密码</td>
            </tr>
            <tr>
                <td><input type="password" id="pwd2" name="cdp_pwd" placeholder="请再次输入密码" style="width: 100%;height: 35px"></td>
            </tr><tr style="height: 3px"><td></td></tr>
            <tr>
                <td>邮箱</td>
            </tr>
            <tr>
                <td><input type="text" id="mail" name="cdp_mail" placeholder="请输入邮箱" style="width: 100%;height: 35px"></td>
            </tr><tr style="height: 3px"><td></td></tr>
            <tr>
                <td>邀请码</td>
            </tr>
            <tr>
                <td><input type="text" id="code"  name="cdp_code" placeholder="请输入邀请码" style="width: 100%;height: 35px"></td>
            </tr><tr style="height: 3px"><td></td></tr>
            <tr>
                <td>
                    <a onclick="Getcode()">点击获取邀请码</a>
                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                    <a href="login.html">已有账号,去登陆</a>
                </td>
            </tr><tr style="height: 5px"><td></td></tr>
            <tr>
                <td>
                    <input class="btn" type="button" value="注册" onclick="GetRegister()">
                </td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">
    function Getcode() {
        let arr= ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
            "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
            "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
            "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d",
            "e", "f", "g", "h", "i", "j", "k", "l", "m", "n",
            "o", "p", "q", "r", "s", "t", "u", "v", "w", "x",
            "y", "z"];
        let num="";
        for(let i=0;i<31;i++){
            num+=arr[parseInt(Math.random()*62)];
        }
        alert(num);
    }
</script>

<script type="text/javascript">
    function GetRegister() {

        let id = document.getElementById('userid').value;

        let pwd1 = document.getElementById('pwd1').value;

        let pwd2 = document.getElementById('pwd2').value;

        let email = document.getElementById('mail').value;

        let code = document.getElementById('code').value;

        if(id==""||pwd1 ==""||pwd2==""||email==""||code==""){
            alert("请完善注册信息");
            return false;
        }
        if(pwd1!=pwd2){
            //定位到pwd2文本框
            document.getElementById('pwd2').focus();
            return false;
        }
        document.getElementById("registerFrom").submit();
    }
</script>

</body>
</html>

找回密码界面设计:

<!--文件名:retrieve.html-->
<!--暂时没有添加功能-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div style="background: #eee; color: #333; width: 500px; height: 280px;">
    <form style="width:400px; height:480px; margin:10px auto; padding-top:20px;">
        <table style="width:400px; height:200px; margin:10px auto; padding-top:5px;">
            <tr>
                <td><span>找回密码</span></td>
            </tr>

            <tr>
                <td>邮箱</td>
            </tr>
            <tr>
                <td><input type="text" id="email" placeholder="请输入邮箱" style="width: 100%;height: 35px"></td>
            </tr>

            <tr>
                <td>
                    <p align="right"><a href="login.html">回去登录</a></p>
                </td>
            </tr>

            <tr>
                <td><input class="btn" type="button" value="提交" onclick=""></td>
            </tr><tr><td>&nbsp;</td></tr><tr>

        </table>
    </form>
</div>

</body>
</html>

关于登录验证操作,通过直接连接到SQL Server 2008R2数据库,通过SQL语句查询、插入用户信息。

用户登录的信息验证:

<%//由于编译器不存在JavaWeb编程语言,选择了Java语言 %>
<%//文件名:LoginInformation.jsp %>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.ArrayList" %>


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

</head>
<body>
<%
    request.setCharacterEncoding("utf-8");//解决中文乱码问题
%>

<%!
    ArrayList<String> cdp_data = new ArrayList<String>();
    //保存数据库用户信息
    public static final String DBDRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
    //    驱动路径
    public static final String URL = "jdbc:sqlserver:// /*IP地址*/:1433;DatabaseName=/*数据库名称*/&quo

开始验证新用户注册:


QQ图片20201026190050.png


#转载请注明出处!
快来制作你的简历吧 ,请猛戳这里→点击在线制作
宝塔服务器面板,一键全能部署及管理,送你3188元礼包。请猛戳这里→点我领取

本文标题:《登录注册页面的实现》作者:xuanzhe
原文链接:https://blog.xuanzhe.club/?id=19
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

上一篇: 软件工程概述

相关文章

发表评论:
验证码

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

你好,朋友

真是美好的一天!

访客信息

  • IP: 52.90.49.108
  • 地点: United StatesVirginiaAshburn

毒鸡汤

  • API可调用次数不足...请尝试检查插件设置的APIKEY
  • 英语小句子

  • 木有了,杯具了...请尝试检查插件设置的APIKEY
  • 标签列表

    站点信息

    • 文章总数:48
    • 页面总数:2
    • 分类总数:15
    • 标签总数:22
    • 评论总数:6
    • 浏览总数:20147
    您好,欢迎到访网站!
    忘记密码

    精美句子

  • 木有了,杯具了...请尝试检查插件设置的APIKEY
  • 网站分类

    文章归档

    歌曲 - 歌手
    0:00