javaWeb 简单注册登录(含数据库连接) -- （一）页面

最新推荐文章于 2024-10-02 23:02:25 发布

置顶数论只会GCD

最新推荐文章于 2024-10-02 23:02:25 发布

阅读量6.6w

点赞数 31

分类专栏： javaweb 文章标签： java web

本文链接：https://blog.csdn.net/ADjky/article/details/74278903

版权

javaweb 专栏收录该内容

5 篇文章 5 订阅

订阅专栏

说在前面:

自己尝试下写了这个, 最近web学的东西都在里面了, 虽然还是很渣, 但也算第一步了, 我姑且算它为一个“项目”, 咳咳
今天刚看到十年前一位学长的毕业设计报告(AOJ评测系统), 只能%%%, 不知道我毕业时能写出什么东西来

项目知识点

前端
HTML + CSS + JS
服务器端:
tomcat服务器、jsp、 Servlet、上下文参数/属性、HTTP请求响应
数据库
MySQL搭建和开启、 jdbc连接数据库(增删查改)

项目目录

这里写图片描述

项目源码地址

https://github.com/LightingDream/LoginProject

这篇先将登录和注册页面:

登录页面(项目首页)

知识点:HTML + CSS + JS
简单的表单和样式, 以及表单的提交到后台的设置

代码:

<!DOCTYPE html>
<!-- login.html -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login Page</title>
    <link type = "text/css" rel="stylesheet" href="css/login.css"/>
    <script src="js/login.js"></script>
</head>
<body onload="show()"><!-- 加载页面时显示计时器 -->

    <form action="login.do" method="POST">
    <!-- action属性值为处理改表单请求的servlet映射url method
    值为HTTP方法类型-->
        <center>用户登录</center><br/><br/>
        USER: <br/> <input type="text" name="user"></input><br/><br/>
        PASS: <br/><input type="password" name="pass"></input>
        <br/>
        <br/>
       <input style="color: #fff;" type="submit" value="login"></input>
       <br/><br/>
       还没有账号? <a href="register.html">立即注册</a>
       <br/>
       <br/>
       The time: <p id="time"></p>
    </form>

</body>
</html>

/**login.css*/
form{
    margin: 200px 500px;
    width: 210px;
    height: 100px;
    color: lightslategray;
}

form input{
    background-color: #becdee;
    width: 200px;
    height: 20px;
}

form span{
    text-align: center;
}

/**login.js*/
function show()/**小的计时器*/
{
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    h = check(h);
    m = check(m);
    s = check(s);
    var obj = document.getElementById("time");
    obj.innerHTML = h + ":" + m + ":" + s;
    setTimeout("show()", 1000);
}

function check(x)
{
    return x < 10 ? "0" + x : x;
}

显示:
这里写图片描述

注册页面

这个页面的js逻辑有点问题, 对于事件只是刚接触, 学的很少, 还没能处理, 就先放上去

代码：

<!-- register.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User Register</title>
    <script src="js/register.js"></script>
    <style type="text/css">
    body{
        background: #f3f3f3;
    }
    div{
        margin: 20px 124px; 
        background: #fff;
        width: 1000px;
        height: 800px;
    }
    input{
        color: #ccc;
        width: 400px;
        height: 30px;
        font-size: 24px;
    }
    div span{
            margin-left: 248px;
    }
    </style>
</head>
<body onload="SubmitCheck()">
<!-- 从页面加载开始就检测是否可以提交 -->
    <div>
        <br/>
        <br/>
        <center><h1>用户信息</h1></center><br/>
    <br/><br/>
    <form action="register.do" method="POST">
    <span>学号: <input onmouseout = "SnoCheck()"  id="Sno"  type="text" name="Sno" /><p id="1"></p><br/><br/></span>
    <span>账号: <input onmouseout = "UserCheck()" id="User" type="text" name="LoginUser" ></input><p id="2"></p><br/><br/></span>
    <span>密码: <input onmouseout = "PassCheck()" id="Pass" type="password" name="LoginPass" ></input><br/><br/><p id="3"></p></span>
    <span style="margin-left: 218px;">确认密码: <input onmouseout = "PassTwoCheck()" id = "PassTwo" type="password" name="PassTwo" ></input><br/><br/><p id="4"></p></span>
   <br/><br/><br/> 
    <span><input id = "submit" disabled style="width: 452px;color: #fff;background: #999;" type="submit" value="立即注册"/></span>
    <!-- 初始时禁用提交按钮, 用户输入完全合法后解除禁用 -->
    </form>
    </div>
</body>
</html>

/**register.js**/
/**
 * 
 */
s = new Array("Sno", "User", "Pass", "PassTwo");

function SnoCheck()
{
    Sno = document.getElementById("Sno");
    if(Sno.value.length != 9) document.getElementById("1").innerHTML="学号长度错误";
    else document.getElementById("1").innerHTML="";
}

function UserCheck()
{
    var User = document.getElementById("User");
    if(User.value.length < 8) document.getElementById("2").innerHTML="账号长度错误";
    else document.getElementById("2").innerHTML="";
}

function PassCheck()
{
    Pass = document.getElementById("Pass");
    if(Pass.value.length < 8) document.getElementById("3").innerHTML="密码长度错误";
    else document.getElementById("3").innerHTML="";
}

function PassTwoCheck()
{
    var PassTwo = document.getElementById("PassTwo");
    if(PassTwo.value != Pass.value) document.getElementById("4").innerHTML="两次输入密码不一致";
    else document.getElementById("4").innerHTML="";
}

function SubmitCheck()
{
    var f = true;
    for(i = 0; i < 4; ++i)
        if(document.getElementById(s[i]).value == "")
        {
            f = false;
            break;
        }
    for(j = 1; j <= 4; ++j)
        if(document.getElementById("" + j).innerHTML != ""){
            f = false;
            break;
        }
    if(f) {
        document.getElementById("submit").disabled = false;
        document.getElementById("submit").style.background = "red";
    }
    setTimeout("SubmitCheck()", 1000);
}