• 登录界面代码实现


    登录界面代码实现

    要求

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


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

  • 相关阅读:
    JAVA 主函数(主方法)
    JAVA 什么时候使用静态
    JAVA 静态成员 static
    JAVA 构造方法之间的调用
    JAVA 构造代码块
    JAVA 构造方法
    JAVA 方法重载
    JAVA 理解封装的概念,private私有的,public公有的
    JAVA this关键字
    JAVA toString方法
  • 原文地址:https://www.cnblogs.com/a-xia/p/11401012.html
Copyright © 2020-2023  润新知