JBuilder2005實戰JSP之登入頁面(2)

作者：Eve Cole 更新時間：2009-07-02 17:10:51

透過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選項。在確實需要的時候再勾選這個選項，並在編譯後及時取消這個選項。透過這樣的設定將可以為你的開發贏得不少寶貴的時間。