1、1题 目： 班 级： 姓 名： 学 号： 指导教师： 成 绩： 通信工程训练 设计报告电子与信息工程学院信息与通信工程系2目录1 研究背景 .31.1 发展现状 .32 点餐系统设计与开发 .32.1 手机点餐流程 .32.1.1 用户点餐流程 32.1.2 餐厅上菜流程 42.2 系统化框架及设计 .53 具体设计 .63.1 界面设计 .63.1.1 所用技术 63.2 界面关联 .103.2.1 所用技术 .103.3 前后台交互 .113.3.1 所用技术 .113.4 后台及数据库 .133.4.1 所用技术 .133.5 兼容问题 144 总结 .155 心得体会 .16参考文献
2、1731 研究背景餐饮业作为我国第三产业中一个传统服务性行业，始终保持着旺盛的增长势头，取得了突飞猛进的发展，展现出繁荣兴旺的新局面。2011 年中国餐饮业收入达到 20635 亿元，同比增长 16.9%，占社会消费品零售总额的比重为 11.2%。产业规模首次突破 2 万亿元大关，这距离 2006 年突破 1 一万元营业额仅用了 5年时间，年均增长 2000 亿元以上。随着移动互联网的发展，人们越来越倾向于使用移动终端来获取信息和服务，而智能手机无疑是引爆移动互联网浪潮的无比重要的一环。它以全新的操控体验和性能掀起了大屏幕+ 触控技术+ 只能的新的移动终端风暴。正式由于上面全方位的分析，我们以
3、移动互联网为基础，抓住移动智能终端大规模应用的契机，以解决传统的餐饮行业在消费者消费行为分析、点餐流程等方面的问题为目的，推出一套完整的餐厅信息化解决方案，并决定设计并实现一个基于 HTML5 的新一代智能点餐系统。1.1 发展现状目前国内的市场上已经出现了各式各样的点餐系统，但仍存在一些问题下单速度缓慢出错可能性大点餐成本高2 点餐系统设计与开发2.1 手机点餐流程2.1.1 用户点餐流程4具体流程用户通过手机上的微信的扫一扫功能扫描餐厅二维码并进入到点餐系统界面，在登录或注册账号之后开始进行点餐，点餐完毕后进入到我的菜单界面进行餐品的确认和结算，当订单确认后，进入下一界面，填写餐桌号码，填
4、写正确的餐桌号码之后将订单提交到数据库。2.1.2 餐厅上菜流程打开微信扫描二维码进入点菜系统界面登录/注册账号浏览菜单/点菜确认订单核实金额填写餐桌号码点餐结束5否是具体流程餐品汇总界面每十分钟从数据库调用一次数据进行界面刷新，更新菜单，当某一桌的菜品完成后，点击已完成，当前用户的菜单在本界面上移除，数据库进行更新2.2 系统化框架及设计具体流程当用户打开界面时，连接服务器并向服务器发送请求，服务器连接成功后，服务器会向数据库发送请求数据的要求，并调用数据库中的数据并返回到服务器，再由服务器发送给用户，当用户确认订单完成并下单后，会再次调用服务器，服务器会将用户的数据传送给数据库并对数据库进
5、行更改。当餐厅打开菜单汇总页面时，连接服务器并向服务器发送请求，服务器连接成功后，服务器会连接数据，将用户的订单获取到并传送给服务器，服务器用户服务器 数据库菜单汇总界面菜品上齐将订单删除 订单保存6将获取到的数据发送给餐厅，餐厅根据顾客的订单准备菜品，当菜品完成时，餐厅点击已完成按钮，将再次连接服务器与数据库，对数据库进行修改。3 具体设计具体设计分为界面设计、界面关联、前后台交互、后台以数据库、兼容问题共五个模块3.1 界面设计3.1.1 所用技术界面设计主要是运用 HTML5、CSS3 样式和 Bootstrap 框架搭建而成HTML5 是超文本标记语言（HTML）的第五个标准，其设计目
6、的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如：video、audio、canvas 等。HTML5 引进了许多新的功能，可以真正改变用户与文档的交互方式，包括：新的解析规则增强了灵活性新属性淘汰过时的或冗余的属性一个 HTML5 文档到另一个文档间的拖放功能离线编辑信息传递的增强详细的解析规则多用途互联网邮件扩展（MIME）和协议处理程序注册在 SQL 数据库中存储数据的通用标准（Web SQL）主界面构建部分代码如下：按钮搭建7全部商品新品上市西贝经典五谷杂粮自制饮品菜单列表商品名称单价数量小计操作导航栏餐厅详情注册登录CSS3CSS3 即层叠样式表。在网页制作时采用层
7、叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不用部分，或者页数不同的网页的外观和格式。部分代码如下：bodyfont-family: “Consolas Yahei“; height: 100%; background-image: url(img/bg1.png); background-size: cover; background-position: 0 10%;.wrappadding: 0;*margin: 0; padding: 0;#navwidth: 100%; height: 4.3
8、5rem; background: #fc9f4d; opacity: .8;display: inline-block;margin-bottom: .5rem;#navimgfloat: left;#nav .navbtn1,#nav .navbtn2width: 3.7rem; margin-right: .4rem;9#nav .navbtn3width: 5.3rem;#navbuttonfont-size: 1.1rem; padding: .1rem; border-radius: .5rem;#morebackground: #5dac81;button acolor: #ff
9、f; text-decoration: none;#loginbackground: #d75455;/*button*/button a:visitedcolor: #fff; text-decoration: none;button a:activecolor: #000;.logoimg1width: 2.8rem;.logoimg2width: 4.3rem;BootstrapBootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。部分代码如下：餐厅详情注册登录1
10、03.2 界面关联3.2.1 所用技术在本系统中，主要应用了 Angular.js 的路由功能使每个分页面进行关联和汇总。AngularJs 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJs可以实现多视图的单页 Web 应用。部分代码如下：app.config(function($routeProvider)$routeProvider.when(“/“,templateUrl:“list.html“).when(“/introduce“,templateUrl:“introduce.html“).when(“/mymenu“,templateUrl:“mymenu.h
11、tml“).when(“/register“,templateUrl:“register.html“).when(“/login“,templateUrl:“login.html“).when(“/payment“,templateUrl: “payment.html“).when(“/end“,templateUrl: “end.html“););113.3 前后台交互3.3.1 所用技术AJAX：是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某个部分进行更新。传统的网页如果需要更
12、新内容，必须加载整个网页页面。在本系统中，我们主要通过 AJAX 来进行后台与服务器进行少量的数据交换来拿到菜单等数据并返回给用户。AJAX 使用：定义 AJAX 函数function ajax(settings)/ 设置参数的初始值var opts = method: settings.method | get,url: settings.url | ,dataType: settings.dataType | txt,data: settings.data | ,callback: settings.callback | function();varxhr = new XMLHttpReq
13、uest();if(opts.method = get)xhr.open(opts.method,opts.url + “?“ + opts.data);elsexhr.open(opts.method,opts.url);xhr.onload = function()switch(opts.dataType)12case “json“:var data = JSON.parse(xhr.responseText);opts.callback(data); break;case “xml“:opts.callback(xhr.responseXML);break;default:opts.ca
14、llback(xhr.responseText);break;if(opts.method = post)xhr.setRequestHeader(“Content-Type“, “application/x-www-form-urlencoded“);xhr.send(opts.data);elsexhr.send();在主界面中 AJAX 函数部分代码如下：function tabelAjax()ajax(url:“php/cook.php?“,dataType: “json“,callback: function(data)for(vari=0;i餐桌号码:“+datai.desknum
15、+“菜单列表“+datai.menu+“已完成“;oDiv.className = “order“;oAll.appendChild(oDiv););3.4 后台及数据库3.4.1 所用技术PHP：是一种通用开源脚本语言。主要适用于 Web 开发领域。它开源比CGI 或者 Perl 更快速地执行动态网页。用 PHP 做出的动态页面与其他的编程语言相比，PHP 是将程序嵌入到 HTML 文档中去执行，执行效率比完全生成HTML 标记的 CGI 要高许多；在本系统中，通过 PHP 连接数据，再用 AJAX 调用数据来加载到界面上。本系统一共创建了 5 个 PHP 文件，他们的作用分别是对数据库的添
16、加、查找和删除。部分代码如下：query(“set names utf8“);$sql = “INSERT INTO order (desknum,menu) VALUES ($desknum,$menu)“;$sql2 = “SELECT * FROM order“;$mysqli-query($sql);$res = $mysqli-query($sql2);$allMessage = $res-fetch_all(MYSQLI_ASSOC);echo json_encode($allMessage);$mysqli-close();?数据库MySQL 是一个关系型数据库管理系统，关联数据
17、库将数据保存在不同的表中，而不是将所有的数据放在一个大仓库内，这样就增加了速度并提高了灵活性。在本系统中，创建了一个数据库，其中包含了 food、member 和 order 三张表。food 主要存放了餐品的名称、图片、简介和价格，member 主要存放了会员信息，order 存放了用户订单。3.5 兼容问题在本系统中，兼容问题主要存在于系统需要支持不同型号不同大小的移动设备，这就需要系统具有屏幕自适应的功能具体解决办法如下：定义函数，将系统规定的 1rem 改为自定义长度 24px(function (doc, win) vardocEl = doc.documentElement,res
18、izeEvt = orientationchange in window ? orientationchange : resize,15recalc = function () window.clientWidth = docEl.clientWidth;if (!window.clientWidth) return;docEl.style.fontSize = 24 * (window.clientWidth / 640) + px;window.base = 24 * (window.clientWidth / 640);try recalc(); catch (e) if (!doc.a
19、ddEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener(DOMContentLoaded, recalc, false);)(document, window);4 总结通过本文设计和开发的基于 HTML5 技术的手机点餐系统与其他传统的点餐系统的比较，可以看到本文的手机点餐系统在采用了先进的 HTML5 技术之后，整个点餐系统具有如下的几个显著的优势：1通用的网络标准和跨平台特性因为 HTML5 技术的设计和开发由苹果，诺基亚等许多手机生产厂商一起进行参与的，所以
20、HTML5 技术采用的是手机上通用的网络标准，这也就意味着本文设计和开发的手机点餐系统可以适用于许多型号的手机。同时 HTML5技术可进行跨平台的使用，这也确保了本文设计和开发的手机点餐系统可以非常方便地移植到各类手机平台上，甚至还可以通过封装技术，将手机点餐系统发放到 APP Store 中进行推广。2自适应网页设计和同步更新由于采用了 HTML5 技术，本文设计和开发的手机点餐系统可以进行自适16应网页设计，它通过自动识别不同手机的屏幕宽度，来对手机点餐系统的页面大小进行自适应调整。同时在手机点餐系统进行系统更新的时候，HTML5 技术也支持手机点餐系统的各个终端进行同步和即时的更新，从而
21、确保手机点餐系统维持一个非常友好的用户体验。3先进的信息安全管理方案由于本文设计和开发的手机点餐系统不仅涉及到用户的个人信息，还涉及到资金信息和餐饮企业的商业信息等机密信息，因此在手机点餐系统中，系统的信息安全就显得尤为重要。本文对手机点餐系统的安全防护理念进行详细地说明，并且针对系统中的机密数据，本文对手机点餐系统的通信过程进行了严格的加密安全设置，从而有效地确保了手机点餐系统的信息安全保障水平。5 心得体会经过开发开发本系统，让我加强了对 HTML5，CSS3 以及各种框架的掌握，加强了自己对前端和后台交互的理解与运用，数据库的调用与删减等，锻炼可自己独立做项目的能力，也学习到了一些 PhotoShop 的基础支持和 UI 的页面设计等。增加了自己的项目经验，提高了能力。17参考文献1 柴晓路,梁宇奇. Web services 技术、架构和应用M，北京:电子工业出版社，2003.2 岳昆,王晓玲,周傲英.Web 服务核心支撑技术:研究综述J软件学报，2004.3 李劲动态企业信息管理的 Web 服务M.清华大学出版社，2002.4 杨曼,徐东平.基于 Web 服务的动态企业信息管理的研究J计算机工程与设计,2006.5引饶元,冯博琴面向 Web 服务的动态企业信息管理集成框架J.计算机集成制造系统,2004.
