基于HTML5的網(wǎng)絡(luò)書店系統(tǒng).doc

精品文檔 。 I歡迎下載 畢 業(yè) 設(shè) 計(jì)（論 文） 設(shè)計(jì)（論文）題目： 基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)研究 學(xué) 院 名 稱： 電子與信息工程學(xué)院 專 業(yè)： 計(jì)算機(jī)科學(xué)與技術(shù) 班 級(jí)： 09 級(jí) 1 班（網(wǎng)絡(luò)） 姓 名： 季煒 學(xué) 號(hào) 09401010139 指 導(dǎo) 教 師： 李慶風(fēng) 職 稱 副教授 精品文檔 。 II歡迎下載 定稿日期：2013 年 5 月 18 日 精品文檔 。 I歡迎下載 基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)研究 摘摘 要要 Html5 是一種建立在平臺(tái)之上的動(dòng)態(tài)網(wǎng)頁(yè)制作語(yǔ)言，它是一種網(wǎng) 頁(yè)瀏覽的新標(biāo)準(zhǔn)，它在原有的 HTML 基礎(chǔ)上新增和優(yōu)化了部份內(nèi)容， 使得網(wǎng)頁(yè)更加快捷和對(duì)外部更加兼容。 本課題用 HTML5 語(yǔ)言開發(fā)小型網(wǎng)絡(luò)書店網(wǎng)站。主要目的是運(yùn)用 HTML5 技術(shù)于網(wǎng)絡(luò)書店，探討 HTML5 這一新技術(shù)帶來(lái)的變革，并對(duì) HTML5 的一些新特性進(jìn)行了研究和實(shí)驗(yàn)。本文闡述了網(wǎng)絡(luò)書店的設(shè)計(jì) 與實(shí)現(xiàn)，給出了網(wǎng)站的系統(tǒng)分析，描述了網(wǎng)頁(yè)設(shè)計(jì)概況。 關(guān)鍵詞：HTML5，網(wǎng)絡(luò)書店，網(wǎng)站 精品文檔 。 II歡迎下載 ONLINE BOOKSTORE SYSTEM STUDY BASED ON HTML5 ABSTRACTABSTRACT Html5 is a language based on platform of dynamic web page creation, it is a new web standard, it is on the basis of the original Html new and optimize the part to make web pages more quickly and more compatible and external. This paper main implementation is to use the HTML5 language development small network bookstore website, online bookstore is a typical representative of books issued under the network environment, this study is the study of the online bookstore system based on HTML5. Main purpose is to use the HTML5 technology in network bookstore, discussion on HTML5, a new technology of change, and studied the HTML5s new features and experimental. This paper expounds the design and implementation of online bookstore, gives a systematic analysis of websites, describes the profile of web design. KeyKey WordsWords: HTML5, online bookstore, website 精品文檔 。 III歡迎下載 目錄目錄 摘摘 要要 .I I ABSTRACTABSTRACT .IIII 目錄目錄 .IIIIII 第第 1 1 章章 緒論緒論 .1 1 1.1 本課題國(guó)內(nèi)外研究現(xiàn)狀 .1 1.1.1 國(guó)外現(xiàn)狀 .1 1.1.2 國(guó)內(nèi)現(xiàn)狀 .3 1.2 本課題研究目的 .6 1.3 論文結(jié)構(gòu) .7 第第 2 2 章章 研究?jī)?nèi)容及相關(guān)技術(shù)研究?jī)?nèi)容及相關(guān)技術(shù) .8 8 2.1 研究?jī)?nèi)容 .8 2.2 相關(guān)技術(shù)介紹 .11 2.2.1 PHP+APACHE+MYSQL .11 2.2.2 HTML5 .13 第第 3 3 章章 系統(tǒng)設(shè)計(jì)系統(tǒng)設(shè)計(jì) .1515 3.1 圖書展示功能 .15 3.2 圖書查詢功能 .15 3.3 留言功能、涂鴉功能 .16 3.4 圖書評(píng)選功能 .16 第第 4 4 章章 系統(tǒng)詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)系統(tǒng)詳細(xì)設(shè)計(jì)及實(shí)現(xiàn) .1717 4.1 數(shù)據(jù)庫(kù)設(shè)計(jì)與實(shí)現(xiàn) .17 4.2 網(wǎng)站具體實(shí)現(xiàn) .18 4.2.1 網(wǎng)站首頁(yè) .18 4.2.2 查詢功能 .19 4.2.3 留言板設(shè)計(jì) .21 4.2.4 圖書評(píng)選 .24 精品文檔 。 IV歡迎下載 第第 5 5 章章 總結(jié)與展望總結(jié)與展望 .2626 5.1 總結(jié) .26 5.2 展望 .26 參考文獻(xiàn)參考文獻(xiàn) .2727 致謝致謝 .2828 軟件使用說(shuō)明書軟件使用說(shuō)明書 .2929 1. 軟件概述 .29 2. 運(yùn)行環(huán)境 .29 3. 使用指南 .29 精品文檔 。 1歡迎下載1歡迎下載 第第 1 1 章章 緒論緒論 1.11.1本課題國(guó)內(nèi)外研究現(xiàn)狀本課題國(guó)內(nèi)外研究現(xiàn)狀 網(wǎng)絡(luò)書店是隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而出現(xiàn)的一種售書渠道。它通過(guò)人與電子通 信方式相結(jié)合，依靠互聯(lián)網(wǎng)實(shí)現(xiàn)圖書的在線交易。與傳統(tǒng)的書店相比，網(wǎng)絡(luò)書店 既可以避免書目訂貨的局限和盲目，又可以克服看樣訂貨投入大、費(fèi)用高、管理 難的不足，而且網(wǎng)上選擇范圍廣能直觀看樣本、可瀏覽內(nèi)容、可隨時(shí)添訂、結(jié)算 及時(shí)、快捷方便、周轉(zhuǎn)高速。這些優(yōu)勢(shì)是其它交易方式難以達(dá)到的。 目前比較著名的國(guó)內(nèi)外網(wǎng)絡(luò)書店有：亞馬遜、當(dāng)當(dāng)網(wǎng)。 1.1.1 國(guó)外現(xiàn)狀 世界上第一家網(wǎng)絡(luò)書店是 1991 年在美國(guó)聯(lián)機(jī)公司(AOL)的網(wǎng)絡(luò)上建立的閱 讀美國(guó)書店。1994 年貝佐斯在西雅圖成立的亞馬遜網(wǎng)絡(luò)書店，如今已成為全球 最大網(wǎng)絡(luò)書店，1998 年的顧客總數(shù)為 450 萬(wàn)，銷售額達(dá) 6.1 億美元，股票市值 100 多億美元，控制著美國(guó) 80%的網(wǎng)上圖書銷售市場(chǎng)。亞馬遜網(wǎng)絡(luò)書店的成功在 圖書銷售領(lǐng)域產(chǎn)生了巨大影響。1997 年 5 月，美國(guó)最大的連鎖書店巴諾書店也 正式開辦了網(wǎng)絡(luò)書店。 亞馬遜首頁(yè)有搜索功能，可以根據(jù)自己需要來(lái)搜索想要的產(chǎn)品或相關(guān)產(chǎn)品； 首頁(yè)左邊有所有產(chǎn)品的分類，形成一個(gè)菜單，顧客也可以從這里逐級(jí)查找所要產(chǎn) 品；首頁(yè)有一個(gè)叫“What Other Customer Are Looking At Right Now”的版塊， 這是其他顧客正在查看的產(chǎn)品展示，動(dòng)態(tài)資料為顧客提供最新信息； “Digital Cameras Bestsellers”版塊是最暢銷的相機(jī)展示，這些為想買相機(jī) 的朋友們提供了一個(gè)非常有用的信息；“The Best Prices on the Most Laptops”板塊為價(jià)格最合理的筆記本電腦展示，這些為正在瀏覽網(wǎng)站的顧客們 提供了許多有用的信息；在首頁(yè)下端有一個(gè)區(qū)域”Your Recent History”記錄 著你最近瀏覽過(guò)的網(wǎng)頁(yè)和途徑，可以輕松點(diǎn)擊查看自己之前訪問(wèn)過(guò)的產(chǎn)品。所以 我們看到了中意的產(chǎn)品時(shí)就不會(huì)找不到它，輕松查看。首頁(yè)右邊部分放著少量的 促銷產(chǎn)品，有興趣的人可以快速點(diǎn)擊查看。這里可以看到比較少的廣告，主要是 為顧客考慮，太多廣告妨礙視線，也會(huì)使顧客產(chǎn)生一種厭惡感，因此去掉了許多 精品文檔 。 2歡迎下載2歡迎下載 廣告，使得整個(gè)界面一目了然。 亞馬遜網(wǎng)站與傳統(tǒng)的商務(wù)網(wǎng)站有些不同，非常簡(jiǎn)潔的界面給顧客留下了一個(gè) 好印象，幾個(gè)與眾不同的特色板塊讓人拍手叫好，強(qiáng)大的搜索引擎搜索產(chǎn)品時(shí)非 常快速準(zhǔn)確。但是目前移動(dòng)設(shè)備盛行，頗具歷史的亞馬遜網(wǎng)絡(luò)書店為了與時(shí)俱進(jìn) 采用 APP 技術(shù)，使用手機(jī)訪問(wèn)效果如圖： 圖 1-1 手機(jī) APP 瀏覽亞馬遜 這種第三方應(yīng)用軟件支持方式無(wú)疑是需要額外成本的，如果采用 HTML5 設(shè)計(jì) 開發(fā)網(wǎng)站的話，就不需要如此繁復(fù)了，無(wú)論在什么平臺(tái)，使用什么設(shè)備，只要有 支持 HTML5 的瀏覽器，它就可以完美訪問(wèn)。下面是基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)在 PC 機(jī)上瀏覽和在手機(jī)上瀏覽的截圖效果，不需插件、不需 APP 可以完美訪問(wèn)， 且展示效果完美。 精品文檔 。 3歡迎下載3歡迎下載 圖 1-2 電腦上訪問(wèn)本系統(tǒng)效果 圖 1-3 手機(jī)上訪問(wèn)本系統(tǒng)效果 1.1.2 國(guó)內(nèi)現(xiàn)狀 我國(guó)有龐大的網(wǎng)民基數(shù)和民眾購(gòu)買行為的改變，因此網(wǎng)絡(luò)書店在我國(guó)存在著 巨大的市場(chǎng)潛力。當(dāng)當(dāng)網(wǎng)是一個(gè)“純網(wǎng)絡(luò)”型 BtoC 網(wǎng)上商店。當(dāng)當(dāng)網(wǎng)自 1999 年 11 月開通，號(hào)稱是目前全球最大的中文網(wǎng)上圖書音像商城，面向全世界中文 精品文檔 。 4歡迎下載4歡迎下載 讀者提供近三十多萬(wàn)種中文圖書和音像商品，每天為成千上萬(wàn)的消費(fèi)者提供方便、 快捷的服務(wù)，給網(wǎng)上購(gòu)物者帶來(lái)極大的方便和實(shí)惠。當(dāng)當(dāng)網(wǎng)的使命是堅(jiān)持“更多 選擇，更多低價(jià)” ，全球已有 2000 萬(wàn)的顧客在當(dāng)當(dāng)網(wǎng)上選購(gòu)自己喜愛(ài)的商品。 當(dāng)當(dāng)網(wǎng)的網(wǎng)頁(yè)最上層是分類區(qū)，方便用戶根據(jù)自己的要求查詢。在左面是商 品分類：包括百貨、圖書/雜志、影視、音樂(lè)、游戲等的分類。其中提供的三十 萬(wàn)種圖書，占中國(guó)大陸可供書市場(chǎng)的百分之九十。另外還有店中店的商品分類， 中間是主要的廣告內(nèi)容，在右邊就是最近的一些新產(chǎn)品以及 TOP 排行榜。 當(dāng)當(dāng)網(wǎng)還設(shè)立了專門的論壇。不論你是對(duì)商品、服務(wù)、還是網(wǎng)站有任何的不 滿，或者對(duì)當(dāng)當(dāng)網(wǎng)有什么建議，你都可以在論壇上發(fā)表你的觀點(diǎn)。這樣不但有利 于其他客戶增加對(duì)該商品的了解，也有助于網(wǎng)站的設(shè)計(jì)或管理人員及時(shí)修補(bǔ)網(wǎng)站 的漏洞，使網(wǎng)站的功能更強(qiáng)大，更快更好的滿足顧客的個(gè)性化需求。 搜索比價(jià)系統(tǒng)，是當(dāng)當(dāng)網(wǎng)開發(fā)的智能比價(jià)系統(tǒng)。通過(guò)此系統(tǒng)，當(dāng)當(dāng)每天都實(shí) 施對(duì)其他電子商務(wù)網(wǎng)站的同類商品與當(dāng)當(dāng)網(wǎng)同類商品的價(jià)格進(jìn)行對(duì)比。如果對(duì)方 同類商品價(jià)格低于當(dāng)當(dāng)網(wǎng)商品價(jià)格，此系統(tǒng)將自動(dòng)調(diào)低當(dāng)當(dāng)網(wǎng)同類商品的價(jià)格。 2006 年 10 月下旬，當(dāng)當(dāng)網(wǎng)個(gè)性化商品推薦功能上線。其全新推出的“為你 推薦”個(gè)性化服務(wù)的過(guò)人之處在于，當(dāng)當(dāng)網(wǎng)購(gòu)物系統(tǒng)將根據(jù)顧客的購(gòu)物習(xí)慣自動(dòng) 向他們推薦相關(guān)商品。另外，細(xì)心的網(wǎng)絡(luò)顧客還會(huì)發(fā)現(xiàn)，當(dāng)當(dāng)網(wǎng)的購(gòu)物搜索也悄 然更換了面孔。出去界面變得更簡(jiǎn)潔清新外，更重要的是，如今當(dāng)當(dāng)網(wǎng)顧客的搜 索范圍不僅包括當(dāng)當(dāng)網(wǎng)近百萬(wàn)自營(yíng)商品，還把當(dāng)當(dāng)數(shù)千家店中的各類商品一搜到 底。顯然，再打出“搜索+個(gè)性化”網(wǎng)購(gòu)組合后，當(dāng)當(dāng)網(wǎng)在電子商務(wù)市場(chǎng)不但增 強(qiáng)了顧客粘性，而且再次引領(lǐng)了市場(chǎng)趨勢(shì)。 目前當(dāng)當(dāng)網(wǎng)進(jìn)軍移動(dòng)市場(chǎng)，開發(fā)并發(fā)布了 iphone 版、Android 版、iPad 版、 Windows Phone 版以及 Android Pad 版如此之多的 APP，以方便用戶隨時(shí)隨地通 過(guò)移動(dòng)設(shè)備訪問(wèn)。這不禁讓人聯(lián)想到整個(gè)系統(tǒng)的開發(fā)、更新以及維護(hù)是十分麻煩 的，如果使用 HTML5 技術(shù)這些問(wèn)題便可迎刃而解，只需要考慮瀏覽器是否支持即 可。從而省去眾多 APP 的開發(fā)、維護(hù)費(fèi)用，專注于電子商務(wù)事業(yè)。當(dāng)當(dāng)網(wǎng)在 pc 機(jī)訪問(wèn)和在手機(jī)使用 APP 訪問(wèn)效果如下: 精品文檔 。 5歡迎下載5歡迎下載 圖 1-4 當(dāng)當(dāng)網(wǎng)主頁(yè) 圖 1-5 當(dāng)當(dāng)網(wǎng)手機(jī) APP 界面 由此可見(jiàn)，當(dāng)當(dāng)網(wǎng)在電腦和移動(dòng)終端的用戶體驗(yàn)是完全不同的，一些動(dòng)態(tài)效 果是無(wú)法體現(xiàn)的，HTML5 就不同了，使用電腦和手機(jī)訪問(wèn)視頻、音樂(lè)、動(dòng)態(tài)效果 是不會(huì)發(fā)生改變的。 精品文檔 。 6歡迎下載6歡迎下載 圖 1-6 HTML5 拖拽頁(yè)面 圖 1-7 手機(jī)上拖拽頁(yè)面 1.21.2本課題研究目的本課題研究目的 盡管亞馬遜和當(dāng)當(dāng)網(wǎng)已經(jīng)相當(dāng)成功，但是隨著無(wú)線網(wǎng)絡(luò)技術(shù)的成熟，包括手 機(jī)、平板電腦在內(nèi)的移動(dòng)終端備受人們青睞，大多數(shù)傳統(tǒng)的電子商務(wù)網(wǎng)站都面臨 著如何很好的支持移終端這一問(wèn)題。隨時(shí)隨地上網(wǎng)瀏覽并獲取所需信息，真可謂： 一切盡在“掌”握，然而目前便攜設(shè)備對(duì)于一些網(wǎng)絡(luò)應(yīng)用支持的不是十分完美， 比如說(shuō)網(wǎng)絡(luò)書店，我們用便攜設(shè)備瀏覽亞馬遜，當(dāng)當(dāng)網(wǎng)時(shí)，看到的并不是電腦上 精品文檔 。 7歡迎下載7歡迎下載 看到的那樣的網(wǎng)頁(yè)，而是 App。這種把網(wǎng)站做成 App 以便支持便攜設(shè)備瀏覽的做 法，無(wú)疑給電子商務(wù)企業(yè)帶來(lái)額外的技術(shù)費(fèi)用開支，但是隨著 HTML5 的出現(xiàn)將改 變這一現(xiàn)狀。 以往我們用 Flash 或者是 Java 在網(wǎng)站之中嵌入網(wǎng)頁(yè)應(yīng)用程序，這種技術(shù)并 不是瀏覽器原生的，所以說(shuō)并不是能對(duì)于網(wǎng)頁(yè)提供無(wú)縫的支持，尤其是對(duì)于手機(jī)、 平板電腦等移動(dòng)終端的支持不是很完美，需要 APP 來(lái)完成。但是 Html5 就不是這 樣的了，Html5 是一種標(biāo)準(zhǔn)，只要是瀏覽器遵循這樣的標(biāo)準(zhǔn)我們就能調(diào)用底層的 硬件對(duì)于上層的網(wǎng)頁(yè)進(jìn)行顯示，而且也是能方便的編寫各種 Web 應(yīng)用。1 換言 之，就是使用 HTML5 技術(shù)開發(fā)一個(gè)網(wǎng)頁(yè)，無(wú)論用戶通過(guò)什么終端訪問(wèn)，看到的都 是原生態(tài)的網(wǎng)頁(yè)，它的音視頻播放不依賴任何第三方插件，無(wú)需安裝 Flash、SVG，通過(guò)移動(dòng)設(shè)備訪問(wèn)只需使用支持 HTML5 的瀏覽器即可，無(wú)需 APP 技 術(shù)。 1.31.3論文結(jié)構(gòu)論文結(jié)構(gòu) 本文主要是對(duì)基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)原理的研究，同時(shí)通過(guò)部署 APACHE 服務(wù)器，使用 MySQL 數(shù)據(jù)庫(kù)，自己設(shè)計(jì)和開發(fā) web 網(wǎng)站來(lái)實(shí)現(xiàn)基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)。 第一章 緒論。主要介紹了研究背景，目前網(wǎng)絡(luò)書店的國(guó)內(nèi)外發(fā)展情況，同 時(shí)對(duì)本文的主要工作做了簡(jiǎn)單的介紹。 第二章 研究?jī)?nèi)容及相關(guān)技術(shù)。主要對(duì)相關(guān)技術(shù)，如 PHPnow（Apache+PHP+ MySQL）、HTML5 做了詳細(xì)的介紹與分析。 第三章 系統(tǒng)設(shè)計(jì)。主要對(duì)系統(tǒng)進(jìn)行總體設(shè)計(jì)，對(duì)系統(tǒng)的架構(gòu)進(jìn)行設(shè)計(jì)，對(duì) 系統(tǒng)所需要完成的功能提出需求，包括查詢系統(tǒng)、留言系統(tǒng)、圖書評(píng)選系統(tǒng)。 第四章 系統(tǒng)詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)。主要是完成基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)的實(shí) 現(xiàn)。對(duì)各個(gè)模塊進(jìn)行詳細(xì)設(shè)計(jì)和開發(fā)，數(shù)據(jù)庫(kù)的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)。 第五章 總結(jié)與展望。主要是對(duì)本系統(tǒng)的總結(jié)、今后要做的工作以及未來(lái) HTML5 技術(shù)的前景。 精品文檔 。 8歡迎下載8歡迎下載 第第 2 2 章章 研究?jī)?nèi)容及相關(guān)技術(shù)研究?jī)?nèi)容及相關(guān)技術(shù) 2.12.1研究?jī)?nèi)容研究?jī)?nèi)容 隨著 HTML5 的迅猛發(fā)展，各大瀏覽器開發(fā)公司如 Google、微軟、蘋果 Mozilla 和 Opera 的瀏覽器開發(fā)業(yè)務(wù)都變的異常繁忙，近年來(lái)無(wú)論是 Mozilla 的 Firefox、Google 的 Chrome、蘋果的 Safar，還是微軟的 Internet Explorer， 以及 Opera 都處于不斷推陳出新的狀態(tài)當(dāng)中。2 HTML5 是一種技術(shù)，或者說(shuō)是 一種網(wǎng)頁(yè)瀏覽的新標(biāo)準(zhǔn)。 著名調(diào)查公司 AC 尼爾森的一項(xiàng)研究顯示：中國(guó)網(wǎng)民有超過(guò)五分之三的人群 在網(wǎng)上購(gòu)物，而超過(guò)一半的網(wǎng)上購(gòu)物者選擇網(wǎng)上買書，也就是說(shuō)最受歡迎的網(wǎng)上 商品是書籍。而隨著移動(dòng)終端的粉墨登場(chǎng)，由于使用 HTML5 技術(shù)的網(wǎng)絡(luò)書店具有 優(yōu)秀的跨平臺(tái)、跨終端能力，僅需要一個(gè)瀏覽器就可以，所以這將是網(wǎng)絡(luò)環(huán)境下 圖書發(fā)行的必然發(fā)展趨勢(shì)。電腦上通過(guò) Web 瀏覽器執(zhí)行的 HTML5 應(yīng)用正取代安裝 型本地應(yīng)用成為主流，這一潮流也蔓延到了智能手機(jī)， “火狐 OS”及“Tizen” 等主推 HTML5 的移動(dòng) OS 已經(jīng)問(wèn)世，谷歌也做出多項(xiàng)決策，要將安卓大幅轉(zhuǎn)向 HTML5。 本課題旨在以制作網(wǎng)絡(luò)書店為前提，體驗(yàn) HTML5 這一新技術(shù)。眾所周知，框 架可以幫助我們更快速、更容易實(shí)現(xiàn)功能，讓開發(fā)者集中精力于更重要的方面， 而不會(huì)浪費(fèi)時(shí)間做重復(fù)的任務(wù)。本網(wǎng)絡(luò)書店系統(tǒng)想要實(shí)現(xiàn)一下 HTML5 新特性： 1.HTML5 全新的標(biāo)簽。 取消了一些過(guò)時(shí)的標(biāo)記，HTML4 中的內(nèi)容標(biāo)簽級(jí)別相同，無(wú)法區(qū)分各部分內(nèi) 容。而 HTML5 中的內(nèi)容標(biāo)簽互相獨(dú)立，級(jí)別不同，搜索引擎以及統(tǒng)計(jì)軟件等均可 快速識(shí)別各部分內(nèi)容。千篇一律的注定要淘汰掉，如圖 2-1 所示， HTML5 與之前布滿的頁(yè)面相比，已經(jīng)變得清晰了很多。涉及的各種頭部， 都會(huì)包含在標(biāo)簽內(nèi)，各種結(jié)尾內(nèi)容都會(huì)使用標(biāo)簽，導(dǎo)航菜單放 在標(biāo)簽,主要內(nèi)容放在標(biāo)簽，獨(dú)立的文章部分放在標(biāo)簽， 相關(guān)簡(jiǎn)介等內(nèi)容放在側(cè)邊標(biāo)簽內(nèi)。 精品文檔 。 9歡迎下載9歡迎下載 圖 2-1 全新的標(biāo)記 2.全新的表單對(duì)象。 在實(shí)際的表單應(yīng)用中，一些數(shù)據(jù)輸入需要一個(gè)獨(dú)立的規(guī)則，如郵箱地址、網(wǎng) 址等，我們都會(huì)提供一個(gè)特定的格式限定和驗(yàn)證。HTML5 對(duì)表單的發(fā)展是適應(yīng)互 聯(lián)網(wǎng)發(fā)展的需要，也是在適應(yīng)開發(fā)者的需要，在做表單處理的時(shí)候，最常用的就 是表單驗(yàn)證了。一般的驗(yàn)證會(huì)寫很多冗長(zhǎng)的 JavaScript 代碼，或者借助一些基 于 JavaScript 的驗(yàn)證框架，如目前較為流行的 jQuery 的驗(yàn)證框架。HTML5 發(fā)展 了這些表單，把具有特定規(guī)則意義的表單，擴(kuò)展一些特有的特性作為表單的原始 功能；驗(yàn)證表單的功能，也作為表單本身應(yīng)具備的功能，原生地被支持，即可以 拋棄 JavaScript 或者是 PHP，只通過(guò) HTML5 來(lái)定義表格單元的輸入格式和這個(gè) 單元是否是必填的等等。 3.Canvas 對(duì)象。 到目前為止，基本上想要直接在網(wǎng)頁(yè)上進(jìn)行繪圖還是不能輕易完成的，即使 是幾何圖形也不可以。在瀏覽器當(dāng)中直接能跟圖片的交互操作也很有限，多數(shù)是 保存和點(diǎn)擊。若要在頁(yè)面中實(shí)現(xiàn)繪圖就要借助第三方工具，如 Flash、SVG、VML 等，這種做法無(wú)疑把問(wèn)題復(fù)雜化了，在互聯(lián)網(wǎng)應(yīng)用不斷的發(fā)展中，頁(yè)面繪圖使用 越來(lái)越多，Canvas 元素應(yīng)運(yùn)而生。HTML5 了解人們的需求，HTML5 已經(jīng)確定引 入 canvas 元素，它自己沒(méi)有行為，只是把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript,以使腳本能夠把想繪制的東西都繪到一塊畫布上。 4.HTML5 取代 Flash。 在 HTML5 之前，要在網(wǎng)頁(yè)中添加音頻或視頻，最簡(jiǎn)單、最通用的方法，是使 用 Flash。如果在網(wǎng)站上要放置一個(gè) Flash 視頻，通常需要對(duì) Adobe ActionScript 和專有工具有很強(qiáng)的理解，才能編碼視頻和創(chuàng)建播放器控件，在 精品文檔 。 10歡迎下載10歡迎下載 HTML5 中實(shí)現(xiàn)多媒體，不需要知道數(shù)據(jù)類型，因?yàn)闃?biāo)簽已經(jīng)指明；也不需要設(shè)置 版本信息，因?yàn)椴簧婕埃豢梢杂?css 樣式表來(lái)控制尺寸，因?yàn)樗鼈兪琼?yè)面元素， 只需要一行代碼就可以。這些原生的優(yōu)勢(shì)，是其他任何第三方插件都無(wú)法企及的。 5.可觸到的拖放功能 在 WEB 應(yīng)用中良好的用戶體驗(yàn)是設(shè)計(jì)師們一直追求的目標(biāo)，拖放體驗(yàn)就是其 中之一，HTML5 的拖放包括三個(gè)方面：首先為頁(yè)面元素提供了拖放特性；其次是 為鼠標(biāo)事件增加了拖放事件；最后是用于存儲(chǔ)拖放數(shù)據(jù)的對(duì)象。本系統(tǒng)應(yīng)用頁(yè)面 拖放特性，即新增的 draggable 特性，該特性有三個(gè)可選值：true、false 和 auto，用于定義元素是否允許用戶拖放。 為了使拖放控制更加具體，HTML5 提供了 7 個(gè)與拖放相關(guān)的鼠標(biāo)響應(yīng)事件： dragstart 事件，開始拖放時(shí)觸發(fā)的事件，作用對(duì)象是被拖放元素。 drag 事件，拖放過(guò)程中觸發(fā)的事件，作用對(duì)象是被拖放元素。 dragenter 事件，有拖放的元素進(jìn)入本元素范圍內(nèi)時(shí)觸發(fā)，作用對(duì)象是 拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素。 dragover 事件，有拖放的元素在本元素范圍內(nèi)移動(dòng)時(shí)觸發(fā)，作用對(duì)象是 拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素。 dragleave 事件，有拖放的元素離開本元素時(shí)觸發(fā)，作用對(duì)象是拖放過(guò) 程中鼠標(biāo)經(jīng)過(guò)的元素。 drop 事件，有拖放的的元素被拖放到本元素中時(shí)觸發(fā)，作用對(duì)象是拖放 的目標(biāo)元素。 dragend 事件，拖放操作結(jié)束時(shí)觸發(fā)，作用對(duì)象是被拖放元素。 在拖放過(guò)程中通過(guò)觸發(fā)這 7 個(gè)拖放事件來(lái)實(shí)現(xiàn)頁(yè)面的靈活控制。 6.強(qiáng)大的離線應(yīng)用 隨著人們對(duì) Web 應(yīng)用的依賴逐漸增強(qiáng)，對(duì) Web 應(yīng)用的要求也越來(lái)越高。但是 Web 應(yīng)用通常都有一個(gè)致命的缺陷，就是如果不能連接網(wǎng)絡(luò)或網(wǎng)絡(luò)不暢通便無(wú)法 使用 Web 應(yīng)用程序。HTML5 的離線存儲(chǔ)使得這個(gè)問(wèn)題迎刃而解，HTML5 的 Web storage API 采用離線緩存技術(shù)，會(huì)生成一個(gè)清單文件：manifest file，這個(gè) 清單文件實(shí)質(zhì)就是一系列的 URL 列表文件，這些 URL 分別指向頁(yè)面當(dāng)中的 精品文檔 。 11歡迎下載11歡迎下載 HTML，CSS，Javascript，圖片等相關(guān)內(nèi)容。使用離線應(yīng)用時(shí)，應(yīng)用會(huì)引入這一 清單文件，瀏覽器會(huì)讀取這一文件，下載相應(yīng)的文件，并將其緩存到本地。使得 這些 web 應(yīng)用能夠脫離網(wǎng)絡(luò)使用，而用戶在離線時(shí)的更改也同樣會(huì)映射到清單文 件中，并在重新連線之后將更改返回應(yīng)用，工作方式與我們現(xiàn)在所使用的網(wǎng)盤有 著異曲同工之處。 2.22.2相關(guān)技術(shù)介紹相關(guān)技術(shù)介紹 2.2.1 PHP+APACHE+MYSQL PHP 是最流行的 Web 腳本語(yǔ)言之一，它運(yùn)行在 Web 服務(wù)器端，根據(jù)用戶請(qǐng)求 或服務(wù)器端的數(shù)據(jù)產(chǎn)生動(dòng)態(tài)網(wǎng)頁(yè)。它功能強(qiáng)大，和 HTML 腳本融合在一起，并內(nèi) 建訪問(wèn)數(shù)據(jù)庫(kù)的能力。它能夠作為 Apache Web 服務(wù)器的模塊執(zhí)行使得執(zhí)行效率 較高。 PHP 特性： 1）開放源碼，它是遵循 GNU 通用公共許可的免費(fèi)軟件； 2）沒(méi)有運(yùn)行費(fèi)用，PHP 是免費(fèi)的； 3）基于服務(wù)器端，由于 PHP 是在 Web 服務(wù)器端運(yùn)行的，PHP 程序可以很大、 很復(fù)雜而不會(huì)降低客戶端的運(yùn)行速度； 4）跨平臺(tái)能力好，PHP 程序可以運(yùn)行在 UNIX，Linux，或者 Windows 操作系 統(tǒng)下； 5）嵌入 HTML，PHP 的使用不需要編譯（不需要編譯成可執(zhí)行文件） ，而是將 PHP 代碼嵌入到 HTML 內(nèi)部，其使用過(guò)程和 ASP 一樣，所以 PHP 比較容易學(xué)習(xí)； 6）用戶可以使用 PHP 存取任何支持 ODBC 標(biāo)準(zhǔn)的數(shù)據(jù)庫(kù)。 Apache 是開放源碼軟件中的一個(gè)成功典范。幾年間，它一躍成為市場(chǎng)占有 率很高的 Web 服務(wù)器，并獲得了 Web 管理員們的廣泛青睞，被認(rèn)為是“價(jià)格低廉、 升級(jí)容易、安全可靠”的產(chǎn)品。網(wǎng)絡(luò)為 Apache 提供了孕育的溫床。Apache 的成 功也給予開源的網(wǎng)絡(luò)開發(fā)模式以強(qiáng)有力的證明。這是一個(gè)和商業(yè)模式結(jié)合得如此 完美的開放源代碼軟件，它的許可證制度保證了它的健康發(fā)展，既不脫離開放源 代碼世界，也不因?yàn)槿狈Y金而夭折。 apache 的特性: 1)幾乎可以運(yùn)行在所有的計(jì)算機(jī)平臺(tái)上； 精品文檔 。 12歡迎下載12歡迎下載 2)支持最新的 http/1.1 協(xié)議； 3)簡(jiǎn)單而且強(qiáng)有力的基于文件的配置(httpd.conf)； 4)支持 http 認(rèn)證； 5)集成的代理服務(wù)器； 6)可以通過(guò) web 瀏覽器監(jiān)視服務(wù)器的狀態(tài)； 7)具有用戶會(huì)話過(guò)程的跟蹤能力。 本課題選用 Apache + PHP + MySQL 技術(shù)完成，即目前比較流行的 PHPnow。 PHPnow 是 Win32 下綠色的 Apache + PHP + MySQL 環(huán)境套件包。簡(jiǎn)易安裝、 快速搭建支持虛擬主機(jī)的 PHP 環(huán)境。附帶 PnCp.cmd 控制面板，可以快速配置 套件，使用非常方便。安裝 PHPnow 只需解壓、初始化，就可得到一個(gè)標(biāo)準(zhǔn)的 PHP + MySQL 的服務(wù)器環(huán)境。 圖 2-1 PHPnow 環(huán)境 精品文檔 。 13歡迎下載13歡迎下載 2.2.2 HTML5 HTML5 是用于取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)的 HTML 標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些 HTML5 技術(shù)。 HTML 5 有兩大特點(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ù)，如 Adobe Flash、Microsoft Silverlight，與 Oracle JavaFX 的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。 HTML5 的一些特性： 1.表單驗(yàn)證輕松搞定。以前，制作一個(gè)表單提交頁(yè)面，需要各種驗(yàn)證與判斷， 現(xiàn)在則只需要在標(biāo)簽內(nèi)使用自帶的屬性和正則表達(dá)式，就能解決問(wèn)題。 2.數(shù)據(jù)類型擴(kuò)大一倍。大量新增的 input 屬性帶來(lái)的更加友好的用戶界面， 是以前需要花費(fèi)巨大的精力與成本去實(shí)現(xiàn)的?？梢院敛豢鋸埖卣f(shuō)，從一個(gè)小小的 input 標(biāo)簽屬性的變化就可以預(yù)見(jiàn) HTML5 應(yīng)用的美好前景。 3.動(dòng)畫簡(jiǎn)單易懂。以前，制作一個(gè)簡(jiǎn)單的動(dòng)畫效果必須要依賴 JavaScript 和 Flash，編寫大量的腳本，或者制作動(dòng)畫幀。而現(xiàn)在，依賴強(qiáng)大的 CSS3 動(dòng)畫 屬性將快速高效地開發(fā)出各種動(dòng)畫效果，甚至 3D 效果的制作都將是一件輕而易 舉的事情。 4.原生支持無(wú)需插件。以前網(wǎng)頁(yè)中對(duì)音頻和視頻的處理都會(huì)依賴各種插件來(lái) 完成，這一直是使用 HTML 4 標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)的一個(gè)遺憾。但是，現(xiàn)在 HTML5 對(duì)音頻和視頻的處理有了強(qiáng)大的支持，audio 和 video 標(biāo)簽就是專門為此 而誕生的。各種可控的屬性、預(yù)載、插頁(yè)功能都令人激動(dòng)不已，因?yàn)槲覀冎涝?生的意義重大。3 HTML5 的優(yōu)點(diǎn)： 1）提高可用性和改進(jìn)用戶的友好體驗(yàn)； 2）有幾個(gè)新的標(biāo)簽，這將有助于開發(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)用程序和游戲。 精品文檔 。 14歡迎下載14歡迎下載 由于 PHPnow 的免費(fèi)、方便，HTML5 的上述優(yōu)秀特性，所以本課題選用 APACHE+PHP+MYSQL 環(huán)境，HTML5 語(yǔ)言、PHP 語(yǔ)言完成，使得本系統(tǒng)擁有卓越的跨 平臺(tái)、跨終端能力，并具有良好的可修改、可擴(kuò)展性。 精品文檔 。 15歡迎下載15歡迎下載 第第 3 3 章章 系統(tǒng)設(shè)計(jì)系統(tǒng)設(shè)計(jì) 網(wǎng)絡(luò)書店是網(wǎng)絡(luò)環(huán)境下圖書發(fā)行的典型代表，越來(lái)越齊全的品種讓消費(fèi)者對(duì) 其依賴度日益增加。本研究是基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)的研究，主要目的是運(yùn) 用 HTML5 技術(shù)于網(wǎng)絡(luò)書店，探討 HTML5 這一新技術(shù)帶來(lái)的變革。 用 HTML5 作為前端語(yǔ)言，PHP+Apache+MySQL 構(gòu)架一個(gè)網(wǎng)絡(luò)書店系統(tǒng)。要充 分體現(xiàn) HTML5 的優(yōu)點(diǎn)所在， 就目前來(lái)講 HTML5 并不是很完美的獲得各大瀏覽器 的支持，本網(wǎng)站使用對(duì) HTML5 支持較好的 chrome 瀏覽器展示。 本系統(tǒng)共有如下幾個(gè)模塊圖書查詢、留言系統(tǒng)、評(píng)選系統(tǒng)。 整個(gè)網(wǎng)站由 HTML5 的標(biāo)準(zhǔn)來(lái)建設(shè)，最顯著的標(biāo)志就是代碼首行以簡(jiǎn)潔的 開始，而不帶版本信息等其他內(nèi)容。用標(biāo)簽、JQuery 做出其 炫麗的 2D、3D 效果美化網(wǎng)站，給人耳目一新的感覺(jué)。 3.13.1圖書展示功能圖書展示功能 HTML5 的新元素產(chǎn)生更干凈的代碼，讓頁(yè)面更易懂，雖然、依 然有效，但不會(huì)像以前那般頻繁的應(yīng)用了，很多頁(yè)面更喜歡用 等去定義。 本系統(tǒng)采用 css 樣式制定文字 Logo，擺脫把 Logo 做成圖片貼上去的牢籠。 使用 CSS 網(wǎng)絡(luò)字體功能直接使用文字元素使得字體圖片矢量化，而不依賴于圖片， 不像以前制作帶有個(gè)性化字體的 WEB 效果需要用圖片來(lái)輔助完成。所有的陰影、 圓角效果都是直接使用 CSS 設(shè)計(jì)制作，擺脫了將它們?cè)O(shè)計(jì)之好后定格在圖片中的 方式，使這一效果可以控制。 3.23.2圖書查詢功能圖書查詢功能 查詢頁(yè)面定義一塊，制作一個(gè)實(shí)時(shí)更新，顯示時(shí)間的數(shù)字時(shí)鐘。使 用、標(biāo)簽添加音、視頻，原生支持無(wú)需插件，不依賴于 Flash、SVG 等，并且內(nèi)置強(qiáng)大的可控屬性、預(yù)載功能，唯一需要解決問(wèn)題就是 HTML5 目前支持音、視頻的格式較少。 查詢功能使用 HTML5 標(biāo)簽內(nèi)自帶的屬性和正則表達(dá)式，取代之前要用 Javascript 的 onblur、onfocus 來(lái)單獨(dú)做一塊驗(yàn)證功能。使用 PHP 語(yǔ)言、MySQL 精品文檔 。 16歡迎下載16歡迎下載 數(shù)據(jù)庫(kù)完成。 3.33.3留言功能、涂鴉功能留言功能、涂鴉功能 留言模塊使用 HTML5 新的表單驗(yàn)證功能，在表單驗(yàn)證方面，使用了標(biāo)簽內(nèi)自 帶的屬性和正則表達(dá)式，取代之前要用 Javascript 的 onblur、onfocus 來(lái)單獨(dú) 做一塊驗(yàn)證功能。 二維作畫功能在頁(yè)面實(shí)現(xiàn)也比以前簡(jiǎn)單許多，它不需要用到 Flash、SVG 等 插件，只需定義一塊畫布，這是為了客戶端矢量圖形而設(shè)計(jì)的能夠把想 繪的東西繪制在畫布上，在留言板使用涂鴉功能。 3.43.4圖書評(píng)選功能圖書評(píng)選功能 評(píng)選功能由拖放特性實(shí)現(xiàn)，良好的用戶體驗(yàn)是設(shè)計(jì)師們的追求，而這華麗的 拖放功能就是其中之一，所以使用拖拽功能做出圖書評(píng)選這一塊。過(guò)去我們想實(shí) 現(xiàn)網(wǎng)頁(yè)中的拖拽效果，基本上都是使用 DOM 事件模型中的 mousedown、mousemove、mouseup 的事件監(jiān)聽來(lái)模擬拖拽效果，為了實(shí)現(xiàn)實(shí)時(shí)的 拖拽移動(dòng)效果，要不停地獲取鼠標(biāo)的坐標(biāo)，還要不停的修改元素的位置，代碼要 堆很多，而且性能上也很不好(不停地修改元素位置會(huì)導(dǎo)致頁(yè)面 reflow，除非絕 對(duì)定位)，現(xiàn)在有了 html5 原生的 Drag else if (typeof arg = string) this.canvas = document.getElementById(arg); else return; this.init(); Dtotype = init: function() var that = this; if (!this.canvas.getContext) return; this.context = this.canvas.getContext(2d); this.canvas.onselectstart = function () return false; ; this.canvas.onmousedown = function(event) that.drawBegin(event); ;, drawBegin: function(e) var that = this, stage_info = this.canvas.getBoundingClientRect(); window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); this.context.moveTo( e.clientX - stage_info.left, e.clientY - stage_info.top ); document.onmousemove = function(event) 精品文檔 。 24歡迎下載24歡迎下載 that.drawing(event); ; document.onmouseup = this.drawEnd; , drawing: function(e) var stage_info = this.canvas.getBoundingClientRect(); this.context.lineTo( e.clientX - stage_info.left, e.clientY - stage_info.top ); this.context.stroke(); , drawEnd: function() document.onmousemove = document.onmouseup = null; ; var draw = new Draw(the_stage); 4.2.4 圖書評(píng)選 用可拖拽元素來(lái)實(shí)現(xiàn)圖書評(píng)選功能。 在元素中設(shè)置“draggable=“true” ”即可實(shí)現(xiàn)圖片拖拽。響應(yīng)鼠標(biāo)拖 放之前使用漸變效果，并沒(méi)有使用圖形設(shè)計(jì)軟件，而是直接通過(guò)一個(gè)線性命令完 成漸變效果，即在 CSS 中設(shè)置漸變效果。 完成一次成功頁(yè)面內(nèi)元素拖拽的行為事件過(guò)程應(yīng)該是：dragstart- dragenter-dragover-drop-dragend 精品文檔 。 25歡迎下載25歡迎下載 圖 4-6 拖拽前 圖 4-7 拖拽后 Css 樣式部分代碼如下 .test border-width: 1px; border-style: solid; border-radius: 11px; padding: 5px; -webkit-keyframes glow 0% -webkit-box-shadow: 0 0 12px rgba(00,00,00,0.5); border-color: rgba(100,100,100,0.5); 100% -webkit-box-shadow: 0 0 12px rgba(00,00,00,1.0), 0 0 30px rgba(90,90,90,1.0); 精品文檔 。 26歡迎下載26歡迎下載 border-color: rgba(00,00,00,1.0); .fff padding:3px; border:1px solid #d1eeee; background-color:white; -webkit-box-shadow: 0 0 8px rgba(00,00,00,0.5); box-shadow:0 0 8px rgba(00,00,00,0.5); .fff:hover background-color:#d1eeee; -webkit-animation-name: glow; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function:ease-in-out; 第第 5 5 章章 總結(jié)與展望總結(jié)與展望 5.15.1總結(jié)總結(jié) 經(jīng)過(guò)幾個(gè)月的學(xué)習(xí)，我設(shè)計(jì)并開發(fā)的基于 HTML5 的網(wǎng)絡(luò)書店系統(tǒng)已經(jīng)開發(fā)完 畢。由于個(gè)人能力和時(shí)間問(wèn)題，所以該系統(tǒng)很多地方都不盡如人意，有待進(jìn)一步 改善。在整個(gè)過(guò)程中遇到大大小小不少問(wèn)題，很多不明白的地方我經(jīng)常去請(qǐng)教老 師和同學(xué)，最后設(shè)計(jì)成功不是很完美，但是我在整個(gè)過(guò)程中收獲了很多，我很高 興有這樣的機(jī)會(huì)學(xué)習(xí)并掌握 HTML5 這一前端技術(shù)。本系統(tǒng)充分利用 HTML5 的新特 性全新的網(wǎng)頁(yè)布局，表單樣式，音視頻播放功能，canvas 以及拖放功能實(shí)現(xiàn)， 給予用戶極佳的操作體驗(yàn)。可以查看、訪問(wèn)大量圖書和視頻資源，擴(kuò)展視野，增 長(zhǎng)見(jiàn)識(shí)，還可以留言，表達(dá)自己對(duì)本系統(tǒng)的看法，也可以用鼠標(biāo)作畫，拖拽書籍， 精品文檔 。 27歡迎下載27歡迎下載 體驗(yàn) HTML5 帶來(lái)的樂(lè)趣。 5.25.2展望展望 雖然本系統(tǒng)初步完成，但是仍然有許多地方需要改進(jìn)以獲得更好的用戶體驗(yàn)， 在未來(lái)將在細(xì)節(jié)上做的更完美、更精致，不像現(xiàn)在較為粗糙；考慮建立一個(gè)完整 的后臺(tái)管理系統(tǒng)來(lái)完善本系統(tǒng)；繼續(xù)關(guān)注 HTML5