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

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

1 、系統設計

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

圖1 后端接口劃分

圖2 前端UI劃分

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

2、 頁(yè)面設計

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

系統的首頁(yè)如圖4所示．

圖3 響應式布局原理圖

圖4 系統首頁(yè)

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

3 、個(gè)人信息維護

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

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

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

4、 旅游資訊管理

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

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

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

5 、旅游信息查詢(xún)

對于網(wǎng)站用戶(hù)，如果想通過(guò)系統查看一些旅游攻略、旅游心得等信息，可以通過(guò)搜索方式查找．本系統提供搜索框，可以進(jìn)行模糊查找．用戶(hù)在搜索框內輸入要查找的信息，則在數據庫中使用SQL語(yǔ)句在對應的旅游信息表中查詢(xún)比對，把成功匹配的旅游信息返回．例如輸入的搜索信息是“上?！?，則在信息主體內容處顯示所有標題包含”上?！暗穆糜涡畔ⅲ陧?yè)面分為最新和最熱兩個(gè)部分，這個(gè)內容使用選項卡在頁(yè)面顯示，在PC端縮略圖和標題在一行顯示，內容在另起一行顯示;在移動(dòng)端縮略圖、標題和內容都顯示在不同的行．