jsp +mysql 好看的登录与注册页面动态背景

阅读：评论：0

需要建立以下五个文件：

在webcontent文件夹下面建立css文件，login.jsp与loginjudge.jsp，registcheck.jsp直接放到webcontent文件夹下面，normalize.min.css与login.css放到css文件里面

数据库我建立的是Td_Snacks，连接数据库账号和密码是root，111，不同的请自己修改代码

建立数据库Td_Snacks

表：user

SET FOREIGN_KEY_CHECKS=0;-- ----------------------------
-- Table structure for users
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (`userid` varchar(20) NOT NULL,`username` varchar(8) DEFAULT NULL,`userpwd` varchar(20) DEFAULT NULL,`useremail` varchar(50) DEFAULT NULL,`useraddress` char(100) CHARACTER SET utf8 DEFAULT NULL,`u_profile` varchar(10000) DEFAULT NULL,PRIMARY KEY (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

1.login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>登录/注册</title><link rel="stylesheet" href="css/normalize.min.css"><link rel="stylesheet" href="css/login.css">
</head>
<script>function check(form){if(form.user.value == ''){alert("账号为空！");return false;}if(form.password.value == ''){alert("密码为空！");return false;}return true;}function check1(form){if(form.user1.value == ''){alert("用户名为空！");return false;}if(form.password1.value == ''){alert("密码为空！");return false;}ail1.value == ''){alert("邮箱为空！");return false;}if(form.password11.value == ''){alert("重复密码为空！");return false;}if(form.password1.value !=form.password11.value){alert("两次密码输入不一致！");return false;}return true;}</script> 
<body>
<%String newid&#Parameter("newid");
if(newid==null)
newid=" ";
%><div id="formContainer" class="dwo"><div onclick="(-1);" class="return00" >x</div><div class="formLeft"><img src=".jpg"></div><div class="formRight"><!-- Forgot password form --><form id="forgot" class="otherForm" ><header><h1>忘记密码</h1><p>输入邮箱找回密码</p></header><section><label><p>邮箱</p><input type="email" placeholder=" " ><div class="border"></div></label><button type="submit">发送邮件</button></section><footer><button type="button" class="forgotBtn">返回</button></footer></form><!-- Login form --><form id="login" method="post" action="loginjudge.jsp" onSubmit="return check(this);"><header><h1>欢迎回来</h1><p>请先登录</p></header><section><label><p>账号</p><input type="text"  name="id" id="user" autocomplete = "new-password" value=<%=newid%>><div class="border"></div></label><label><p>密码</p><input type="password" placeholder=" " name="pwd" id="password" autocomplete = "new-password"><div class="border"></div></label><button type="submit">登 录</button></section><footer><button type="button" class="forgotBtn" style="display:none;">忘记密码？</button><button type="button" class="registerBtn">新用户？</button></footer></form><!-- Register form --><form id="register" class="otherForm" action="registcheck.jsp" onSubmit="return check1(this);"><header><h1>用户注册</h1><p>注册后享受更多服务</p></header><section><label><p>用户名</p><input type="text" placeholder=" " style="color: black;"name="name" id="user1" autocomplete='off'><div class="border"></div></label><label><p>邮箱</p><input type="email" placeholder=" " name="email" id="email1"><div class="border"></div></label><label><p>密码</p>                       <input type="password" placeholder=" " name="pwd" id="password1" autocomplete="new-password"><div class="border"></div></label><label><p>重复密码</p><input type="password" placeholder=" " id="password11"><div class="border"></div></label><button type="submit">注 册</button></section><footer><button type="button" class="registerBtn">返回</button></footer></form></div></div><div ><ul class="bg-bubbles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script src="js/jquery.min.js"></script><script src="js/script.js"></script>
</body></html>

2.loginjudge.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" import="java.sql.*"pageEncoding="utf-8" errorPage="error.jsp"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录</title>
</head>
<body><!-- 用户名密码合法性、验证码验证(lizhiqiang)  --><!--获取关键字id(普通用户:users和商家：shop_owners)--><% request.setCharacterEncoding("utf-8");String id= Parameter("id");//得到id(登录界面的文本框内容)给id(String)String pwd&#Parameter("pwd");//得到pwd(登录界面的文本框内容)给pwd(String)System.out.println(id+pwd);  session.setAttribute("sessionid",id);      //设置session-sessionidsession.setAttribute("sessionpwd",pwd);      //设置session-sessionpwdif(id.equals("admini")&&pwd.equals("admini")){  //管理员登录response.setHeader("Refresh","0;url=admin.jsp");}else{                                       //非管理员登录                         request.setCharacterEncoding("utf-8");  //数据库连接及判断Class.forName(&#sql.jdbc.Driver");//连接数据库Connection con&#Connection("jdbc:mysql://localhost:3306/Td_Snacks","root","111");String sql="select * from users where userid ='"+id+"'"; //sql语句，查找普通用户学生String sql1="select * from shop_owners where ownid ='"+id+"'";//sql语句，查找商家System.out.println(id+pwd+sql+sql1);                       //输出到控制台判断语句是否正确Statement stmt = ateStatement();Statement stmt2 = ateStatement();ResultSet rs = uteQuery(sql);               //普通用户：学生结果集ResultSet rs1 &#uteQuery(sql1);              //普通用户：商家结果集int result=0;())                                     //循环查找普通用户：学生结果集{String pw&#String("userpwd").trim();       //从结果集中找到密码、去掉空格if(pw.equals(pwd))                              //密码正确{result=1;                                   //结果为1}}())                                     //循环查找普通用户：商家结果集{String pw1&#String("ownpwd");                  //从结果集中找到密码if(pw1.equals(pwd))                              //密码正确{result=2;                                   //结果为2}}stmt.close();stmt2.close();con.close();	if(result==1&&id!="admini")//结果导向
{   response.setHeader("Refresh","0;url=index.jsp");
}
if(result==2&&id!="admini")
{response.setHeader("Refresh","0;url=shop_owner.jsp");//这里放店家
}
if(result==0&&id!="admini")
{out.println("<script language='javaScript'> alert('账号或密码错误！');</script>");out.println("<script language='javascript'>window.location.href='javascript:history.back(-1)'</script>");
}}
%>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=utf-8" import="java.sql.*"pageEncoding="utf-8" errorPage="error.jsp" import="java.time.LocalDateTime" import="java.time.format.DateTimeFormatter" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册判断</title>
</head>
<body>
<!--获取普通用户注册页面内容--><% request.setCharacterEncoding("utf-8");String id&#w().format(DateTimeFormatter.ofPattern("yyyyMMddHHmmss"));  String pwd= Parameter("pwd");//得到pwd(注册界面的文本框内容)给pwd(String)String name= Parameter("name");//得到name(注册界面的文本框内容)给name(String)String email= Parameter("email");//得到phone(注册界面的文本框内容)给phone(String)%><!--数据库连接、判断及结果导向-->
<%                                       request.setCharacterEncoding("utf-8");Class.forName(&#sql.jdbc.Driver");//连接数据库Connection con&#Connection("jdbc:mysql://localhost:3306/Td_Snacks","root","111");String sql="select * from users where useremail ='"+email+"'"; //sql语句，查找普通用户学生Statement stmt = ateStatement();ResultSet rs = uteQuery(sql);               //普通用户：学生结果集int result=0;())                                     //循环查找普通用户：学生结果集{result=1;                                   //结果为1}   
if(result==1)//普通用户：学生表中已存在
{   out.println("<script language='javaScript'> alert('该邮箱已被注册，点击返回！');window.location='login.jsp'</script>");
}
if(result==0)
{   String sql1="insert into users(userid,userpwd,username,useremail,u_profile) values('"+id+"','"+pwd+"','"+name+"','"+email+"','img/touxiang.jpg')";ute(sql1); //执行sql1语句，插入到users表System.out.println(pwd);System.out.println(name);System.out.println(email);%><script language='javaScript'> alert('注册成功,您的账号为：'+<%=id%>+'！');p.location='login.jsp?newid='+<%=id%>+''</script><% response.setHeader("Refresh","0;url=login.jsp");
}
stmt.close(); //关闭数据库连接
con.close();	
%>
<script>window.open("login.jsp")</script>
</body>
</html>

4.login.css

* {outline-width: 0;font-family: "Nunito" !important;
}input{outline:medium;}input:-internal-autofill-selected {background-color: rgba(119,119,119,0.01) !important;background-image: none !important;box-shadow: inset 0 0 0 1000px rgba(119,119,119,0.01) !important;}
input:-webkit-autofill {box-shadow: 0 0 0px 1000px  rgba(119,119,119,0.01) inset !important;transition: background-color 50000s ease-in-out 0s;}
input:-webkit-autofill:focus {box-shadow: 0 0 0px 1000px rgba(119,119,119,0.01) inset !important;
}
body {height: 100vh;width: 100vw;background:rgb(255, 128, 128);background: -webkit-linear-gradient(top left, rgb(255, 255, 255) 0%,rgb(255, 128, 128) 100%);/*渐变设置*/background: linear-gradient(to bottom right, rgb(255, 255, 255) 0%, rgb(255, 128, 128) 100%);display: flex;justify-content: center;align-items: center;
}#formContainer {z-index: 2;display: flex;transition: 0.2s ease;height: 342.5px;transition-delay: 0.3s;
}#le {height: 480px;transition-delay: 0s;
}
.return00 {z-index: 5;color:#ababab;font-size: 40px;margin:-10px 0px 0px 467px;position: absolute;cursor: pointer;}
.return00:hover {color: #8b8378;
}.formLeft {background: rgb(255, 249, 249);border-radius: 5px 0 0 5px;padding: 0 35px;box-sizing: border-box;display: flex;align-items: center;
}.formLeft img {display: block;width: 72px;border-radius: 50%;box-shadow: 0 5px 5px rgb(255, 128, 128);}.formRight {position: relative;overflow: hidden;border-radius: 0 5px 5px 0;display: flex;flex-direction: column;justify-content: center;
}.formRight:before {content: "";position: absolute;top: -10px;left: -10px;width: calc(100% + 20px);height: calc(100% + 20px);background: url("../images/bg.jpg") center/cover fixed;box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);filter: blur(5px);
}.formRight form {position: relative;width: 350px;padding: 25px;box-sizing: border-box;white-space: nowrap;overflow: hidden;
}.formRight form header {color: #fff;text-align: center;margin-bottom: 15px;
}.formRight form header h1 {margin: 0;font-weight: 400;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.formRight form header p {margin: 5px 0 0;opacity: 0.5;font-size: 14px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}.formRight form section label {display: block;margin-bottom: 15px;position: relative;
}.formRight form section label p {color: #fff;margin: 0 0 10px 0;font-weight: 600;font-size: 12px;opacity: 0.5;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}.formRight form section label input {width: 100%;display: block;border: none;background: transparent;color: #fff;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: 0 0 10px;box-sizing: border-box;font-weight: 600;
}.formRight form section label input:focus~.border {transform: scale(1, 1);
}.formRight form section label input:not(:-moz-placeholder-shown)~.border {transform: scale(1, 1);
}.formRight form section label input:not(:-ms-input-placeholder)~.border {transform: scale(1, 1);
}.formRight form section label input:not(:placeholder-shown)~.border {transform: scale(1, 1);
}.formRight form section label .border {position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background: #fff;transform: scale(0, 1);transition: 0.2s ease;
}.formRight form section label:last-child {margin-bottom: 0;
}.formRight form section button {background: rgb(255, 202, 202);border: none;width: 100%;padding: 10px 0;font-weight: 600;color: #fff;cursor: pointer;
}.formRight form section button:hover {background: rgb(255, 147, 147);
}.formRight form footer {margin-top: 15px;display: flex;
}.formRight form footer button {background: transparent;padding: 0;border: none;color: #fff;cursor: pointer;font-size: 12px;font-weight: bold;flex: 1;opacity: 0.5;
}.formRight form footer button:hover {opacity: 1;
}.herForm {top: 0;left: 0;position: absolute;background: rgb(255, 249, 249);height: 100%;z-index: 1;display: flex;flex-direction: column;justify-content: center;width: 0;padding: 25px 0;transition: 0.2s ease;transition-delay: 0.2s;border-left: 1px solid rgba(0, 0, 0, 0.1);
}.herForm header {color: #000;opacity: 0;transition: 0.2s ease;transition-delay: 0s;
}.herForm p {color: #000;
}.herForm section {opacity: 0;transition: 0.2s ease;transition-delay: 0s;
}.herForm footer {border-top-color: rgba(0, 0, 0, 0.1);opacity: 0;
}.herForm footer button {color: #000;
}.herForm input {border-color: rgba(0, 0, 0, 0.1);color: #000;
}.herForm .border {background: #000;
}.le {width: 100%;padding: 25px;transition-delay: 0s;
}.le header,
.le section,
.le footer {opacity: 1;transition-delay: 0.3s;
}.bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;
}
.bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: 0px;-webkit-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {left: 10%;
}
.bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {left: 70%;
}
.bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {left: 32%;width: 80px;height: 80px;-webkit-animation-delay: 7s;animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {left: 90%;width: 80px;height: 80px;-webkit-animation-delay: 11s;animation-delay: 11s;
}
@-webkit-keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
}
@keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
}

button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */

本文发布于:2024-01-28 01:28:59，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17063765473844.html

上一篇：ASP.NET Core生成好看的图形验证码

下一篇：第4关：大写字母好看