登录界面代码实现

登录界面代码实现

要求

  1. 一个注册页面（form表单，servlet）
    username（文本框）
    password：密码（密码框）
    passwordYes ：再次输入密码（密码框）
    hobby（多选框）
    sex（单选框）
    info（文本域）
  2. servlet处理注册信息
    判断两次密码是否相同
    相同则跳到成功页面，并且在成功页面显示SeesionID；
    不同则注册失败，重定向到注册页面
  3. 成功页面
    显示登陆成功的用户名，密码，爱好，性别和信息；
    显示一个注销按钮
  4. 如果注销后，或者没登录，不能直接进入成功页面，跳转到错误界面

详细步骤

  1. 首先建立web项目，建包，导相关的jar包，并关联Tomcat。

  2. 建立：登录成功的success.jsp文件，登录界面的jsp文件register.jsp，错误界面的jsp文件nologin.jsp，登录错误的Servlet文件loginOutServlet.java，登录Servlet文件RegisterServlet.java，并打开web.xml和index.jsp。

  3. 编辑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>

  4. 编写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>

  5. 编辑登录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");//重定向到登陆界面
        }
    }
}

  6. 编辑成功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>

  7. 编辑注销的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");
    }
}

  8. 编辑登录信息有误的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>

  9. 编辑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文件中。另外要注意链接各个网页时候路径的位置，包不同路径就不同。

本文是简单的登录界面的代码实现，更复杂的部分和思想不再本文考虑范围

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/a-xia/p/11401012.html