说在前面:
自己尝试下写了这个, 最近web学的东西都在里面了, 虽然还是很渣, 但也算第一步了, 我姑且算它为一个“项目”, 咳咳今天刚看到十年前一位学长的毕业设计报告(AOJ评测系统), 只能%%%, 不知道我毕业时能写出什么东西来项目知识点
前端HTML + CSS + JS服务器端:
tomcat服务器、jsp、 Servlet、 上下文参数/属性、HTTP请求响应数据库
MySQL搭建和开启、 jdbc连接数据库(增删查改)
项目目录
项目源码地址
/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);}
显示:
题外话
前端相关的知识基本都是在W3C上学的, 了解个大概, 多敲个码慢慢就熟了, 但是写出来和想的真不是一码事, 能看都凑合啊
