JBuilder2005實戰JSP之登入頁面

來源:互聯網
上載者:User
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選項。在確實需要的時候再勾選這個選項,並在編譯後及時取消這個選項。通過這樣的設定將可以為你的開發贏得不少寶貴的時間。


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.