登录界面代码实现
要求
- 一个注册页面(form表单,servlet)
username(文本框)
password:密码(密码框)
passwordYes :再次输入密码(密码框)
hobby(多选框)
sex(单选框)
info(文本域) - servlet处理注册信息
判断两次密码是否相同
相同则跳到成功页面,并且在成功页面显示SeesionID;
不同则注册失败,重定向到注册页面 - 成功页面
显示登陆成功的用户名,密码,爱好,性别和信息;
显示一个注销按钮 - 如果注销后,或者没登录,不能直接进入成功页面,跳转到错误界面
详细步骤
-
首先建立web项目,建包,导相关的jar包,并关联Tomcat。
-
建立:登录成功的success.jsp文件,登录界面的jsp文件register.jsp,错误界面的jsp文件nologin.jsp,登录错误的Servlet文件loginOutServlet.java,登录Servlet文件RegisterServlet.java,并打开web.xml和index.jsp。
-
编辑index.jsp文件
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/7/16 Time: 8:54 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>主界面</title> <style> div{ margin: 0 auto; text-align: center; } </style> </head> <body> <div> <h1>HomeWork</h1> <hr> <a href="${pageContext.request.contextPath}/register.jsp">点击注册</a> </div> </body> </html>
-
编写register登录网页
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/7/16 Time: 10:15 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>register</title> <%--如果两次密码不相同,关联RegisterServlet中if判断密码是否正确中的else--%> <script> var status = '${sessionScope.passwordError}'; if (status == "yes") { alert("输入信息有误,请重新输入") } </script> </head> <body> <h1>欢迎来到注册界面</h1> <hr> <%--分割线--%> <div> <%--form表单--%> <form action="${pageContext.request.contextPath}/register.do" method="post"> <p>用户名:<input type="text" name="username" required></p> <p>密码:<input type="password" name="password" required></p> <p>密码确认:<input type="password" name="confirmPassword" required></p> <p>性别: <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 </p> <p>爱好: <input type="checkbox" name="hobby" value="oppositeSex">异性 <input type="checkbox" name="hobby" value="dance">舞蹈 <input type="checkbox" name="hobby" value="music">音乐 <input type="checkbox" name="hobby" value="movies">电影 </p> <p>个人简介: <textarea name="info"></textarea> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p> </form> </div> </body> </html>
-
编辑登录Servlet(RegisterServlet.java)
package com.li.work; import javax.servlet.http.HttpSession; import java.io.IOException; import java.util.Arrays; public class RegisterServlet extends javax.servlet.http.HttpServlet { protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { doGet(request, response); } protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { request.setCharacterEncoding("UTF-8");//处理乱码问题 response.setCharacterEncoding("UTF-8");//处理乱码问题 //获得用户在register界面提交的数据 String username = request.getParameter("username"); String password = request.getParameter("password"); String confirmPassword = request.getParameter("confirmPassword"); String gender = request.getParameter("gender"); String info = request.getParameter("info"); String[] hobbies = request.getParameterValues("hobby"); //判断密码是否正确 if (password.equals(confirmPassword)){//如果密码相同,重定向到成功界面 HttpSession session = request.getSession();//获取session session.setAttribute("session_username",username); session.setAttribute("session_password",password); session.setAttribute("session_gender",gender); session.setAttribute("session_info",info); session.setAttribute("session_hobby", Arrays.toString(hobbies)); response.sendRedirect("success.jsp");//重定向到成功页面 }else {//如果密码不同,通知用户密码输入不一样 request.getSession().setAttribute("passwordError","yes"); response.sendRedirect("register.jsp");//重定向到登陆界面 } } }
-
编辑成功web界面(success.jsp)
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/7/16 Time: 10:12 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>success</title> <style> h1{ margin: 0 auto; text-align: center; } p>span{ font-weight: bold; } </style> <% HttpSession loginSession = request.getSession(); if (loginSession.getAttribute("session_username")==null){//如果session中的用户名为空 request.getRequestDispatcher("errorpage/nologin.jsp").forward(request,response);//转发至nologin(注册有误)界面 } %> </head> <body> <h1>注册成功</h1> <!--显示用户信息,显示内容从RegisterServlet.java中的session中获得--> <p> 欢迎用户:<span>${sessionScope.session_username}</span>加入本项目<br> 用户名:<span>${sessionScope.session_username}</span><br> 密码:<span>${sessionScope.session_password}</span><br> 性别:<span>${sessionScope.session_gender}</span><br> 爱好:<span>${sessionScope.session_hobby}</span><br> 个人简介:<span>${sessionScope.session_info}</span><br> </p> <!--添加注销按钮,用a标签跳转到loginOutServlet中的loginOut.do--> <p> <a href="${pageContext.request.contextPath}/loginOut.do">注销</a> </p> </body> </html>
-
编辑注销的Servlet文件(loginOutServlet.java)
package com.li.work; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; @WebServlet(name = "loginOutServlet") public class loginOutServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { HttpSession session = request.getSession();//获取session if (session==null){ response.sendRedirect("index.jsp"); return; } //注销session,移除session中的数据 session.removeAttribute("session_username"); session.removeAttribute("session_password"); session.removeAttribute("session_gender"); session.removeAttribute("session_info"); session.removeAttribute("session_hobby"); //删除数据后跳转至success界面 response.sendRedirect("success.jsp"); } }
-
编辑登录信息有误的nologin界面(nologin.jsp)
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/7/16 Time: 10:14 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>NoLoginPage</title> <style> div{ margin: 0 auto; text-align: center; } </style> </head> <body> <div> <h1>找不到信息,未注册或已注销,请点击登录!</h1> <hr> <a href="${pageContext.request.contextPath}/register.jsp">点击注册</a> </div> </body> </html>
-
编辑web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>RegisterServlet</servlet-name> <servlet-class>com.li.work.RegisterServlet</servlet-class> </servlet> <servlet> <servlet-name>loginServlet</servlet-name> <servlet-class>com.li.work.loginOutServlet</servlet-class> </servlet> <!--========================================================================--> <servlet-mapping> <servlet-name>RegisterServlet</servlet-name> <url-pattern>/register.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>loginServlet</servlet-name> <url-pattern>/loginOut.do</url-pattern> </servlet-mapping> </web-app>
要重点搞清楚文件和文件之间的关系和关联,具体方法可以用倒推法,一点一点从网页寻找会Servlet的.java文件中。另外要注意链接各个网页时候路径的位置,包不同路径就不同。
本文是简单的登录界面的代码实现,更复杂的部分和思想不再本文考虑范围