Bootstrap前端工具下旅游網(wǎng)站設(shè)計與開發(fā)發(fā)布者：本站     時間：2020-05-05 12:05:54

隨著移動設(shè)備的日益普及，網(wǎng)站的移動端瀏覽量也越來越大，如何使網(wǎng)站在不同的移動設(shè)備上兼容性良好，展現(xiàn)風(fēng)格一致的界面，來增強用戶體驗?zāi)?文章基于Bootstrap前端框架，對旅游網(wǎng)站進(jìn)行前端和后端設(shè)計，系統(tǒng)設(shè)計含頁面布局、個人信息管理與維護、旅游攻略與景點資訊管理與維護等．為了進(jìn)一步拓展系統(tǒng)實際應(yīng)用，使其具備跨平臺或多種設(shè)備的兼容性，系統(tǒng)前端采用HTML5、CSS3構(gòu)建及美化頁面，采用Bootstrap實現(xiàn)具有響應(yīng)式自適應(yīng)效果的網(wǎng)頁，能支持各種屏幕大小不一的設(shè)備和不同分辨率設(shè)備;利用j Query強大的選擇器、大量封裝好的函數(shù)配合系統(tǒng)設(shè)計開發(fā);系統(tǒng)后端采用PHP實現(xiàn)功能處理，采用mySQL實現(xiàn)數(shù)據(jù)處理[1,2].
 

1 、系統(tǒng)設(shè)計

旅游站點由前端和后端兩部分組成．接口部分也就是后端設(shè)計如圖1所示．UI前端部分如圖2所示．

圖1 后端接口劃分

圖2 前端UI劃分

本系統(tǒng)包括個人信息維護，旅游資訊管理，旅游信息查詢?nèi)糠纸M成．個人信息包括注冊、登錄、修改個人信息、忘記密碼;旅游資訊管理則是發(fā)布旅游攻略、旅游心得等信息，查看已發(fā)布的信息，刪除已發(fā)布的旅游信息;旅游信息查詢則是根據(jù)關(guān)鍵字進(jìn)行檢索以及通過條件進(jìn)行篩選．

2、 頁面設(shè)計

頁面的布局框架是整個頁面的基礎(chǔ)，頁面采用響應(yīng)式布局．響應(yīng)式是通過更改內(nèi)容樣式達(dá)到的效果，根據(jù)獲取終端分辨率信息調(diào)整樣式，當(dāng)瀏覽器判斷屏幕尺寸介于1260px～1050px，都會判定為電腦端顯示完整的頁面;當(dāng)小于1050px且大于640px時，就會調(diào)整樣式，改變內(nèi)容的大小，自適應(yīng)新的分辨率，這些一般為平板端顯示的樣式;那判斷小于640px的調(diào)整的樣式就是移動端的屏幕尺寸，它也會改成相應(yīng)的比例展示內(nèi)容．使用bootstrap框架能高效地實現(xiàn)響應(yīng)式布局，它提供的柵格系統(tǒng)會隨著屏幕或視口尺寸的增加，系統(tǒng)會自動分為12列，用于通過一系列的行與列的組合來創(chuàng)建頁面布局，頁面內(nèi)容就可以放入這些創(chuàng)建好的布局中．響應(yīng)式布局原理如圖3所示．

系統(tǒng)的首頁如圖4所示．

圖3 響應(yīng)式布局原理圖

圖4 系統(tǒng)首頁

首頁導(dǎo)航條包括Logo和菜單欄，當(dāng)屏幕分辨率小于768像素時，導(dǎo)航欄會隱藏，顯示一個按鈕;輪播圖使用bootstrap框架及提供的JavaScript庫，就能建立一個具有響應(yīng)式的輪播圖，其中的小圓圈是Glyphicons字體圖標(biāo)．輪播圖下面是頁面主體內(nèi)容，主體內(nèi)容分為六個部分，廣告欄，搜索框，游玩攻略條目，旅行家專欄，熱銷旅游團推薦和游記選項卡展示．在PC端，廣告欄和搜索框位于輪播圖下方，廣告欄是12列的柵格中占9列，搜索框占3列;在平板電腦的分辨率中，廣告欄占7列，搜索框隨之變?yōu)?列;手機端廣告欄已占滿小分辨率屏的12列，圖片也按比例縮小，搜索框則被移動到游玩攻略部分的下方，組件大小不變．游記、攻略、出行、社區(qū)等布局一致的頁面，利用bootstrap提供的組件導(dǎo)航條和柵格系統(tǒng)對頁面進(jìn)行劃分．

3 、個人信息維護

注冊、登錄和忘記密碼功能都需要用戶在表單中輸入相應(yīng)信息后前端將填寫信息內(nèi)容發(fā)送到服務(wù)器后臺，服務(wù)器根據(jù)填寫信息內(nèi)容進(jìn)行比對、查詢或?qū)懭霐?shù)據(jù)庫．由于“系統(tǒng)注冊”及“忘記密碼”功能需用戶驗證，故設(shè)計時，使用了電子郵箱進(jìn)行驗證．

登錄功能則不需要使用郵件地址進(jìn)行身份驗證，無需修改數(shù)據(jù)庫中原始數(shù)據(jù)．具體地，利用j Query獲取相應(yīng)的DOM元素的值后，以JOSN格式發(fā)送請求至后臺API，后臺API依據(jù)此數(shù)據(jù)，在數(shù)據(jù)庫中完成查詢比對，判斷用戶是否為合法用戶．若是合法用戶則登錄系統(tǒng)，否則提示錯誤信息．

本系統(tǒng)設(shè)置游客身份，只能瀏覽頁面信息，注冊用戶完善個人資料后可以發(fā)布和管理旅游信息．注冊用戶可以對個人資料進(jìn)行修改，服務(wù)器端根據(jù)用戶填寫的內(nèi)容在數(shù)據(jù)庫中完成對應(yīng)數(shù)據(jù)的修改工作．

4、 旅游資訊管理

旅游網(wǎng)站對于注冊會員，可以在系統(tǒng)中發(fā)布旅游心得、旅游攻略、旅游資訊等信息，本模塊涵蓋了信息的發(fā)布，信息的查看和刪除信息三個功能．注冊用戶進(jìn)入個人中心，通過用戶ID傳入服務(wù)器，服務(wù)器根據(jù)ID在信息表中搜索用戶已發(fā)布的所有信息，將搜索結(jié)果返回前端進(jìn)行渲染，用戶就可以查看已發(fā)的旅游資訊．

發(fā)布旅游資訊時，用戶需要輸入一些基本信息，比如，標(biāo)題、時間、旅行地、訊息等．系統(tǒng)使用富文本編輯器對用戶輸入的信息文本進(jìn)行樣式控制．在數(shù)據(jù)庫存儲的不是純文本內(nèi)容，而是添加了HTML標(biāo)簽的內(nèi)容，信息存入數(shù)據(jù)庫后，前端通過服務(wù)器API獲取數(shù)據(jù)并渲染到頁面．

當(dāng)用戶想刪除旅游資訊時，可以在查看的基礎(chǔ)上進(jìn)行操作，獲取到旅游信息的ID，根據(jù)主鍵ID可以刪除相應(yīng)信息．

5 、旅游信息查詢

對于網(wǎng)站用戶，如果想通過系統(tǒng)查看一些旅游攻略、旅游心得等信息，可以通過搜索方式查找．本系統(tǒng)提供搜索框，可以進(jìn)行模糊查找．用戶在搜索框內(nèi)輸入要查找的信息，則在數(shù)據(jù)庫中使用SQL語句在對應(yīng)的旅游信息表中查詢比對，把成功匹配的旅游信息返回．例如輸入的搜索信息是“上?！保瑒t在信息主體內(nèi)容處顯示所有標(biāo)題包含”上?！暗穆糜涡畔ⅲ陧撁娣譃樽钚潞妥顭醿蓚€部分，這個內(nèi)容使用選項卡在頁面顯示，在PC端縮略圖和標(biāo)題在一行顯示，內(nèi)容在另起一行顯示;在移動端縮略圖、標(biāo)題和內(nèi)容都顯示在不同的行．