java web課程設(shè)計(jì)報(bào)告

1、實(shí)驗(yàn)完成情況記錄學(xué)號(hào)201108030309姓名郭耀中聯(lián)系方告文檔的標(biāo)題保存成：學(xué)號(hào)_姓名.docx所有web design 融合到幾個(gè)簡(jiǎn)單頁(yè)面中,并且填寫下表內(nèi)容要求（1）注冊(cè)表單完成情況序號(hào)內(nèi)容要求1)用戶名：不能為空（支持中文，通過(guò)servlet過(guò)濾器實(shí)現(xiàn)編碼轉(zhuǎn)換）2)密碼：不能為空，且大于4位，小于6位3)密碼驗(yàn)證：不能為空，且與密碼必須一致4)電話號(hào)碼：不能為空，符合電話號(hào)碼格式5)郵件地址：不能為空，且符合郵件基本格式（*.*）6)表單數(shù)據(jù)要存放到對(duì)應(yīng)數(shù)據(jù)庫(kù)中（ODBC）7)支持用戶定義頭像，頭像上傳后統(tǒng)一保存在頁(yè)面根目錄下的image文件夾內(nèi)，頭像圖像大

2、小約束為200k，頭像文件的名稱和用戶創(chuàng)建時(shí)間以及用戶的ID相關(guān)，如zhangsan創(chuàng)建的頭像：zhangsan_201402028)所有的注冊(cè)信息由servlet完成注冊(cè)操作內(nèi)容要求（1）完成情況截圖1.1用戶注冊(cè)1.2 1.3 1.4 1.5 下面是客戶端驗(yàn)證（上面的這個(gè)沒有使用客戶端驗(yàn)證，故寫了一個(gè)單獨(dú)的jsp來(lái)完成要求）服務(wù)器端驗(yàn)證（struts2的驗(yàn)證框架）1.6 使用hibernate完成用戶注冊(cè)，下面是UserDao中注冊(cè)用戶的方法1.7 現(xiàn)在貼出相應(yīng)（采用struts1.x實(shí)現(xiàn)，實(shí)在是忘了servlet如何上傳了）1.8用struts2完成register信息添加到數(shù)據(jù)庫(kù)中內(nèi)容

3、要求（2）用戶信息存儲(chǔ)完成情況序號(hào)內(nèi)容要求1)用戶通過(guò)注冊(cè)表單填寫的注冊(cè)信息，需要存放到對(duì)應(yīng)的數(shù)據(jù)庫(kù)中，采用ODBC的簡(jiǎn)單存儲(chǔ)方式，通過(guò)傳統(tǒng)的JDBCODBC代碼實(shí)現(xiàn)內(nèi)容要求（2）完成情況截圖2.1 簡(jiǎn)單的mvc 結(jié)構(gòu)，每一個(gè)領(lǐng)域?qū)ο髮?duì)應(yīng)一個(gè)servince,然后dao層用統(tǒng)一一個(gè)sqlhelper來(lái)輔助完成User領(lǐng)域?qū)ο髮?duì)應(yīng)servince類中的注冊(cè)服務(wù)方法Dao層內(nèi)容要求（3）用戶登錄完成情況序號(hào)內(nèi)容要求1)如果用戶未登錄，訪問(wèn)任何頁(yè)面都會(huì)彈出登錄提示。（session）2)用戶登錄時(shí)，通過(guò)DAOVO進(jìn)行用戶的身份驗(yàn)證3)用戶登錄的時(shí)候會(huì)顯示驗(yàn)證碼，單擊驗(yàn)證碼會(huì)更新4)根據(jù)用戶的登錄選項(xiàng)

4、：保存密碼2周。在客戶端生成Cookie，2周內(nèi)用戶訪問(wèn)網(wǎng)站不要求其登錄5)用戶登錄以后可以看到彈出窗口顯示的歡迎信息，歡迎信息中顯示當(dāng)前的在線用戶人數(shù)（application）內(nèi)容要求（3）完成情況截圖3.1 截圖顯示在沒有登錄的情況下訪問(wèn)主界面攔截器代碼3.2 身份驗(yàn)證（UserServince）DAO層（SQLHelper）3.3具體代碼如下/對(duì)應(yīng)的servlet3.4 記住密碼3.5 顯示在線人數(shù)（原來(lái)是處理 查看在線用戶的姓名）在main.jsp 中填上這么一句話，即可顯示在線用戶人數(shù)在線用戶：<s:property value=”#application. onlineLis

5、t.length”/> 位內(nèi)容要求（4）購(gòu)物車完成情況序號(hào)內(nèi)容要求1)用戶登錄后可以看到一些商品信息（該商品信息可以保存在數(shù)據(jù)庫(kù)中提取，也可以是直接顯示在頁(yè)面上）2)用戶可以選擇商品，加入購(gòu)物車內(nèi)容要求（4）完成情況截圖4.1 用戶登錄、顯示購(gòu)物大廳拿到拿到數(shù)據(jù)庫(kù)中所有書籍4.2 購(gòu)物車內(nèi)容要求（5）算命游戲&計(jì)算器完成情況序號(hào)內(nèi)容要求1)通過(guò)用戶輸入出生年月日來(lái)判斷用戶的星座，從而給出一個(gè)該星座的算命結(jié)論（當(dāng)然，同學(xué)們要另外開發(fā)算命，算人品，算英俊瀟灑值，都可以?。?)計(jì)算器要求加減乘除3)算命游戲存為js文件，通過(guò)加載進(jìn)行添加4)計(jì)算器直接做成JSP頁(yè)面內(nèi)容要求（5）完成情況

6、截圖5.1 5.25.3 外放js文件內(nèi)容要求（6）底部LOGO完成情況序號(hào)內(nèi)容要求1)所有頁(yè)面底部都要有開發(fā)者的姓名、學(xué)號(hào)、聯(lián)系方式的LOGO信息（include指令實(shí)現(xiàn)）內(nèi)容要求（6）完成情況截圖6.1上面圖片的代碼（main.jsp）：課程要求（7）Report： ajax的research report1. 什么是ajax框架Ajax，使用它可以構(gòu)建更為動(dòng)態(tài)和響應(yīng)更靈敏的Web應(yīng)用程序。該方法的關(guān)鍵在于對(duì)瀏覽器端的JavaScript、DHTML和與服務(wù)器異步通信的組合。本文也演示了啟用這種方法是多么簡(jiǎn)單：利用一個(gè)Ajax框架（指DWR）構(gòu)造一個(gè)應(yīng)用程序，它直接從瀏覽器與后端服務(wù)進(jìn)行通

7、信。如果使用得當(dāng)，這種強(qiáng)大的力量可以使應(yīng)用程序更加自然和響應(yīng)靈敏，從而提升用戶的瀏覽體驗(yàn)。 術(shù)語(yǔ)Ajax用來(lái)描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。在Ajax之前，Web站點(diǎn)強(qiáng)制用戶進(jìn)入提交/等待/重新顯示范例，用戶的動(dòng)作總是與服務(wù)器的“思考時(shí)間”同步。Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來(lái)。借助于Ajax，可以在用戶單擊按鈕時(shí)，使用JavaScript和DHTML立即更新UI，并向服務(wù)器發(fā)出異步請(qǐng)求，以執(zhí)行更新或查詢數(shù)據(jù)庫(kù)。當(dāng)請(qǐng)求返回時(shí)，就可以使用JavaScript和CSS來(lái)相應(yīng)地更新UI，而不是刷新整個(gè)頁(yè)面。最重要的是，用戶

8、甚至不知道瀏覽器正在與服務(wù)器通信：Web站點(diǎn)看起來(lái)是即時(shí)響應(yīng)的。雖然Ajax所需的基礎(chǔ)架構(gòu)已經(jīng)出現(xiàn)了一段時(shí)間，但直到最近異步請(qǐng)求的真正威力才得到利用。能夠擁有一個(gè)響應(yīng)極其靈敏的Web站點(diǎn)確實(shí)激動(dòng)人心，因?yàn)樗罱K允許開發(fā)人員和設(shè)計(jì)人員使用標(biāo)準(zhǔn)的HTML/CSS/JavaScript堆棧創(chuàng)建“桌面風(fēng)格的（desktop-like）”可用性。通常，在J2EE中，開發(fā)人員過(guò)于關(guān)注服務(wù)和持久性層的開發(fā)，以至于用戶界面的可用性已經(jīng)落后。在一個(gè)典型的J2EE開發(fā)周期中，常常會(huì)聽到這樣的話，“我們沒有可投入U(xiǎn)I的時(shí)間”或“不能用HTML實(shí)現(xiàn)”。但是，以下Web站點(diǎn)證明，這些理由再也站不住腳了：2. 為什么需要

9、ajax框架傳統(tǒng)的Web應(yīng)用模型采用同步交互模式，客戶端首先向服務(wù)器端發(fā)送請(qǐng)求，服務(wù)器端接到客戶端請(qǐng)求后進(jìn)行相關(guān)的處理，并把結(jié)果返回給客戶端，而在服務(wù)器處理的過(guò)程中，客戶端不能進(jìn)行任何其他操作，只能等待。得到服務(wù)器響應(yīng)數(shù)據(jù)后，進(jìn)行處理，再重新發(fā)送新的請(qǐng)求并等待響應(yīng)。這是一種不連貫的用戶體驗(yàn)。如果交互的數(shù)據(jù)不多，而服務(wù)器的處理速度足夠快，響應(yīng)時(shí)間足夠短，則該種交互模式?jīng)]有什么太大的問(wèn)題。但一旦交互數(shù)據(jù)比較大，由于服務(wù)器的業(yè)務(wù)比較大，處理響應(yīng)時(shí)間比較長(zhǎng)，則客戶端等待響應(yīng)時(shí)間相對(duì)較長(zhǎng)，而往往客戶面對(duì)的是空白的屏幕（白屏現(xiàn)象）。如果時(shí)間太長(zhǎng)（大于4秒），客戶是沒有耐心去等待的；更糟糕的是，等待相當(dāng)長(zhǎng)的

10、時(shí)間后，最終的結(jié)果卻是連接服務(wù)器超時(shí)，這是不可忍受的。此外，用戶在某些時(shí)候只需要更新頁(yè)面中的部分?jǐn)?shù)據(jù)，而在傳統(tǒng)Web模式下，他不得不刷新頁(yè)面，或重新裝載該頁(yè)面。同時(shí)，在傳統(tǒng)Web模式下，若服務(wù)器端頁(yè)面有更新，客戶為了實(shí)時(shí)地得到最新的信息，不得不重復(fù)刷新頁(yè)面，而不能在不刷新頁(yè)面的前提下只更新目標(biāo)頁(yè)面中需要更新的內(nèi)容。對(duì)于這些問(wèn)題，Ajax能給出很好的解決方法，所以我們需要ajax來(lái)解決這些問(wèn)題。3. 目前流行的ajax框架有哪些 現(xiàn)在最流行的可以說(shuō)是：Jquery和extjs了 Jquery：Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascript框架。它是輕量級(jí)的js庫(kù) ，它兼容

11、CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)面保持代碼和html內(nèi)容分離，也就是說(shuō)，不用再在html里面插入一堆js來(lái)調(diào)用命令了，只需定義id即可。 Extjs: 功能豐富，無(wú)人能出其右。

12、無(wú)論是界面之美，還是功能之強(qiáng)，ext的表格控件都高居榜首。單選行，多選行，高亮顯示選中的行，拖拽改變列寬度，按列排序，這些基本功能ExtJS輕量級(jí)實(shí)現(xiàn)。自動(dòng)生成行號(hào)，支持checkbox全選，動(dòng)態(tài)選擇顯示哪些列，支持本地以及遠(yuǎn)程分頁(yè)，可以對(duì)單元格按照自己的想法進(jìn)行渲染，這些也算可以想到的功能。再加上可編輯grid，添加新行，刪除一或多行，提示多行數(shù)據(jù)，拖拽改變grid大小，grid之間拖拽一或多行，甚至可以在tree和grid之間進(jìn)行拖拽，這些功能實(shí)在太神奇了。更令人驚嘆的是，這些功能竟然都在ext表格控件里實(shí)現(xiàn)了。其實(shí)從ext3開始就支持各種方式的統(tǒng)計(jì)，且有控件支持excel導(dǎo)出。4. Ex

13、tjs的學(xué)習(xí)應(yīng)用：要學(xué)習(xí)及應(yīng)用好Ext框架，需要理解Html DOM、Ext Element及Component三者的區(qū)別。Ext是基于Web的富客戶端框架，其完全是基于標(biāo)準(zhǔn)W3C技術(shù)構(gòu)建的，使用到的都是HTML、CSS、DIV等相關(guān)技術(shù)。Ext最杰出之處，是開發(fā)了一系列非常簡(jiǎn)單易用的控件及組件，我們只需要使用這些組件就能實(shí)現(xiàn)各種豐富多彩的UI的開發(fā)。無(wú)論組件有多少配置屬性、還是事件、方法等等，其最終都會(huì)轉(zhuǎn)化為HTML在瀏覽器上顯示出來(lái)，而每一個(gè)HTML頁(yè)面都有一個(gè)層次分明的DOM樹模型，瀏覽器中的所有內(nèi)容都有相應(yīng)的DOM對(duì)象，動(dòng)態(tài)改變頁(yè)面的內(nèi)容，正是通過(guò)使用腳本語(yǔ)言來(lái)操作DOM對(duì)象實(shí)現(xiàn)。僅僅

14、有DOM是不夠的，比如要把頁(yè)面中的某一個(gè)節(jié)點(diǎn)移到其它位置，要給某一個(gè)節(jié)點(diǎn)添加陰影效果，要隱藏或顯示某一個(gè)節(jié)點(diǎn)等，我們都需要通過(guò)幾句 javascript才能完成。因此，Ext在DOM的基礎(chǔ)上，創(chuàng)建了Ext Element，可以使用Element來(lái)包裝任何DOM，Element對(duì)象中添加了一系列快捷、簡(jiǎn)便的實(shí)用方法。對(duì)于終端用戶來(lái)說(shuō)，僅僅有Element是不夠的，比如用戶要顯示一個(gè)表格、要顯示一棵樹、要顯示一個(gè)彈出窗口等。因此，除了Element以外，Ext 還建立了一系列的客戶端界面組件Component，我們?cè)诰幊虝r(shí)，只要使用這些組件Component即可實(shí)現(xiàn)相關(guān)數(shù)據(jù)展示及交互等，而 Com

15、ponent是較高層次的抽象，每一個(gè)組件在渲染render的時(shí)候，都會(huì)依次通過(guò)Element、DOM來(lái)生成最終的頁(yè)面效果。在使用Ext開發(fā)的應(yīng)用程序中，組件Component是最高層次的抽象，是直接給用戶使用的，Ext Element是Ext的底層API，主要是由Ext或自定義組件調(diào)用的，而DOM是W3C標(biāo)準(zhǔn)定義的原始API，Ext的Element通過(guò)操作DOM 來(lái)實(shí)現(xiàn)頁(yè)面的效果顯示。在Ext中，組件渲染以后可以通過(guò)訪問(wèn)組件的el屬性來(lái)得到組件對(duì)應(yīng)的Element，通過(guò)訪問(wèn)Element的dom屬性可以得到其下面的DOM對(duì)象。另外，我們可以通過(guò)Ext類的快捷方法getCmp、get、getDom等方法來(lái)得組件Component、Ext元素Element及DOM節(jié)點(diǎn)。比如：var view=new Ext.Viewport();/創(chuàng)建了一個(gè)組件Componentview.el.setOpacity(.5);/調(diào)用Element的setOpacity方法view.el.dom.innerHTML="Hello Ext"/通過(guò)Element的dom屬性操作DOM對(duì)象再看下面的代碼：va