基于HTML5的響應式網(wǎng)站的設計與實現(xiàn)(論文)正文

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

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

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

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

Server

Pages)是由Sun

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

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

Servlet

是JSP的技術基礎，而且大型的Web應用程序的開發(fā)需要Java

Servlet和JSP配合才能完成。JSP具備了Java技術的簡單易用，完全的面向?qū)ο?，具有平臺無關性且安全可靠，主要面向因特網(wǎng)的所有特點。自JSP推出后，眾多大公司都支持JSP技術的服務器，如IBM、Oracle、Bea公司等，所以JSP迅速成為商業(yè)應用的服務器端語言[12]。JSP技術的優(yōu)勢：⑴一次編寫，到處運行。在這一點上Java比PHP更出色，除了系統(tǒng)之外，代碼不用做任何更改。⑵系統(tǒng)的多平臺支持?；旧峡梢栽谒衅脚_上的任意環(huán)境中開發(fā)，在任意環(huán)境中進行系統(tǒng)部署，在任意環(huán)境中擴展。相比ASP/PHP的局限性是顯而易見的。⑶強大的可伸縮性。從只有一個小的Jar文件就可以運行Servlet/JSP，到由多臺服務器進行集群和負載均衡，到多臺Application進行事務處理，消息處理，一臺服務器到無數(shù)臺服務器，Java顯示了一個巨大的生命力。⑷多樣化和功能強大的開發(fā)工具支持。Java已經(jīng)有了許多非常優(yōu)秀的開發(fā)工具，而且許多可以免費得到，并且其中許多已經(jīng)可以順利的運行于多種平臺之下[13]。JQuery概述JQuery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇[2]。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可。jQuery是一個兼容多瀏覽器的javascript庫，核心理念是writeless,domore(寫得更少,做得更多)。jQuery在2006年1月由美國人JohnResig在紐約的barcamp發(fā)布，吸引了來自世界各地的眾多JavaScript高手加入，由DaveMethvin率領團隊進行開發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫，在世界前10000個訪問最多的網(wǎng)站中，有超過55%在使用jQuery[14]。jQuery是免費、開源的，使用MIT許可協(xié)議。jQuery的語法設計可以使開發(fā)更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的靜態(tài)或動態(tài)網(wǎng)頁。jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發(fā)的庫[15]。B/S結構概述B/S（Browser/Server）結構即瀏覽器和服務器結構。它是隨著Internet技術的興起，對C/S結構的一種變化或者改進的結構。在這種結構下，用戶工作界面是通過WWW瀏覽器來實現(xiàn)，極少部分事務邏輯在前端（Browser）實現(xiàn)，但是主要事務邏輯在服務器端（Server）實現(xiàn)，形成所謂三層3-tier結構。這樣就大大簡化了客戶端電腦載荷，減輕了系統(tǒng)維護與升級的成本和工作量，降低了用戶的總體成本（TCO）。以目前的技術看，局域網(wǎng)建立B/S結構的網(wǎng)絡應用，并通過Internet/Intranet模式下數(shù)據(jù)庫應用，相對易于把握、成本也是較低的。它是一次性到位的開發(fā)，能實現(xiàn)不同的人員，從不同的地點，以不同的接入方式訪問和操作共同的數(shù)據(jù)庫；它能有效地保護數(shù)據(jù)平臺和管理訪問權限，服務器數(shù)據(jù)庫也很安全。特別是在JAVA這樣的跨平臺語言出現(xiàn)之后，B/S架構管理軟件更是方便、快捷、高效[16]。B/S架構軟件的優(yōu)勢：⑴維護和升級方式簡單目前，網(wǎng)站平臺的改進和升級越來越頻繁，B/S架構的產(chǎn)品明顯體現(xiàn)著更為方便的特性。B/S架構的平臺只需要管理服務器就行了，所有的客戶端只是瀏覽器，根本不需要做任何的維護。無論用戶的規(guī)模有多大，有多少分支機構都不會增加任何維護升級的工作量，所有的操作只需要針對服務器進行；如果是異地，只需要把服務器連接專網(wǎng)即可，實現(xiàn)遠程維護、升級和共享。所以客戶機越來越“瘦”，而服務器越來越“胖”是將來信息化發(fā)展的主流方向。今后，系統(tǒng)升級和維護會越來越容易，而使用起來會越來越簡單，這對用戶人力、物力、時間、費用的節(jié)省是顯而易見的。⑵成本降低，選擇更多大家都知道windows在桌面電腦上幾乎一統(tǒng)天下，瀏覽器成為了標準配置，但在服務器操作系統(tǒng)上windows并不是處于絕對的統(tǒng)治地位?，F(xiàn)在的趨勢是凡使用B/S架構的應用管理軟件，只需安裝在Linux服務器上即可，而且安全性高。所以服務器操作系統(tǒng)的選擇是很多的，不管選用那種操作系統(tǒng)都可以讓大部分人使用windows作為桌面操作系統(tǒng)電腦不受影響，這就使的最流行免費的Linux操作系統(tǒng)快速發(fā)展起來，Linux除了操作系統(tǒng)是免費的以外，連數(shù)據(jù)庫也是免費的，這種選擇非常盛行[17]。MySQL概述MySQL是一個關系型數(shù)據(jù)庫管理系統(tǒng)，由瑞典MySQLAB公司開發(fā)，目前屬于

Oracle

旗下公司。MySQL最流行的關系型數(shù)據(jù)庫管理系統(tǒng)，在WEB應用方面MySQL是最好的關系數(shù)據(jù)庫管理系統(tǒng)(RelationalDatabaseManagementSystem,RDBMS)應用軟件之一[18]。MySQL所使用的SQL語言是用于訪問數(shù)據(jù)庫的最常用標準化語言。MySQL軟件采用了雙授權政策，它分為社區(qū)版和商業(yè)版，由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，一般中小型網(wǎng)站的開發(fā)都選擇MySQL作為網(wǎng)站數(shù)據(jù)庫[19]。系統(tǒng)需求分析系統(tǒng)基本需求通過網(wǎng)站建設，借助網(wǎng)絡推廣企業(yè)的形象、宣傳企業(yè)的產(chǎn)品、發(fā)布公司新聞，從而使更多的用戶認識企業(yè)、了解企業(yè)，同時采用面向未來的第四代網(wǎng)站技術，以html5為基礎，自適應pc、筆記本、pad、手機等不同尺寸的終端?！耙淮卧O計、普遍適用”。設計時尚大氣，更好的展示企業(yè)品牌形象、更利于網(wǎng)站優(yōu)化、后臺管理更便捷。迎合移動互聯(lián)網(wǎng)的趨勢，增加移動終端的客戶轉(zhuǎn)化率。本系統(tǒng)從功能上，可分為：前端功能包括：信息瀏覽，站內(nèi)查詢，會員注冊，會員登錄會員功能包括：藏品鑒定，藏品養(yǎng)護后臺功能包括：商品管理，問答管理，會員管理，內(nèi)容管理圖3-1系統(tǒng)訪問權限圖從訪問權限上，可分為系統(tǒng)管理員，會員，游客。系統(tǒng)的權限設計使得不同的角色只能使用相對應的功能。系統(tǒng)管理員可以使用所有功能，包括前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄功能，會員的藏品鑒定、藏品養(yǎng)護功能，以及后臺的商品管理、問答管理、會員管理和內(nèi)容管理功能；會員可以使用前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄功能，會員的藏品鑒定、藏品養(yǎng)護功能；游客只能使用前端的信息瀏覽、站內(nèi)查詢功能和會員的會員注冊功能。具體權限如圖3-1.系統(tǒng)用例圖系統(tǒng)管理員用例系統(tǒng)管理員則負責具體信息系統(tǒng)日常管理和維護，具有信息系統(tǒng)的最高管理權限。圖3-2管理員用例圖系統(tǒng)管理員可以使用所有功能，包括前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄功能，會員的藏品鑒定、藏品養(yǎng)護功能，以及后臺的商品管理、問答管理、會員管理和內(nèi)容管理功能。用例圖如圖3-2.會員用例會員是指通過正規(guī)流程申請?zhí)峤换拘畔?，加入公司會員系統(tǒng)的客戶。圖3-3會員用例圖會員可以使用前端的信息瀏覽、站內(nèi)查詢、會員注冊、會員登錄功能和會員的藏品鑒定、藏品養(yǎng)護功能。用例圖如圖3-3.游客用例游客是指，通過互聯(lián)網(wǎng)在在線訪問瀏覽網(wǎng)站，之前和公司無關聯(lián)的訪客。圖3-4游客用例圖游客只能使用前端的信息瀏覽、站內(nèi)查詢功能和會員的會員注冊功能。用例圖如圖3-4.系統(tǒng)設計與實現(xiàn)系統(tǒng)設計原則1.移動優(yōu)先原則隨著移動互聯(lián)網(wǎng)的發(fā)展，移動設備的不斷增加，考慮到當前的發(fā)展形勢，優(yōu)先考慮移動設計無可厚非。所謂移動優(yōu)先原則是指，整個頁面設計的流程優(yōu)先考慮到移動設備的兼容顯示，再次前提下在考慮PC機的兼容顯示。2.觸控優(yōu)先原則對觸控優(yōu)先原則的考慮也是基于移動互聯(lián)網(wǎng)的發(fā)展迅速的前提下提出的。在移動設備終端上目前觸控是我們主要的一種人機交互方式?；谶@點在設計頁面上就應該優(yōu)先考慮設計出易于手指觸摸的按鈕等交互元素其次才是考慮同樣易于鼠標點擊的按鈕等其他元素。所以網(wǎng)頁設計師應該先從觸控優(yōu)先原則入手設計頁面，之后在此基礎上對頁面進行適當?shù)恼{(diào)整以達到對PC端的兼容顯示。使網(wǎng)頁上的相關交互元素既適合手指觸摸又適合鼠標點擊。3.彈性化原則在彈性化布局的基礎上引入CSS媒介查詢的功能使得web響應式的設計和開發(fā)思路讓頁面真正的富有彈性。頁面布局再不會被破壞，圖片的尺寸可以被自動調(diào)整。這樣無論用戶使用任何設備，頁面都能夠自動響應與調(diào)整。4.宏觀性原則在響應式Web開發(fā)過程中，設計人員在項目的每一個階段都要在多種瀏覽器和不同尺寸屏幕中進行測試，以盡早發(fā)現(xiàn)問題。5.開放性原則支持跨平臺運行的體系架構，系統(tǒng)可以運行在各種Windows平臺。系統(tǒng)具備互操作性和可擴展性性，具有兼容性。6.穩(wěn)定性原則保證系統(tǒng)采用成熟穩(wěn)定的操作系統(tǒng)、數(shù)據(jù)庫、網(wǎng)絡協(xié)議等，保證系統(tǒng)長期穩(wěn)定的不間斷運行。7.安全性原則對于基于網(wǎng)絡的應用，最重要的問題之一是安全性。系統(tǒng)具備精細的權限管理，在網(wǎng)絡安全各個環(huán)節(jié)采用有力措施，保證系統(tǒng)網(wǎng)絡整體安全性。系統(tǒng)前端設計與實現(xiàn)首頁：網(wǎng)站首頁是一個網(wǎng)站的入口網(wǎng)頁，作用是引導互聯(lián)網(wǎng)用戶瀏覽網(wǎng)站以及其他部分的內(nèi)容。這部分內(nèi)容一般被認為是一個目錄性質(zhì)的內(nèi)容。圖4-1網(wǎng)站首頁圖整體個網(wǎng)站首頁遵循扁平化設計，簡潔大氣，在色彩搭配上，根據(jù)企業(yè)LOGO色彩、行業(yè)特性進行設計，主次分明，沖擊力強。首頁為多屏，鼠標下拉或滾輪滾動展示，包含有導航欄，banner圖區(qū)，站內(nèi)搜索框，藝術資訊，藝術名家，精品展覽，合作機構的部分展示，這樣設計的目的是讓訪客瀏覽更輕松便捷，突出公司的服務和特色。另外，這樣的設計更適合移動終端的上滑、下滑顯示，首頁內(nèi)容更豐富直觀，瀏覽更輕松便捷。如圖4-1.導航欄：網(wǎng)站導航欄位于網(wǎng)站最上面，通常網(wǎng)站的主導航主要包括網(wǎng)站的首頁和產(chǎn)品欄目及各個單頁面的導入鏈接，是網(wǎng)站中最主要的、必不可少的內(nèi)容。方便用戶以最快，最簡單的到達不同的網(wǎng)頁。同時也方便用戶一目了然的發(fā)現(xiàn)網(wǎng)站的主要信息，而不用費力的尋找。圖4-2導航欄導航欄功能劃分包括：首頁，藝術品，展覽，資訊，藝術名家，會員中心，關于我們，常見問題；功能根據(jù)行業(yè)需求和客戶體驗來劃分，精簡全面便捷的展示企業(yè)信息和服務。其中鼠標經(jīng)過不同欄目時，當鼠標懸停在欄目上方，欄目背景色變?yōu)榧t色，并展開二級導航欄目。此處用的是CSS3中的:hover偽類實現(xiàn)的，:hover偽類在鼠標移到元素上時向此元素添加特殊的樣式。如圖4-2.藝術品：藝術品欄的設計目的是為了讓訪客更細致的了解公司藝術品相關的服務和流程，是網(wǎng)站內(nèi)容更豐富全面。如圖4-3藝術品和二級導航藝術品下面二級導航欄目包含鑒證備案，資產(chǎn)管理，修復保養(yǎng)，個性定制。鑒證備案中包含有鑒證的意義以及具體流程和信息，資產(chǎn)管理中包含有基金、信托、按揭和鑒賞管理，修復保養(yǎng)中包含有保養(yǎng)的意義和具體流程，個性定制中包含有服務項目及優(yōu)勢。如圖4-3.展覽：設計展覽欄主要是對公司的產(chǎn)品進行一個集中展示。圖4-4展覽和二級導航展覽欄主要分為中國繪畫，書法篆刻，西畫雕塑，古瓷雜項，當代工藝五個板塊?？梢赃x擇直接點擊展覽進入展覽大廳，也可以選擇直接點擊不同二級欄目進入細分板塊。如圖4-4.圖4-5展覽頁布局展覽大廳可以看到五個板塊分類，不同價格區(qū)間，以及通過對展品的人氣高低、價格高低、錄入時間來進行排序，更方便訪客對展品進行定位和選擇。展品以通欄的形式布局，平面感強，是產(chǎn)品更清晰突出。鼠標懸停在圖片上，會有圖片的信息介紹彈出，鼠標離開消失，互動性和體驗度很高。這個用到的是jQuery中的mouseover和mouseout事件，鼠標經(jīng)過懸停時mouseover觸發(fā)顯示信息，鼠標離開mouseout觸發(fā)信息消失。如圖4-5.圖4-6商品圖片的放大鏡功能點擊圖片信息上的查看詳情，就可以看到該展品的詳細信息，此時鼠標經(jīng)過懸停圖片，會有一個一個放大鏡效果，這樣設計的初衷是為了讓訪客看到更多的展品細節(jié)，獲取更多信息，提高體驗度。如圖4-6.資訊：資訊是用戶因為及時地獲得它并利用它而能夠在相對短的時間內(nèi)給自己帶來價值的信息，資訊有時效性和地域性，它必須被消費者利用。資訊是一種信息，涵蓋的不只是新聞，還可以包括其他媒介。圖4-7資訊和二級導航資訊欄的設計主要是發(fā)布即時的行業(yè)新聞動態(tài)，活動宣傳，文化展示。其中包含有行業(yè)動態(tài)，藝術活動，藝術展訊，藝術視頻四個二級導航。如圖4-7.藝術名家：藝術名家欄主要是向訪客展示介紹一些有所成的藝術家，要知道所有藝術品都離不開創(chuàng)造它的藝術家。圖4-8藝術名家選擇一些優(yōu)秀的藝術家進行介紹展示，首先可以提升藝術家知名度，提高展品熱度，其次訪客也可以了解到各個優(yōu)秀藝術家，了解更多行業(yè)知識，當然優(yōu)秀藝術家入駐，也可以很好的提升企業(yè)形象和實力。如圖4-8.會員中心：會員制是一種人與人或組織與組織之間進行溝通的媒介，它是由某個組織發(fā)起并在該組織的管理運作下，吸引客戶自愿加入，目的是定期與會員聯(lián)系，為他們提供具有較高感知價值的利益包。圖4-9會員中心和二級導航圖4-10會員注冊、登錄設置會員可以區(qū)別一般訪客，增加客戶粘度，為客戶提供更多，更優(yōu)質(zhì)，更便捷的服務。會員中心包含有鑒定藏品，藏品養(yǎng)護兩個二級導航。如圖4-9.進入會員中心必須要先經(jīng)過注冊和登錄。如圖4-10.圖4-11送鑒信息圖4-12送鑒養(yǎng)護統(tǒng)計會員登錄后，就可以使用會員功能，包括鑒定藏品和藏品養(yǎng)護。點開二級導航選擇送鑒，就可以填寫送鑒信息。如圖4-11.也可以查看送鑒和養(yǎng)護信息。如圖4-12.圖4-13個人中心點擊會員中心，可以進入到個人中心，可以顯示自己會員等級和送鑒養(yǎng)護的藏品。如圖4-13.關于我們：主要對企業(yè)做一個詳細的介紹，讓訪客對企業(yè)有個更系統(tǒng)細致的了解。4-14關于我們關于我們中可以寫企業(yè)的文化背景，整體實力，服務宗旨，可以加深訪客對企業(yè)的認知和了解，下面合作機構的設置，是加強行業(yè)內(nèi)的交流與互動，也通過同行也的知名平臺，來提升和打造自己的品牌。如圖4-14.常見問題：解決訪客疑慮和問題，種植價值觀，提高訪客轉(zhuǎn)化率。圖4-15常見問題和二級導航圖4-16鑒證備案問題訪客在瀏覽網(wǎng)站內(nèi)容時，難免對服務產(chǎn)生的疑慮和問題，通過對問題的整理和分析，總結歸納初一些常見問題，并進行分類，有鑒證備案，鑒證流程，資產(chǎn)管理，修復養(yǎng)護，個性定制。如圖4-15.每個板塊都有一些相關概念和疑問解答。如圖4-16.站內(nèi)搜索：站內(nèi)搜索通俗來講是一個網(wǎng)站或商城的“大門口”，一般在形式上包括兩個要件：搜索入口和搜索結果頁面，但在其后臺架構上是比較復雜的，其核心要件包括：中文分詞技術、頁面抓取技術、建立索引、對搜索結果排序以及對搜索關鍵詞的統(tǒng)計、分析、關聯(lián)、推薦等。圖4-17站內(nèi)搜索站內(nèi)搜索的設置，主要是針對商品這塊，由于商品數(shù)量較大，單個尋找比較麻煩，也很浪費時間，使用站內(nèi)搜索，按備案編號或物品名稱查詢，快速便捷。如圖4-17.系統(tǒng)后臺設計與實現(xiàn)系統(tǒng)后臺的設計首先要功能齊全，能全面的監(jiān)控和管理前端及數(shù)據(jù)。其次是管理要便捷，因為一般系統(tǒng)管理員對代碼都不了解，關于內(nèi)容的增刪改查要簡單可操作。最后也是很重要的一點是，安全性要好，這樣才能保障系統(tǒng)正常穩(wěn)定的運行。圖4-18管理員登錄管理員登錄：管理員登錄界面包括用戶名、密碼、驗證碼、記住用戶名、登錄等。正確輸入用戶名、密碼、驗證碼才能進入后臺管理系統(tǒng)。點擊驗證碼圖片可以更新驗證碼，記住用戶名的設置是為了方便管理員下次登錄。如圖4-18.圖4-19后臺系統(tǒng)界面后臺管理系統(tǒng)：管理員登錄后，會進入后臺管理系統(tǒng)界面，包括功能導航、商品管理、問答管理、會員管理、內(nèi)容管理等模塊。界面采用了分上下左右布局，左側為導航區(qū)域，右側為用戶主要操作區(qū)域。在右上可以進行賬號設置，退出后臺操作。如圖4-19.圖4-20商品管理商品管理：商品管理包含了商品管理、商品分類、商品參數(shù)、商品屬性、規(guī)格管理、藝術名家等模塊。在商品列表中可以添加、刪除商品，也可以對商品進行篩選，設置每頁顯示的商品條數(shù)等。如圖4-20.圖4-21添加商品參數(shù)添加商品參數(shù)：商品參數(shù)中可以選擇添加操作，添加內(nèi)容包括綁定分類、商品名稱、商品排序、增加參數(shù)等。填寫完整信息后，點擊確定就可以添加成功了，放棄添加則點擊返回。如圖4-21.圖4-22問答管理問答管理：問答管理實現(xiàn)對常見問題的歸類解答，在問答管理界面可以對常見問題進行添加、刪除操作。展示形式是問題類型，問題描述，問題解答。還可以對每頁顯示的問題條數(shù)進行設置。如圖4-22.圖4-23會員管理會員管理：會員管理實現(xiàn)會員基本信息、等級，藏品的鑒定、養(yǎng)護的管理。選擇會員后，可進行編輯修改和刪除操作，也可以在后臺直接添加會員，填寫會員信息。還可以對每頁顯示的會員數(shù)進行設置。如圖4-23.圖4-24文章管理內(nèi)容管理：內(nèi)容管理實現(xiàn)系統(tǒng)的實時新聞資訊發(fā)布，相關文章添加。在文章列表中，展示包括文章標題、文章分類、是否發(fā)布、文章內(nèi)容等，選擇文章可以進行修改、刪除等操作。也可以對每頁顯示的文章篇數(shù)進行設置。如圖4-24.數(shù)據(jù)庫設計與實現(xiàn)數(shù)據(jù)庫表根據(jù)設計稿設計出數(shù)據(jù)庫所需要的主要表，如下所示：[1]表3-2t_art藏品表表字段字段說明Id藏品IDyear工藝年份sn編號artName名稱file文件length尺寸長width尺寸寬weight重量type種類meterial材質(zhì)status狀態(tài)typeId鑒定or養(yǎng)護time鑒定時間member會員藏品表：記錄藏品的基本信息，主要包括藏品編號、名稱、尺寸、重量、種類、材質(zhì)、狀態(tài)、鑒定養(yǎng)護、鑒定時間以及關聯(lián)的會員等。表3-2t_art商品表表字段字段說明Id商品IDsn編號artName名稱fullName全稱price銷售價cost成本價marketPrice市場價image展示圖片unit單位weight重量stock庫存isMarketable是否上架introduction介紹memo備注keyword搜索關鍵詞weekHits點擊數(shù)商品表：記錄商品的基本信息，主要包括編號、名稱、全稱、售價、成本、圖片、重量、庫存、介紹、備注、搜索關鍵詞以及點擊數(shù)等。表3-2t_article文章表表字段字段說明Id文章IDtitle標題author作者content內(nèi)容seoTitle頁面標題seoKeywords頁面關鍵詞seoDescription頁面描述isPublication是否發(fā)布isTop是否置頂hits點擊數(shù)articleCategory文章分類image展示圖片文章表：記錄文章的基本信息，主要包括文章標題、作者、文章內(nèi)容、頁面標題、頁面關鍵詞、頁面描述、是否發(fā)布、是否置頂、點擊數(shù)、分類、圖片等。表3-3t_article_category文章分類表表字段字段說明id文章分類IDname名稱seoTitle頁面標題seoKeywords頁面關鍵詞seoDescription頁面描述treePath樹路徑grade層級parent上級分類children下級分類articles文章文章分類表：記錄文章分類的基本信息，主要包括文章分類名稱、頁面標題、頁面關鍵詞、頁面描述、樹路徑、層級、上級分類、下級分類、關聯(lián)文章等。表3-3t_question問題表表字段字段說明id問題IDques問題內(nèi)容answer答案內(nèi)容questionCategory問題分類問題表：記錄問題的基本信息，主要包括問題ID，問題內(nèi)容，答案內(nèi)容，問題分類等。表3-3t_quest_category問題分類表表字段字段說明id問題分類IDname名稱seoTitle頁面標題seoKeywords頁面關鍵詞seoDescription頁面描述treePath樹路徑grade層級parent上級分類children下級分類articles問題問題分類表：記錄問題分類的基本信息，主要包括問題分類名稱、頁面標題、頁面關鍵詞、頁面描述、樹路徑、層級、上級分類、下級分類、關聯(lián)問題等。表3-3t_identify藏品鑒定表表字段字段說明id鑒定IDtitle名稱name姓名area地區(qū)address地址phone電話email郵箱member會員藏品鑒定表：記錄藏品鑒定的基本信息，主要包括藏品名稱、姓名、地區(qū)、地址、電話、郵箱、關聯(lián)會員等。表3-3t_reservation藏品養(yǎng)護表表字段字段說明id養(yǎng)護IDtitle名稱name姓名area地區(qū)address地址phone電話email郵箱member會員藏品養(yǎng)護表：記錄藏品養(yǎng)護的基本信息，主要包括藏品名稱、姓名、地區(qū)、地址、電話、郵箱、關聯(lián)會員等。表3-9t_member會員表表字段字段說明id申請人IDusername用戶名Password密碼emailE-mailpoint積分amount消費金額balance余額isEnabled是否啟用isLocked是否鎖定loginFailureCount連續(xù)登錄失敗次數(shù)lockedDate鎖定日期name姓名gender性別birth出生日期zipCode地址mobile手機號memberRank會員等級會員表：記錄會員的基本信息，主要包括會員用戶名、密碼、E-mail、積分、消費金額、是否啟用、是否鎖定、連續(xù)登錄失敗次數(shù)、鎖定日期、姓名、性別、出生日期、地址、手機號以及會員等級等。數(shù)據(jù)庫完整性和安全性1.數(shù)據(jù)庫的完整性約束數(shù)據(jù)庫完整性（DatabaseIntegrity）是指數(shù)據(jù)庫中數(shù)據(jù)在邏輯上的一致性、正確性、有效性和相容性。數(shù)據(jù)庫完整性由各種各樣的完整性約束來保證，因此可以說數(shù)據(jù)庫完整性設計就是數(shù)據(jù)庫完整性約束的設計。數(shù)據(jù)庫完整性約束可以通過DBMS或應用程序來實現(xiàn)，基于DBMS的完整性約束作為模式的一部分存入數(shù)據(jù)庫中。數(shù)據(jù)庫的完整性約束主要包括一下三個方面要求：實體完整性（EntityIntegrity）實體完整性指表中行的完整性。主要用于保證操作的數(shù)據(jù)（記錄）非空、唯一且不重復。即實體完整性要求每個關系（表）有且僅有一個主鍵，每一個主鍵值必須唯一，而且不允許為“空”（NULL）或重復。若屬性A是基本關系R的主屬性，則屬性A不能取空值，即主屬性不可為空值。用戶提交信息后，系統(tǒng)會對用戶所填的信息進行驗證，對于其中的關鍵信息沒有填或者數(shù)據(jù)非法時，系統(tǒng)會提示用戶更改后再提交，這樣保證了系統(tǒng)的實體完整性。參照完整性（ReferentialIntegrity）參照完整性屬于表間規(guī)則。對于永久關系的相關表，在更新、插入或刪除記錄時，如果只改其一，就會影響數(shù)據(jù)的完整性。在關系數(shù)據(jù)庫中，關系之間的聯(lián)系是通過公共屬性實現(xiàn)的。這個公共屬性經(jīng)常是一個表的主鍵，同時是另一個表的外鍵。參照完整性體現(xiàn)在兩個方面：實現(xiàn)了表與表之間的聯(lián)系，外鍵的取值必須是另一個表的主鍵的有效值，或是“空”值。用戶定義完整性（User-definedIntegrity）用戶定義完整性是對數(shù)據(jù)表中字段屬性的約束。包括字段的值域、字段的類型和字段的有效規(guī)則（如小數(shù)位數(shù)）等約束，是由確定關系結構時所定義的字段的屬性決定的。如，百分制成績的取值范圍在0~100之間等。2.數(shù)據(jù)庫的安全性數(shù)據(jù)庫安全包含兩層含義：第一層是指系統(tǒng)運行安全，系統(tǒng)運行安全通常受到的威脅如下，一些網(wǎng)絡不法分子通過網(wǎng)絡，局域網(wǎng)等途徑通過入侵電腦使系統(tǒng)無法正常啟動，或超負荷讓機子運行大量算法，并關閉cpu風扇，使cpu過熱燒壞等破壞性活動；第二層是指系統(tǒng)信息安全，系統(tǒng)安全通常受到的威脅如下，黑客對數(shù)據(jù)庫入侵，并盜取想要的資料。數(shù)據(jù)庫系統(tǒng)的安全特性主要是針對數(shù)據(jù)而言的，包括數(shù)據(jù)獨立性、數(shù)據(jù)安全性、數(shù)據(jù)完整性、并發(fā)控制、故障恢復等幾個方面。本系統(tǒng)的安全設計包括服務器和數(shù)據(jù)庫兩方面。當用戶訪問系統(tǒng)特殊功能時，系統(tǒng)會首先檢查用戶是否登錄，如果用戶沒有登錄，則將頁面跳轉(zhuǎn)至登錄界面。用戶提交登錄信息后，系統(tǒng)會對用戶的身份進行核對，如果在數(shù)據(jù)庫中找到相關記錄，打開相應功能界面。在系統(tǒng)管理界面，提示用戶使用管理員賬號登錄，沒有管理權限的用戶無法登錄系統(tǒng)后臺。系統(tǒng)確認了管理員身份后會打開后臺管理界面，系統(tǒng)管理員可以整個系統(tǒng)的數(shù)據(jù)庫進行管理和維護。系統(tǒng)測試系統(tǒng)測試是將已經(jīng)確認的軟件、計算機硬件、外設、網(wǎng)絡等其他元素結合在一起，進行信息系統(tǒng)的各種組裝測試和確認測試，系統(tǒng)測試是針對整個產(chǎn)品系統(tǒng)進行的測試，目的是驗證系統(tǒng)是否滿足了需求規(guī)格的定義，找出與需求規(guī)格不符或與之矛盾的地方，從而提出更加完善的方案。系統(tǒng)測試發(fā)現(xiàn)問題之后要經(jīng)過調(diào)試找出錯誤原因和位置，然后進行改正。是基于系統(tǒng)整體需求說明書的黑盒類測試，應覆蓋系統(tǒng)所有聯(lián)合的部件。對象不僅僅包括需測試的軟件，還要包含軟件所依賴的硬件、外設甚至包括某些數(shù)據(jù)、某些支持軟件及其接口等。測試目的系統(tǒng)測試是為了發(fā)現(xiàn)錯誤而執(zhí)行程序的過程，成功的測試是發(fā)現(xiàn)了至今尚未發(fā)現(xiàn)的錯誤的測試。測試的目的就是希望能以最少的人力和時間發(fā)現(xiàn)潛在的各種錯誤和缺陷。應根據(jù)開發(fā)各階段的需求、設計等文檔或程序的內(nèi)部結構精心設計測試用例，并利用這些實例來運行程序，以便發(fā)現(xiàn)錯誤。信息系統(tǒng)測試應包括軟件測試、硬件測試和網(wǎng)絡測試。硬件測試、網(wǎng)絡測試可以根據(jù)具體的性能指標來進行，此處所說的測試更多的是指軟件測試。系統(tǒng)測試是保證系統(tǒng)質(zhì)量和可靠性的關鍵步驟，是對系統(tǒng)開發(fā)過程中的系統(tǒng)分析系統(tǒng)設計和實施的最后復查。根據(jù)測試的概念和目的，在進行信息系統(tǒng)測試時應遵循以基本原則。應盡早并不斷地進行測試。測試不是在應用系統(tǒng)開發(fā)完之后才進行的。由于原始問題的復雜性、開發(fā)各階段的多樣性以及參加人員之間的協(xié)調(diào)等因素，使得開發(fā)各個階段都有可能出現(xiàn)錯誤。因此，測試應貫穿在開發(fā)的各個階段，盡早糾正錯誤，消除隱患。測試方法系統(tǒng)測試主要進行兼容測試、功能確認測試、安全性測試、性能測試等。性能測試分四個方面：文檔、界面、功能、性能。測試用例應包括合理的和不合理的輸入條件。測試方法有功能測試，性能測試，易用性測試，兼容性測試，安全性測試等。測試過程響應式功能測試：響應式動態(tài)網(wǎng)站設計好后，我們需要在瀏覽器上模擬各種終端設備屏幕大小下的頁面展示效果。圖5-1PC端測試截圖PC端測試：在PC端打開網(wǎng)頁，瀏覽網(wǎng)站整體頁面，包括首頁、二級頁面的展示情況，有無出現(xiàn)圖片分辨率、字體排版錯誤。經(jīng)測試各方面展示良好，未出現(xiàn)測試目的中的錯誤。如圖5-1.圖5-2Pad端測試截圖Pad端測試：在電腦端打開網(wǎng)頁，瀏覽網(wǎng)站整體頁面，包括首頁、二級頁面的展示情況，有無出現(xiàn)圖片分辨率、字體排版錯誤。經(jīng)測試各方面展示良好，未出現(xiàn)測試目的中的錯誤。如圖5-2.圖5-3移動端測試截圖移動端測試：在移動端打開網(wǎng)頁，瀏覽網(wǎng)站整體頁面，包括首頁、二級頁面的展示情況，有無出現(xiàn)圖片分辨率、字體排版錯誤。經(jīng)測試各方面展示良好，未出現(xiàn)測試目的中的錯誤。如圖5-3.會員功能測試：會員功能需要注冊、登錄測試，以確保會員功能的穩(wěn)定性和安全性。圖5-4注冊正、誤測試截圖會員注冊：注冊會員要填寫手機號、用戶名、密碼、密碼驗證、驗證碼。錯誤測試中主要驗證各項限制條件，手機號格式、用戶名長度、密碼長度等。經(jīng)測試各項限制條件完整并給出提示。正確輸入條件時注冊成功。如圖5-4.圖5-5登錄正、誤測試截圖會員登錄：登錄會員要填寫用戶名、密碼、驗證碼。錯誤測試中主要驗證各項限制條件，用戶名、密碼、驗證碼等。經(jīng)測試各項限制條件完整并給出提示。正確輸入條件時登錄成功。如圖5-5.站內(nèi)搜索功能測試：站內(nèi)搜索功能需要對不同查詢條件進行測試，以確保站內(nèi)搜索功能的完整性、穩(wěn)定性和準確性。圖5-6空查詢測試截圖空查詢測試：空查詢測試是為了測試站內(nèi)搜索功能的完整性。選擇按物品名稱查詢，在未填信息時點擊GO查詢測試，彈出錯誤提示。提示選擇查找類型或產(chǎn)品。測試結果說明功能完整。如圖5-6.圖5-7備案編號查詢測試截圖備案編號查詢測試：選擇按備案編號查詢，在站內(nèi)搜索框中輸入備案編號201512191818，點擊GO查詢測試，跳轉(zhuǎn)到《張京城賞秋》圖頁面，查詢成功。如圖5-7.圖5-8物品名稱查詢測試截圖物品名稱查詢測試：選擇按物品名稱查詢，在站內(nèi)搜索框中輸入物品名稱方見塵早春圖，點擊GO查詢測試，跳轉(zhuǎn)到《方見塵早春圖》頁面，查詢成功。如圖5-8.總結和展望通過本文從理論和技術兩個方面的論述，實現(xiàn)了一個具體的藝術資產(chǎn)·中國響應式官網(wǎng)平臺。經(jīng)過嚴密的測試，和預上線一段時間以來的系統(tǒng)監(jiān)控，系統(tǒng)所有預期功能實現(xiàn)成功，且運行穩(wěn)定。目前藝術資產(chǎn)·中國網(wǎng)站平臺已經(jīng)完成并已經(jīng)投入使用，整個系統(tǒng)的界面友好，運行穩(wěn)定，硬件資源配置要求較低，符合企業(yè)的實際情況。盡管本系統(tǒng)具有針對性設計的特點，但它的設計思想和實現(xiàn)方法并不失其一般性，對其他企業(yè)響應式官網(wǎng)的開發(fā)有一定的借鑒意義和參考價值。本系統(tǒng)使用了JavaEE的編程技術，頁面技術JSP，開發(fā)模式B/S架構，數(shù)據(jù)庫MySql。實現(xiàn)的功能包括前端會員注冊、登錄，站內(nèi)搜索，產(chǎn)品展示，圖片放大鏡，新聞文章顯示等；后臺商品管理系統(tǒng)，問答管理系統(tǒng)，會員管理系統(tǒng)，內(nèi)容管理系統(tǒng)。通過這個系統(tǒng)的開發(fā)使我深入了解了JavaEE編程的思想和方法，更進一步學習了JSP頁面技術的各種使用方法，學會了寫一些復雜的查詢語句，對于B/S架構有了更為清晰的認識，并實踐開發(fā)，更加熟練使用tomcat發(fā)布系統(tǒng)，這些都是極為寶貴的經(jīng)驗，使我受益良多，對于我以后參加工作有一定的幫助。從設計的開始到完成，我查閱了大量有關響應式網(wǎng)站和JavaEE程序開發(fā)等方面的資料，從模糊到清晰，漸漸形成了網(wǎng)站建設的整體認知。在整個系統(tǒng)的設計過程中，我學習了關于jQuery的許多知識，特別是ajax有了一定的理解?？梢钥隙ǖ氖?，通過這次畢業(yè)設計，我對JavaEE的認識有了一個質(zhì)的飛躍。鑒于響應式Web設計可以為不同移動設備環(huán)境的用戶提供更友好的瀏覽體驗和更加舒適的界面風格，再者伴隨著移動設備的不斷增加與普及以及Web技術的迅速發(fā)展，相信響應式web設計很快成為網(wǎng)頁設計中的一大利器。盡管響應式Web設計技術仍然存在一些不足，再者對于不同用戶體驗來說也不是最完美的解決方案，盡管如此然而就針對目前的響應式Web技術發(fā)展狀況而言，它已經(jīng)豐富了我們在web設計方式可采用的方案，給每個網(wǎng)頁設計師帶來不一樣的驚喜。最后隨著采用響應式設計方案的網(wǎng)頁設計師越來越多，相信不久的將來會有更多的且基于響應式Web設計的網(wǎng)頁的產(chǎn)生。到那時隨著響應式設計的逐漸普及以及被市場的認可，相信也會有更多的企業(yè)進入到響應式設計市場中來，隨著企業(yè)的加入，又會觸發(fā)更多開發(fā)人員的進入該領域，最終形成一個良性循環(huán)，以至最后能夠促進整個web響應式網(wǎng)頁設計的發(fā)展。當然，由于個人能力和時間限制，這個系統(tǒng)中也存在一些不足和值得改進的地方，如會員功能中只能注冊和登錄，會員自己不能在個人中心里更改個人信息；常見問題中只有設定好的問題和回答，訪客不能編輯提交問題等。這個網(wǎng)站平臺整體是偏營銷型，后期可以向電子商務平臺發(fā)展，添加在線支付系統(tǒng)，訂單管理系統(tǒng)，物流管理系統(tǒng)等功能。參考文獻[1]唐俊開，HTML5技術與移動出版

[M].北京：電子工業(yè)出版社，2013.[2]秦成德，JSP動態(tài)開發(fā)案例指導

[M].北京：人民郵電出版社，2012.92-108.[3]余芳，JSP動態(tài)網(wǎng)站開發(fā)案例指導

[M].上海：電子工業(yè)出版社,2010.142-176.[4]秦小波，設計模式之禪

[M].北京：機械工業(yè)出版社,2014.[5]馮燕奎.JSP實用案例教程[M].清華大學出版社,2004.[6]陶國榮，jQuery權威指南第二版

[M].北京：機械工業(yè)出版社,2013.[7]唐漢明，翟振興等.深入淺出MySql[M].人民郵電出版社，2014.[8]朱育發(fā)，岳陽，jQuery開發(fā)完全技術寶典

[M].北京：中國鐵道出版社,2012.[9]Brad

Dayley，jQuery與JavaScript入門經(jīng)典

[M].北京：人民郵電出版社,2014.[10]王映龍，劉春陽，熊曾剛，Java

EE實用教程

[M].北京：清華大學出版社,2011.[11]李興華,王月清.JavaWeb開發(fā)實戰(zhàn)經(jīng)典[M].北京：清華大學出版社,2010.[12]弗雷恩.響應式Web設計HTML5和CSS3實戰(zhàn)[M].人民郵電出版社,2013.[13]連政.基于HTML5技術的移動Web前端設計與開發(fā)[D].浙江工業(yè)大學,2014.[14]王慶,