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

说在前面:

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

项目知识点

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

项目目录

javaWeb 简单注册登录(含数据库连接) -- (一)页面_第1张图片

项目源码地址

https://github.com/LightingDream/LoginProject

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

登录页面(项目首页)

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

代码:



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

显示:
javaWeb 简单注册登录(含数据库连接) -- (一)页面_第2张图片

注册页面

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

代码:



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

显示:
javaWeb 简单注册登录(含数据库连接) -- (一)页面_第3张图片

题外话

前端相关的知识基本都是在W3C上学的, 了解个大概, 多敲个码慢慢就熟了, 但是写出来和想的真不是一码事, 能看都凑合啊

你可能感兴趣的:(javaweb)