Jsp实现登录注册和忘记与找回密码（上）

b站专栏没有代码块，专栏看起来好难看。也没有肥宅快乐背景（雾）。还因为超2w字删了好多内容。

肥宅快乐博客  aki-tomoya.coding.me       （因为coding个人版更新成企业版导致证书失效没法做到完全显示或更新。推荐csdn。等博客复原得一段时间）

csdn    https://blog.csdn.net/weixin_44543614/article/

今天博主就用一个小项目带领大家实现这个项目，让大家在实战中理解网页如何与数据库连接，如何随机生成验证码并且发送到邮箱，运用sql命令进行数据的增删改查等操作。

引导准备工作：超2w字了专栏不能写。去我的博客看吧。

下面是做成后的各种界面

网页思路为：

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

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

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

下面是文件的基本结构：

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

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

Login

  www.aki-tomoya.coding.me       Aki-Tomoya                用户账号                    账号密码                    验证码　                      登录          注册账号      忘记密码                  

    登录界面的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

"/>   www.aki-tomoya.coding.me       Aki-Tomoya              用户昵称                        注册密码                        确认密码                            注册邮箱            点击获取验证*                  验证码　                            性别            男      女            男      女                  注册    返回登录          var doc_form = document.getElementsByTagName("form")[0];    //添加监听事件    doc_form.addEventListener("submit",function(){     //当前事件的监听成功-修改的值     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();    })          

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.

下面是忘记密界面

Forget

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

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){ %>

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

  www.aki-tomoya.coding.me       Aki-Tomoya              密*重置              用户账户                        验证码　                     注册账号   返回       点击找回              

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

          www.aki-tomoya.coding.me       Aki-Tomoya              密*重置              验证邮件已经发送至邮箱。请移步至邮箱点击链接进行密码重置。       确定          

repass3.jsp（重置密码界面）

  www.aki-tomoya.coding.me       Aki-Tomoya              密*重置              用户账户                        密码                        新密码                   点击注册   返回            

下面是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代码部分啦！