javaWeb 簡單註冊登入(含資料庫連線) -- （一）頁面
阿新 • • 發佈：2019-01-08
說在前面:
- 自己嘗試下寫了這個, 最近web學的東西都在裡面了, 雖然還是很渣, 但也算第一步了, 我姑且算它為一個“專案”, 咳咳
- 今天剛看到十年前一位學長的畢業設計報告(AOJ評測系統), 只能%%%, 不知道我畢業時能寫出什麼東西來
專案知識點
- 前端
HTML + CSS + JS - 伺服器端:
tomcat伺服器、jsp、 Servlet、 上下文引數/屬性、HTTP請求響應 - 資料庫
MySQL搭建和開啟、 jdbc連線資料庫(增刪查改)
專案目錄
專案原始碼地址
這篇先將登入和註冊頁面:
登入頁面(專案首頁)
- 知識點: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.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);
}顯示:
題外話
前端相關的知識基本都是在W3C上學的, 瞭解個大概, 多敲個碼慢慢就熟了, 但是寫出來和想的真不是一碼事, 能看都湊合啊