山東華宇工學(xué)院 張巧嶺

本系統(tǒng)主要由響應(yīng)式Web前端、后臺(tái)管理系統(tǒng)、數(shù)據(jù)庫三部分構(gòu)成。前端設(shè)計(jì)主要采用HTML5、CSS3、JavaScript來設(shè)計(jì)實(shí)現(xiàn)，通過Bootstrap框架完成響應(yīng)式設(shè)計(jì)。后臺(tái)管理系統(tǒng)項(xiàng)目采用Gulp工具進(jìn)行構(gòu)建，搭建Node.js運(yùn)行環(huán)境。數(shù)據(jù)庫管理系統(tǒng)采用MySQL，通過phpMyAdmin工具實(shí)現(xiàn)對(duì)數(shù)據(jù)庫的各種操作。本文著重介紹校園訂餐系統(tǒng)前端設(shè)計(jì)中的技術(shù)分析和功能實(shí)現(xiàn)。

近些年來由于Online To Offline即線上到線下(o2o)模式的發(fā)展和興起，各種服務(wù)網(wǎng)站不斷建立，提高了人們工作和生活的效率。在這個(gè)新的消費(fèi)模式潮流引領(lǐng)之下，大學(xué)生作為新科技，新文化最直接的接觸者和受益者，利用互聯(lián)網(wǎng)平臺(tái)為大學(xué)生提供快捷，高效的服務(wù)，是商業(yè)化發(fā)展的需求，也是解決大學(xué)生學(xué)習(xí)與生活之間的可行方法。

Bootstrap是快速開發(fā)Web應(yīng)用程序的前端工具包。它是一個(gè)CSS，HTML和JS的集合，Bootstrap是目前特別受歡迎的HTML、CSS和JS框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的Web項(xiàng)目，為Web開發(fā)提供了時(shí)尚的版式、表單、Buttons、表格、網(wǎng)格系統(tǒng)等，很適合做響應(yīng)式的網(wǎng)站效果，同時(shí)滿足PC端和移動(dòng)端效果。

1 校園訂餐系統(tǒng)需求情況

1.1 系統(tǒng)簡介

校園訂餐系統(tǒng)是一款專門為學(xué)校師生準(zhǔn)備的校園訂餐服務(wù)平臺(tái)，為在校師生提供了餐飲捎帶、水果代買、超市代購等服務(wù)，打造了一個(gè)便捷的校園生活。學(xué)生可以在這里下單，也可以自己成為一名捎帶者，在空余時(shí)間賺零花錢，簡單易用。配送的價(jià)格訂單上會(huì)直接顯示，配送完成之后，相關(guān)的配送費(fèi)會(huì)直接進(jìn)入配送員的錢包，平臺(tái)不會(huì)收取提成，收益更可觀。

1.2 系統(tǒng)功能需求分析

本系統(tǒng)作為校園訂餐服務(wù)平臺(tái)，不僅要為大學(xué)生提供代買服務(wù)，同時(shí)也為大學(xué)生提供代送服務(wù)，就這兩者而言，本系統(tǒng)主要包含下單方和配送方，需要實(shí)現(xiàn)如下功能：

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

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

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

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

2 校園訂餐系統(tǒng)技術(shù)

2.1 安裝環(huán)境設(shè)計(jì)

在Bootstrap官網(wǎng)上下載Bootstrap的最新版本，下載Bootstrap CSS、JavaScript和字體的預(yù)編譯的壓縮版本。Bootstrap預(yù)編譯文件是Bootstrap開發(fā)團(tuán)隊(duì)為我們預(yù)先編譯好的版本，預(yù)編譯版本中不包含文檔和最初的源代碼文件。下載成功后解壓將看到Bootstrap的預(yù)編譯文件和目錄結(jié)構(gòu)。

后臺(tái)管理系統(tǒng)采用Gulp工具進(jìn)行構(gòu)建，在安裝Gulp工具前，需要先搭建Node.js運(yùn)行環(huán)境。Node.js是基于Chrome的V8 JavaScript引擎開發(fā)的JavaScript運(yùn)行環(huán)境，它可以讓JavaScript運(yùn)行在服務(wù)器端。Npm是Node.js的包管理器，在安裝Node.js時(shí)會(huì)自動(dòng)安裝相應(yīng)的npm版本，不需要單獨(dú)安裝。

2.2 數(shù)據(jù)庫設(shè)計(jì)

本系統(tǒng)服務(wù)員校園，關(guān)于產(chǎn)品信息以及用戶信息需要建立數(shù)據(jù)管理系統(tǒng)，用于建立、使用和管理數(shù)據(jù)庫的軟件系統(tǒng)，本系統(tǒng)采用MySQL數(shù)據(jù)庫管理系統(tǒng)。MySQL是一種非常流行的數(shù)據(jù)庫管理系統(tǒng)，采用結(jié)構(gòu)化查詢語言進(jìn)行數(shù)據(jù)庫管理，支持大型數(shù)據(jù)，可以在各種操作系統(tǒng)上使用。

圖1 系統(tǒng)前端流程圖

圖2 Bootstrap的預(yù)編譯文件目錄結(jié)構(gòu)

3 校園訂餐系統(tǒng)界面設(shè)計(jì)

3.1 登錄頁面設(shè)計(jì)（圖3）

圖3 登錄界面設(shè)計(jì)

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

圖4 系統(tǒng)首頁設(shè)計(jì)

圖5 系統(tǒng)搶單頁設(shè)計(jì)

3.2 首頁設(shè)計(jì)

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

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

3.3 搶單頁設(shè)計(jì)

搶單頁面主要分兩個(gè)部分，正在進(jìn)行的訂單信息、已經(jīng)被搶的訂單信息。搶單之后，1min之內(nèi)可以取消訂單，訂單取消后自動(dòng)回到進(jìn)行中模塊，如果訂單被取消，就會(huì)顯示已取消。

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

本系統(tǒng)是基于Bootstrap的校園訂餐系統(tǒng)，主要通過Bootstrap的柵格系統(tǒng)、表單組件、導(dǎo)航組件、導(dǎo)航欄組件、卡片組件、Flex彈性布局和按鈕樣式來實(shí)現(xiàn)。后臺(tái)管理系統(tǒng)通過Gulp工具構(gòu)建Bootstrap項(xiàng)目，并結(jié)合chart.js插件實(shí)現(xiàn)數(shù)據(jù)可視化。本系統(tǒng)是為學(xué)校師生準(zhǔn)備的校園訂餐服務(wù)平臺(tái)，為在校師生提供了餐飲捎帶、水果代買、超市代購等服務(wù)，為學(xué)校師生提供便利的生活服務(wù)。