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

说在前面:

自己尝试下写了这个, 最近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);
}

显示:

题外话

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

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

springboot+uniapp实现简单注册登录
springboot+uniapp实现简单注册登录前言后端新建springboot项目配置数据库建表,写对应类写接口,写对应xml文件封装返回信息,封装UUID Service层 Con ...
JavaWeb实现注册登录功能并将用户数据写进数据库(商城系统第一部分)
JavaWeb实现注册登录功能并将用户数据写进数据库(商城系统第一部分) 声明:本人并非项目原创,该商城系统原创来自撩课高新强老师:https://study.163.com/course/intro ...
SpringSecurity+Mybatis实现用户自助注册登录(含角色)，打造简单安全的注册登录页面。
#项目架构.功能点架构: Springboot2.5.+ MySQL数据库8.0+(记录用户信息.角色清单.用户角色对照表) 持久层Mybatis 用户注册页面RegisterPage采用Thyme ...
HTML实现简单注册登录页面
以下两个页面均只用HTML实现(其中注册若要添加号码与后面的登录密码判断,涉及到javascript的内容,本文只使用了html,后续会加上这些内容) 简单注册:(读者可以自行增加图片以及其他属性) ...
javaweb实现简单注册登录功能——（注册）
这里实现的注册登录功能是在学习了javaweb课程之后做的一个大作业中的内容,没有涉及任何框架技术,都是基础知识凑成的✌.适合刚开始接触web的孩纸. --首页: 首页代码: <%@ page ...
Java实现简单注册登录等功能
UserServlet层 package servlet;import dao.UserDao;import java.util.*;//作为方法入口 public class UserServlet ...
javaweb简单的登录增删改查系统_国产化之路统信UOS /Nginx /Asp.Net Core+ EF Core 3.1/达梦DM8实现简单增删改查操作...
引言经过前期的准备工作,.net core 3.1的运行环境和WEB服务器已经搭建完毕,这里需要注意一下,达梦DM8数据库对于Entity Framework Core 3.1 的驱动在NuGet官 ...
PHP实现简单注册登录系统
目录结构如下,其中function文件夹下包含两个函数文件,uploads文件夹用于存放上传的文件. 注:博主使用的是php5,使用php7的小伙伴运行报错的话有一部分原因是新的语法造成的,修改成新语 ...
通过前后端交互实现简单注册登录功能
文件夹路径图 code(总文件夹) public(HTML文件夹) cart.html(登录成功所跳转的页面) login.html(登录页面) register.html(组成页面) login.p ...

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

说在前面:

项目知识点

项目目录

项目源码地址

登录页面(项目首页)

注册页面

题外话

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

最新文章

热门文章