快捷導(dǎo)航

JSP實現(xiàn)簡單的登錄和注冊界面詳細(xì)全過程

更新時間：2024年04月27日 11:43:26 作者："wxzk

用戶注冊是指用戶在網(wǎng)站上創(chuàng)建新的賬號,而用戶登錄是指已注冊的用戶通過輸入正確的賬號和密碼進(jìn)入自己的賬號,下面這篇文章主要給大家介紹了關(guān)于JSP實現(xiàn)簡單的登錄和注冊界面的相關(guān)資料,需要的朋友可以參考下

1、login.jsp

login.jsp中username和password在LoginSelect.jsp驗證是否一致
使用session.setAttribute("login_msg","用戶名或密碼為空")設(shè)置login_msg的值
使用session.getAttribute("login_msg")獲取對象的值，判斷輸入框是否為空，如果為空，則提示用戶名或密碼為空。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登錄界面</title>
</head>
<body>

<div align="center">
    <h1>歡迎登錄</h1>
    <form action="LoginSelect.jsp" method="post" id="form">
        <p>用戶名:&nbsp<input id="username" name="username" type="text">&nbsp&nbsp</p>
        <p>密碼:&nbsp<input id="password" name="password" type="password"></p>
            <input type="submit" class="button" value="登錄" onclick="">
            <button><a href="register.jsp" rel="external nofollow" >注冊</a></button>
    </form>
    <div id="errorMsg" value="null"><%=session.getAttribute("login_msg")%></div>
</div>

<script>
    if(document.getElementById("errorMsg").innerText==="null"||document.getElementById("errorMsg").innerText===""){
        document.getElementById("errorMsg").setAttribute('style',"display:none")

    } else {
        document.getElementById("errorMsg").setAttribute('style',"display:block")
    }
</script>

</body>
</html>

2、 loginSelect.jsp

利用Map集合存儲賬戶和密碼信息，模擬數(shù)據(jù)庫
map.put("20201234","123456")設(shè)置初始數(shù)據(jù)
map.put(username,session.getAttribute(username).toString())這里是將注冊的賬戶和密碼添加到數(shù)據(jù)庫中，username為鍵，session.getAttribute(username).toString()為值，兩者都為字符串類型

<%@ page import="java.util.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>判斷登錄界面</title>
</head>
<body>

<%!
     Map<String,String> map = new HashMap<String,String>();
     public boolean compare(String username,String password){
         String pwd = map.get(username);
         if(pwd!=null&&password.equals(pwd)){
             return true;
         }
         else{
             return false;
         }
     }
%>
<%
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    //設(shè)置初始值
    map.put("20201234","123456");
    //注冊后的值存入map集合
    if (session.getAttribute(username)!=null){
        map.put(username,session.getAttribute(username).toString());
    }

    System.out.println(map);
    //判斷輸入內(nèi)容是否正確,給出提示信息
    if (username==null||username =="" || password==null || password==""){
        session.setAttribute("login_msg","用戶名或密碼為空");
        response.sendRedirect("login.jsp");
        return;
    }
    boolean compare = compare(username, password);
    if (compare){
        session.setAttribute("username",username);
        session.setAttribute("password",password);
        response.sendRedirect("index.jsp");
    }
    else {
        session.setAttribute("login_msg","用戶名或密碼錯誤或用戶名不存在");
        response.sendRedirect("login.jsp");
    }
%>
</body>
</html>

3、register.jsp

register.jsp中username和password在RegisterSelect.jsp驗證是否一致
使用session.setAttribute("register_msg","用戶名或密碼為空")設(shè)置register_msg的值
使用session.getAttribute("register_msg")獲取對象的值，判斷輸入框是否為空，如果為空，則提示用戶名或密碼為空。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>注冊界面</title>
</head>

  <div align="center">
    <h1>歡迎注冊</h1>
  <form action="RegisterSelect.jsp" method="post">
    <table>
      <tr>
        <td>用戶名</td>
        <td>
          <input name="username" type="text" id="username">
          <br>
        </td>
      </tr>
      <tr>
        <td>密碼</td>
        <td>
          <input name="password" type="password" id="password">
          <br>
        </td>
      </tr>
    </table>
      <input value="注 冊" type="submit" id="reg_btn"><br>
    <span>已有帳號？</span> <a href="login.jsp" rel="external nofollow"  rel="external nofollow" >登錄</a>
  </form>
    <span id="register_msg" class="err_msg" ><%=session.getAttribute("register_msg")%></span>
  </div>
</body>
</div>
<script>
  if(document.getElementById("register_msg").innerText==="null"||document.getElementById("register_msg").innerText===""){
    document.getElementById("register_msg").setAttribute('style',"display:none")

  } else {
    document.getElementById("register_msg").setAttribute('style',"display:block")
  }
</script>
</html>

4、 RegisterSelect.jsp

if else語句，if 判斷賬戶或密碼為空則提示"用戶或密碼為空"，else 使用session.setAttribute(username,password) 創(chuàng)建對象存儲新的賬戶和密碼信息。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    session.setAttribute("register_msg","null");

    if (username==null||username =="" || password==null || password==""){
        session.setAttribute("register_msg","用戶名或密碼為空");
        response.sendRedirect("register.jsp");
        return;
    }
    else {
        session.setAttribute(username,password);
        response.sendRedirect("login.jsp");
    }
%>
<html>
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

5、 index.jsp

session.getAttribute("username")動態(tài)獲取賬戶名稱

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登錄成功</title>
</head>
<body>
<div align="center">
    <h1>JSP管理系統(tǒng)</h1>
<h1><%=session.getAttribute("username")%> 歡迎您!</h1>
<a href="login.jsp" rel="external nofollow"  rel="external nofollow" >退出登錄</a>
</div>
</body>
</html>