山東華宇工學院 張巧嶺
本系統主要由響應式Web前端、后臺管理系統、數據庫三部分構成。前端設計主要采用HTML5、CSS3、JavaScript來設計實現,通過Bootstrap框架完成響應式設計。后臺管理系統項目采用Gulp工具進行構建,搭建Node.js運行環境。數據庫管理系統采用MySQL,通過phpMyAdmin工具實現對數據庫的各種操作。本文著重介紹校園訂餐系統前端設計中的技術分析和功能實現。
近些年來由于Online To Offline即線上到線下(o2o)模式的發展和興起,各種服務網站不斷建立,提高了人們工作和生活的效率。在這個新的消費模式潮流引領之下,大學生作為新科技,新文化最直接的接觸者和受益者,利用互聯網平臺為大學生提供快捷,高效的服務,是商業化發展的需求,也是解決大學生學習與生活之間的可行方法。
Bootstrap是快速開發Web應用程序的前端工具包。它是一個CSS,HTML和JS的集合,Bootstrap是目前特別受歡迎的HTML、CSS和JS框架,用于開發響應式布局、移動設備優先的Web項目,為Web開發提供了時尚的版式、表單、Buttons、表格、網格系統等,很適合做響應式的網站效果,同時滿足PC端和移動端效果。
校園訂餐系統是一款專門為學校師生準備的校園訂餐服務平臺,為在校師生提供了餐飲捎帶、水果代買、超市代購等服務,打造了一個便捷的校園生活。學生可以在這里下單,也可以自己成為一名捎帶者,在空余時間賺零花錢,簡單易用。配送的價格訂單上會直接顯示,配送完成之后,相關的配送費會直接進入配送員的錢包,平臺不會收取提成,收益更可觀。
本系統作為校園訂餐服務平臺,不僅要為大學生提供代買服務,同時也為大學生提供代送服務,就這兩者而言,本系統主要包含下單方和配送方,需要實現如下功能:
(1)“首頁”頁面主要包含:校園主要服務商家如各種餐廳、各個超市、各個水果飲品店;校園主要服務商品如華泰餐廳的水餃、華宇超市的方便面等。
(2)“訂單”頁面主要功能為訂單信息的跟蹤。如接單情況、配送情況以及評價等。
(3)“搶單”頁面主要包含:目前系統的訂單信息,一遍快速搶單。
(4)“我的”頁面為個人中心,主要包含賬號余額、訂單情況和接單情況。
在Bootstrap官網上下載Bootstrap的最新版本,下載Bootstrap CSS、JavaScript和字體的預編譯的壓縮版本。Bootstrap預編譯文件是Bootstrap開發團隊為我們預先編譯好的版本,預編譯版本中不包含文檔和最初的源代碼文件。下載成功后解壓將看到Bootstrap的預編譯文件和目錄結構。
后臺管理系統采用Gulp工具進行構建,在安裝Gulp工具前,需要先搭建Node.js運行環境。Node.js是基于Chrome的V8 JavaScript引擎開發的JavaScript運行環境,它可以讓JavaScript運行在服務器端。Npm是Node.js的包管理器,在安裝Node.js時會自動安裝相應的npm版本,不需要單獨安裝。
本系統服務員校園,關于產品信息以及用戶信息需要建立數據管理系統,用于建立、使用和管理數據庫的軟件系統,本系統采用MySQL數據庫管理系統。MySQL是一種非常流行的數據庫管理系統,采用結構化查詢語言進行數據庫管理,支持大型數據,可以在各種操作系統上使用。

圖1 系統前端流程圖

圖2 Bootstrap的預編譯文件目錄結構

圖3 登錄界面設計
通過Bootstrap的柵格系統、表單組件、flex彈性布局和按鈕樣式實現登錄界面的設計。首先頁面的最外層為login盒子,該容器盒子中包含head、form、footer三大部分構成。主要細節體現為:①login盒子整體水平居中,背景圖為圖片;②head盒子設置背景為圖片;③form盒子部分,用戶名和密碼為文本輸入,其他使用Bootstrap提供的表單組件來實現,底部輸入密碼和忘記密碼一行通過Bootstrap的柵格系統進行布局;④footer盒子部分主要指沒有賬號馬上注冊部分,可通過flex彈性布局來設置內容的排了方式。

圖4 系統首頁設計

圖5 系統搶單頁設計
該界面為系統的主界面,登錄成功后即可進入到此界面,本界面主要包含快速搜索部分、快捷商家入口、熱銷餐品以及底部的界面切換菜單。
①快速搜索模塊:此部分通過Bootstrap組件中的搜索框來實現,點擊搜索框可以搜索想要捎帶的產品,點擊搜索按鈕即可呈現與所有內容相關的產品,便于直接下單;②快捷商家入口模塊:此模塊主要包含校園內所有的餐廳、超市、水果飲品等商家,單擊可進入到商家產品詳情;③熱銷餐品模塊:此模塊介紹銷量比較高的餐品、餐廳位置、優惠活動等信息,點擊即可訂餐;④底部切換菜單:底部設置4個主要菜單:訂單信息、搶單信息、個人的賬戶余額及下單和搶單情況。
搶單頁面主要分兩個部分,正在進行的訂單信息、已經被搶的訂單信息。搶單之后,1min之內可以取消訂單,訂單取消后自動回到進行中模塊,如果訂單被取消,就會顯示已取消。
此頁面簡單易操作,將所有的訂單信息全部顯示出來,搶單者可以根據自己所在的位置選取合適的訂單順手捎帶。
本系統是基于Bootstrap的校園訂餐系統,主要通過Bootstrap的柵格系統、表單組件、導航組件、導航欄組件、卡片組件、Flex彈性布局和按鈕樣式來實現。后臺管理系統通過Gulp工具構建Bootstrap項目,并結合chart.js插件實現數據可視化。本系統是為學校師生準備的校園訂餐服務平臺,為在校師生提供了餐飲捎帶、水果代買、超市代購等服務,為學校師生提供便利的生活服務。