|
4.5.1 登錄頁面login.jsp
首先我們來新建一個(gè)登錄頁面login.jsp。Eclipse為我們提供了新建JSP頁面的快捷向?qū)В瑔螕舨藛巍綟ile'JSP】，選擇新建JSP頁面，則顯示如圖4-4所示的窗口。
 |
| 圖4-4 新建JSP頁面 |
在該窗口中包含三個(gè)選項(xiàng)，默認(rèn)我們只需要修改第二個(gè)選項(xiàng)，即填寫你要?jiǎng)?chuàng)建的文件名。這里我們填寫"login.jsp"，單擊【完成】按鈕完成新建，此時(shí)在項(xiàng)目demo的WebContent目錄下就會(huì)出現(xiàn)該文件的圖標(biāo)。雙擊打開該文件，其代碼包含如下幾個(gè)部分：
①第1行是JSP頁面的固定語句，使用Page指令設(shè)置頁面語言為java、導(dǎo)入Java包java.util.*、設(shè)置頁面編碼為UTF-8；
②通過request對象取得當(dāng)前文件的上下文路徑path，并通過request對象取得協(xié)議、主機(jī)名、端口，將這四個(gè)變量組合起來形成一個(gè)URL的路徑；
③設(shè)置HTML的head信息，將取得的URL路徑設(shè)置到<base>標(biāo)簽中，這樣當(dāng)前頁面就擁有了訪問路徑的屬性。并設(shè)置HTML頁面的標(biāo)題元素title、元信息meta，以及CSS引用文件。這里的CSS引用使用HTML的注釋<!--…-->給注釋掉了，在后面的開發(fā)中我們會(huì)添加一個(gè)CSS文件，將會(huì)去掉這里的注釋；
④設(shè)置HTML的Body信息，即添加頁面的主題內(nèi)容。
該文件是使用Eclipse向?qū)?chuàng)建的默認(rèn)JSP文件，這里的代碼也是固定的，因此在后文的代碼講解中，將不再重復(fù)粘貼類似的代碼。最終的代碼如程序4-3所示。
程序4-3 登錄頁面login.jsp - <%@ page language="java" import="java.util.*"
pageEncoding="UTF-8"%> - <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()+path+"/"; - %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
-
- <title>My JSP 'login.jsp' starting page</title>
-
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="
keyword1,keyword2,keyword3"> - <meta http-equiv="description" content="This is my page">
-
- <!--
- <link rel="stylesheet" type="text/css" href="styles.css">
- -->
- </head>
-
- <body>
- This is my JSP page. <br>
- </body>
- </html>
登錄頁面的作用是讓用戶進(jìn)行登錄，根據(jù)需求設(shè)計(jì)中該頁面的設(shè)計(jì)可知，需要添加兩個(gè)表單項(xiàng)，分別是用戶名和密碼，并需要提供一個(gè)登錄按鈕和一個(gè)引入到注冊頁面register.jsp的鏈接。這部分的代碼如程序4-4所示。
程序4-4 登錄頁面login.jsp的表單
- <form name="form1" action="login_action.jsp" method="post">
- <table width="200" border="1">
- <tr>
- <td colspan="2">登錄窗口</td>
- <tr>
- <td>用戶名</td>
- <td><input type="text" name="username" size="10"></td>
- </tr>
- <tr>
- <td>密碼</td>
- <td><input type="password" name="password" size="10"></td>
- </tr>
- <tr>
- <td colspan="2"><input type="submit"
name="submit" value="登錄"> <a href="register.
jsp">注冊新用戶</a></td> - </tr>
- </table>
- </form>
其中的表單元素action屬性為login_action.jsp，表示響應(yīng)的頁面。該頁面的顯示效果如圖4-5所示。
 |
| 圖4-5 登錄頁面效果圖 |
【責(zé)任編輯： 云霞 TEL：（010）68476606】
|
