Bootstrap前端工具下旅游網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)發(fā)布者：本站 時(shí)間：2020-05-05 12:05:54
隨著移動(dòng)設(shè)備的日益普及，網(wǎng)站的移動(dòng)端瀏覽量也越來(lái)越大，如何使網(wǎng)站在不同的移動(dòng)設(shè)備上兼容性良好，展現(xiàn)風(fēng)格一致的界面，來(lái)增強(qiáng)用戶體驗(yàn)?zāi)?文章基于Bootstrap前端框架，對(duì)旅游網(wǎng)站進(jìn)行前端和后端設(shè)計(jì)，系統(tǒng)設(shè)計(jì)含頁(yè)面布局、個(gè)人信息管理與維護(hù)、旅游攻略與景點(diǎn)資訊管理與維護(hù)等．為了進(jìn)一步拓展系統(tǒng)實(shí)際應(yīng)用，使其具備跨平臺(tái)或多種設(shè)備的兼容性，系統(tǒng)前端采用HTML5、CSS3構(gòu)建及美化頁(yè)面，采用Bootstrap實(shí)現(xiàn)具有響應(yīng)式自適應(yīng)效果的網(wǎng)頁(yè)，能支持各種屏幕大小不一的設(shè)備和不同分辨率設(shè)備;利用j Query強(qiáng)大的選擇器、大量封裝好的函數(shù)配合系統(tǒng)設(shè)計(jì)開(kāi)發(fā);系統(tǒng)后端采用PHP實(shí)現(xiàn)功能處理，采用mySQL實(shí)現(xiàn)數(shù)據(jù)處理[1,2].
1 、系統(tǒng)設(shè)計(jì)
旅游站點(diǎn)由前端和后端兩部分組成．接口部分也就是后端設(shè)計(jì)如圖1所示．UI前端部分如圖2所示．
圖1 后端接口劃分
圖2 前端UI劃分
本系統(tǒng)包括個(gè)人信息維護(hù)，旅游資訊管理，旅游信息查詢?nèi)糠纸M成．個(gè)人信息包括注冊(cè)、登錄、修改個(gè)人信息、忘記密碼;旅游資訊管理則是發(fā)布旅游攻略、旅游心得等信息，查看已發(fā)布的信息，刪除已發(fā)布的旅游信息;旅游信息查詢則是根據(jù)關(guān)鍵字進(jìn)行檢索以及通過(guò)條件進(jìn)行篩選．
2、 頁(yè)面設(shè)計(jì)
頁(yè)面的布局框架是整個(gè)頁(yè)面的基礎(chǔ)，頁(yè)面采用響應(yīng)式布局．響應(yīng)式是通過(guò)更改內(nèi)容樣式達(dá)到的效果，根據(jù)獲取終端分辨率信息調(diào)整樣式，當(dāng)瀏覽器判斷屏幕尺寸介于1260px～1050px，都會(huì)判定為電腦端顯示完整的頁(yè)面;當(dāng)小于1050px且大于640px時(shí)，就會(huì)調(diào)整樣式，改變內(nèi)容的大小，自適應(yīng)新的分辨率，這些一般為平板端顯示的樣式;那判斷小于640px的調(diào)整的樣式就是移動(dòng)端的屏幕尺寸，它也會(huì)改成相應(yīng)的比例展示內(nèi)容．使用bootstrap框架能高效地實(shí)現(xiàn)響應(yīng)式布局，它提供的柵格系統(tǒng)會(huì)隨著屏幕或視口尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為12列，用于通過(guò)一系列的行與列的組合來(lái)創(chuàng)建頁(yè)面布局，頁(yè)面內(nèi)容就可以放入這些創(chuàng)建好的布局中．響應(yīng)式布局原理如圖3所示．
系統(tǒng)的首頁(yè)如圖4所示．
圖3 響應(yīng)式布局原理圖
圖4 系統(tǒng)首頁(yè)
首頁(yè)導(dǎo)航條包括Logo和菜單欄，當(dāng)屏幕分辨率小于768像素時(shí)，導(dǎo)航欄會(huì)隱藏，顯示一個(gè)按鈕;輪播圖使用bootstrap框架及提供的JavaScript庫(kù)，就能建立一個(gè)具有響應(yīng)式的輪播圖，其中的小圓圈是Glyphicons字體圖標(biāo)．輪播圖下面是頁(yè)面主體內(nèi)容，主體內(nèi)容分為六個(gè)部分，廣告欄，搜索框，游玩攻略條目，旅行家專欄，熱銷旅游團(tuán)推薦和游記選項(xiàng)卡展示．在PC端，廣告欄和搜索框位于輪播圖下方，廣告欄是12列的柵格中占9列，搜索框占3列;在平板電腦的分辨率中，廣告欄占7列，搜索框隨之變?yōu)?列;手機(jī)端廣告欄已占滿小分辨率屏的12列，圖片也按比例縮小，搜索框則被移動(dòng)到游玩攻略部分的下方，組件大小不變．游記、攻略、出行、社區(qū)等布局一致的頁(yè)面，利用bootstrap提供的組件導(dǎo)航條和柵格系統(tǒng)對(duì)頁(yè)面進(jìn)行劃分．
3 、個(gè)人信息維護(hù)
注冊(cè)、登錄和忘記密碼功能都需要用戶在表單中輸入相應(yīng)信息后前端將填寫信息內(nèi)容發(fā)送到服務(wù)器后臺(tái)，服務(wù)器根據(jù)填寫信息內(nèi)容進(jìn)行比對(duì)、查詢或?qū)懭霐?shù)據(jù)庫(kù)．由于“系統(tǒng)注冊(cè)”及“忘記密碼”功能需用戶驗(yàn)證，故設(shè)計(jì)時(shí)，使用了電子郵箱進(jìn)行驗(yàn)證．
登錄功能則不需要使用郵件地址進(jìn)行身份驗(yàn)證，無(wú)需修改數(shù)據(jù)庫(kù)中原始數(shù)據(jù)．具體地，利用j Query獲取相應(yīng)的DOM元素的值后，以JOSN格式發(fā)送請(qǐng)求至后臺(tái)API，后臺(tái)API依據(jù)此數(shù)據(jù)，在數(shù)據(jù)庫(kù)中完成查詢比對(duì)，判斷用戶是否為合法用戶．若是合法用戶則登錄系統(tǒng)，否則提示錯(cuò)誤信息．
本系統(tǒng)設(shè)置游客身份，只能瀏覽頁(yè)面信息，注冊(cè)用戶完善個(gè)人資料后可以發(fā)布和管理旅游信息．注冊(cè)用戶可以對(duì)個(gè)人資料進(jìn)行修改，服務(wù)器端根據(jù)用戶填寫的內(nèi)容在數(shù)據(jù)庫(kù)中完成對(duì)應(yīng)數(shù)據(jù)的修改工作．
4、 旅游資訊管理
旅游網(wǎng)站對(duì)于注冊(cè)會(huì)員，可以在系統(tǒng)中發(fā)布旅游心得、旅游攻略、旅游資訊等信息，本模塊涵蓋了信息的發(fā)布，信息的查看和刪除信息三個(gè)功能．注冊(cè)用戶進(jìn)入個(gè)人中心，通過(guò)用戶ID傳入服務(wù)器，服務(wù)器根據(jù)ID在信息表中搜索用戶已發(fā)布的所有信息，將搜索結(jié)果返回前端進(jìn)行渲染，用戶就可以查看已發(fā)的旅游資訊．
發(fā)布旅游資訊時(shí)，用戶需要輸入一些基本信息，比如，標(biāo)題、時(shí)間、旅行地、訊息等．系統(tǒng)使用富文本編輯器對(duì)用戶輸入的信息文本進(jìn)行樣式控制．在數(shù)據(jù)庫(kù)存儲(chǔ)的不是純文本內(nèi)容，而是添加了HTML標(biāo)簽的內(nèi)容，信息存入數(shù)據(jù)庫(kù)后，前端通過(guò)服務(wù)器API獲取數(shù)據(jù)并渲染到頁(yè)面．
當(dāng)用戶想刪除旅游資訊時(shí)，可以在查看的基礎(chǔ)上進(jìn)行操作，獲取到旅游信息的ID，根據(jù)主鍵ID可以刪除相應(yīng)信息．
5 、旅游信息查詢
對(duì)于網(wǎng)站用戶，如果想通過(guò)系統(tǒng)查看一些旅游攻略、旅游心得等信息，可以通過(guò)搜索方式查找．本系統(tǒng)提供搜索框，可以進(jìn)行模糊查找．用戶在搜索框內(nèi)輸入要查找的信息，則在數(shù)據(jù)庫(kù)中使用SQL語(yǔ)句在對(duì)應(yīng)的旅游信息表中查詢比對(duì)，把成功匹配的旅游信息返回．例如輸入的搜索信息是“上?！?，則在信息主體內(nèi)容處顯示所有標(biāo)題包含”上海“的旅游信息．在頁(yè)面分為最新和最熱兩個(gè)部分，這個(gè)內(nèi)容使用選項(xiàng)卡在頁(yè)面顯示，在PC端縮略圖和標(biāo)題在一行顯示，內(nèi)容在另起一行顯示;在移動(dòng)端縮略圖、標(biāo)題和內(nèi)容都顯示在不同的行．
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032