登錄界面代碼實現
要求
- 一個注冊頁面（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文件中。另外要注意鏈接各個網頁時候路徑的位置，包不同路徑就不同。
本文是簡單的登錄界面的代碼實現，更復雜的部分和思想不再本文考慮范圍