登陸界面代碼實現

時間  2020-06-03
標籤 登陸 界面 代碼 實現 简体版
原文   原文鏈接

登陸界面代碼實現

要求

  1. 一個註冊頁面（form表單，servlet） username（文本框） password：密碼（密碼框） passwordYes ：再次輸入密碼（密碼框） hobby（多選框） sex（單選框） info（文本域）
  2. servlet處理註冊信息 判斷兩次密碼是否相同 相同則跳到成功頁面，而且在成功頁面顯示SeesionID； 不一樣則註冊失敗，重定向到註冊頁面
  3. 成功頁面 顯示登錄成功的用戶名，密碼，愛好，性別和信息； 顯示一個註銷按鈕
  4. 若是註銷後，或者沒登陸，不能直接進入成功頁面，跳轉到錯誤界面

詳細步驟

  1. 首先創建web項目，建包，導相關的jar包，並關聯Tomcat。html

  2. 創建：登陸成功的success.jsp文件，登陸界面的jsp文件register.jsp，錯誤界面的jsp文件nologin.jsp，登陸錯誤的Servlet文件loginOutServlet.java，登陸Servlet文件RegisterServlet.java，並打開web.xml和index.jsp。java

  3. 編輯index.jsp文件web

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

  4. 編寫register登陸網頁session

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

  5. 編輯登陸Servlet（RegisterServlet.java）app

    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");//重定向到登錄界面
        }
    }
}

  6. 編輯成功web界面（success.jsp）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>

  7. 編輯註銷的Servlet文件（loginOutServlet.java）post

    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");
    }
}

  8. 編輯登陸信息有誤的nologin界面（nologin.jsp）ui

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

  9. 編輯web.xmlthis

    <?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文件中。另外要注意連接各個網頁時候路徑的位置，包不一樣路徑就不一樣。url

本文是簡單的登陸界面的代碼實現，更復雜的部分和思想再也不本文考慮範圍

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程