校園訂餐系統設計

山東華宇工學院 張巧嶺

本系統主要由響應式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 校園訂餐系統需求情況

1.1 系統簡介

校園訂餐系統是一款專門為學校師生準備的校園訂餐服務平臺，為在校師生提供了餐飲捎帶、水果代買、超市代購等服務，打造了一個便捷的校園生活。學生可以在這里下單，也可以自己成為一名捎帶者，在空余時間賺零花錢，簡單易用。配送的價格訂單上會直接顯示，配送完成之后，相關的配送費會直接進入配送員的錢包，平臺不會收取提成，收益更可觀。

1.2 系統功能需求分析

本系統作為校園訂餐服務平臺，不僅要為大學生提供代買服務，同時也為大學生提供代送服務，就這兩者而言，本系統主要包含下單方和配送方，需要實現如下功能：

（1）“首頁”頁面主要包含：校園主要服務商家如各種餐廳、各個超市、各個水果飲品店；校園主要服務商品如華泰餐廳的水餃、華宇超市的方便面等。

（2）“訂單”頁面主要功能為訂單信息的跟蹤。如接單情況、配送情況以及評價等。

（3）“搶單”頁面主要包含：目前系統的訂單信息，一遍快速搶單。

（4）“我的”頁面為個人中心，主要包含賬號余額、訂單情況和接單情況。

2 校園訂餐系統技術

2.1 安裝環境設計

在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版本，不需要單獨安裝。

2.2 數據庫設計

本系統服務員校園，關于產品信息以及用戶信息需要建立數據管理系統，用于建立、使用和管理數據庫的軟件系統，本系統采用MySQL數據庫管理系統。MySQL是一種非常流行的數據庫管理系統，采用結構化查詢語言進行數據庫管理，支持大型數據，可以在各種操作系統上使用。

圖1 系統前端流程圖

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

3 校園訂餐系統界面設計

3.1 登錄頁面設計（圖3）

圖3 登錄界面設計

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

圖4 系統首頁設計

圖5 系統搶單頁設計

3.2 首頁設計

該界面為系統的主界面，登錄成功后即可進入到此界面，本界面主要包含快速搜索部分、快捷商家入口、熱銷餐品以及底部的界面切換菜單。

①快速搜索模塊：此部分通過Bootstrap組件中的搜索框來實現，點擊搜索框可以搜索想要捎帶的產品，點擊搜索按鈕即可呈現與所有內容相關的產品，便于直接下單；②快捷商家入口模塊：此模塊主要包含校園內所有的餐廳、超市、水果飲品等商家，單擊可進入到商家產品詳情；③熱銷餐品模塊：此模塊介紹銷量比較高的餐品、餐廳位置、優惠活動等信息，點擊即可訂餐；④底部切換菜單：底部設置4個主要菜單：訂單信息、搶單信息、個人的賬戶余額及下單和搶單情況。

3.3 搶單頁設計

搶單頁面主要分兩個部分，正在進行的訂單信息、已經被搶的訂單信息。搶單之后，1min之內可以取消訂單，訂單取消后自動回到進行中模塊，如果訂單被取消，就會顯示已取消。

此頁面簡單易操作，將所有的訂單信息全部顯示出來，搶單者可以根據自己所在的位置選取合適的訂單順手捎帶。

本系統是基于Bootstrap的校園訂餐系統，主要通過Bootstrap的柵格系統、表單組件、導航組件、導航欄組件、卡片組件、Flex彈性布局和按鈕樣式來實現。后臺管理系統通過Gulp工具構建Bootstrap項目，并結合chart.js插件實現數據可視化。本系統是為學校師生準備的校園訂餐服務平臺，為在校師生提供了餐飲捎帶、水果代買、超市代購等服務，為學校師生提供便利的生活服務。