曹 利

(晉中師范高等?？茖W校，山西 晉中 030600)

0 引言

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

1 系統(tǒng)設計

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

圖1 后端接口劃分圖2 前端UI劃分

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

2 頁面設計

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

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

圖3 響應式布局原理圖圖4 系統(tǒng)首頁

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

3 個人信息維護

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

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

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

4 旅游資訊管理

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

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

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

5 旅游信息查詢

圖5 游記選項卡

對于網(wǎng)站用戶，如果想通過系統(tǒng)查看一些旅游攻略、旅游心得等信息，可以通過搜索方式查找.本系統(tǒng)提供搜索框，可以進行模糊查找.用戶在搜索框內(nèi)輸入要查找的信息，則在數(shù)據(jù)庫中使用SQL語句在對應的旅游信息表中查詢比對，把成功匹配的旅游信息返回.例如輸入的搜索信息是“上?！保瑒t在信息主體內(nèi)容處顯示所有標題包含”上?！暗穆糜涡畔?在頁面分為最新和最熱兩個部分，這個內(nèi)容使用選項卡在頁面顯示，在PC端縮略圖和標題在一行顯示，內(nèi)容在另起一行顯示；在移動端縮略圖、標題和內(nèi)容都顯示在不同的行.此部分內(nèi)容通過jQuery實現(xiàn)選項卡效果，代碼如圖5所示.

6 結(jié)束語

本文是基于bootstrap的旅游網(wǎng)站設計與實現(xiàn)，使用bootstrap框架實現(xiàn)了響應式自適應布局的前端設計，系統(tǒng)界面簡潔大方，使用PHP+SQL實現(xiàn)后臺管理，使用jQuery技術(shù)實現(xiàn)了更好的用戶體驗效果.在系統(tǒng)運行中，操作簡便、穩(wěn)定高效，具有良好的用戶體驗.