1. 程式人生 > >jsp+servlet實現簡單登入頁面功能Demo

jsp+servlet實現簡單登入頁面功能Demo

小白新路歷程-1          [轉載請聯絡本人]

實現功能:

模擬簡單登入功能,登入成功跳轉新頁面,登入失敗在原登入介面提示登入失敗資訊

開發環境:

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檔案,可以通過下面程式碼觀察到,登入頁面的表單的提交的ation屬性值,填寫的就是在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>
留言Message:本人小白,以上僅個人學習心得,歡迎評論區dd,有錯誤歡迎指出,互相學習,感謝~