jsp+servlet實現簡單登錄頁面功能(附demo)

Posted on by

實現功能：

模擬簡單登錄功能，登錄成功跳轉新頁面，登錄失敗在原登錄界面提示登錄失敗信息

開發環境：

  • eclipse
  • Tomcat-8.0

預備知識：

HTML標簽，Servlet相關知識——請求的轉發與重定向，jsp相關知識，EL表達式

思路實現：共2個jsp,一個servlet

 1.登錄界面login.jsp：

采用jsp，不采用html的原因是因為要進行登錄失敗信息回顯（當然如果用html結合ajax也可以實現，這裡采用jsp更方便）

如圖：

2.登錄成功界面hello.jsp：

歡迎信息+登錄的用戶名

如圖：

3.登錄失敗信息回顯Login.jsp：

如圖：

思路簡述：

    問題1：jsp頁面如何與一個java類進行連接綁定起來？

                簡單的說，一個jsp頁面要跟一個servlet進行連接，需要有一個橋梁，這個橋梁就是web.xml文件，可以通過下面代碼觀察到，登錄頁面的表單的提交的action屬性值，填寫的就是在web.xml文件裡對應的servlet-mapping中的url-pattern的值，而這個值又對應瞭一個servlet-name，servlet-name則對應到一個servlet-class，這樣就把jsp和java類（servlet類）進行瞭關聯。
其實我覺得最明顯的就是提交表單後，url地址變化瞭，通過這個url地址將表單信息傳給瞭對應的java類。

    問題2：實現的整體的思路是怎麼樣的？

                一個jsp頁面通過表單元素，將用戶信息通過url的形式提交給一個已經在web.xml配置映射好的servlet類，servlet類接收到傳來的表單信息，進行值校驗（為瞭方便起見則直接定義用戶名密碼瞭，正常情況下是要采用jdbc進行從數據庫中取出值進行校驗的），然後對校驗結果進行判斷，如果賬戶密碼正確，則跳轉到登錄成功的頁面（采用重定向），如果失敗，則將登錄失敗的提示信息存到request域對象中並返回登錄界面顯示出來（采用請求的轉發）

簡單的聯系：

jsp頁面<———->web.xml<———>servlet類

    問題3：在servlet中要如何獲取jsp中提交過來的表單信息呢？

                request.getParameter(“userName”);//userName是表單中，input標簽中name屬性的值，接收到的是string類型

    問題4：登錄頁面如何在登錄失敗的時候給出提示信息呢？

                實現思路是如果登錄失敗，則往request域對象中存入登錄失敗的提示信息，然後通過請求的轉發的方式跳轉回登錄頁面並顯示，所以登錄界面要嵌入一段腳本代碼，用來判斷當前是否有登錄失敗提示信息的對象，如果有則將該對象保存的信息打印出來，如果沒有則什麼都不顯示。

1）如果賬密不匹配，則往request域中存入message對象，該message中保存瞭提示信息：request.setAttribute(“message”, “賬密錯誤，請重新登錄<br>”)；

並轉發到登錄頁面：request.getRequestDispatcher(“/loginDemo/login.jsp”).forward(request, response);

2）在登錄頁面獲取該對象：（因為登錄失敗的時候才有該對象，疑問：那如果我登錄失敗後再訪問登錄頁面，那不應該會顯示錯誤信息嗎？答案是否定的。可瞭解request域對象生命周期相關知識）

               <%
                       if(request.getAttribute("message")!= null){
        out.print(request.getAttribute("message")); 
               }
                %>

     問題5：request.getAttribute()和request.getParameter()區別是：

                前者獲取的是一個object對象，後者獲取的是一個string字符串，所以前者使用的時候可能會碰到需要做一些類型轉換的情況。

     問題6：表單訪問路徑填寫問題

                在ation屬性，或者請求的轉發，重定向，一般采用絕對路徑，可以避免路徑訪問出錯，訪問資源不存在等問題。

                jsp表達式：<%=request.getContextPath()%>或者用EL表達式：${ pageContext.request.contextPath }可以獲取當前web應用根目錄路徑，不妨試試輸出打印下，就可以觀察值是多少瞭。

具體代碼Code：

1.login.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>標題</title>
<style type="text/css">
	*{margin: 0;padding: 0;}
	form{margin: 0 auto;padding:15px; width: 300px;height:300px;text-align: center;}
	#submit{padding: 10px}
	#submit input{width: 50px;height: 24px;}
</style>
</head>
<body>
	<div class="wrapper">
		<form action="<%=request.getContextPath()%>/loginDemo" method="post">
			<label>用戶名:</label>
				<input type="text" name="userName" value="${param.userName}"/><br><br>
			<label>密碼：</label>
				<input type="password" name="password"/><br>
				
			<font color="red">
				<%
					if(request.getAttribute("message")!= null){
						out.print(request.getAttribute("message"));
					}
				%>
			</font>
			
			<div id="submit">
				<input type="submit" value="登錄"/>
			</div>
		</form>
	</div>
</body>
</html>

2.hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>標題</title>
</head>
<body>
	Hello:<br>
	<font color="green" size="22">
		<%
			out.print(request.getParameter("userName")+"<br>");
		%>
	</font>
	<a href="<%=request.getContextPath()%>/loginDemo/login.jsp">重新登錄</a>
</body>
</html>

3.對應的LoginServlet.java

package loginDemo;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class LoginServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		System.err.println(userName+";"+password);
		String myUser = "Dong";
		String myPwd = "5432100";
		if(userName.equals(myUser)&&password.equals(myPwd)) {
			response.sendRedirect(request.getContextPath()+"/loginDemo/hello.jsp?userName="+userName);
		}else {
			request.setAttribute("message", "賬密錯誤，請重新登錄<br>");
			request.getRequestDispatcher("/loginDemo/login.jsp").forward(request, response);
		}
		
	}
}

4.對應的web.xml的配置(註冊)與映射

  <servlet>
      <servlet-name>logindemo</servlet-name>
      <servlet-class>loginDemo.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>logindemo</servlet-name>
      <url-pattern>/loginDemo</url-pattern>
  </servlet-mapping>

到此這篇關於jsp+servlet實現簡單登錄頁面功能(附demo)的文章就介紹到這瞭,更多相關jsp+servlet登錄頁面內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：