摘要隨著網(wǎng)絡(luò)的發(fā)展和普及，各類(lèi)建站技術(shù)的更新與運(yùn)用，現(xiàn)在搭建一個(gè)網(wǎng)站的時(shí)間和成本越來(lái)越低，使得企業(yè)官方網(wǎng)站得到了極大的發(fā)展。從早期簡(jiǎn)單的網(wǎng)頁(yè)展示，到后來(lái)的營(yíng)銷(xiāo)型網(wǎng)站，全網(wǎng)營(yíng)銷(xiāo)型網(wǎng)站，以及目前最新最主流的響應(yīng)式網(wǎng)站。基于HTML5的響應(yīng)式網(wǎng)站能夠自動(dòng)適應(yīng)屏幕大小，實(shí)現(xiàn)多終端覆蓋，設(shè)計(jì)高端，豐富的特效讓頁(yè)面展示更精美。HTML5是HTML下一個(gè)主要的修訂版本，現(xiàn)在仍處于發(fā)展階段。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)RIA，如AdobeFlash、MicrosoftSilverlight，與OracleJavaFX的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。HTML5是新興的Web開(kāi)發(fā)技術(shù)，其擁有良好的語(yǔ)義化標(biāo)簽，搭配最新CSS3可以展現(xiàn)出無(wú)與倫比的顯示效果。本課題結(jié)合HTML5技術(shù)和eclipse開(kāi)發(fā)工具，MySQLServer作為數(shù)據(jù)庫(kù)，實(shí)現(xiàn)了企業(yè)響應(yīng)式網(wǎng)站及其管理，使得企業(yè)官網(wǎng)的展示更精美，管理更便捷。關(guān)鍵詞：HTML5；CSS3；JavaScript；MySQLServer；響應(yīng)式網(wǎng)站

ABSTRACTWiththedevelopmentofnetworkandpopularization,theupdatinganduseofallkindsofwebtechnology,nowtimeandcostofbuildingawebsitehasbecomemoreandmorelow,makestheenterprise'sofficialwebsitegotgreatdevelopment.Fromtheearlysimplewebpages,tolatermarketingtypesite,theentirenetworkmarketingtypesite,andthereactivesitesofthelatestmostmainstream.BasedontheresponseoftheHTML5responsivewebsitecanautomaticallyadapttoscreensize,realizetheendcover,high-enddesign,richinspecificpagetoshowmoreelegant.HTML5isHTMLnextmajorrevision,nowisstillinthestageofdevelopment.Generalizedwhenaskedaboutitactuallymeans,includingHTML,CSS,andJavaScript,asetoftechnologycombination.Ithopestobeabletoreducethebrowserplug-intoneedtherichnessofnetworkapplicationserviceRIA,suchasAdobeFlash,MicrosoftSilverlight,andthedemandoftheOracleJavaFX,andcanprovidemoreeffectiveenhancethestandardsetofnetworkapplications.HTML5istheemergingWebdevelopmenttechnology,hasgoodsemanticlabels,matchthelatestCSS3canshowauniquedisplayeffect.ThistopiccombinesthetechniqueofHTML5andtheeclipsedevelopmenttools,MySQLasthedatabaseServer,realizethereactivesitesanditsmanagement,makeenterprisewebsitetoshowmoreelegant,moreconvenientmanagement.Keywords:HTML5;CSS3;JavaScript;MySQLServer;Reactivesites目錄TOC\o"1-3"\h\u1. 緒論 緒論課題研究意義和目的現(xiàn)在網(wǎng)絡(luò)的發(fā)展已呈現(xiàn)商業(yè)化、全民化、全球化的趨勢(shì)。目前，幾乎世界上所有的公司都在利用網(wǎng)絡(luò)傳遞商業(yè)信息，進(jìn)行商業(yè)活動(dòng)，從宣傳企業(yè)、發(fā)布廣告、招聘雇員、傳遞商業(yè)文件乃至拓展市場(chǎng)、網(wǎng)上銷(xiāo)售等，無(wú)所不能。如今網(wǎng)絡(luò)已成為企業(yè)進(jìn)行競(jìng)爭(zhēng)的戰(zhàn)略手段。企業(yè)經(jīng)營(yíng)的多元化拓展，企業(yè)規(guī)模的進(jìn)一步擴(kuò)大，對(duì)于企業(yè)的管理、業(yè)務(wù)擴(kuò)展、企業(yè)品牌形象等提供了更高的要求。在以信息技術(shù)為支撐的新經(jīng)濟(jì)條件下，越來(lái)越多的企業(yè)利用起網(wǎng)絡(luò)這個(gè)有效的工具。網(wǎng)站早已由論證階段進(jìn)入了實(shí)質(zhì)階段，尤其為企業(yè)提供一個(gè)展示自己的舞臺(tái)、為消費(fèi)者創(chuàng)造一個(gè)了解企業(yè)的捷徑[1]。隨著3G、4G的發(fā)展和移動(dòng)通信及WEB3.0技術(shù)的提升以及近年來(lái)各種移動(dòng)智能設(shè)備的興起，中國(guó)互聯(lián)網(wǎng)正在往移動(dòng)方向發(fā)展，呈現(xiàn)多元化趨勢(shì)。越來(lái)越多的用戶(hù)擁有多種移動(dòng)設(shè)備，像智能手機(jī)、平板電腦、智能手表等,在現(xiàn)今的大環(huán)境下移動(dòng)設(shè)備正在普及并且正在逐漸超過(guò)PC設(shè)備，面對(duì)市場(chǎng)上移動(dòng)設(shè)備的不斷增多，同時(shí)伴隨著各種設(shè)備屏幕的分辨率、尺寸和型號(hào)的越來(lái)越多，如何能夠在不同屏幕、不同系統(tǒng)平臺(tái)等環(huán)境下保持網(wǎng)頁(yè)的一致性，滿(mǎn)足用戶(hù)的一致體驗(yàn)這將成為了整個(gè)網(wǎng)頁(yè)設(shè)計(jì)行業(yè)的一個(gè)新挑戰(zhàn)。企業(yè)可以通過(guò)建立商業(yè)平臺(tái)，實(shí)行全天候銷(xiāo)售服務(wù)，借助網(wǎng)絡(luò)推廣企業(yè)的形象、宣傳企業(yè)的產(chǎn)品、發(fā)布公司新聞，同時(shí)通過(guò)信息反饋使公司更加了解顧客的心理和需求，網(wǎng)站虛擬公司與實(shí)體公司的經(jīng)營(yíng)運(yùn)作有機(jī)的結(jié)合，將會(huì)有利于公司產(chǎn)品銷(xiāo)售渠道的拓展，并節(jié)省大量的廣告宣傳和經(jīng)營(yíng)運(yùn)營(yíng)成本，更好地把握商機(jī)。今天越來(lái)越多的人使用智能手機(jī)、平板電腦等來(lái)查看郵件、瀏覽網(wǎng)頁(yè)。隨著移動(dòng)終端的流行和大趨勢(shì)的變化，網(wǎng)站設(shè)計(jì)技術(shù)也在隨之變化。為了能夠給移動(dòng)終端客戶(hù)提供更好的體驗(yàn)與服務(wù)，我們可以有很多選擇。例如為移動(dòng)設(shè)備單獨(dú)重新設(shè)計(jì)一個(gè)網(wǎng)站，這種情況下所有使用移動(dòng)終端的訪問(wèn)者都會(huì)被指向到這個(gè)為他們單獨(dú)設(shè)計(jì)的站點(diǎn)[2]。另外一種選擇就是將網(wǎng)站做成響應(yīng)式，這種情況下無(wú)論客戶(hù)使用何種終端設(shè)備訪問(wèn)網(wǎng)站，網(wǎng)站都會(huì)根據(jù)終端設(shè)備屏幕尺寸自動(dòng)調(diào)整網(wǎng)站顯示，使所有客戶(hù)都能有最好的訪問(wèn)體驗(yàn)。響應(yīng)式Web設(shè)計(jì)(ResponsiveWebdesign)的理念是：頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶(hù)行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整[3]。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSSmediaquery的使用等。無(wú)論用戶(hù)正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶(hù)的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專(zhuān)門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。國(guó)內(nèi)外發(fā)展現(xiàn)狀和趨勢(shì)響應(yīng)式設(shè)計(jì)的網(wǎng)站能滿(mǎn)足所有類(lèi)型終端用戶(hù)的需求，能帶給所有終端用戶(hù)最優(yōu)的訪問(wèn)體驗(yàn)。當(dāng)然專(zhuān)門(mén)為手機(jī)或者平板電腦設(shè)計(jì)的網(wǎng)站或者app應(yīng)用也能滿(mǎn)足部分訪問(wèn)者的需求，但是據(jù)調(diào)查數(shù)據(jù)顯示，常用的終端移動(dòng)設(shè)備有230多種不同的屏幕尺寸，我們不可能為所有這些常用的230多種屏幕尺寸都設(shè)計(jì)一個(gè)獨(dú)有的網(wǎng)站或者app應(yīng)用。所以響應(yīng)式設(shè)計(jì)此時(shí)體現(xiàn)出了它的價(jià)值所在。有調(diào)查結(jié)果顯示，移動(dòng)設(shè)備正在逐漸超過(guò)PC設(shè)備，如果數(shù)據(jù)屬實(shí)那么毋庸置疑，以后我們的網(wǎng)頁(yè)設(shè)計(jì)就應(yīng)該實(shí)現(xiàn)響應(yīng)式布局。設(shè)想一個(gè)在移動(dòng)終端都不能正常顯示的網(wǎng)頁(yè)能給公司企業(yè)帶來(lái)的大概也只有負(fù)面的影響，所以為了能夠使所有利用移動(dòng)設(shè)備訪問(wèn)網(wǎng)站的用戶(hù)都能有最優(yōu)最好的體驗(yàn)，響應(yīng)式設(shè)計(jì)絕對(duì)是最好的一種選擇和趨勢(shì)。EthanMarcotte曾經(jīng)在AListApart發(fā)表過(guò)一篇文章"ResponsiveWebDesign"，文中援引了響應(yīng)式建筑設(shè)計(jì)的概念：現(xiàn)出現(xiàn)了一門(mén)新興的學(xué)科"響應(yīng)式架構(gòu)(responsivearchitecture)"提出，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。結(jié)合嵌入式機(jī)器人技術(shù)以及可拉伸材料的應(yīng)用，建筑師們正在嘗試建造一種可以根據(jù)周?chē)巳旱那闆r進(jìn)行彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu)；還可以使用運(yùn)動(dòng)傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。已經(jīng)有公司在生產(chǎn)"智能玻璃"：當(dāng)室內(nèi)人數(shù)達(dá)到一定的閾值時(shí)，這種玻璃可以自動(dòng)變?yōu)椴煌该鳎_保隱私[4]。將這個(gè)思路延伸到Web設(shè)計(jì)的領(lǐng)域，我們就得到了一個(gè)全新的概念。為什么一定要為每個(gè)用戶(hù)群各自打造一套設(shè)計(jì)和開(kāi)發(fā)方案？和響應(yīng)式建筑相似，Web設(shè)計(jì)同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整。顯然，我們無(wú)法也無(wú)需使用運(yùn)動(dòng)傳感器或是機(jī)器人技術(shù)，響應(yīng)式Web設(shè)計(jì)更多需要的是抽象思維。好在，一些相關(guān)的概念已經(jīng)得到了實(shí)踐，比如液態(tài)布局、幫助頁(yè)面重新格式化的mediaqueries和腳本等。但是響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對(duì)于設(shè)計(jì)的全新思維模式[5]。響應(yīng)式設(shè)計(jì)在2012年被提的比較多，但是響應(yīng)式設(shè)計(jì)仍然在不斷變化，不斷創(chuàng)新。比如，新的設(shè)備不斷出來(lái)(iPadMini)，這讓以前的設(shè)計(jì)想法土崩瓦解。而各種Web的響應(yīng)式設(shè)計(jì)也獲得了越來(lái)越多的注意，“讓人們忘記設(shè)備尺寸”的理念將更快地驅(qū)動(dòng)響應(yīng)式設(shè)計(jì)，所以Web設(shè)計(jì)也將迎來(lái)更多的響應(yīng)式設(shè)計(jì)元素。系統(tǒng)技術(shù)理論基礎(chǔ)HTML5簡(jiǎn)介HTML5是HTML下一個(gè)主要的修訂版本，現(xiàn)在仍處于發(fā)展階段。目標(biāo)是取代1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。HTML5有兩大特點(diǎn)：首先，強(qiáng)化了Web網(wǎng)頁(yè)的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫(kù)等Web應(yīng)用的功能。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)RIA，如AdobeFlash、MicrosoftSilverlight，與OracleJavaFX的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集[1]。HTML5是新興的Web開(kāi)發(fā)技術(shù)，其擁有良好的語(yǔ)義化標(biāo)簽，搭配最新CSS3可以展現(xiàn)出無(wú)與倫比的顯示效果。支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國(guó)內(nèi)的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱(chēng)實(shí)驗(yàn)版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國(guó)產(chǎn)瀏覽器同樣具備支持HTML5的能力[6]。HTML5具有以下特性：語(yǔ)義特性（Class：Semantic）HTML5賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶(hù)都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。2.本地存儲(chǔ)特性（Class:OFFLINE&STORAGE）基于HTML5開(kāi)發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5APPCache，以及本地存儲(chǔ)功能。IndexedDB（html5本地存儲(chǔ)最重要的技術(shù)之一）和API說(shuō)明文檔。設(shè)備兼容特性(Class:DEVICEACCESS)從Geolocation功能的API文檔公開(kāi)以來(lái)，HTML5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。連接特性（Class:CONNECTIVITY）更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-SentEvent和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶(hù)端的功能。網(wǎng)頁(yè)多媒體特性(Class:MULTIMEDIA)支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。三維、圖形及特效特性（Class:3D,Graphics&Effects）基于SVG、Canvas、WebGL及CSS3的3D功能，用戶(hù)會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺(jué)效果。

7.性能與集成特性（Class:Performance&Integration）沒(méi)有用戶(hù)會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過(guò)XMLHttpRequest2等技術(shù)，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

CSS3特性(Class:CSS3)在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開(kāi)放字體格式（WOFF）也提供了更高的靈活性和控制性[7]。HTML5具有以下優(yōu)勢(shì)：1.網(wǎng)絡(luò)標(biāo)準(zhǔn)HTML5本身是由W3C推薦出來(lái)的，它的開(kāi)發(fā)是通過(guò)谷歌、蘋(píng)果，諾基亞、中國(guó)移動(dòng)等幾百家公司一起醞釀的技術(shù)，這個(gè)技術(shù)最大的好處在于它是一個(gè)公開(kāi)的技術(shù)。換句話說(shuō)，每一個(gè)公開(kāi)的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫(kù)找尋根源。另一方面，W3C通過(guò)的HTML5標(biāo)準(zhǔn)也就意味著每一個(gè)瀏覽器或每一個(gè)平臺(tái)都會(huì)去實(shí)現(xiàn)。2.多設(shè)備、跨平臺(tái)用HTML5的優(yōu)點(diǎn)主要在于，這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)的使用。比如你開(kāi)發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開(kāi)放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過(guò)封裝的技術(shù)發(fā)放到AppStore或GooglePlay上，所以它的跨平臺(tái)非常強(qiáng)大，也是大多數(shù)人對(duì)HTML5有興趣的主要原因。自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)很早就有人設(shè)想，能不能”一次設(shè)計(jì)，普遍適用”，讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動(dòng)調(diào)整布局（layout）2010年，EthanMarcotte提出了”自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)“這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。這就解決了傳統(tǒng)的一種局面——網(wǎng)站為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比如專(zhuān)門(mén)提供一個(gè)mobile版本，或者iPhone/iPad版本。這樣做固然保證了效果，但是比較麻煩，同時(shí)要維護(hù)好幾個(gè)版本，而且如果一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。即時(shí)更新游戲客戶(hù)端每次都要更新，很麻煩。可是更新HTML5游戲就好像更新頁(yè)面一樣，是馬上的、即時(shí)的更新[8]。總結(jié)概括HTML5有以下優(yōu)點(diǎn)：1.提高可用性和改進(jìn)用戶(hù)的友好體驗(yàn)；2.有幾個(gè)新的標(biāo)簽，這將有助于開(kāi)發(fā)人員定義重要的內(nèi)容；3.可以給站點(diǎn)帶來(lái)更多的多媒體元素(視頻和音頻)；4.可以很好的替代FLASH和Silverlight；5.當(dāng)涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO很友好；6.將被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲。JavaEE簡(jiǎn)介J2EE（Java2Platform,EnterpriseEdition）是一套全然不同于傳統(tǒng)應(yīng)用開(kāi)發(fā)的技術(shù)架構(gòu)，包含許多組件，主要可簡(jiǎn)化且規(guī)范應(yīng)用系統(tǒng)的開(kāi)發(fā)與部署，進(jìn)而提高可移植性、安全與再用價(jià)值[9]。J2EE的核心是一組技術(shù)規(guī)范與指南，其中所包含的各類(lèi)組件、服務(wù)架構(gòu)及技術(shù)層次，均有共通的標(biāo)準(zhǔn)及規(guī)格，讓各種依循J2EE架構(gòu)的不同平臺(tái)之間，存在良好的兼容性，解決過(guò)去企業(yè)后端使用的信息產(chǎn)品彼此之間無(wú)法兼容，導(dǎo)致企業(yè)內(nèi)部或外部難以互通的窘境。在J2EE架構(gòu)下，開(kāi)發(fā)人員可依循規(guī)范基礎(chǔ)，進(jìn)而開(kāi)發(fā)企業(yè)級(jí)應(yīng)用；而不同J2EE供貨商，同會(huì)支持不同J2EE版本內(nèi)所擬定的標(biāo)準(zhǔn)，以確保不同J2EE平臺(tái)與產(chǎn)品之間的兼容性。對(duì)于開(kāi)發(fā)人員而言，只需要專(zhuān)注于各種應(yīng)用系統(tǒng)的商業(yè)邏輯與架構(gòu)設(shè)計(jì)，至于底層繁瑣的程序撰寫(xiě)工作，可搭配不同的開(kāi)發(fā)平臺(tái)，以讓?xiě)?yīng)用系統(tǒng)的開(kāi)發(fā)與部署效率大幅提升。目前許多程序設(shè)計(jì)師，或者是網(wǎng)頁(yè)設(shè)計(jì)人員，多利用JSP/Servlet的便利性，進(jìn)而在J2EE服務(wù)器之上開(kāi)發(fā)相關(guān)的應(yīng)用，或是整合公司內(nèi)部的各種資源。推出J2EE的最初目的是為了克服傳統(tǒng)Client/Server模式的弊病，迎合Browser/Server架構(gòu)的潮流，為應(yīng)用Java技術(shù)開(kāi)發(fā)服務(wù)器端應(yīng)用提供一個(gè)平臺(tái)獨(dú)立的、可移植的、多用戶(hù)的、安全的和基于標(biāo)準(zhǔn)的企業(yè)級(jí)平臺(tái)，從而簡(jiǎn)化企業(yè)應(yīng)用的開(kāi)發(fā)、管理和部署。J2EE是一個(gè)標(biāo)準(zhǔn)，而不是一個(gè)現(xiàn)成的產(chǎn)品。各個(gè)平臺(tái)開(kāi)發(fā)商按照J(rèn)2EE規(guī)范分別開(kāi)發(fā)了不同的J2EE應(yīng)用服務(wù)器，J2EE應(yīng)用服務(wù)器是J2EE企業(yè)級(jí)應(yīng)用的部署平臺(tái)。由于它們都遵循了J2EE規(guī)范，因此，使用J2EE技術(shù)開(kāi)發(fā)的企業(yè)級(jí)應(yīng)用可以部署在各種J2EE應(yīng)用服務(wù)器上。J2EE組成了一個(gè)完整企業(yè)級(jí)應(yīng)用的不同部分納入不同的容器(Container)，每個(gè)容器中都包含若干組件(這些組件是需要部署在相應(yīng)容器中的)，同時(shí)各種組件都能使用各種J2EEService/API。J2EE容器包括：◆Web容器服務(wù)器端容器，包括兩種組件JSP和Servlet，JSP和Servlet都是Web服務(wù)器的功能擴(kuò)展，接受Web請(qǐng)求，返回動(dòng)態(tài)的Web頁(yè)面。Web容器中的組件可使用EJB容器中的組件完成復(fù)雜的商務(wù)邏輯?！鬍JB容器服務(wù)器端容器，包含的組件為EJB(EnterpriseJavaBeans)，它是J2EE的核心之一，主要用于服務(wù)器端的商業(yè)邏輯的實(shí)現(xiàn)。EJB規(guī)范定義了一個(gè)開(kāi)發(fā)和部署分布式商業(yè)邏輯的框架，以簡(jiǎn)化企業(yè)級(jí)應(yīng)用的開(kāi)發(fā)，使其較容易地具備可伸縮性、可移植性、分布式事務(wù)處理、多用戶(hù)和安全性等?！鬉pplet容器客戶(hù)端容器，包含的組件為Applet。Applet是嵌在瀏覽器中的一種輕量級(jí)客戶(hù)端，一般而言，僅當(dāng)使用Web頁(yè)面無(wú)法充分地表現(xiàn)數(shù)據(jù)或應(yīng)用界面的時(shí)候，才使用它。Applet是一種替代Web頁(yè)面的手段，我們僅能夠使用J2EE開(kāi)發(fā)Applet，Applet無(wú)法使用J2EE的各種Service和API，這是為了安全性的考慮?！鬉pplicationClient容器客戶(hù)端容器，包含的組件為ApplicationClient。ApplicationClient相對(duì)Applet而言是一種較重量級(jí)的客戶(hù)端，它能夠使用J2EE的大多數(shù)Service和API[10]。CSS3概述CSS即層疊樣式表（Cascading

StyleSheet）。在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來(lái)。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。CSS3將完全向后兼容，所以沒(méi)有必要修改的設(shè)計(jì)來(lái)讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡(jiǎn)單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說(shuō)使用分欄）[11]。JSP概述JSP(Java

Server

Pages)是由Sun

Microsystems公司倡導(dǎo)、許多公司參與一起建立的一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)。JSP技術(shù)有點(diǎn)類(lèi)似ASP技術(shù)，它是在傳統(tǒng)的網(wǎng)頁(yè)HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP標(biāo)記(tag)，從而形成JSP文件(*.jsp)。用JSP開(kāi)發(fā)的Web應(yīng)用是跨平臺(tái)的，即能在Linux下運(yùn)行，也能在其他操作系統(tǒng)上運(yùn)行。JSP技術(shù)使用Java編程語(yǔ)言編寫(xiě)類(lèi)XML的tags和scriptlets，來(lái)封裝產(chǎn)生動(dòng)態(tài)網(wǎng)頁(yè)的處理邏輯。網(wǎng)頁(yè)還能通過(guò)tags和scriptlets訪問(wèn)存在于服務(wù)端的資源的應(yīng)用邏輯。JSP將網(wǎng)頁(yè)邏輯與網(wǎng)頁(yè)設(shè)計(jì)和顯示分離，支持可重用的基于組件的設(shè)計(jì)，使基于Web的應(yīng)用程序的開(kāi)發(fā)變得迅速和容易。Web服務(wù)器在遇到訪問(wèn)JSP網(wǎng)頁(yè)的請(qǐng)求時(shí)，首先執(zhí)行其中的程序段，然后將執(zhí)行結(jié)果連同JSP文件中的HTML代碼一起返回給客戶(hù)。插入的Java程序段可以操作數(shù)據(jù)庫(kù)、重新定向網(wǎng)頁(yè)等，以實(shí)現(xiàn)建立動(dòng)態(tài)網(wǎng)頁(yè)所需要的功能。JSP與Java

Servlet一樣，是在服務(wù)器端執(zhí)行的，通常返回該客戶(hù)端的就是一個(gè)HTML文本，因此客戶(hù)端只要有瀏覽器就能瀏覽。JSP的1.0規(guī)范的最后版本是1999年9月推出的，12月又推出了1.1規(guī)范。目前較新的是JSP1.2規(guī)范，JSP2.0規(guī)范的征求意見(jiàn)稿也已出臺(tái)。JSP頁(yè)面由HTML代碼和嵌入其中的Java代碼所組成。服務(wù)器在頁(yè)面被客戶(hù)端請(qǐng)求以后對(duì)這些Java代碼進(jìn)行處理，然后將生成的HTML頁(yè)面返回給客戶(hù)端的瀏覽器。Java

Servlet

是JSP的技術(shù)基礎(chǔ)，而且大型的Web應(yīng)用程序的開(kāi)發(fā)需要Java

Servlet和JSP配合才能完成。JSP具備了Java技術(shù)的簡(jiǎn)單易用，完全的面向?qū)ο?，具有平臺(tái)無(wú)關(guān)性且安全可靠，主要面向因特網(wǎng)的所有特點(diǎn)。自JSP推出后，眾多大公司都支持JSP技術(shù)的服務(wù)器，如IBM、Oracle、Bea公司等，所以JSP迅速成為商業(yè)應(yīng)用的服務(wù)器端語(yǔ)言[12]。JSP技術(shù)的優(yōu)勢(shì)：⑴一次編寫(xiě)，到處運(yùn)行。在這一點(diǎn)上Java比PHP更出色，除了系統(tǒng)之外，代碼不用做任何更改。⑵系統(tǒng)的多平臺(tái)支持?；旧峡梢栽谒衅脚_(tái)上的任意環(huán)境中開(kāi)發(fā)，在任意環(huán)境中進(jìn)行系統(tǒng)部署，在任意環(huán)境中擴(kuò)展。相比ASP/PHP的局限性是顯而易見(jiàn)的。⑶強(qiáng)大的可伸縮性。從只有一個(gè)小的Jar文件就可以運(yùn)行Servlet/JSP，到由多臺(tái)服務(wù)器進(jìn)行集群和負(fù)載均衡，到多臺(tái)Application進(jìn)行事務(wù)處理，消息處理，一臺(tái)服務(wù)器到無(wú)數(shù)臺(tái)服務(wù)器，Java顯示了一個(gè)巨大的生命力。⑷多樣化和功能強(qiáng)大的開(kāi)發(fā)工具支持。Java已經(jīng)有了許多非常優(yōu)秀的開(kāi)發(fā)工具，而且許多可以免費(fèi)得到，并且其中許多已經(jīng)可以順利的運(yùn)行于多種平臺(tái)之下[13]。系統(tǒng)的需求分析3.1需求分析網(wǎng)上銀行系統(tǒng)需要達(dá)到以下目標(biāo)： 客戶(hù)開(kāi)設(shè)新帳戶(hù)。 客戶(hù)登陸系統(tǒng)后可以進(jìn)行存款、取款、轉(zhuǎn)帳、查詢(xún)已有的業(yè)務(wù)操作記錄等業(yè)務(wù)操作。 客戶(hù)登陸系統(tǒng)后可以修改帳戶(hù)信息、注銷(xiāo)帳戶(hù)等操作。其中注銷(xiāo)帳戶(hù)為邏輯刪除，非物理刪除。 銀行管理人員登陸系統(tǒng)后可以查詢(xún)帳戶(hù)信息、凍結(jié)帳戶(hù)、撤消凍結(jié)。其中帳戶(hù)凍結(jié)后只能進(jìn)行查詢(xún)和存款，不能進(jìn)行其他修改性操作，也不能注銷(xiāo)帳戶(hù)。 對(duì)操作的成功或失敗要給出信息提示。3.1.1客戶(hù)注冊(cè)及登陸功能分析 客戶(hù)使用網(wǎng)上銀行是應(yīng)該有注冊(cè)和登錄功能，登錄成功后方可進(jìn)行其他業(yè)務(wù)的查詢(xún)和辦理。如下圖：客戶(hù)注冊(cè)及登錄客戶(hù)注冊(cè)及登錄客戶(hù)注冊(cè)新帳戶(hù)客戶(hù)登錄客戶(hù)注冊(cè)后修改信息息3.1.2帳戶(hù)交易業(yè)務(wù)功能分析網(wǎng)上銀行的交易應(yīng)該有存款、取款、轉(zhuǎn)賬、查詢(xún)交易記錄等功能。如下圖：帳戶(hù)帳戶(hù)交易業(yè)務(wù)查詢(xún)交易記錄轉(zhuǎn)帳取款存款3.1.3銀行管理員功能分析銀行管理員需要擁有可以查詢(xún)用戶(hù)交易賬單的功能，以及凍結(jié)賬戶(hù)和解凍賬戶(hù)的功能如下圖：銀行管理員登錄銀行管理員登錄查詢(xún)帳戶(hù)信息凍結(jié)帳戶(hù)解凍帳戶(hù)存款取款解除凍結(jié)新用戶(hù)已注冊(cè)用戶(hù)已注冊(cè)未登錄用戶(hù)注冊(cè)登錄普通用戶(hù)管理員凍結(jié)賬戶(hù)查詢(xún)賬戶(hù)信息存款取款解除凍結(jié)新用戶(hù)已注冊(cè)用戶(hù)已注冊(cè)未登錄用戶(hù)注冊(cè)登錄普通用戶(hù)管理員凍結(jié)賬戶(hù)查詢(xún)賬戶(hù)信息辦理業(yè)務(wù)轉(zhuǎn)賬查詢(xún)余額3.2.1網(wǎng)上銀行操作流程網(wǎng)上銀行的操作流程大致如下圖所示：

4網(wǎng)上銀行系統(tǒng)的實(shí)現(xiàn)4.1系統(tǒng)數(shù)據(jù)庫(kù)表的基本設(shè)計(jì)在建設(shè)網(wǎng)站系統(tǒng)之前，我們必須對(duì)系統(tǒng)所用到的數(shù)據(jù)進(jìn)行大致的分類(lèi)和具體的結(jié)構(gòu)設(shè)計(jì)，既要做到清晰明了，又要能適應(yīng)系統(tǒng)各項(xiàng)功能的調(diào)用，而不至于產(chǎn)生結(jié)構(gòu)上的邏輯混亂，保證關(guān)鍵數(shù)據(jù)在意外情況下不會(huì)被破壞，可以說(shuō)數(shù)據(jù)庫(kù)是系統(tǒng)的重中之重。數(shù)據(jù)庫(kù)設(shè)計(jì)要遵循一些規(guī)則，一個(gè)好的數(shù)據(jù)庫(kù)滿(mǎn)足一些嚴(yán)格的約束和要求。盡量分離各實(shí)體對(duì)應(yīng)的表，一個(gè)實(shí)體對(duì)應(yīng)一個(gè)表，搞清楚該實(shí)體有哪些屬性，對(duì)應(yīng)有些什么字段，以及各實(shí)體之間有何種聯(lián)系。實(shí)體、屬性與聯(lián)系是進(jìn)行概念設(shè)計(jì)時(shí)要考慮的三個(gè)元素，也是一個(gè)好的數(shù)據(jù)庫(kù)設(shè)計(jì)的核心。經(jīng)過(guò)分析，需要建立以下各表：4.1.1客戶(hù)信息表（tb_customer）字段字段名類(lèi)型長(zhǎng)度索引是否為空accountID賬號(hào)varchar20主鍵不為空userName用戶(hù)名varchar30不為空sex性別varchar5不為空l(shuí)oginPwd登錄密碼varchar6不為空cardID卡號(hào)varchar18不為空openDate開(kāi)號(hào)日期varchar25不為空balance賬號(hào)余額doublestatus狀態(tài)intuserType用戶(hù)類(lèi)型int4.1.2交易信息表（tb_trade）字段字段名類(lèi)型長(zhǎng)度索引是否為空tradeID交易編號(hào)varchar15主鍵不為空f(shuō)irstAccountID賬號(hào)甲varchar20不為空secondAccountID賬號(hào)乙varchar20tradeType交易類(lèi)型varchar10money交易金額doubletradeDate交易日期varchar304.2銀行系統(tǒng)功能模塊的實(shí)現(xiàn)4.2.1Hibernate的部分配置文件hibernate.cfg.xml主要代碼如下：<hibernate-configuration> <session-factory> <propertyname="show_sql">true</property> <propertyname="format_sql">true</property> <propertyname="hbm2ddl.auto">update</property>name="connection.driver_class">com.mysql.jdbc.Driver</property> <propertyname="connection.url">jdbc:mysql://localhost:3306/bankSystem</property> <propertyname="connection.username">root</property> <propertyname="connection.password">root</property> <mappingresource="com/zdxy/bankSystem/entity/Customer.hbm.xml"/> ……《中間省略若干代碼》 </session-factory></hibernate-configuration重要名詞解釋?zhuān)簊how_sql 是在進(jìn)行CRUD操作時(shí)控制臺(tái)輸出該HQL語(yǔ)句format_sql 是格式化HQL語(yǔ)句hbm2ddl.auto 自動(dòng)建表語(yǔ)句connection.url 連接數(shù)據(jù)庫(kù)URLconnection.username 連接數(shù)據(jù)庫(kù)用戶(hù)名connection.password 連接數(shù)據(jù)庫(kù)密碼4.2.2Struts配置文件struts-config.xmlstruts-config.xml文件，是由ActionServlet讀取的配置文件，它定義了所有關(guān)于Action、ActionForm、ActionForward等的詳細(xì)信息。主要代碼如下：<struts-config><form-beans><form-beanname="customerRegisterForm"type="com.zdxy.bankSystem.actionForm.RegisterCustomerActionForm"/></form-beans><action-mappings><actionpath="/login"name="loginForm"type="com.zdxy.bankSystem.action.CustomerRegisterAction"scope="request"><forwardname="success"path="/mainService.jsp"/><forwardname="fail"path="/login.jsp"/></action>……《代碼省略》主要部分解釋?zhuān)浩渲?lt;form-beans>表情中name屬性是給此ActionForm一個(gè)標(biāo)識(shí)名稱(chēng)；type屬性指定了此ActionForm是哪個(gè)類(lèi)，必須是全路徑的類(lèi)名。我們?cè)趕truts-config.xml文件中，緊接著<form-beans>標(biāo)簽的下面，添加對(duì)LoginAction的配置。<action>標(biāo)簽可以配置的重要屬性包括：path-從頁(yè)面上通過(guò)一個(gè)什么樣的URL路徑來(lái)訪問(wèn)Action（不包含.do）；type–訪問(wèn)這個(gè)URL的時(shí)候，調(diào)用哪個(gè)Action類(lèi)，這是Action的全路徑類(lèi)名name–這個(gè)屬性用來(lái)標(biāo)識(shí)哪個(gè)ActionForm將被創(chuàng)建，并將提交的表單組件給它；scope–FormBean的作用域范圍，可以取值為session和request，一般取值都是request。此時(shí)LoginAction應(yīng)用程序的流程如下圖：4.2.3數(shù)據(jù)庫(kù)的鏈接在dbUtil包下面新建connectionFactory.java文件，其主要代碼如下：publicclassConnectionFactory{ privatestaticPropertiesconfig=newProperties(); static{ InputStreamin=null; try{ ClassLoaderloader=ConnectionFactory.class.getClassLoader(); in=loader.getResourceAsStream("perties");//讀取perties文件中的配置數(shù)據(jù) config.load(in); }catch(IOExceptione){ e.printStackTrace(); }finally{ try{ in.close();// }catch(IOExceptione){ e.printStackTrace(); } } }建立一個(gè)鏈接工廠的類(lèi)，方便了項(xiàng)目中代碼的對(duì)數(shù)據(jù)庫(kù)的調(diào)用。4.3各項(xiàng)功能的實(shí)現(xiàn)4.3.1新用戶(hù)注冊(cè)主要代碼如下：RegisterCustomerActionFormcustomerForm=(RegisterCustomerActionForm)form; Customercustomer=null; customer=customerForm.createCustomer(); CustomerRegisterServicesc=newCustomerRegisterService(); if(sc.save(customer)){ request.getSession().setAttribute("customer",customer); returnmapping.findForward("success"); }else{ returnmapping.findForward("fail"); }4.3.2登錄主要代碼如下： HttpSessionsession=request.getSession(); if(request.getAttribute("loginFail")!=null){ request.removeAttribute("loginFail"); } //對(duì)用戶(hù)進(jìn)行判斷if(user!=null){ session.setAttribute("customer",user); returnmapping.findForward("mainService"); }else{ //用戶(hù)登錄失敗則給出錯(cuò)誤提示 Stringerror="帳戶(hù)號(hào)碼或密碼錯(cuò)誤,請(qǐng)重新登錄!"; request.setAttribute("loginFail",error); returnmapping.findForward("loginError");4.3.3查詢(xún)查詢(xún)這顯示數(shù)據(jù)庫(kù)中該用戶(hù)的信息，如下圖：4.3.4轉(zhuǎn)賬主要代碼如下：if(action.equals("zhuanzhang")){ doublemoney=Double.parseDouble(request.getParameter("money")); StringaccountID2=request.getParameter("accountID2"); if(c.getBalance()-money<0){ //轉(zhuǎn)賬金額比余額小 request.setAttribute("notmoney","余額不足"); returnmapping.findForward("zhuanzhangFail"); } Customerc2=TradeService.find(accountID2); if(c2==null){ // request.setAttribute("zhuanzhangError","轉(zhuǎn)帳帳號(hào)錯(cuò)誤或不存在"); returnmapping.findForward("zhuanzhangFail"); }else{ TradeService.zhuanzhang(c.getAccountID(),c2.getAccountID(),money); //轉(zhuǎn)賬完畢改變余額 c.setBalance(c.getBalance()-money); session.setAttribute("customer",c); }4.3.5取款主要代碼如下：if(action.equals("qukuan")){ doublemoney=Double.parseDouble(request.getParameter("money")); if(c.getBalance()-money<0){ request.setAttribute("notmoney","余額不足"); returnmapping.findForward("notmoney"); } TradeService.qukuan(c.getAccountID(),money);