基于HTML5的旅游網(wǎng)站設(shè)計(jì)

陳希

摘要：HTML5的優(yōu)點(diǎn)在于可以進(jìn)行跨平臺(tái)使用，目前越來(lái)越的網(wǎng)頁(yè)和網(wǎng)站使用了HTML5。該文基于HTML5從網(wǎng)站架構(gòu)設(shè)計(jì)、系統(tǒng)功能模塊結(jié)構(gòu)設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)、B/S與MVC結(jié)構(gòu)圖4個(gè)方面敘述了旅游網(wǎng)站的設(shè)計(jì)。

關(guān)鍵詞：HTML5； B/S；旅游網(wǎng)站設(shè)計(jì)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）27-0265-02

Abstract： HTML5 has the advantages of cross platform use， at present more and more web sites to use HTML5. This paper describes the design of Travel website based on HTML5 from 4 aspects： website architecture design， system function module structure design， database design， B/S and MVC structure diagram.

Key words： HTML5； B/S； travel website design

1 引言

隨著人們的生活水平不斷提高，人們的生活方式和觀念也發(fā)生了改變。旅游作為一種休閑方式已經(jīng)成為人們假期的重要選擇。電子商務(wù)模式的發(fā)展和不斷擴(kuò)張的網(wǎng)民規(guī)模，也讓越來(lái)越多的人習(xí)慣了從旅游網(wǎng)站上獲取相應(yīng)的信息和訂購(gòu)旅游產(chǎn)品。隨著技術(shù)的發(fā)展，HTML5的出現(xiàn)也為旅游網(wǎng)站的建立帶來(lái)了一些新的技術(shù)。

HTML5是W3C（萬(wàn)維網(wǎng)聯(lián)盟）制定的一個(gè)新標(biāo)準(zhǔn)，提供了眾多的新元素，它代表了web業(yè)務(wù)和云業(yè)務(wù)在實(shí)現(xiàn)方式上的改變。HTML5是一種專門用于組織Web內(nèi)容的語(yǔ)言，它通過(guò)創(chuàng)建一種標(biāo)準(zhǔn)化的、直觀的UI標(biāo)記語(yǔ)言簡(jiǎn)化Web設(shè)計(jì)和開發(fā)[1]。本文將設(shè)計(jì)一個(gè)基于HTML5的旅游網(wǎng)站。

2 旅游網(wǎng)站設(shè)計(jì)

旅游網(wǎng)站服務(wù)的對(duì)象是旅游者，所以網(wǎng)站提供的信息也應(yīng)圍繞游客的需求而制定。網(wǎng)站的主要設(shè)計(jì)思想是從用戶角度出發(fā)，盡可能讓用戶能方便快捷的獲取相關(guān)的旅游信息和訂購(gòu)相應(yīng)的旅游產(chǎn)品。應(yīng)設(shè)計(jì)美觀和操作方便的界面，且各個(gè)界面之間相互關(guān)聯(lián)。因此基于用戶的需求本網(wǎng)站的開發(fā)目標(biāo)主要為三個(gè)方面：一、為用戶提供詳細(xì)全面的旅游咨詢服務(wù)；二、為用戶提供便捷的票務(wù)、酒店預(yù)訂等服務(wù)；三、為用戶定制合適的旅游路線服務(wù)。

2.1 網(wǎng)站架構(gòu)設(shè)計(jì)

通過(guò)對(duì)旅游網(wǎng)站進(jìn)行需求分析，確定該系統(tǒng)的主要功能為：資訊管理、用戶信息管理。資訊管理主要包含對(duì)景點(diǎn)的相關(guān)內(nèi)容介紹、景點(diǎn)的游玩路線、旅游產(chǎn)品的訂購(gòu)等。用戶信息管理包括用戶咨詢?yōu)g覽、旅游路線訂購(gòu)情況、特色信息等。確定了系統(tǒng)的主要功能后就可以對(duì)系統(tǒng)的總體架構(gòu)進(jìn)行設(shè)計(jì)，其架構(gòu)設(shè)計(jì)主要遵循四層：顯示層、應(yīng)用層、邏輯層、數(shù)據(jù)層，如圖1所示。

2.2系統(tǒng)功能模塊結(jié)構(gòu)設(shè)計(jì)

該旅游網(wǎng)站采用HTML5+CSS3+Javascript編寫，將頁(yè)面內(nèi)容和數(shù)據(jù)分離，使用了數(shù)據(jù)庫(kù)存儲(chǔ)相關(guān)數(shù)據(jù)信息。系統(tǒng)的功能模塊是旅游網(wǎng)站設(shè)計(jì)的一個(gè)重要元素，功能模塊包含了旅游資訊、預(yù)定中心、風(fēng)景欣賞、公司簡(jiǎn)介、信息查詢、管理員模塊。旅游資訊模塊包含了國(guó)內(nèi)和國(guó)外旅游資訊，預(yù)定中心包含了火車票、機(jī)票、酒店等相關(guān)旅游產(chǎn)品訂購(gòu)。管理員模塊包含了對(duì)各種信息的維護(hù)與更新。如圖2所示。

2.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

旅游網(wǎng)站的數(shù)據(jù)庫(kù)模塊是網(wǎng)站的一個(gè)重要部分，所有的頁(yè)面都是圍繞數(shù)據(jù)庫(kù)的相關(guān)操作編寫展開的。如果用戶以游客身份進(jìn)入網(wǎng)站，只能瀏覽旅游網(wǎng)站提供的資訊信息而不能進(jìn)行相關(guān)旅游產(chǎn)品的訂購(gòu)。如果用戶以注冊(cè)用戶登錄就要用到用戶注冊(cè)模塊，用戶注冊(cè)模塊將用戶提交的個(gè)人信息存儲(chǔ)到數(shù)據(jù)庫(kù)相對(duì)應(yīng)的表中。用戶注冊(cè)登錄后可以進(jìn)入信息顯示模塊、信息操作模塊、用戶管理模塊。如圖3所示。

用戶的注冊(cè)模塊與登錄模塊使用同一張數(shù)據(jù)庫(kù)表，當(dāng)用戶注冊(cè)時(shí)，系統(tǒng)通過(guò)連接池中已有的連接取得數(shù)據(jù)的操作權(quán)限，將數(shù)據(jù)信息寫入到數(shù)據(jù)表中。如果沒有所需要的連接，則直接訪問(wèn)數(shù)據(jù)庫(kù)建立該連接并將連接寫入連接池。用戶登錄模塊是當(dāng)連接池獲得連接后，系統(tǒng)從數(shù)據(jù)庫(kù)相對(duì)應(yīng)的數(shù)據(jù)表中讀取數(shù)據(jù)，由用戶登錄模塊驗(yàn)證數(shù)據(jù)正確性。用戶成功登錄后可以獲得相應(yīng)的服務(wù)，可以對(duì)相關(guān)信息進(jìn)行操作和管理。

2.4 B/S與MVC結(jié)構(gòu)圖

本旅游網(wǎng)站采用的是瀏覽器/服務(wù)器（Browser/Serve）模式。B/S架構(gòu)是WEB的一種網(wǎng)絡(luò)結(jié)構(gòu)模式，B/S模式以訪問(wèn)數(shù)據(jù)服務(wù)器為中心，HTTP協(xié)議為傳輸協(xié)議，客戶端通過(guò)瀏覽器（Browser）訪問(wèn)WEB服務(wù)器和數(shù)據(jù)服務(wù)器。這種模式最大的優(yōu)點(diǎn)是統(tǒng)一了客戶端，將系統(tǒng)核心內(nèi)容集中到服務(wù)器上，簡(jiǎn)化了系統(tǒng)開發(fā)、維護(hù)和使用的代價(jià)[2]。而MVC的出現(xiàn)是為程序解藕，從而達(dá)到分工明確并且系統(tǒng)強(qiáng)容錯(cuò)性的目標(biāo)。

MVC是一個(gè)框架模式，使用MVC應(yīng)用程序被分成三個(gè)核心部件：模型、視圖、控制器。模型表示企業(yè)數(shù)據(jù)和業(yè)務(wù)規(guī)則，表示了應(yīng)用程序的狀態(tài)。視圖決定如何將數(shù)據(jù)展示給用戶，可以訪問(wèn)模型的數(shù)據(jù)但不能對(duì)其進(jìn)行修改?？刂破鹘邮苡脩魟?dòng)作并負(fù)責(zé)統(tǒng)一管理[3-5]。因此MVC將應(yīng)用程序的輸入、處理和輸出分開，作為獨(dú)立的但彼此之間相互聯(lián)系的模塊。如圖4所示。

3 總結(jié)

在設(shè)計(jì)旅游網(wǎng)站的時(shí)候，設(shè)計(jì)人員需要認(rèn)真考慮用戶的需求和體驗(yàn)。HTML5的出現(xiàn)使得用戶不管是使用筆記本、臺(tái)式機(jī)還是智能手機(jī)都能很方便地瀏覽基于HTML5的網(wǎng)站。本文從用戶需求出發(fā)結(jié)合旅游網(wǎng)站的行業(yè)特點(diǎn)設(shè)計(jì)了旅游網(wǎng)站的架構(gòu)和系統(tǒng)功能模塊。使用數(shù)據(jù)庫(kù)做到頁(yè)面內(nèi)容和數(shù)據(jù)分離，在B/S和MVC結(jié)構(gòu)下設(shè)計(jì)了旅游網(wǎng)站。隨著目前移動(dòng)設(shè)備廣泛普及，HTML5在移動(dòng)設(shè)備下將會(huì)越來(lái)越流行。

參考文獻(xiàn)：

[1] 涂頻.基于HTML5的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用[J].辦公自動(dòng)化：學(xué)術(shù)版，2013（9）：31-33.

[2] 劉文君，潘永惠.MVC模式在B/S架構(gòu)中的應(yīng)用[J].電腦知識(shí)與技術(shù)，2010，6（26）：7283-7284.

[3] 朱濤，張水平.基于B/S模式的教師信息管理系統(tǒng)的實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)：學(xué)術(shù)交流，2005（2）：60-62.

[4] 余冬梅，張秋余，林常須，等.基于J2EE支持多客戶端的MVC設(shè)計(jì)模式研究[J].計(jì)算機(jī)工程與設(shè)計(jì)，2005，26（3）：784-786.

[5 吳艷.基于MVC模式B/S體系結(jié)構(gòu)的課程管理系統(tǒng)的設(shè)計(jì)[J].浙江工業(yè)大學(xué)學(xué)報(bào)，2008，36（1）：86-89.