教學(xué)課件-Java-Web程序設(shè)計(jì)基礎(chǔ)教程(李緒成)

第1章構(gòu)建JavaWeb應(yīng)用

1.1Web應(yīng)用概述

1.2流行的Web應(yīng)用開發(fā)技術(shù)

1.3Web應(yīng)用的常用功能

1.4JavaWeb應(yīng)用的核心技術(shù)

1.5Web應(yīng)用的文檔結(jié)構(gòu)

1.6Web應(yīng)用的運(yùn)行環(huán)境及其搭建

1.7創(chuàng)建Web應(yīng)用

1.8JSP的運(yùn)行原理

1.9網(wǎng)上書店的基本功能

小結(jié)

習(xí)題1實(shí)訓(xùn)1：創(chuàng)建Web應(yīng)用

1.1Web

應(yīng)

用

概

述

1.1.1什么是Web應(yīng)用

我們通過瀏覽器可以訪問新浪網(wǎng)、中華網(wǎng)、淘寶網(wǎng)、網(wǎng)易網(wǎng)、搜狐網(wǎng)以及微軟和Sun公司的網(wǎng)站等，這些就是Web應(yīng)用。對(duì)于Web應(yīng)用，我們需要使用瀏覽器，通過網(wǎng)絡(luò)，訪問在遠(yuǎn)程的服務(wù)器上運(yùn)行的程序。Web應(yīng)用指的就是這些網(wǎng)站中的程序。

一個(gè)網(wǎng)站由大量的頁面組成，每個(gè)頁面通常由一個(gè)文件組成，也可能由多個(gè)文件組成。組成一個(gè)網(wǎng)站的大量文件之間通過特定的方式進(jìn)行鏈接，并且存在一個(gè)系統(tǒng)來管理這些文件。管理這些文件的系統(tǒng)通常稱為應(yīng)用服務(wù)器，它的主要作用就是管理這些文件。

1.1.2Web應(yīng)用是如何運(yùn)行的

許多讀者都上過網(wǎng)，應(yīng)該對(duì)上網(wǎng)的過程比較熟悉，上網(wǎng)的一般過程如下：

●打開瀏覽器。

●輸入某個(gè)網(wǎng)址。

●經(jīng)過一段時(shí)間的等待，瀏覽器顯示要訪問的信息。

然后可以在網(wǎng)頁上繼續(xù)進(jìn)行其他操作，可能的操作如下：

●在網(wǎng)頁上點(diǎn)擊超級(jí)鏈接，訪問我們希望訪問的內(nèi)容，等待瀏覽器中內(nèi)容的再次更新。

●在網(wǎng)頁上輸入一些信息，然后點(diǎn)擊按鈕，等待瀏覽器中內(nèi)容的再次更新。

不管是在地址欄輸入地址，還是點(diǎn)擊超級(jí)鏈接或者點(diǎn)擊按鈕，都需要等待瀏覽器中內(nèi)容的更新。等待瀏覽器內(nèi)容更新的過程，實(shí)際上是瀏覽器訪問Web應(yīng)用的過程。這個(gè)過程如下：

●瀏覽器根據(jù)我們輸入的地址找到相應(yīng)的服務(wù)器，不同的網(wǎng)站對(duì)應(yīng)不同的服務(wù)器。這個(gè)服務(wù)器通常稱為Web服務(wù)器，可以接收瀏覽器發(fā)送的請(qǐng)求。

●?Web服務(wù)器把這個(gè)請(qǐng)求交給相應(yīng)的文件管理器，這個(gè)文件管理器也是一個(gè)服務(wù)器，通常稱為應(yīng)用服務(wù)器。

●應(yīng)用服務(wù)器接收到請(qǐng)求之后，查找相應(yīng)的文件，加載并執(zhí)行這個(gè)文件。執(zhí)行的結(jié)果通常是HTML文檔。

●應(yīng)用服務(wù)器把執(zhí)行的結(jié)果返回給Web服務(wù)器，Web服務(wù)器再把這個(gè)結(jié)果返回給瀏覽器。

●瀏覽器解析HTML文檔，然后把解析后的網(wǎng)頁顯示給用戶。

1.文件

文件是網(wǎng)站中最主要的部分，各個(gè)不同的網(wǎng)站之間的差別主要是因?yàn)樗鼈兪怯刹煌奈募M成的，而不同的文件可以完成不同的功能。這些文件主要是由網(wǎng)站創(chuàng)建人員編寫的。本書的大部分內(nèi)容就是介紹如何編寫這些文件。

對(duì)于這些文件的訪問，可以有很多種方式。可以在地址欄中輸入地址進(jìn)行訪問，可以通過點(diǎn)擊超鏈接進(jìn)行訪問，還可以通過點(diǎn)擊按鈕進(jìn)行訪問。通過輸入地址進(jìn)行訪問的方式?jīng)]有其他兩種方式方便，通常僅僅是在第一次訪問這個(gè)網(wǎng)站的第一個(gè)頁面時(shí)才使用。如果不需要提交信息，則通常使用超鏈接的方式；如果要提交信息，則使用按鈕的形式。

2.程序的運(yùn)行支持：應(yīng)用服務(wù)器、瀏覽器、Web服務(wù)器

編寫好的文件并不能獨(dú)立運(yùn)行，而是需要在應(yīng)用服務(wù)器中運(yùn)行，即必須有應(yīng)用服務(wù)器的支持。應(yīng)用服務(wù)器負(fù)責(zé)查找、加載、執(zhí)行文件。要訪問這些文件，需要通過瀏覽器，所以要訪問Web應(yīng)用必須有瀏覽器。瀏覽器與應(yīng)用服務(wù)器之間的交互是通過Web服務(wù)器完成的，Web服務(wù)器接收瀏覽器發(fā)送的請(qǐng)求，并把請(qǐng)求轉(zhuǎn)發(fā)給應(yīng)用服務(wù)器，再把應(yīng)用服務(wù)器執(zhí)行的結(jié)果發(fā)送給瀏覽器。通常情況下，應(yīng)用服務(wù)器和Web服務(wù)器是集成在一起的。要開發(fā)和運(yùn)行Web應(yīng)用，我們需要搭建這些環(huán)境。

3.用戶

Web應(yīng)用的用戶就是訪問網(wǎng)站的人。訪問網(wǎng)站的人可能是各種各樣的人，他們?cè)谠L問Web應(yīng)用的時(shí)候是不需要培訓(xùn)的，所以在開發(fā)Web應(yīng)用的時(shí)候應(yīng)該時(shí)刻想著這個(gè)問題，不能認(rèn)為用戶什么都可以做，會(huì)按照我們的想法做。我們應(yīng)該多為用戶著想，多從用戶的角度思考，編寫的程序應(yīng)該盡量方便用戶的操作，盡量降低用戶在操作過程中出現(xiàn)錯(cuò)誤的概率。

4.部署人員

編寫好的應(yīng)用要部署到應(yīng)用服務(wù)器上才能運(yùn)行，這個(gè)部署過程有時(shí)由編寫人員來完成，有時(shí)需要專門的人員來完成。部署人員應(yīng)該對(duì)服務(wù)器非常熟悉。

學(xué)習(xí)本課程的目標(biāo)就是能夠編寫一個(gè)完整的網(wǎng)站所涉及的所有文件，并能夠把這些文件部署到服務(wù)器上，之后能夠通過客戶端對(duì)其進(jìn)行訪問。在實(shí)際應(yīng)用中，網(wǎng)站位于單獨(dú)的服務(wù)器上，客戶通過不同的客戶端對(duì)網(wǎng)站進(jìn)行訪問。在學(xué)習(xí)的過程中，我們的電腦既作為服務(wù)器也作為客戶端。

1.2流行的Web應(yīng)用開發(fā)技術(shù)

上網(wǎng)的時(shí)候，在地址欄中經(jīng)常會(huì)看到文件的名字，后面有后綴名，通常根據(jù)后綴名可以知道網(wǎng)站是采用什么技術(shù)完成的。

當(dāng)瀏覽Sun公司網(wǎng)站的時(shí)候，經(jīng)?？吹降刂窓谥形募暮缶Y是.jsp。圖1.1所示的界面是其中的一個(gè)頁面，地址是/javase/index.jsp，這個(gè)地址是Java標(biāo)準(zhǔn)版技術(shù)的首頁，說明使用的是JSP技術(shù)。

圖1.1JSP技術(shù)網(wǎng)頁實(shí)例

CSDN是一個(gè)大型的程序員交流的網(wǎng)站，經(jīng)常會(huì)看到網(wǎng)頁的后綴名是.aspx。圖1.2所示的界面是一個(gè)blog，地址是/javaeeteacher，這是作者的blog。當(dāng)查看里面的文章時(shí)會(huì)發(fā)現(xiàn)，文件的后綴名是.aspx，說明使用的是ASP.NET技術(shù)。

圖1.2?ASP.NET技術(shù)網(wǎng)頁實(shí)例

圖1.3所示的界面是sohu新聞網(wǎng)頁的首頁，地址是。當(dāng)瀏覽里面的網(wǎng)頁時(shí)會(huì)發(fā)現(xiàn)，多數(shù)網(wǎng)頁的后綴名是.php，說明該網(wǎng)站采用的技術(shù)是PHP；也有一些網(wǎng)頁的后綴名是.jsp，說明sohu網(wǎng)站的某些模塊采用的是JSP技術(shù)。

圖1.3PHP技術(shù)網(wǎng)頁實(shí)例

當(dāng)然有時(shí)候并不能從網(wǎng)頁的后綴名看出網(wǎng)站所使用的技術(shù)，例如對(duì)于大家非常熟悉的sina網(wǎng)，在訪問該網(wǎng)站的過程中就很少能夠看到文件的后綴名。

上面給出了3個(gè)采用不同技術(shù)實(shí)現(xiàn)的網(wǎng)站的例子，它們分別采用的是JSP、ASP.NET和PHP技術(shù)。實(shí)際上這3種技術(shù)也是目前流行的Web應(yīng)用開發(fā)技術(shù)。

JSP是Sun公司的標(biāo)準(zhǔn)，有多個(gè)公司參與和支持，包括IBM、Oracle、BEA等公司，還有一些社團(tuán)，包括著名的Apache組織。JSP主要采用Java技術(shù)完成。

1.3Web應(yīng)用的常用功能

1.信息展示

信息展示是網(wǎng)站必不可少的功能，不管您上過什么樣的網(wǎng)站，多數(shù)時(shí)候都是在瀏覽上面的信息，這也是多數(shù)網(wǎng)站最主要的功能。對(duì)于普通的用戶，使用Web應(yīng)用的主要目的也是查看信息?？梢哉J(rèn)為展示信息是Web應(yīng)用的輸出功能。對(duì)于靜態(tài)網(wǎng)站(信息基本上不發(fā)生變化)來說，展示信息幾乎就是網(wǎng)站的全部功能。

2.信息查詢

在網(wǎng)站信息量非常大的時(shí)候，通過瀏覽來獲取想要的信息將非常困難。網(wǎng)站必須提供功能強(qiáng)大的查詢來方便用戶的操作。查詢的方式可以有很多：可以根據(jù)關(guān)鍵字查詢，例如根據(jù)用戶名、根據(jù)產(chǎn)品編號(hào)等；可以根據(jù)日期查詢或者日期范圍查詢，例如在某個(gè)時(shí)間之前，或者在某個(gè)時(shí)間區(qū)間；可以組合查詢，根據(jù)多個(gè)條件查詢；可以進(jìn)行模糊查詢，只要包含所提供的關(guān)鍵字就可以查詢到。

3.信息輸入

大部分動(dòng)態(tài)網(wǎng)站的信息是動(dòng)態(tài)變化的，需要不斷更新，需要向系統(tǒng)添加新的信息。例如，一個(gè)新聞網(wǎng)站，每天都要添加新聞。

信息的添加可以采用多種方式：

●用戶選擇，例如性別等信息。

●用戶輸入，例如姓名、生日等。

●用戶上傳，例如文本文件、圖片文件和聲音文件等。

4.信息更新

信息更新包括信息的修改和刪除，多數(shù)網(wǎng)站在運(yùn)行的過程中，都需要對(duì)信息進(jìn)行更新。修改功能需要把原來的信息用新的信息替換。刪除功能用于刪除不再需要的信息。

5.信息處理

網(wǎng)站必須對(duì)用戶的各種要求進(jìn)行處理。用戶需要查詢信息，網(wǎng)站就需要根據(jù)用戶的要求查詢。如果用戶需要計(jì)算某個(gè)信息，網(wǎng)站就需要完成計(jì)算過程。

具體信息處理的過程和內(nèi)容是由網(wǎng)站的功能決定的。例如，銀行的交易系統(tǒng)需要進(jìn)行的各種處理主要是跟銀行各種業(yè)務(wù)相關(guān)的處理。再例如，飛機(jī)票預(yù)訂系統(tǒng)主要完成與飛機(jī)票預(yù)訂相關(guān)的處理。

6.信息存儲(chǔ)

各種網(wǎng)站都涉及大量的信息，這些信息必須進(jìn)行存儲(chǔ)。通常使用數(shù)據(jù)庫存儲(chǔ)，在很特殊的情況下可能會(huì)使用文件。從本質(zhì)上來說，二者沒有太大的區(qū)別。

在Web應(yīng)用中信息存儲(chǔ)是必不可少的部分，并且目前多數(shù)網(wǎng)站的主要功能基本上都是圍繞所存儲(chǔ)的信息而設(shè)置的。在未來的發(fā)展趨勢中，Web應(yīng)用中的信息存儲(chǔ)將更加重要。

1.4JavaWeb應(yīng)用的核心技術(shù)

JavaWeb應(yīng)用的核心技術(shù)包括以下幾個(gè)方面：

●?JSP：進(jìn)行輸入和輸出的基本手段。

●?JavaBean：完成功能的處理。

●?Servlet：對(duì)應(yīng)用的流程進(jìn)行控制。

●?JDBC：是與數(shù)據(jù)庫進(jìn)行交互不可缺少的技術(shù)。

●?JSTL和表達(dá)式語言EL：完成對(duì)JSP頁面中各種信息的控制和輸出。

JSP主要完成輸入和輸出的功能，主要是由HTML代碼、客戶端腳本(JavaScript等)、JSP的標(biāo)簽和指令、自定義標(biāo)簽庫構(gòu)成。下面是一個(gè)典型的JSP的例子：

指令<%@pagecontentType="text/html;charset=gb2312"%><%@taglibprefix="c"uri="/jsp/jstl/core"prefix="c"%>指令

用戶信息如下：

JavaBean完成系統(tǒng)的所有處理功能。JavaBean就是Java中的普通的Java類，所以沒有特殊的地方。另外，JavaWeb技術(shù)中提供了多個(gè)與JavaBean操作相關(guān)的標(biāo)簽。

Servlet技術(shù)可以完成與JSP相同的功能，但是其表現(xiàn)形式與JSP不同。JSP以腳本文件的形式存在，而Servlet則以Java文件的形式存在。所以Servlet也是Java類，是特殊的Java類，在JavaWeb技術(shù)中主要完成控制功能，負(fù)責(zé)協(xié)調(diào)JSP頁面和完成功能的JavaBean之間的關(guān)系。下面是一個(gè)典型的Servlet的例子：

//獲取用戶輸入的用戶ID和口令獲取JSP頁面信息Stringuserid=request.getParameter("userid");Stringuserpass=request.getPrameter("userpass");主要方法

//獲取用戶輸入的用戶ID和口令

Stringuserid=request.getParameter(“userid”);

Stringuserpass=request.getPrameter(“userpass”);

//創(chuàng)建模型對(duì)象

調(diào)用JavaBeanUserBeanuser=newUserBean();

//調(diào)用業(yè)務(wù)方法進(jìn)行驗(yàn)證

booleanb=user.validate(userid,userpass);

//要轉(zhuǎn)向的文件

Stringforward;

if(b)

forward="success.jsp";

else

forward="failure.jsp";獲取JSP頁面信息調(diào)用JavaBean選擇響應(yīng)用戶的界面

RequestDispatcherdispatcher

=request.getRequestDispatcher(forward);

dispatcher.forward(request,response);

}

}

與數(shù)據(jù)庫的交互幾乎是所有JavaWeb應(yīng)用不可缺少的，并且可能要與各種類型的數(shù)據(jù)庫管理系統(tǒng)打交道。這些數(shù)據(jù)庫管理系統(tǒng)現(xiàn)在多數(shù)都是關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。Java中提供了JDBC技術(shù)來完成Java應(yīng)用與各種數(shù)據(jù)庫系統(tǒng)之間的交互。雖然JDBC不屬于JavaWeb技術(shù)，但是在JavaWeb中不可避免地要使用JDBC。所以JDBC也算是JavaWeb開發(fā)中比較重要的技術(shù)之一。

對(duì)用戶響應(yīng)

JSTL和表達(dá)式語言是在JSP2.0之后引入的，主要目的是為了方便用戶在JSP頁面中使用常用功能。其典型的應(yīng)用是信息的輸出，因?yàn)镴SP界面的主要功能就是展示信息，使用表達(dá)式語言使得信息的顯示非常簡單。例如在上面的JSP代碼中的${user.userid}，完成的功能是從request(后面的章節(jié)會(huì)介紹)中獲取user對(duì)象的userid屬性。如果使用Java代碼，就沒有這么簡單了。另外，JSTL中提供了大量常用的功能，例如選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，在上面的JSP例子中就使用了<c:forEach>標(biāo)簽完成循環(huán)控制。

1.5Web應(yīng)用的文檔結(jié)構(gòu)

Web應(yīng)用中包含大量的文件，有JSP文件、HTML文件、圖片文件、Java文件、配置文件和其他的類庫，這些文件必須按照一定的結(jié)構(gòu)組織。

每個(gè)Web應(yīng)用都有一個(gè)根目錄，通常這個(gè)根目錄就是這個(gè)應(yīng)用的名字。假設(shè)這個(gè)根目錄為bookstore。

可以把JSP文件、HTML文件和圖片文件等與界面相關(guān)的文件直接放在根目錄下。但是為了便于管理，通常會(huì)把文件進(jìn)行分類。一般把Web應(yīng)用分成若干個(gè)模塊，把與每個(gè)模塊相關(guān)的文件放在一個(gè)目錄中。假設(shè)該Web應(yīng)用包括用戶管理、圖書管理和訂單管理，則可以在bookstore下分別創(chuàng)建usermanagement、bookmanagement和ordermanagement子目錄，然后把與每個(gè)模塊相關(guān)的文件放在對(duì)應(yīng)子目錄中。

Web應(yīng)用中可能會(huì)存在大量的圖片，為了便于管理，通常會(huì)在根目錄中創(chuàng)建一個(gè)子目錄來保存所有的圖片，這個(gè)子目錄可以命名為images。

在Web應(yīng)用的各個(gè)模塊中可能會(huì)用到一些公用的文件，例如頁面的導(dǎo)航欄、版權(quán)信息、出錯(cuò)頁面等?？梢詣?chuàng)建common子目錄存放這些共享文件。

另外，在Web應(yīng)用中有一個(gè)比較特殊的子目錄WEB-INF，其他的子目錄不能使用這個(gè)名字，放在這個(gè)目錄中的文件不能通過瀏覽器訪問，主要供服務(wù)器使用。在WEB-INF目錄下，包括兩個(gè)子目錄和一個(gè)配置文件web.xml。兩個(gè)子目錄分別是classes和lib，前者用于存放所有與網(wǎng)站相關(guān)的Java文件，后者用于存放以壓縮包.jar形式存在的Java文件。web.xml是每個(gè)Web應(yīng)用都必須有的，是Web應(yīng)用的配置文件。

圖1.4Web應(yīng)用的文檔結(jié)構(gòu)

+bookstore+bookmanagement+usermanagement+ordermanagement+images+common+WEB-INF+classes+libweb.xml 1.6Web應(yīng)用的運(yùn)行環(huán)境及其搭建

1.6.1運(yùn)行環(huán)境

根據(jù)上一節(jié)對(duì)Web應(yīng)用運(yùn)行過程的描述，我們知道Web應(yīng)用的運(yùn)行需要Web服務(wù)器和應(yīng)用服務(wù)器。另外對(duì)于JavaWeb應(yīng)用來說，應(yīng)用服務(wù)器在管理JSP程序的過程中需要編譯Java源文件、加載Java文件、執(zhí)行Java文件，需要JDK和JRE的支持。所以JavaWeb應(yīng)用需要以下運(yùn)行環(huán)境：

●?Web服務(wù)器。

●應(yīng)用服務(wù)器。

●?JDK。

●?JRE。

應(yīng)用服務(wù)器廠商通常會(huì)把Web服務(wù)器集成到其中，所以在安裝應(yīng)用服務(wù)器的時(shí)候通常都包含Web服務(wù)器。當(dāng)然也可以單獨(dú)選擇和安裝Web服務(wù)器。如果單獨(dú)安裝服務(wù)器，則需要進(jìn)行配置。

關(guān)于JavaWeb應(yīng)用的應(yīng)用服務(wù)器很多，有些是商業(yè)的，有些是免費(fèi)的，對(duì)于我們學(xué)習(xí)來說，沒有本質(zhì)區(qū)別。本書選擇Apache基金組織的Tomcat。

多數(shù)操作系統(tǒng)在安裝的時(shí)候都帶有JRE，但是也有一些操作系統(tǒng)不帶JRE，如果沒有JRE，則需要單獨(dú)安裝。

接下來，介紹如下環(huán)境的安裝：

●?Sun公司的JDK。

●?Apache公司的Tomcat。

1.6.2安裝JDK

1.獲取JDK

本書使用的JDK

2.安裝JDK和JRE

直接雙擊JDK文件即可安裝。

首先出現(xiàn)的是許可證協(xié)議界面，如圖1.5所示。圖1.6是選擇JDK安裝路徑，使用默認(rèn)安裝路徑：C:\ProgramFiles\Java\jdk1.6.0。圖1.7是JDK的安裝過程。圖1.8是選擇JRE安裝路徑，使用默認(rèn)安裝路徑：C:\ProgramFiles\Java\jre1.6.0。圖1.9是JRE的安裝過程。圖1.10表示安裝完成。

圖1.5JDK安裝第一步

圖1.6JDK安裝第二步

圖1.7JDK安裝第三步

圖1.8JDK安裝第四步

圖1.9JRE的安裝

圖1.10安裝完成

3.配置環(huán)境變量

在桌面圖標(biāo)【我的電腦】上點(diǎn)擊右鍵，選擇【屬性】，在彈出的【系統(tǒng)屬性】窗口中選擇【高級(jí)】選項(xiàng)卡中的【環(huán)境變量】，彈出如圖1.11所示界面。

圖1.11選擇Path進(jìn)行配置

如果在系統(tǒng)變量中已經(jīng)存在“Path”變量，則修改該變量的值，點(diǎn)擊【編輯】進(jìn)入如圖1.12所示界面。

圖1.12配置環(huán)境變量

在【變量值】對(duì)應(yīng)的輸入框中原有信息的前面添加如下路徑：“C:\ProgramFiles\Java\jdk1.6.0\bin;”。

注意：最后的分號(hào)不能省略。

如果在系統(tǒng)變量中不存在“Path”變量，則創(chuàng)建“Path”變量。選擇【新建】，也可進(jìn)入如圖1.12所示界面。

在【變量名】對(duì)應(yīng)的輸入框中輸入“Path”，在【變量值】對(duì)應(yīng)的輸入框中輸入“C:\ProgramFiles\Java\jdk1.6.0\bin;”。

4.測試JDK

在【開始】菜單中選擇【運(yùn)行】，輸入“cmd”，進(jìn)入命令行界面，然后輸入“javac”，如果出現(xiàn)如圖1.13所示的界面，則表示環(huán)境配置成功。

圖1.13測試環(huán)境變量的配置

1.6.3安裝Tomcat服務(wù)器

本書使用的Tomcat的版本是6.0.9，下載地址是/download-60.cgi，下載后的文件名為apache-tomcat-6.0.9.exe。

雙擊進(jìn)行安裝，進(jìn)入安裝界面，如圖1.14所示。

圖1.14安裝的初始界面

圖1.15安裝的許可協(xié)議

點(diǎn)擊【IAgree】，進(jìn)入Tomcat的安裝內(nèi)容選擇界面，如圖1.16所示。

圖1.16選擇安裝的內(nèi)容

選擇要安裝的內(nèi)容，這里全部選擇即可，然后點(diǎn)擊【Next>】，進(jìn)入安裝目錄選擇界面，如圖1.17所示。

圖1.17選擇安裝的路徑

輸入要安裝的位置或者使用【Browse…】選擇要安裝的位置，也可以使用默認(rèn)值，然后點(diǎn)擊【Next>】，進(jìn)入端口設(shè)置和管理員設(shè)置界面，如圖1.18所示。

圖1.18服務(wù)器的監(jiān)聽端口

圖1.18中，最上面是Web服務(wù)的端口，默認(rèn)值是8080，在編寫程序的時(shí)候需要根據(jù)這個(gè)端口進(jìn)行訪問，也可以使用其他的端口，但是不能與系統(tǒng)定義的端口沖突。

下面的兩個(gè)輸入框是管理員登錄時(shí)的用戶名和口令，管理員的用戶名默認(rèn)值是admin，口令可以為空。如果設(shè)置了管理員口令，則必須記住。完成端口的設(shè)置以及管理員的設(shè)置之后點(diǎn)擊【Next>】，進(jìn)入JRE選擇界面，如圖1.19所示。

圖1.19選擇JRE選擇已經(jīng)安裝的JRE，之后選擇【Install】進(jìn)入安裝過程，安裝過程如圖1.20所示。

圖1.20JRE的安裝過程

安裝完成之后將出現(xiàn)如圖1.21所示的界面。

圖1.21安裝完成

1.7創(chuàng)建Web應(yīng)用

1.7.1創(chuàng)建Web應(yīng)用

每個(gè)Web應(yīng)用都對(duì)應(yīng)一個(gè)根目錄，該應(yīng)用相關(guān)的文件都在這個(gè)目錄下。通常，根目錄的名字就是應(yīng)用的名字。在本書中，把應(yīng)用的名字確定為bookstore。

服務(wù)器必須能夠找到應(yīng)用的根目錄才可以運(yùn)行這個(gè)Web應(yīng)用，也就是通常所說的需要把應(yīng)用部署到服務(wù)器上。有兩種方式可以完成部署。第一種方式可以通過配置文件完成，即通過管理工具，在配置文件中進(jìn)行配置。另一種方式是讓服務(wù)器自動(dòng)加載，這樣Web應(yīng)用開發(fā)人員的工作就簡單了。為了能夠讓服務(wù)器自動(dòng)加載應(yīng)用，需要把應(yīng)用放在特定的目錄下。在Tomcat中可以把應(yīng)用放在Tomcat目錄下的webapps下面。

1.7.2創(chuàng)建WEB-INF文件夾

每個(gè)Web應(yīng)用都包含一個(gè)WEB-INF文件夾，存放一些比較特殊的文件。該文件夾下存放的文件通常在客戶端不能直接訪問。

在WEB-INF目錄下主要有如下幾類文件：

●配置文件，常見的有xml文件、tld文件、properties文件(屬性文件)。

●類文件，如系統(tǒng)用到的外部類庫或者自己編寫的類文件。

1.7.3創(chuàng)建web.xml文檔

每個(gè)Web應(yīng)用都應(yīng)該對(duì)應(yīng)一個(gè)web.xml文檔，web.xml文檔位于WEB-INF文件夾中。這個(gè)文檔用于描述Web應(yīng)用的配置信息。

xml版本這個(gè)文檔通常不需要手工來寫，因?yàn)橐环矫嫒菀壮鲥e(cuò)，另一方面比較費(fèi)時(shí)間。如果采用集成開發(fā)環(huán)境，則集成開發(fā)環(huán)境會(huì)自動(dòng)生成這個(gè)文件。如果手工創(chuàng)建Web應(yīng)用，則可以從其他的Web應(yīng)用中拷貝一個(gè)，然后進(jìn)行修改。修改成下面的樣子即可：

1.7.4創(chuàng)建classes文件夾

classes文件夾位于WEB-INF文件夾中，與這個(gè)Web應(yīng)用相關(guān)的所有的類文件都應(yīng)該放在這個(gè)文件夾下。

注意：類放在classes文件夾中的時(shí)候，需要?jiǎng)?chuàng)建與相關(guān)的包對(duì)應(yīng)的文件夾。

例如，有一個(gè)類DBBean，所在的包是beans，則應(yīng)該按照下面的方式存放文件：

WEB-INF/classes/beans/DBBean.class

有的Web應(yīng)用會(huì)使用屬性文件(properties文件)保存一些配置信息，這些屬性文件也需要放在classes文件夾中。如果有多個(gè)屬性文件，那么也可以根據(jù)屬性文件的類別分別為屬性文件創(chuàng)建子文件夾，就像為類創(chuàng)建包一樣。

1.7.5創(chuàng)建lib文件夾

lib文件夾位于WEB-INF文件夾中，lib文件夾也是用于存放類文件的，只是這些文件都是以壓縮包的形式存在的。如果類文件不是以壓縮包的形式存在，則應(yīng)該放在classes文件夾中。

當(dāng)在Web應(yīng)用中使用外部一些功能的時(shí)候，這些功能通常都是以壓縮包.jar文件的形式存在的。這些壓縮包應(yīng)該放在lib目錄下。

1.7.6創(chuàng)建歡迎界面

每個(gè)網(wǎng)站都是由大量的文件組成的，但是不管訪問什么網(wǎng)站，用戶都很少輸入文件的名字，因?yàn)橥ǔＲ膊恢谰W(wǎng)站上文件的名字。網(wǎng)站一般都會(huì)有一個(gè)歡迎界面，當(dāng)用戶訪問一個(gè)網(wǎng)站的時(shí)候，最先看到的就是歡迎界面。圖1.22圖1.22sina的歡迎界面

通常歡迎界面的名字是index.html、index.htm或者index.jsp。如果希望為Web應(yīng)用配置默認(rèn)歡迎界面，則可以在web.xml配置文件中添加如下代碼：

<welcome-file-list>

<welcome-file>

index.jsp

</welcome-file>

</welcome-file-list>創(chuàng)建Web應(yīng)用的過程實(shí)際上是創(chuàng)建大量的JSP文件的過程。JSP文件的后綴名通常是.jsp，如果不包含Java代碼，僅僅是普通的html文件，則可以使用.htm或者.html。

文件中的代碼主要是由html代碼、嵌入的Java腳本以及大量的JSP語句構(gòu)成的。從功能上來說，文件主要包括兩部分內(nèi)容：要顯示的信息本身以及顯示信息所采用的格式。通常html代碼用于控制要顯示的信息的格式，Java代碼和JSP代碼用于控制顯示什么信息。創(chuàng)建文件的過程實(shí)際上也包含兩個(gè)過程：首先根據(jù)要顯示的信息確定頁面的格式，確定格式之后采用JSP代碼和Java代碼控制要顯示的內(nèi)容。

圖1.23創(chuàng)建好的Web應(yīng)用

網(wǎng)上書店的歡迎界面的代碼如下：

<%@pagepageEncoding="gbk"%>

<html>

<head>

<title>歡迎光臨網(wǎng)上書店</title>

</head>

<body>

歡迎光臨網(wǎng)上書店

</body>

</html>

創(chuàng)建好的Web應(yīng)用的目錄結(jié)構(gòu)如圖1.23所示。

1.7.7啟動(dòng)服務(wù)器

在訪問JSP程序之前，必須先啟動(dòng)服務(wù)器。啟動(dòng)服務(wù)器的過程如下：【開始】→【ApacheTomcat6.0】→【ConfigureTomcat】，彈出如圖1.24所示的界面。

圖1.24啟動(dòng)服務(wù)器——Windows方式

在這個(gè)界面中，點(diǎn)擊【Start】按鈕啟動(dòng)服務(wù)器。

提示：可以直接在文件目錄中啟動(dòng)服務(wù)器，即通過Tomcat安裝目錄的子目錄bin中的Tomat6.exe或者Tomcat6w.exe啟動(dòng)。后者啟動(dòng)的效果與圖1.24所示效果相同。Tomcat6.exe的啟動(dòng)效果如圖1.25所示。

圖1.25啟動(dòng)服務(wù)器——DOS窗口方式

1.7.8訪問JSP程序

訪問JSP程序的時(shí)候，需要提供以下幾個(gè)信息：

●協(xié)議，通常是http。

●主機(jī)，服務(wù)器的IP地址或者名字。對(duì)于本地應(yīng)用可以使用本地虛擬地址，也可以使用真實(shí)地址。localhost是本地虛擬主機(jī)的名字，是本地虛擬主機(jī)的IP地址。

●端口，默認(rèn)是80，使用tomcat開發(fā)的時(shí)候默認(rèn)是8080。

●?Web應(yīng)用，每個(gè)Web應(yīng)用都對(duì)應(yīng)一個(gè)路徑，默認(rèn)的路徑名與Web應(yīng)用文件夾名相同。本實(shí)例中應(yīng)用的名字是bookstore。

●文件，必須指出要訪問的文件名。本實(shí)例中的文件名是index.jsp。

要訪問上面的歡迎界面，必須打開瀏覽器并輸入地址，地址可以有多種寫法：

http://localhost:8080/bookstore/index.jsp

:8080/bookstore/index.jsp

:8080/bookstore/index.jsp

http://lixucheng:8080/bookstore/index.jsp前兩種表示虛擬本地主機(jī)，后兩種分別是IP地址和主機(jī)名。在實(shí)際應(yīng)用中主要根據(jù)域名訪問。

如果設(shè)置了歡迎界面，則后面的文件名可以省略，例如第一種地址可以寫成下面的

樣子：

http://localhost:8080/bookstore

1.8JSP的運(yùn)行原理

那么JSP在服務(wù)器端是如何運(yùn)行的呢？

首先，JSP文件需要轉(zhuǎn)換成Java類。在訪問JSP文件的時(shí)候，并不直接執(zhí)行JSP文件，而是執(zhí)行JSP文件對(duì)應(yīng)的Java類(class文件)的對(duì)象，這個(gè)Java文件是服務(wù)器根據(jù)我們提供的JSP文件創(chuàng)建的。在Tomcat安裝目錄下的work目錄中有JSP文件轉(zhuǎn)換成的Java文件。

其次，并不是每次訪問JSP文件都會(huì)將JSP文件轉(zhuǎn)換成Java文件。只有第一次訪問JSP文件的時(shí)候需要把JSP文件轉(zhuǎn)換成Java文件，在后續(xù)的訪問過程中，只要查找到這個(gè)JSP文件對(duì)應(yīng)的Java文件即可。所以，第一次訪問JSP文件的時(shí)候可能會(huì)比較慢，后續(xù)訪問就正常了。

最后，要訪問某個(gè)JSP文件，得到的并不是JSP文件的內(nèi)容，而是JSP文件的執(zhí)行結(jié)果，就是上面所說的JSP文件對(duì)應(yīng)的Java類的執(zhí)行結(jié)果。這個(gè)結(jié)果通常是JSP文件的輸出內(nèi)容，為HTML形式。

綜上所述，JSP文件的運(yùn)行過程可以描述如下：

(1)服務(wù)器端接收到請(qǐng)求信息之后，查找JSP文件對(duì)應(yīng)的Java文件，如果Java文件不存在，則把JSP文件轉(zhuǎn)換成Java文件，如果對(duì)應(yīng)的Java文件已經(jīng)存在，則直接調(diào)用這個(gè)Java文件。

(2)執(zhí)行Java文件。

(3)把執(zhí)行的結(jié)果返回給客戶端。

JSP的運(yùn)行原理如圖1.26所示。

圖1.26JSP的運(yùn)行原理

1.9網(wǎng)上書店的基本功能

網(wǎng)上書店主要完成網(wǎng)上圖書信息的管理，用戶信息的管理，普通用戶查看、選擇圖書并生成訂單，管理員對(duì)訂單進(jìn)行處理。這里面還包括普通用戶的登錄和注冊(cè)功能等。

圖書信息管理包括圖書信息的添加、刪除、修改、查詢功能等。這些功能只有管理員才能使用。

用戶信息的管理包括用戶信息的添加、刪除、修改和查詢功能等。這些功能只有管理員才能使用。

購物車管理功能是供普通用戶使用的。普通用戶在瀏覽圖書的過程中，如果對(duì)某種書感興趣，則可以選擇這本書并下訂單來購買這些書。

小

結(jié)

對(duì)于Web應(yīng)用，需要把應(yīng)用程序部署到應(yīng)用服務(wù)器上。所以在開發(fā)Web應(yīng)用之前，必須選擇好應(yīng)用服務(wù)器并安裝對(duì)應(yīng)的程序。

對(duì)于Web應(yīng)用，需要通過瀏覽器進(jìn)行訪問，使用HTTP協(xié)議。

Web應(yīng)用必須按照一定的文檔結(jié)構(gòu)組織文件。每個(gè)Web應(yīng)用都有一個(gè)WEB-INF目錄，每個(gè)Web應(yīng)用中都必須有一個(gè)web.xml文檔位于WEB-INF目錄中。如果有Java類文件，則應(yīng)該在WEB-INF目錄中創(chuàng)建classes目錄存放。如果有jar文件，則應(yīng)該在WEB-INF目錄中創(chuàng)建lib目錄存放。

必須把Web應(yīng)用部署到服務(wù)器上才可以運(yùn)行，如果把應(yīng)用放在Tomcat的webapps目錄中，服務(wù)器會(huì)自動(dòng)部署這個(gè)應(yīng)用。

Web應(yīng)用部署到服務(wù)器上之后，需要啟動(dòng)服務(wù)器，然后才可以訪問JSP程序。

訪問JSP程序的時(shí)候，需要給出協(xié)議、服務(wù)器、端口、應(yīng)用的名字和文件的名字等信息，例如:8080/myweb/test.jsp。

習(xí)

題

1

1.什么是Web應(yīng)用？

2.Web應(yīng)用解決的主要問題有哪些？

3.現(xiàn)在流行的Web開發(fā)技術(shù)有哪些？

4.JavaWeb開發(fā)的主要技術(shù)有哪些？

5.要開發(fā)JavaWeb應(yīng)用需要準(zhǔn)備什么環(huán)境？

6.要?jiǎng)?chuàng)建一個(gè)JavaWeb應(yīng)用需要?jiǎng)?chuàng)建哪些文件夾和文件？它們之間的關(guān)系如何？如何組織它們？

7.要想讓服務(wù)器自動(dòng)加載JavaWeb應(yīng)用，該Web應(yīng)用應(yīng)該放在什么地方？

實(shí)訓(xùn)1：創(chuàng)建Web應(yīng)用

1.實(shí)訓(xùn)目的

掌握如何搭建JavaWeb應(yīng)用的運(yùn)行環(huán)境，包括JDK和Tomcat的安裝；

掌握如何搭建一個(gè)JavaWeb應(yīng)用；

掌握如何啟動(dòng)和關(guān)閉服務(wù)器；

掌握如何訪問一個(gè)Web應(yīng)用。

2.實(shí)訓(xùn)內(nèi)容

(1)下載JDK并安裝JDK。安裝過程可以參見前面的內(nèi)容。

(2)下載Tomcat并安裝Tomcat。安裝過程可以參見前面的內(nèi)容。

(3)創(chuàng)建自己的網(wǎng)上書店：

●在webapps下面創(chuàng)建應(yīng)用文件夾bookstore；

●創(chuàng)建WEB-INF文件夾；

●創(chuàng)建web.xml文件；

●創(chuàng)建classes文件夾；

●創(chuàng)建lib文件夾；

●創(chuàng)建歡迎界面index.jsp。

(4)測試程序：

●啟動(dòng)服務(wù)器；

●訪問index.jsp文件。

第2章輸入

2.1用戶注冊(cè)界面

2.2常用表單元素

2.3使用form元素

2.4對(duì)輸入信息進(jìn)行驗(yàn)證

2.5設(shè)置頁面的編碼方式

小結(jié)

習(xí)題2實(shí)訓(xùn)2：圖書信息

2.1用戶注冊(cè)界面

2.1.1功能描述

使用網(wǎng)上書店的普通用戶在下訂單的時(shí)候都需要進(jìn)行注冊(cè)，注冊(cè)的目的是為了網(wǎng)站能夠了解用戶信息，并方便對(duì)用戶進(jìn)行管理。

注冊(cè)功能主要是提供用戶個(gè)人的信息，個(gè)人信息包括：用戶ID、用戶名、口令、生日、學(xué)歷、地區(qū)、E-mail、地址、電話和備注。對(duì)用戶提供的信息會(huì)有一些要求，具體如表2.1所示。表2.1用戶注冊(cè)信息表

2.1.2運(yùn)行效果

用戶首先進(jìn)入注冊(cè)界面，如圖2.1圖2.1注冊(cè)界面圖2.2驗(yàn)證錯(cuò)誤提示信息

2.1.3源代碼

<%@pagecontentType="text/html;charset=gb2312"%>

<scriptlanguage="JavaScript">

functionisValidate(form)

{

//得到用戶輸入的信息

userid=form.userid.value;

username=form.username.value;

userpass=form.userpass.value;

userpass2=form.userpass2.value;

birthday=form.birthday.value;

email=form.email.value;

address=form.address.value;

phone=form.phone.value;

//判斷用戶ID長度

if(!minLength(userid,6))

{

alert("用戶ID長度小于6位！");

form.userid.focus();

returnfalse;

}

if(!maxLength(userid,8))

{

alert("用戶ID長度大于8位！");

form.userid.focus();

returnfalse;

}

//判斷用戶名長度

if(!minLength(username,2))

{

alert("用戶名長度小于2位！");

form.username.focus();

returnfalse;

}

if(!maxLength(username,10))

{

alert("用戶名長度大于10位！");

form.username.focus();

returnfalse;

}

//判斷口令長度

if(!minLength(userpass,6))

{

alert("口令長度小于6位！");

form.userpass.focus();

returnfalse;

}

if(!maxLength(userpass,8))

{

alert("口令長度大于8位！");

form.userpass.focus();

returnfalse;

}

//判斷用戶ID和口令是否相同

if(userid==userpass)

{

alert("用戶ID和口令不能相等！");

form.userpass.focus();

returnfalse;

}

//驗(yàn)證兩次口令是否相同

if(userpass!=userpass2)

{

alert("兩次輸入的口令不相同！");

form.userpass.focus();

returnfalse;

}

//驗(yàn)證生日的格式是否正確

if(!isDate(birthday))

{

alert("生日的格式不正確！");

form.birthday.focus();

returnfalse;

}

//驗(yàn)證E-mail的格式是否正確

if(!isEmail(email))

{

alert("E-mail格式不正確！");

form.email.focus();

returnfalse;

}

//驗(yàn)證電話號(hào)碼的格式是否正確

if(!isDigital(phone))

{

alert("電話號(hào)碼的格式不正確");

form.phone.focus();

returnfalse;

}

//驗(yàn)證地址的長度是否正確

if(!maxLength(address,50))

{

alert("地址長度大于50位！");

form.address.focus();

returnfalse;

}

returntrue;

}

//驗(yàn)證是否是空

functionisNull(str)

{

if(str.length==0)

returntrue;

else

returnfalse;

}

//驗(yàn)證是否滿足最小長度

functionminLength(str,length)

{

if(str.length>=length)

returntrue;

else

returnfalse;

}

//判斷是否滿足最大長度

functionmaxLength(str,length)

{

if(str.length<=length)

returntrue;

else

returnfalse;

}

//判斷是否是數(shù)字

functionisDigital(str)

{

for(i=0;i<str.length;i++)

{

//允許使用連字符

if(str.charAt(i)>='0'&&str.charAt(i)<='9'

||str.charAt(i)=='-'&&i!=0&&i!=str.length-1)

continue;

else

returnfalse;

}

returntrue;

}

//判斷是否是整數(shù)

functionisNumber(str)

{

for(i=0;i<str.length;i++)

{

//每一位都是0～9的數(shù)字，如果是第1位，則可以是“-”號(hào)

if(str.charAt(i)>='0'&&str.charAt(i)<='9'

||str.charAt(i)=='-'&&i==0)

continue;

else

returnfalse;

}

returntrue;

}

//判斷是否是日期，日期的格式為1988-1-1

functionisDate(date)

{

//查找分隔符

index1=date.indexOf("-");

//如果分隔符不存在，則不是合法的時(shí)間

if(index1==-1)

returnfalse;

//獲取時(shí)間中的年

year=date.substring(0,index1);

//獲取時(shí)間中的剩下部分

date=date.substring(index1+1);

//查找第二個(gè)分隔符

index1=date.indexOf("-");

//如果不存在第二個(gè)分隔符，則不是合法的時(shí)間

if(index1==-1)

returnfalse;

//獲取時(shí)間中的月份

month=date.substring(0,index1);

//獲取時(shí)間中的日

day=date.substring(index1+1);

//判斷是否是數(shù)字，如果不是，則不是合法的時(shí)間

if(isNumber(year)&&isNumber(month)&&isNumber(day))

{

//判斷基本范圍

if(year<1900||year>9999||month<1||month>12||day<1)

returnfalse;

//判斷31天的月

if((month==1||month==3||month==5||month==7

||month==8||month==10||month==12)&&day>31)

returnfalse;

//判斷30天的月

if((month==4||month==6||month==9||month==11)

&&day>30)

returnfalse;

//如果是2月，判斷是否為閏年

if(month==2)

{

if(year%400==0||(year%4==0&&year%100!=0))

{

if(day>29)

returnfalse;

}else

{

if(day>28)

returnfalse;

}

}

}

else

returnfalse;

returntrue;

}

//判斷是否是E-mail

functionisEmail(email)

{

if(email.length==0)

returnfalse;

index1=email.indexOf('@');

index2=email.indexOf('.');

if(index1<1 //@符號(hào)不存在，或者在第一個(gè)位置

||index2<1 //.符號(hào)不存在，或者在第一個(gè)位置

||index2-index1<2 //.在@的左邊或者相鄰

||index2+1==email.length) //.符號(hào)后面沒有東西

returnfalse

else

returntrue;

}

</script>

<html>

<head>

<title>注冊(cè)界面</title>

</head>

<body>

<h2align="center">請(qǐng)注冊(cè)</h2>

<formname="form1"action="register_confirm.jsp"method="post"

onsubmit="returnisValidate(form1)">

<tablealign="center">

<tr>

<td>用戶ID：</td>

<td><inputtype="text"name="userid">6-8位

</td>

</tr>

<tr>

<td>用戶名：</td>

<td><inputtype="text"name="username">2-10位</td>

</tr>

<tr>

<td>口令：</td>

<td><inputtype="password"name="userpass">6-8位，不能與用戶ID相同</td>

</tr>

<tr>

<td>確認(rèn)口令：</td>

<td><inputtype="password"name="userpass2"></td>

</tr>

<tr>

<td>生日：</td>

<td><inputtype="text"name="birthday">格式為：1988-1-1</td>

</tr>

<tr>

<td>學(xué)歷：</td>

<td>

<inputtype="radio"name="degree"value="?？?>?？?/p>

<inputtype="radio"name="degree"value="本科"checked>本科

<inputtype="radio"name="degree"value="碩士研究生">碩士研究生

<inputtype="radio"name="degree"value="博士研究生">博士研究生

<inputtype="radio"name="degree"value="其他">其他

</td>

</tr>

<tr>

<td>地區(qū)：</td>

<td>

<selectname="local">

<optionvalue="華東">華東</option>

<optionvalue="華南">華南</option>

<optionvalue="華北">華北</option>

<optionvalue="東北"selected>東北</option>

<optionvalue="東南">東南</option>

<optionvalue="西南">西南</option>

<optionvalue="西北">西北</option>

<optionvalue="華中">華中</option>

</select>

</td>

</tr>

<tr>

<td>E-mail:</td>

<td><inputtype="text"name="email"></td>

</tr>

<tr>

<td>地址：</td>

<td><inputtype="text"name="address"></td>

</tr>

<tr>

<td>電話：</td>

<td><inputtype="text"name="phone">

數(shù)字和連字符，例如88223322-123</td>

</tr>

<tr>

<td>備注：</td>

<td><textarearows="8"name="comment"cols="40"></textarea></td>

</tr>

<tr>

<td><inputtype="reset"value="重置"></td>

<td><inputtype="submit"value="提交"></td>

</tr>

<table>

</form>

</body>

</html>

2.2常用表單元素

2.2.1單行文本框

在注冊(cè)功能中，輸入用戶名和生日的輸入框就是單行文本框。需要輸入少量信息時(shí)應(yīng)該使用單行文本框。

單行文本框的基本語法格式如下：

<inputtype="text"name="輸入信息的名字"value="輸入信息的值">

其中：屬性type用于確定表單元素的類型，后面我們會(huì)看到很多表單元素的格式非常類似，值為“text”表示這是一個(gè)單行文本框；屬性name的值表示要輸入的信息的名字；屬性value的值表示這個(gè)文本框的值，通常不需要value屬性，它的值一般是讓用戶輸入的。如果需要為這個(gè)輸入框取默認(rèn)值，可以使用這個(gè)屬性給定默認(rèn)值。

在注冊(cè)功能中，輸入用戶名的代碼為：

<inputtype="text"name="username">用戶名對(duì)應(yīng)的文本框的名字是username，服務(wù)器在獲取用戶輸入的信息時(shí)會(huì)使用這個(gè)名字。

在注冊(cè)功能中，輸入生日的代碼為：

<inputtype="text"name="birthday"value="1988-1-1">

該文本框的名字是birthday，并且使用value指定它的值為“1988-1-1”，如果用戶不修改這個(gè)值，它將作為用戶生日的默認(rèn)值。

請(qǐng)記?。?lt;inputtype="text">表示單行文本框，name用于指定元素的名字，value可以指定默認(rèn)值。

2.2.2密碼框

在注冊(cè)功能中，設(shè)置密碼時(shí)使用兩個(gè)密碼框。通常在設(shè)置密碼和身份驗(yàn)證時(shí)會(huì)使用密碼框。密碼框的特點(diǎn)是在輸入信息之后，界面上并不顯示用戶輸入的信息，而是顯示“*”號(hào)或者“.”，但是用戶提交給服務(wù)器的信息不是“*”號(hào)或者“.”。

密碼框的基本格式如下：

<inputtype="password"name="輸入信息的名字"value="輸入信息的值">

這個(gè)格式與單行文本框非常類似，不同的是type屬性的值，這里type屬性的值為“password”，說明這個(gè)表單元素是密碼框。另外兩個(gè)屬性的作用與單行文本框完全相同。

請(qǐng)記住：密碼框與單行本文框的區(qū)別是，密碼框?qū)?yīng)的type值為“password”。

2.2.3單選按鈕

在注冊(cè)功能中，用戶選擇學(xué)歷使用的是單選按鈕，并且是多個(gè)單選按鈕，每個(gè)選項(xiàng)對(duì)應(yīng)一個(gè)單選按鈕，用戶只能選擇其中一個(gè)，這多個(gè)單選按鈕的格式相同。如果用戶要輸入的信息只有少數(shù)幾種可能，這時(shí)應(yīng)該使用單選按鈕。

單選按鈕的基本格式如下：

<inputtype="radio"name="輸入信息的名字"value="輸入信息的值">顯示的信息

其格式與單行本文框格式基本相同，type屬性的值為“radio”，說明這個(gè)表單元素是單選按鈕。name仍然是元素的名字，value屬性的值是這個(gè)單選按鈕的值。這個(gè)值不會(huì)顯示給用戶，用戶能夠看到的是標(biāo)簽后面顯示的部分。

單選按鈕通常不獨(dú)立出現(xiàn)，每一種可能的選項(xiàng)就對(duì)應(yīng)一個(gè)單選按鈕，每個(gè)單選按鈕對(duì)應(yīng)一個(gè)不同的值，用戶選擇哪個(gè)單選按鈕，哪個(gè)單選按鈕的值就可以傳遞到服務(wù)器。

注冊(cè)功能中，用戶選擇學(xué)歷對(duì)應(yīng)的代碼如下：

<inputtype="radio"name="degree"value="1">?？?/p>

<inputtype="radio"name="degree"value="2"checked>本科

<inputtype="radio"name="degree"value="3">碩士研究生

<inputtype="radio"name="degree"value="4">博士研究生

這里，學(xué)歷有4個(gè)選項(xiàng)，所以有4個(gè)單選按鈕，且這4個(gè)單選按鈕的名字是相同的。用戶只能在4種情況中選擇一個(gè)，這4個(gè)單選按鈕的值分別是1、2、3和4，用戶看不到單選按鈕的值，看到的是每個(gè)標(biāo)簽后的文字，即“?？啤薄ⅰ氨究啤薄ⅰ按T士研究生”、“博士研究生”等。如果用戶選擇?？疲玫降闹祵⑹?；如果用戶選擇的是本科，得到的值將是2……

請(qǐng)記?。簡芜x按鈕的基本格式與輸入框基本相同，不同的是，type對(duì)應(yīng)的值為“radio”。有多少個(gè)可能的選項(xiàng)就需要多少個(gè)單選按鈕。如果需要使用默認(rèn)值，則可使用checked。

2.2.4復(fù)選框

復(fù)選框與單選按鈕非常類似，相同的地方是：

●一般都不單獨(dú)出現(xiàn)，而是成組出現(xiàn)。

●同一組的名字相同。

●必須指定值。

●選擇哪一個(gè)選項(xiàng)，得到的是這個(gè)選項(xiàng)對(duì)應(yīng)