• <table id="zigek"></table>
  • <acronym id="zigek"></acronym>
    <big id="zigek"></big>
    <tr id="zigek"><s id="zigek"></s></tr>

    學術堂首頁 | 文獻求助論文范文 | 論文題目 | 參考文獻 | 開題報告 | 論文格式 | 摘要提綱 | 論文致謝 | 論文查重 | 論文答辯 | 論文發表 | 期刊雜志 | 論文寫作 | 論文PPT
    學術堂專業論文學習平臺您當前的位置:學術堂 > 計算機論文 > 網站設計論文

    Bootstrap前端工具下旅游網站設計與開發

    時間:2020-02-28 來源:太原師范學院學報(自然科學版) 作者:曹利 本文字數:2807字

      摘    要: 文章提出一種基于Bootstrap旅游網站設計與實現的方案,該方案包括首頁、攻略、出行、目的地、游記和社區等頁面框架布局前端UI設計,并對登錄注冊忘記密碼等個人信息進行管理,對游記、攻略等信息的發布進行前后端管理.采用Bootstrap、HTML5、CSS3、jQuery和PHP等框架和技術.項目運行表明,方案設計合理可行,達到跨瀏覽器、跨平臺,運行穩定,操作界面簡潔大方、友好.

      關鍵詞: Bootstrap; 自適應; 旅游網站;

      Abstract: To suggest a planning of tourism website design and implementation based on Bootstrap,which states UI front end design of page frame including homepage,strategy,trip mode,destination,travels and community,and manage the personal information of registration,forgetting password,and administrate the publishing information of travels or strategy. Adopting the frame and technology about Bootstrap,HTML5,CSS3,jQuery and PHP,the project running suggests that the planning design is reasonably practicable so as to achieve the results of running stably by the cross browser and cross platform,and of brief and friendly interface.

      Keyword: Bootstrap; self-adaption; tourism website;

      0 、引言

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

    Bootstrap前端工具下旅游網站設計與開發
     

      1 、系統設計

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

      圖1 后端接口劃分
    圖1 后端接口劃分

      圖2 前端UI劃分
    圖2 前端UI劃分

      本系統包括個人信息維護,旅游資訊管理,旅游信息查詢三部分組成.個人信息包括注冊、登錄、修改個人信息、忘記密碼;旅游資訊管理則是發布旅游攻略、旅游心得等信息,查看已發布的信息,刪除已發布的旅游信息;旅游信息查詢則是根據關鍵字進行檢索以及通過條件進行篩選.

      2、 頁面設計

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

      系統的首頁如圖4所示.

      圖3 響應式布局原理圖
    圖3 響應式布局原理圖

      圖4 系統首頁
    圖4 系統首頁

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

      3 、個人信息維護

      注冊、登錄和忘記密碼功能都需要用戶在表單中輸入相應信息后前端將填寫信息內容發送到服務器后臺,服務器根據填寫信息內容進行比對、查詢或寫入數據庫.由于“系統注冊”及“忘記密碼”功能需用戶驗證,故設計時,使用了電子郵箱進行驗證.

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

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

      4、 旅游資訊管理

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

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

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

      5 、旅游信息查詢

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

      圖5 游記選項卡
    圖5 游記選項卡

      6 、結束語

      本文是基于bootstrap的旅游網站設計與實現,使用bootstrap框架實現了響應式自適應布局的前端設計,系統界面簡潔大方,使用PHP+SQL實現后臺管理,使用j Query技術實現了更好的用戶體驗效果.在系統運行中,操作簡便、穩定高效,具有良好的用戶體驗.

      參考文獻

      [1]王琴.基于Bootstrap技術的高校門戶網站設計與實訓[J].哈爾濱師范大學(自然科學學報),2017(3):43-48
      [2]劉歡,盧蓓蓉.使用響應式設計構建高效新型門戶網站[J].中國教育信息化,2013(9):71

      論文來源參考:曹利.基于Bootstrap旅游網站設計與實現[J].太原師范學院學報(自然科學版),2019,18(04):65-67.
      相近分類:網站設計畢業論文
      • 成都網絡警察報警平臺
      • 公共信息安全網絡監察
      • 經營性網站備案信息
      • 不良信息舉報中心
      • 中國文明網傳播文明
      • 學術堂_誠信網站
      159彩票{{转码主词}官网{{转码主词}网址