校园订餐系统设计

山东华宇工学院 张巧岭

本系统主要由响应式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插件实现数据可视化。本系统是为学校师生准备的校园订餐服务平台，为在校师生提供了餐饮捎带、水果代买、超市代购等服务，为学校师生提供便利的生活服务。