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

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

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

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

www.baidu.com

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

下面是做成后的各种界面





网页思路为：

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

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

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

下面是文件的基本结构：


那么，下面跟随博主一起实现它吧！推荐先把基础的几个界面的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" >点击获取验证												


											

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

    
								
  1. Android 实战项目 -- 登录主页、找回密码
		
    分析 登录方式 用户名与密码组合登录 手机号与验证码组合登录 以上登录方式的区别 密码输入框和验证码输入框的左侧标题以及输入框内部的提示语各不相同 如果是密码登录,则需要支持找回密码:如果是验证码登录 ...
    
		
    2. 
						
  2. JSP连数据库登录检查用户名和密码模板
		
    JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动态网页技术 ...
    
		
    3. 
						
  3. 企业邮箱怎么注册账号？忘记邮箱密码怎么修改密码？
		
    企业邮箱怎么注册账号?一个专业体面的邮箱,可以帮助你在收件人心中树立一个不错的个人品牌形象,比如TOM企业邮箱:而你的邮件也因此受到更多的关注,客户沟通上也更加通畅.随着即时通讯的发展,像微信.QQ以 ...
    
		
    4. 
						
  4. Android基于Bmob后端云实现注册、登陆、找回密码、短信验证码
		
    注重版权,转载请注明原作者和原文链接 作者:Bald programmer 文章目录 整体功能展示 创建应用 配置Bmob 前期准备 一.数据表 二.工具类 代码设计 一.注册模块 二.登陆模块 三. ...
    
		
    5. 
						
  5. Windows 能够使用PIN码登录，忘记开机密码，如何强制修改密码
		
    1. 以管理员身份运行 Windows PowerShell 2. 输入以下命令即可强制修改密码,只适用于能使用PIN码开机但是忘记开机密码的情况,如果PC不能解锁,不能使用该方法强制修改密码 net ...
    
		
    6. 
						
  6. vue登录页实现记住密码的操作
		
    实现记住密码的操作,如下图所示 html部分 <el-form-item style="margin-top:-10px;margin-bottom:-5px;" >& ...
    
		
    7. 
						
  7. app登录时用QQ或者微信授权登录，及找回密码功能
		
    前部分是QQ授权登录的,想看微信授权的直接跳下面 1.个人希望做到的饿效果效果如优酷的授权登录,但前提是你的应用必须在应用市场上架之后才可以做授权登录的操作 参照 :http://blog.csdn. ...
    
		
    8. 
						
  8. 极域卸载、忘记密码及找回密码----骚操作
		
    mythware_super_password 所有极域都通杀的超级密码,在密码栏输入就能看见当前密码,进而进行卸载等操作!!! PS: 不懂操作的留言后我会尽快恢复
    
		
    9. 
						
  9. vue登录页面实现记住密码的操作
		
    首先看一下思路 思路: ①点击登录按钮→调用接口→如果调用成功,判断是否选择记住密码→如果选择记住密码,则把用户名与密码存到cookie中,否则清除cookie ②点击返回登录页→在登录页create ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. Redis创建高可用集群教程【Windows环境】
		
    2. 
						
  2. 力扣高频算法php_互联网公司最常见的面试算法题有哪些？
		
    3. 
						
  3. ＜马哲＞劳动价值论的理论及实践意义
		
    4. 
						
  4. java 加密word_Java 加密和解密Excel文档
		
    5. 
						
  5. ATLAS数学库编译
		
    6. 
						
  6. 深度学习弯道超车，领先行业不止一点点
		
    7. 
						
  7. 信息学奥赛一本通（1007：计算(a+b)×c的值）
		
    8. 
						
  8. Linux常用命令小结（一）
		
    9. 
						
  9. selenium中，运行测试用例，报NosuchElementException错误，用try --except 捕获异常
		
    10. 
						
  10. matlab曲线图导出,从Matlab的Figure中导出数据的办法
		
    11. 
						
  11. python-26-字典：当索引不好用时
		
    12. 
						
  12. UnicodeEncodeError: 'gbk' codec can't encode character '\uXXX' in position
		
    13. 
						
  13. iPhone,iPad如何获取WIFI名称即SSID
		
    14. 
						
  14. 【阿里云】1.阿里云大数据产品体系
		
    15. 
						
  15. 如何低成本搭建dnslog服务器
		
    16. 
						
  16. CondaHTTPError: HTTP 000 CONNECTION FAILED for url ＜https://mirror.tuna.tsinghua.edu.cn/anaconda/pkg
		
    17. 
						
  17. 网络摄像机（ip camera)安装设置步骤
		
    18. 
						
  18. 一次性搞懂dBSPL、dBm、dBu、dBV、dBFS的区别！
		
    19. 
						
  19. Android——仿京东淘宝分类页面
		
    20. 
						
  20. JAVA快速开发平台-之大型项目快速开发
		
    21. 
		

	


热门文章
	

    
									
  1. 端午节，我们失去的太多了
			
    2. 
						
  2. LCD-QC1602A v2.0
			
    3. 
						
  3. ERROR Exiting Kafka due to fatal exception (kafka.Kafka$)[已解决]
			
    4. 
						
  4. SPI DMA 通信配置
			
    5. 
						
  5. Win 10 亮度调节选项消失
			
    6. 
						
  6. 盘点那些与动植物有关的姓氏，鼠、蛇、蒲、枣、桂...都是姓氏
			
    7. 
						
  7. 网文快搜——职业生涯
			
    8. 
						
  8. 利用pytorch 做一个简单的神经网络实现sklearn库中莺尾花的分类
			
    9. 
						
  9. 数据新时代     认知DMA基金会
			
    10. 
						
  10. 《那些年啊，那些事——一个程序员的奋斗史》——25
			
    11.