JBuilder2005實戰JSP之登入頁面

js|頁面 　　通過File-＞New...-＞Web-＞雙擊JSP表徵圖，彈出建立JSP嚮導的對話方塊，如下圖所示：

圖 3 通過嚮導建立login.jsp

　　·Web module：如果一個工程下有多個Web模組，你可以通過這兒指定JSP所要加入到的Web模組，因為我們的工程中只有一個webModule，所以是嚮導將預設設定為webModule。

　　·Name ：鍵入JSP檔案名稱，你可以鍵入.jsp尾碼，也可以不寫尾碼，直接鍵入login就可以了。

　　Generate sample bean選項勾選後JBuilder將產生一個樣本的Bean並在JSP中引入這個Bean。對於初學者來說，可以通過該選項查看JSP如何引用一個Bean，而Generate error page選項將自動為JSP建立一個配套的錯誤處理JSP檔案，這裡，我們不勾選它們。

　　直接點擊Finish建立login.jsp，login.jsp檔案出現在內容窗格的編譯器中，如下圖所示：

圖 4 嚮導建立的JSP檔案

　　JSP編譯視窗的左右兩邊都有一個可以通過 和 按鈕控制的豎欄，左側邊欄為放置JSP標籤和HTML標籤的面板，可以像可視化UI設計器中一樣用拖拽方式往JSP檔案中放置各種標籤，如上圖中，我們從面板中選擇表單的HTML標籤放置到login.jsp檔案中。

　　而右邊豎欄中是JSP檔案中當前游標所在標籤的屬性編譯器，如下圖所示：

圖 5 設定JSP標籤屬性編輯器

　　屬性編輯器是動態，游標移到不同的標籤上，屬性編輯器就顯示這個標籤所有可設定的屬性。如上圖中對應的是HTML 表單標籤的屬性編輯器，我們將其action屬性設定為switch.jsp，指定用POST方式發送請求資料。

　　我們在login.jsp中提供一個使用者名稱下拉框、一個密碼輸入框以及一個登入提交按鈕，其代碼如下：

　　代碼清單 4 login.jsp

1. ＜%@page contentType="text/html; charset=GBK" %＞ 2. ＜html＞ 3. ＜head＞ 4. ＜title＞login＜/title＞ 5. ＜/head＞ 6. ＜body bgcolor="#ffffff"＞ 7. ＜表單 name="表單1" method="post" action="switch.jsp"＞ 8. 使用者名稱： ＜select name="userId"＞ 9. ＜option value="" selected＞--登入使用者--＜/option＞ 10. ＜option value="100000"＞薑子牙＜/option＞ 11. ＜option value="100001"＞鮑叔牙＜/option＞ 12. ＜option value="100002"＞豎牙＜/option＞ 13. ＜/select＞ 14. 密 碼：＜input name="password" type="password"＞ 15. ＜input type="submit" name="Submit" value="登入"＞ 16. ＜/表單＞ 17. ＜/body＞ 18. ＜/html＞

　　表單標籤代表網頁中的一個表單，表單可以包含多個組件，這些組件的資料在網頁表單提交後，以HTTP協議發送給action屬性所指定的JSP檔案處理。表單的資料一般以POST發送，POST發送方式對資料量的大小沒有限制，且保密性更強。

　　login.jsp的效果頁面如下圖所示：

圖 6 login.jsp錄入頁面

實戰經驗： 　　JSP檔案程式碼封裝含靜態和動態兩部分，即一部分是HTML代碼，而另一部分為JSP標籤和Scriptlet代碼。JSP一般是動態邏輯的網頁，JBuilder對JSP標籤及Scriptlet這些動態代碼部分支援得非常好，你可以使用CodeInsight和TagInsight等工具快速而正確地完成編碼，同時還可以對JSP進行編譯調試。在JSP靜態HTML代碼編寫及可視化設計方面，JBuilder卻顯得力不從心，Dreamweaver在靜態代碼和可視化設計方面明顯優於JBuilder。

　　事情的複雜促進了分工，分工的精細促進了專業的發展，在編寫JSP時，並不是一旦擁有JBuilder就別無所求了。韓信善兵、蕭何善謀，如果能夠將Dreamweaver和JBuilder結合起來，用Dreamweaver開發JSP的可視化部分，用JBuilder開發JSP的動態代碼部分，兩者互補有無，相得益彰，JSP開發工作將變得更加行雲流水。

　　 將使用者列表改為動態

　　目前建立的login.jsp有一個缺陷，假設在資料庫後台T_USER表中添加其他的使用者時，因為使用者名稱下拉框是靜態代碼，新建立的使用者並不會出現在頁面中，因此有必要將使用者名稱列表改為動態代碼，用資料庫表T_USER的記錄動態產生下拉框的資料。

　　我們通過UserList.ava類來完成這個工作，在工程中建立UserList.java，其代碼如下：

　　代碼清單 5 UserList.java

1. package bookstore; 2. import java.sql.*; 3. 4. public class UserList 5. { 6. 　//擷取HTML下拉框的使用者列表代碼 7. 　public static String getUserListHTML() { 8. 　　Connection conn = null; 9. 　　StringBuffer sBuf = new StringBuffer(); 10.　　try { 11.　　　conn = DBConnection.getConnection(); 12.　　　PreparedStatement pStat = conn.prepareStatement( 13.　　　　 "select USER_ID,USER_NAME from T_USER"); 14.　　　ResultSet rs = pStat.executeQuery(); 15.　　　while (rs.next()) { 16.　　　　sBuf.append("＜option value='" + rs.getString("USER_ID") + "'＞" + 17.　　　　rs.getString("USER_NAME") + "＜/option＞\n"); 18.　　　} 19.　　　return sBuf.toString(); 20.　　} catch (SQLException ex) { 21.　　　ex.printStackTrace(); 22.　　　return ""; 23.　　} finally { 24.　　　try { 25.　　　　if (conn != null) { 26.　　　　　conn.close(); 27.　　　　　conn = null; 28.　　　　} 29.　　　} catch (SQLException ex1) { 30.　　} 31.　} 32. } 33. }

　　UserList.java只提供了一個靜態getUserListHTML()方法，這個方法從後台資料庫的T_USER表中擷取使用者記錄，並產生HTML的select組件的選項代碼，如第16~17行所示。

　　在建立這個類後，我們引用該類調整login.jsp的代碼，首先在page指令標籤中通過import屬性引用UserList類，然後將select選項中的內容調整為getUserListHTML()方法返回的值，如下圖所示：

圖 7 通過CodeInsight編寫代碼

　　通過運算式標籤替換原靜態HTML代碼，值得提起的是，在JSP中也可以象在編寫一般的Java類中一樣使用CodeInsight輸入代碼。調整後的login.jsp的代碼如下所示，用粗體表示：

　　代碼清單 6 調整後的login.jsp代碼

1. ＜%@page contentType="text/html; charset=GBK" import="bookstore.UserList"%＞ 2. ＜html＞ 3. ＜head＞ 4. ＜title＞login＜/title＞ 5. ＜/head＞ 6. ＜body bgcolor="#ffffff"＞ 7. 　＜表單 name="表單1" method="post" action="switch.jsp"＞使用者名稱： 8. 　　＜select name="userId"＞ 9. 　　　＜option value="" selected＞--登入使用者--＜/option＞ 10. 　　　＜%=UserList.getUserListHTML()%＞ 11. 　　＜/select＞ 12. 　　密 碼：＜input name="password" type="password"＞ 13. 　　＜input type="submit" name="Submit" value="登入"＞ 14. ＜/表單＞ 15. ＜/body＞ 16. ＜/html＞

　　儲存login.jsp後，在內容窗格login.jsp檔案標籤中點擊右鍵，選擇Web Run using Defaults，JBuilder 將啟動Tomcat 5.0應用伺服器，運行於8080連接埠上，編譯並運行login.jsp檔案，如下圖所示：

圖 8 在JBuilder中運行login.jsp

　　JBuilder自動切換到Web View視圖頁中，顯示頁面的運行效果。但JBuilder的瀏覽器對網頁的支援效果很弱，也不支援JavaScript指令碼。所以在運行login.jsp後，最好通過IE來查看網頁的效果，你只需要開啟IE，並將JBuilder中的訪問login.jsp的地址拷貝到IE的地址欄中就可以了，如下圖所示：

圖 9 用IE訪問JBuilder中啟動並執行login.jsp

　　此時使用者名稱的下拉框中的使用者已經是動態使用者列表中，當T_USER表中添加、刪除使用者時下拉框的使用者也會相應地改變。

　　在運行JSP前最好先單獨編譯一個這個JSP檔案：在內容窗格的JSP檔案標籤上點擊右鍵，在彈出的菜單中選擇make "xxx.jsp"，即可完成對JSP檔案的編譯，及時發現錯誤。JSP檔案和Java檔案在編輯時，最大的區別是Java程式檔案一有錯誤就會在編輯器和結構窗格中列出，但JSP檔案的有些錯誤需要通過編譯才能發現。

提示： 　　由於編譯JSP檔案需要先將其轉換為Servlet檔案，然後再編譯這個中間Servlet檔案，發生錯誤後轉定向到JSP檔案中，所以編譯一個JSP檔案是比較耗時的，往往比編譯一個Java檔案要花好幾倍的時間。在預設的情況下，編譯一個工程時，會編譯整個工程中所有的JSP，需要消耗大量的時間。所以最好取消在編譯工程連帶編譯JSP檔案的設定：通過Project-＞Project Properties...-＞Build-＞ 在Build設定頁中取消Check JSPs for errors at build-time選項。在確實需要的時候再勾選這個選項，並在編譯後及時取消這個選項。通過這樣的設定將可以為你的開發贏得不少寶貴的時間。