Jsp实现注册登录以及忘记找回密码等操作（上）

最新推荐文章于 2024-03-25 17:51:59 发布
最新推荐文章于 2024-03-25 17:51:59 发布
阅读量6.5k 收藏 59
点赞数 14
分类专栏： Web 文章标签： jsp javascript css java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44543614/article/details/104123023
版权

刚开始做WEB项目的小伙伴遇到的第一个难关，可能就是做一个能够实现与数据库连接后用于注册，登录，找回密码的界面。今天博主就用一个小项目带领大家实现这个项目，让大家在实战中理解网页如何与数据库连接，如何随机生成验证码并且发送到邮箱，运用sql命令进行数据的增删改查等操作。

那么我们先做的准备工作是：准备好tomcat,在eslipse搭建好环境.熟悉好eslipse的操作，配置好MYSQL数据库（过于基础自己百度或者bilibili把）

tomcat的话，可以去http://tomcat.apache.org/下载。博主用的tomcat9.0.稳定的话用tomcat8也很棒。

MYSQL别忘了自己搞一个phpstudy哦。具体怎么搞，

www.baidu.com

具体大家可以搜索eslipse jsp开发环境配置

下面是做成后的各种界面

忘记密码界面
登录成功界面

登录界面
注册界面
sql
网页思路为：

注册账号：点击发送验证码后随机生成验证码发送至邮箱。输入验证码并填写完信 息后数据库会将用户信息保存。即注册成功。注册密码等用正则表达式 加以限定。

登录账号：将已经注册好的账号输入登录界面后，自动从数据库调用信息判断是否 正确。正确则进入登录后的首页。

忘记密码：在密码界面输入邮箱并填写好验证码后会自动发送一封密码重置链接至 邮箱并跳转至重置窗口。重置完毕会自动更改数据路中的密码。

下面是文件的基本结构：

结构1
结构2

那么，下面跟随博主一起实现它吧！推荐先把基础的几个界面的html和css写出来，下面的脚本和代码留着后面再一个个理解后敲上去。

首先是登录界面(login.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.td.utils.JspUtils" %>
<%@ page import="com.td.bean.Student" %>
<%@ page import="java.util.*" %>
<%@include file = "./layout/function.jsp"%>

<%
if("post".equalsIgnoreCase(request.getMethod())){
	// post请求才是登录请求
	if(CheckCode(request)){
		// 进一步验证登录
		Student student =checkLogin(request);
		if(student==null){
			// 返回错误信息
			session.setAttribute("errorMsg", "用户名或密码错误请重新尝试");
			session.setAttribute("targetUrl", "./login.jsp");
			response.sendRedirect("./error.jsp");
		}else{
			// 记录登录信息，并跳转首页
			session.setAttribute("loginState", "success");
			session.setAttribute("loginUser", student);
			// 跳转首页
			response.sendRedirect("./index.jsp");
		}
	}else{
		// 直接返回错误信息
		session.setAttribute("errorMsg", "验证码错误");
		session.setAttribute("targetUrl", "./login.jsp");
		response.sendRedirect("./error.jsp");
	}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="css/login.css?version=<%=JspUtils.fileUpdateTime(request,"css","login.css") %>"/>
	
</head>
<body>
<div id="container">
			<a id="wz" href="http://aki-tomoya.coding.me/">www.aki-tomoya.coding.me</a>
			<%--<img id="bg_1" src="img/bg_1.1.jpg" />--%>
			<div id="bg_2"><img src="img/犬山哥.png"></div>
			<div class="INDEXTEXT"><a href="http://aki-tomoya.coding.me/">Aki-Tomoya</a></div>
			<div class="first">
				<form action="./login.jsp" method="post">
					<div class="group">
						<label id="account">用户账号</label>
						<input class="uname"type="text" name="uname">
					</div>
					<div class="group">
						<label id="password">账号密码</label>
						<input class="upass" type="password" name="upass">
					</div>
					<div class="group">
						<label id="valicode">验证码　</label>
						<input class="valicode" type="valiCode" name="ucode">
						<span class="valiCode"><%=createCode(session) %></span>
					</div>
						<button class="input-group" type="submit">登录</button>
					
						<div class="attxt"><a href="register.jsp">注册账号</a></div>
						<div class="pdtxt"><a href="forget.jsp">忘记密码</a></div>
					
					
				</form>
			</div>
			
		</div>

</body>
</html>

​ 登录界面的css样式：

`html,body{
		height:100%;
		margin: 0;
		padding: 0;
	}
	body{
		background:url(../img/bg_1.2.jpg);
		background-size:cover;
	}
	#container{
		width: 1520px;
		height:732px;
		position: relative;
	}
	
	#container a{
		position:absolute;
		color:#fff;
		/*bottom:0;
		left:2px;*/
		text-decoration:none;
	}
	
	#container a:hover{
		text-shadow:2px 2px 5px #EEEE00;
	}
	
	#bg_2{
		position:absolute;
		top:400px;
		left:950px;
		z-index:1;
	}
	
	#bg_2 img{
		width:207.5px;
		height:211.5px;
	}
	
	.INDEXTEXT{
		color:#fff;
		position: absolute;
		width: 600px;
		height: 20px;
		top: 150px;
		left: 530px;
		font-size: 80px;
	}
	
	.INDEXTEXT a{
		text-shadow: 1px 1px 20px #bbffff /*#FFFFCC*/;
		text-decoration:none;
		border-radius:5px;
	}
	
	.INDEXTEXT a:hover{
		/*box-shadow:5px 5px 40px #bbffff;*/
	}
	
	.first{
		width: 500px;
		height: 300px;
		background-color: #FDF5E6;
		box-shadow: 1px 1px 20px #ececec;
		position: absolute;
		top: 300px;
		left: 510px;
		z-index:0;
		opacity:0.9;
	}
	
	 .input-group{
	 	position:relative;
	 	top:50px;
	 	left:25px;
		width:90%;
		height:40px;
		display:table;
		border-radius:5px;
		background-color:#6495ED;
		cursor:pointer;
		color:#fff;
	}
	
	.input-group:hover{
		background-color:#87CEFF;
	}
	
	.input-group input{
		width:100%;
		display:table-cell;
	}
	
	.input-group a{
		display:table-cell;
		width:1px;
		word-break:keep-all;
	}
	
	.group{
		position:relative;
		top:15px;
		margin-top:20px;
	}

     .uname{
		position:relative;
		left:50px;
		border-radius:30px;
		width:250px;
		background-color:#fff;
		height:30px;
		font-size:20px;
		padding-left:10px;
	}
	
	.upass{
		border-radius:30px;
		position:relative;
		left:50px;
		width:250px;
		background-color:#fff;
		height:30px;
		font-size:20px;
		padding-left:10px;
	}
	
	.valicode{
	    position:relative;
		left:50px;
		border-radius:30px;
		width:250px;
		background-color:#fff;
		height:30px;
		font-size:20px;
		padding-left:10px;
	}
	
	.attxt{
		position:relative;
		top:100px;
		left:100px;
	}
	
	.pdtxt{
		position:relative;
		top:100px;
		left:300px;
	}
	
	#account{
		position:relative;
		left:30px;
		color:#708090;
	}
	
	#password{
		position:relative;
		left:30px;
		color:#708090;
	}
	
	#valicode{
		position:relative;
		left:30px;
		color:#708090;
	}
	
	.valiCode{
		position:relative;
		left:70px;
		border:1px solid #A020F0;
	}
	
	#wz{
		bottom:0;
		color:#fff;
	}`

代码中的图片大家可以替换成自己喜欢的。如果太过于萌新，可以将图片改个名字放在目录中对应部分就好啦！

那么如果登录失败，就要有一个界面显示到底哪里错误，比如验证码输入错误，密码错误之类的。下面就是我们的error界面啦！这个界面用于显示‘为什么登录失败’嘛，姑且算作代码部分。可以先跳过。

error.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String targetUrl = (String)session.getAttribute("targetUrl");
	response.setHeader("refresh","3;"+targetUrl);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3><%=session.getAttribute("errorMsg") %></h3>
</body>
</html>

这样login.jsp我们就完成了。

下面是首页INDEX(index.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%!
	boolean checkLogin(HttpSession session){
		return "success".equals(session.getAttribute("loginState"));
}
%>

<%
	if(!checkLogin(session)){
		response.sendRedirect("login.jsp");
	}
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style type="text/css">
	body{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background:url(./img/bg_1.2.jpg);
	background-size:cover;
	font-family: consolas;
	position:relative;
}

a{
	position: relative;
	display: inline-block;
	padding: 15px 30px;
	color: #2196f3；
	text-transform:uppercase;
	letter-spacing: 4px;
	text-decoration: none;
	font-size: 24px;
	overflow: hidden;
	transition: 2s;

}

a:hover{
	color: #255784;
	background:#2196f3;
	box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3;
	transition-delay:1s;
}

a span{
	position: absolute;
	display: block;
}

a span:nth-child(1){
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background:linear-gradient(90deg,transparent,#2196f3);
}

a:hover span:nth-child(1){
	left: 100%;
	transition: 1s;
}

a span:nth-child(3){
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 2px;
	background:linear-gradient(270deg,transparent,#2196f3);
}

a:hover span:nth-child(3){
	right: 100%;
	transition: 1s;
	transition-delay: 0.5s;
}

a span:nth-child(2){
	right: 0;
	top: -100%;
	width: 2px;
	height: 100%;
	background:linear-gradient(180deg,transparent,#2196f3);
}

a:hover span:nth-child(2){
	top: 100%;
	transition: 1s;
	transition-delay: 0.25s;
}

a span:nth-child(4){
	left: 0;
	bottom: -100%;
	width: 2px;
	height: 100%;
	background:linear-gradient(360deg,transparent,#2196f3);
}

a:hover span:nth-child(4){
	bottom: 100%;
	transition: 1s;
	transition-delay: 0.75s; 
}

.first{
	position:absolute;
	background-color:#fff;
	opacity: 0.7;
	width: 1320px;
	height:600px;
	box-shadow:1px 1px 20px #fff;
}
</style>
</head>
<body>
<div class="first"></div>
<a href="#">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	成功登录
</a>
</body>
</html>

这是登录成功的界面。界面比较简单因此我把css和html就写在一起咯。

下面是注册界面（register.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.td.utils.JspUtils" %>
<%@ page import="javax.mail.*" %>
<%@ page import="javax.activation.*" %>
<%@ page import="javax.mail.internet.*" %>
<%@ page import="java.util.*" %>
<%@ page import="com.td.bean.Student" %>
<%@include file = "./layout/function.jsp"%>

<script>
	function checksend(){
		alert("验证邮件已发送\(//*/~/*//)/");
	}

</script>

<%
	request.setCharacterEncoding("utf-8");

	if("post".equalsIgnoreCase(request.getMethod())){
		String codeinfo = request.getParameter("codeinfo");
		String uname = request.getParameter("uname");
		switch(codeinfo){
		case"1":
			Student student = registerStudent(request);
			if(student!=null){
				response.sendRedirect("./login.jsp");
			}else{
				//注册失败
				session.setAttribute("targetUrl","./register.jsp");
				response.sendRedirect("./error.jsp");
			}
			break;
		case"2":
			//1.生成验证码
			String ucheck = createCode(session);
			//2.验证码保存在session中
			session.setAttribute("ucheck",ucheck);
			//3.发送验证码
			sendMail(uname,"发送验证码",ucheck);
			break;
		}
	}
	
	//addStudent(student);
%>



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<link rel="stylesheet" href="css/register.css?version=<%=JspUtils.fileUpdateTime(request,"css","register.css") %>"/>
</head>
<body>
<div id="container">
			<a id="wz" href="http://aki-tomoya.coding.me/">www.aki-tomoya.coding.me</a>
			<%--<img id="bg_1" src="img/bg_1.1.jpg" /> --%>
			<div id="bg_2"><img src="img/犬山哥.png"></div>
			<div class="INDEXTEXT"><a href="http://aki-tomoya.coding.me/">Aki-Tomoya</a></div>
			<div class="first">
			<form action="./register.jsp" method="post">
					<div class="input-group">
						<label class="register-font">用户昵称</label>
						<input class="uname"type="text" name="unick" value="<%=request.getParameter("unick") %>">
					</div>
					
					<div class="input-group">
						<label class="register-font">注册密码</label>
						<input class="upass" type="text" name="upass1">
					</div>
					
					<div class="input-group">
						<label class="register-font">确认密码</label>
						<input class="upass" type="text" name="upass2">
					</div>
					
					<input class="codeinfo" type="hidden" name="codeinfo" value="1">
					<div class="input-group">
						<label class="register-font">注册邮箱</label>
						<input class="mail" type="text" name="uname" value="<%=request.getParameter("uname")%>">
						<span class="btn" >点击获取验证🐴</span>
					</div>
					
					<div class="input-group">
						<label class="register-font">验证码　</label>
						<input class="mail" type="text" name="ucheck"> 
					</div>
					
					
					<div class="gender">
						<label class="genderlabel">性别</label>
						<%if("男".equals(request.getParameter("ugender"))){ %>
						<input class="gender2" type="radio"  name="ugender" value="男" checked="checked"><a id="gender2">男</a>
						<input class="gender1" type="radio" name="ugender" value="女" ><a id="gender1">女</a>
						<%}else{ %>
						<input class="gender2" type="radio"  name="ugender" value="男"><a id="gender2">男</a>
						<input class="gender1" type="radio" name="ugender" value="女" checked="checked"><a id="gender1">女</a>
						<% } %>
					</div>
				
				<div class="registert"><button class="input" type="submit">注册</button></div>
				<div class="backt"><a href="login.jsp">返回登录</a></div>
			</form>
			
			<script type="text/javascript">
				var doc_form = document.getElementsByTagName("form")[0];
				//添加监听事件
				doc_form.addEventListener("submit",function(){
					//当前事件的监听成功-修改<input type="hidden" name="codeinfo" value="1">的值
					var doc_input = doc_form.getElementsByClassName("codeinfo")[0];
					doc_input.setAttribute("value",1);
				})
				doc_form.getElementsByClassName("btn")[0].addEventListener("click",function(){
					var doc_input = doc_form.getElementsByClassName("codeinfo")[0];
					doc_input.setAttribute("value",2);
					doc_form.submit();
				})
			</script>
			
			<%-- <div  class="bilibiliimg"><img src="img/bregister1.1.jpg"></div>--%>
			</div>
		</div>
</body>
</html>

register.css

html,body{
			height:100%;
			margin: 0;
			padding: 0;
		}
		
		body{
			background:url(../img/bg_1.2.jpg);
			background-size:cover;
		}
		#container{
			width: 1520px;
			height:732px;
			position: relative;
		}
		
		#container a{
			position:absolute;
			/*
			bottom:0;
			left:2px;*/
			text-decoration:none;
			
		}
		#container a:hover{
			text-shadow:2px 2px 5px #EEEE00;
		}
		
		#bg_2{
			position:absolute;
			top:400px;
			left:950px;
			z-index:1;
		}
		
		#bg_2 img{
			width:207.5px;
			height:211.5px;
		}
		
		.INDEXTEXT{
			position: absolute;
			width: 600px;
			height: 20px;
			top: 150px;
			left: 530px;
			color: #FFFFCC;
			font-size: 80px;
		}
		
		.INDEXTEXT a{
			text-shadow: 1px 1px 20px #bbffff;
			text-decoration:none;
			color:#fff;
		}
		
		.INDEXTEXT a:hover{
			/*text-shadow:5px 5px 40px #bbffff;*/
		}
		
		.first{
			width: 500px;
			height: 300px;
			background-color: #FDF5E6;
			box-shadow: 1px 1px 20px #ececec;
			position: absolute;
			top: 300px;
			left: 510px;
			z-index:0;
			opacity:0.9;
		}
		
		.registert a{
			position:relative;
			top:307px;
			left:100px;
			color:#fff;
		}
		
		.backt a{
			position:relative;
			top:307px;
			left:325px;
			color:#fff;
		}
		
		.uname{
			position:relative;
			left:50px;
			border-radius:30px;
			width:250px;
			background-color:#fff;
			height:30px;
			font-size:20px;
			padding-left:10px;
		}
		
		.upass{
			border-radius:30px;
			position:relative;
			left:50px;
			width:250px;
			background-color:#fff;
			height:30px;
			font-size:20px;
			padding-left:10px;
		}
		
		.mail{
		    position:relative;
			left:50px;
			border-radius:30px;
			width:250px;
			background-color:#fff;
			height:30px;
			font-size:20px;
			padding-left:10px;
		}
		
		.attxt{
			position:relative;
			top:180px;
			left:100px;
		}
		
		.pdtxt{
			position:relative;
			top:180px;
			left:300px;
		}
		
		
		.register-font{
			position:relative;
			left:30px;
			color:#708090;
		}
		
		
		.input-group{
			position:relative;
			top:0px;
			margin-top:10px;
		}
		
		.bilibiliimg{
			position:absolute;
			bottom:-50px;
			opacity:0.9;
		}
		
		.gender{
			position:relative;
			top:15px;
			left:40px;
		}
		
		.genderlabel{
			color:#708090;
		}
		
		.gender2{
			position:relative;
			left:250px;
			color:#708090;
			width:20px;
			height:15px;
		}
		
		.gender1{
			position:relative;
			left:50px;
			color:#708090;
			width:20px;
			height:15px;
		}
		
		#gender1{
			position:relative;
			left:80px;
			color:#708090;
		}
		
		#gender2{
			position:relative;
			left:250px;
			color:#708090;
			width:20px;
			height:15px;
		}
		
		#wz{
			position:relative;
			color:#fff;
			left:0;
			bottom:0
		}
		
		.btn{
			position:relative;
			left:48px;
			color:#708090;
			cursor:pointer;
		}
		
		.btn:hover{
			color:#6495ed;
		}
		
		.btn:active{
			color:#A52A2A;
		}
		
		.btn:visited{
			color:A52A2A;
		}
		
		.input{
		 	position:relative;
		 	top:30px;
		 	left:25px;
			width:90%;
			height:40px;
			display:table;
			border-radius:5px;
			background-color:#6495ED;
			cursor:pointer;
			color:#fff;
		}
		
		.input:hover{
			background-color:#87CEFF;
		}

下面是忘记密码界面。算是一个重点。忘记密码界面包含三个子页面，也就是目录里的repass1,repass2,repass3.这三个页面是找回密码的主视图，点击发送验证码后显示给用户的“验证码已发送”界面，另一个是重置密码的界面。我们运用代码来保证这三个界面的切换。当然，我们forget.jsp里面只是用来调用者三个界面的函数。forget页面的真正前端其实是repass.因为repass为forget的子页面并且用include加入其中，因此我们的forget.css中包含了repass的所有样式。repass最终调用的css是forget.css.

下面是忘记密[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fax7esxG-1580444895925)(file:///C:\Users\扁呱RI~1\AppData\Local\Temp\SGPicFaceTpBq\652\1A9EB128.png)]界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.td.utils.JspUtils" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forget</title>
<link rel="stylesheet" href="css/forget.css?version=<%=JspUtils.fileUpdateTime(request,"css","forget.css") %>"/>

<script>
	function checksend(){
		alert("验证🐴已发送\(//*/~/*//)/");
	}

</script>

</head>
<body>
<% 
int type = session.getAttribute("repass_type")==null?1:(int)session.getAttribute("repass_type");
// 进行请求判断
if("post".equalsIgnoreCase(request.getMethod())){
	if(type==1){// 表示当前是一个表单的提交行为
		// 当前是点击找回密码->1:通过邮箱和验证码申请邮箱修改密码的链接
		// 获取请求参数
		String uname = request.getParameter("uname");
		String ucode = request.getParameter("ucode");
		// 2:验证验证码的存在
		if(CheckCode(request)){
			// 3： 验证码通过->验证当前的邮箱是否存在
			// 数据库查询
			Student student = findStudentByName(uname);
			if(student!=null){
				// TODO 表示当前学生存在->给当前邮箱发送密码找回链接
				String host = "http://localhost:8889/LoginPage/forget.jsp";
				// 学生的id
				// 用于验证的密码
				String sign = randomString("0123456789qwertyuipasdfghjklzxcvbnmQWERTYUPASDFGHJKLZXCVBNM",32);
				// 将验证密码存入到数据库当中
				student.setSign(sign);
				if(updateStudentById(student)){
					// 构造链接
					host+="?id="+student.getId()+"&sign="+sign;
					// 将链接发送给用户
					
					 sendMail(uname,"重置密码",host);
					// 发送完链接转到repass2
					type = 2;
					session.setAttribute("repass_type",type);
				}else{
					// 写入数据库失败
					session.setAttribute("errorMsg", "重置密码失败-用户账户存在异常");
					// 记录返回链接
					session.setAttribute("targetUrl", "./forget.jsp");
					response.sendRedirect("./error.jsp");
				}
			}else{
				session.setAttribute("errorMsg", "用户账号不存在");
				// 记录返回链接
				session.setAttribute("targetUrl", "./forget.jsp");
				response.sendRedirect("./error.jsp");
			}
		}else{
			session.setAttribute("errorMsg", "验证码错误");
			// 记录返回链接
			session.setAttribute("targetUrl", "./forget.jsp");
			response.sendRedirect("./error.jsp");
		}
	}
}else{
	// 判断当前请求是否是重置表单的链接构造
	String _id = request.getParameter("id");
	String _sign = request.getParameter("sign");
	if(_id!=null && _sign!=null && !_id.isEmpty() && !_sign.isEmpty() ){
		// 查询学生对象
		Student student = findStudentByName("uname");
		if(student == null){
			// 写入数据库失败
			session.setAttribute("errorMsg", "非法链接请求");
			// 记录返回链接
			session.setAttribute("targetUrl", "./forget.jsp");
			response.sendRedirect("./error.jsp");
		}else{
			// 直接进入链接修改 
			type = 3;
			session.setAttribute("repass_type",type);
			// 记录student对象
			session.setAttribute("loginUser",student);
		}
	}
}
		
if(type==1){ %>
	<%@include file="layout/repass1.jsp" %>
<%} else if(type==2){ %>
	<%@include file="layout/repass2.jsp" %>
<%} else if(type==3){ %>
	<%@include file="layout/repass3.jsp" %>
<%} %>
</body>
</html>

repass1（填写丢失密码邮箱和验证码的界面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><div id="container">
<%@ page import="com.td.utils.JspUtils" %>
<%@ include file="./function.jsp" %>
			<a id="wz" href="http://aki-tomoya.coding.me/" >www.aki-tomoya.coding.me</a>
			<%--<img id="bg_1" src="img/bg_1.1.jpg" /> --%>
			<div id="bg_2"><img src="img/犬山哥.png"></div>
			<div class="INDEXTEXT"><a href="http://aki-tomoya.coding.me/">Aki-Tomoya</a></div>
			<div class="first">
			<form action="./forget.jsp" method="post">
					<div class="pwdr">
						<a id="pwdr">密🐴重置</a>
					</div>
					<div class="mmail">
						<label id="mail">用户账户</label>
						<input class="mail" type="text" name="uname" placeholder="请输入注册的邮箱">
					</div>
					
					<div class="vvalicode">
						<label id="valicode">验证码　</label>
						<input class="valicode" type="valiCode" name="ucode">
						<span class="valiCode"><%=createCode(session) %></span>
					</div>
					<div class="attxt"><a id="attxt" href="register.jsp">注册账号</a></div>
			<div class="backt"><a id="backt" href="login.jsp">返回</a></div>
			<div id="find">
			<button class="find" type="submit">
			点击找回
			</button>
			
			</form>	
			
			</div>
			
		</div>

repass2.jsp（重置密码链接发送成功界面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <div id="container">
			<a id="wz" href="http://aki-tomoya.coding.me/" >www.aki-tomoya.coding.me</a>
			<%--<img id="bg_1" src="img/bg_1.1.jpg" /> --%>
			<div id="bg_2"><img src="img/犬山哥.png"></div>
			<div class="INDEXTEXT"><a href="http://aki-tomoya.coding.me/">Aki-Tomoya</a></div>
			<div class="first">
			<form action="./forget.jsp" method="post">
					<div class="pwdr">
						<a id="pwdr">密🐴重置</a>
					</div>
					<div class="text">
						<a id="text">验证邮件已经发送至邮箱。请移步至邮箱点击链接进行密码重置。</a>
					</div>
			<div class="yes"><a id="yes" href="login.jsp">确定</a></div>
			
			</form>	
			
			</div>

repass3.jsp（重置密码界面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><div id="container">
			<a id="wz" href="http://aki-tomoya.coding.me/" >www.aki-tomoya.coding.me</a>
			<%--<img id="bg_1" src="img/bg_1.1.jpg" /> --%>
			<div id="bg_2"><img src="img/犬山哥.png"></div>
			<div class="INDEXTEXT"><a href="http://aki-tomoya.coding.me/">Aki-Tomoya</a></div>
			<div class="first">
			<form action="forget.jsp" method="post">
					<div class="pwdr">
						<a id="pwdr">密🐴重置</a>
					</div>
					<div class="mmail">
						<label id="mail">用户账户</label>
						<input class="mail" type="text" name="umail" placeholder="请输入邮箱">
					</div>
					
					<div class="mmmail">
						<label id="mmail">密码</label>
						<input class="mail" type="password" name="umail" placeholder="请输入密码">
					</div>
					
					<div class="mmmmail">
						<label id="mmmail">新密码</label>
						<input class="mail" type="password" name="umail" placeholder="请输入新密码">
					</div>
					
					<div class="attxt3"><a id="attxt3" href="#">点击注册</a></div>
			<div class="backt3"><a id="backt3" href="login.jsp">返回</a></div>
			
			</form>	
			
			</div>
			
		</div>

下面是forget.css

html,body{
			height:100%;
			margin: 0;
			padding: 0;
		}
		
		body{
			background:url(../img/bg_1.2.jpg);
			background-size:cover;
		}
		
		#wz{
			color:#fff;
		}
		
		#container{
			width: 1520px;
			height:732px;
			position: relative;
		}
		
		#container a{
			position:absolute;
			bottom:0;
			left:2px;
			text-decoration:none;
			
		}
		#container a:hover{
			text-shadow:2px 2px 5px #EEEE00;
		}
		
		#bg_2{
			position:absolute;
			top:400px;
			left:950px;
			z-index:1;
		}
		
		#bg_2 img{
			width:207.5px;
			height:211.5px;
		}
		
		.INDEXTEXT{
			position: absolute;
			width: 600px;
			height: 20px;
			top: 236px;
			left: 528px;
			color: #FFFFCC;
			font-size: 80px;
			
		}
		
		.INDEXTEXT a{
			text-shadow: 1px 1px 20px #bbffff;
			text-decoration:none;
			color:#fff;
		}
		
		.INDEXTEXT a:hover{
			/*box-shadow:5px 5px 40px #bbffff;*/
		}
		
		.first{
			width: 500px;
			height: 300px;
			background-color: #FDF5E6;
			box-shadow: 1px 1px 20px #ececec;
			position: absolute;
			top: 300px;
			left: 510px;
			z-index:0;
			opacity:0.9;
		}
		
		.backt{
			position:relative;
			top:256px;
			left:325px;
		}
		
		#backt{
			color:#fff;
		}
		
		.mmail{
			position:relative;
			top:100px;
		}
		
		#mail{
			position:relative;
			left:30px;
			color:#708090;
		}
		
		.mail{
		    position:relative;
			left:50px;
			border-radius:30px;
			width:250px;
			background-color:#fff;
			height:30px;
			font-size:20px;
			padding-left:10px;
		}
		
	
		
		
		
		.vvalicode{
			position:relative;
			top:120px;
		}
		
		.valicode{
		    position:relative;
			left:50px;
			border-radius:30px;
			width:250px;
			background-color:#fff;
			height:30px;
			font-size:20px;
			padding-left:10px;
		}
		
		#valicode{
			position:relative;
			left:30px;
			color:#708090;
		}
		
		.pwdr{
			position:relative;
			top:60px;
			left:50px;
			
		}
		
		#pwdr{
			font-size:30px;
			color:#6495ED;
		}
		
		.attxt{
			position:relative;
			top:256px;
			left:100px;
		}
		
		#attxt{
			color:#fff;
		}
		
		.text{
			position:relative;
			top:180px;
			left:15px;
		}
		#text{
			color:#555555;
			font-size:25px;
		}
		
		.mmmail{
			position:relative;
			top:130px;
			left:32px;
		}
		
		.mmmmail{
			position:relative;
			top:160px;
			left:15px;
		}
		
		#mmail{
			position:relative;
			left:30px;
			color:#708090;
		}
		
		#mmmail{
			position:relative;
			left:30px;
			color:#708090;
		}
		
		.yes{
			position:relative;
			top:260px;
			left:225px;
		}
		
		#yes{
			font-size:20px;
		}
		
		.attxt3{
			position:relative;
			top:220px;
			left:90px;
		}
		
		#attxt3{
			color:#fff;
		}
		
	    .backt3{
	    	position:relative;
			top:220px;
			left:350px;
	    }
	    
	    #backt3{
	    	color:#fff;
	    }
	
		.valiCode{
			position:relative;
			left:70px;
			border:1px solid #A020F0;
		}
		
		 .find{
		 	position:relative;
		 	top:160px;
		 	left:20px;
			width:90%;
			height:40px;
			display:table;
			border-radius:5px;
			background-color:#6495ED;
			cursor:pointer;
			color:#fff;
		}
		
		.find:hover{
			background-color:#87CEFF;
		}
		
		.find input{
			width:100%;
			display:table-cell;
		}
		
		.find a{
			font-size:20px;
			width:1px;
			word-break:keep-all;
		}

以上就是我们的所有前端界面啦。再更新就是我们的JAVA代码部分啦！

武汉加油！QWQ

Aki-Tomoya
关注
  • 14
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
"忘记密码"功能过程及其实现细节
tianzhihensu的专栏
01-30 5015
对于忘记密码功能，一般都是通过2种方式找回：一种是通过预留电话号码发送验证码找回，另一个是通过设定邮箱找回。对于具体的找回流程，参见：http://www.yixieshi.com/ucd/9207.html。 这里结合目前做的项目，详细的说明一下密码找回的过程。这里用的是邮箱找回。根据一般的忘记密码的流程来说明。我采用的流程是： 流程 【登录】 --&gt; 【点击忘记密码】...
JavaScript网页设计：用户登录页面
YE_Ang的博客
11-24 3625
JavaScript网页设计登录页面 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单登录页面</title> </head> <body> <form > <div align="center"> <p> 用户名：<in
JSP找回密码例子
04-14
JSP找回密码例子,本人已经调试，可以运行
Web实战：采用JSP+ Servlet + DB实现用户登录功能
howard2005的专栏
03-25 317
本实战项目采用了JSP+ Servlet + DB的组合，搭建了一个简单的用户登录功能。通过创建数据库、用户表、Jakarta EE项目，以及编写用户实体类、数据库连接管理类、用户数据访问类、用户服务类、登录处理程序等模块，完成了整个登录功能的实现。
JavaScript实现忘记密码功能
geng1025的博客
01-23 1460
摘要 本文将详细介绍如何使用HTML、CSS和JavaScript实现一个完整的忘记密码功能。我们将创建用户界面，允许用户输入他们的用户名或电子邮件，并通过发送邮件来重置密码。这个过程包括监听输入框的变化，验证输入的有效性，以及触发发送重置密码的链接。 一、HTML部分 首先，我们需要创建一个HTML页面来收集用户输入的用户名或电子邮件，并显示操作结果。 HTML代码示例： <!DOCTYPE html> <html> <head>
使用原生js写一个简单的注册登录页面
热门推荐
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
JSP用户注册登陆注销JSP页面
u012490096的专栏
05-25 1693
一：JSP登陆页 login.jsp：       登录页 - Java教程:http://www.javaweb.cc          用户名：    密  码：              // 用户名：admin 密码:123    String name = request.getParameter("uname");
js记住密码
scalad
04-14 843
现在很多浏览器都会提供是否记住密码的功能。当我们写登录模块是  如果是使用 form提交 则能被 浏览器识别到 但是form提交会在链接上暴露出传的参数，如果是用js做的登录   浏览器是检测不到的这样我们需要自己加上 js记住密码的功能 ，主要用到了 cookie.js，以及login.jsp，代码如下： cookie.js [javascript] view
用户注册登录系统设计要点.docx
06-20
- 密码找回：提供忘记密码的功能，可能通过邮箱或安全问题来验证用户身份。 - 账户激活：注册后发送邮件验证链接，用户点击后账户才真正激活，以防止恶意注册。 - 会话管理：使用session来跟踪已登录用户，确保...
jsp新闻发布系统.zip
06-01
找回密码：忘记密码找回密码 用户评论：发表对新闻的评论 （2）管理员管理： 系统管理： 系统账号管理：管理员管理系统现有账号，进行删除停用等操作 系统公告管理：系统公告的发布和删除 新闻栏目管理：新闻...
jsp+servlet简易购物车
01-08
3.根据注册所填写的帐号和密码进行系统登录，如忘记密码，可根据邮件动态验证码形式进行密码找回，密码采用腾讯QQ服务提供的SMTP服务器 4.进行验证码收发操作，系统进入后展示商品列表，利用c标签将db入库的数据进行...
jsp密码修改页面
05-10
就是密码修改的提示页，使用者只需简单修改即可加到自己的项目中。
找回密码（jsp）
07-30
找回密码（jsp） 很cool!
毕业论文jsp783网络在线问答系统ssh.doc
08-18
若忘记密码，系统提供了“忘记密码”功能，通过回答预设的密码提示问题找回。 三、系统主页面与功能 1. 提问：用户登录后，点击“我要提问”，填写问题详情，提交后问题将出现在主页供其他用户回答。 2. 个人中心...
java新闻发布系统.zip
最新发布
04-29
找回密码：忘记密码找回密码 用户评论：发表对新闻的评论 （2）管理员管理： 系统管理： 系统账号管理：管理员管理系统现有账号，进行删除停用等操作 系统公告管理：系统公告的发布和删除 新闻栏目管理：新闻...
java修改密码代码_java web实现 忘记密码（找回密码）功能及代码
weixin_40002238的博客
02-12 2310
java web实现 忘记密码(找回密码)功能及代码(一).总体思路(二).部分截图(三).部分代码(一).总体思路：1.在 找回密码页面 录入 姓名、邮箱和验证码，录入后点击【提交】按钮，此时发送一封邮件，邮件中带有加密后的链接。2.点开 邮件中链接，解密并判断链接是否有效，验证通过后 到 修改密码页面。3.在修改页面中 录入新密码， 点击【修改按钮】修改密码，操作完成。(二).部分截图：(三)...
网站登录密码忘记后，通过向手机发送验证码实现找回密码的实现方法
Salvador
07-11 1万+
今天我想了一天如何实现网站用户在忘记了密码后，如何通过向手机发送验证码来重新设置密码。验证码的验证以及生成都已经做好了，现在主要是解决如何向用户手机发送短信。显然这需要一个第三方提供的短信接口，来帮助我们实现向用户手机发送验证码短信。这里有一个非常好的第三方借口。连接地址：http://www.xhsms.com/jiekou.aspx。他提供了一个很好的短信接口，简单易用。下面是我自己参考写的一
Java实现邮箱找回密码功能
hongliang_0510的博客
04-20 444
忘记密码后如何通过邮箱找回，现在的系统在注册的时候都会强制输入邮箱，其一目的就是 通过邮件绑定找回，可以进行密码找回。
[JavaWeb] 登录页面记住密码,账号或密码错误
沫洺的博客
09-11 3793
登录页面优化,记住密码,提示信息,页面跳转
jsp如何实现忘记密码的功能
06-09
JSP 实现忘记密码功能的基本步骤如下： 1. 用户输入账号或邮箱：用户在忘记密码页面输入自己的账号或者邮箱地址。 2. 验证账号或邮箱：服务器端接收到输入的账号或邮箱地址后，需要进行验证，判断用户输入的账号或邮箱是否存在，如果不存在则提示用户输入错误。 3. 生成验证码：如果账号或邮箱验证通过，服务器需要为用户生成一个验证码，验证码可以通过邮件或者短信的方式发送给用户。 4. 用户输入验证码：用户在收到验证码后，需要在页面上输入验证码。 5. 验证验证码：服务器端接收到用户输入的验证码后，需要进行验证，判断验证码是否正确，如果验证码错误则提示用户重新输入。 6. 生成新密码：如果验证码验证通过，服务器需要为用户生成一个新的密码，并将新密码发送给用户。 7. 用户登录：用户收到新密码后，可以使用新密码登录系统，然后修改密码。 需要注意的是，为了保证安全性，用户密码需要进行加密存储，在生成新密码时也需要进行加密处理。另外，为了防止恶意攻击或者滥用，需要设置一些限制条件，如验证码有效期、密码生成次数限制等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值