html5点餐系统docx.docx

上传人:b****1 文档编号:1039258 上传时间:2023-04-30 格式:DOCX 页数:17 大小:62.73KB
下载 相关 举报
html5点餐系统docx.docx_第1页
第1页 / 共17页
html5点餐系统docx.docx_第2页
第2页 / 共17页
html5点餐系统docx.docx_第3页
第3页 / 共17页
html5点餐系统docx.docx_第4页
第4页 / 共17页
html5点餐系统docx.docx_第5页
第5页 / 共17页
html5点餐系统docx.docx_第6页
第6页 / 共17页
html5点餐系统docx.docx_第7页
第7页 / 共17页
html5点餐系统docx.docx_第8页
第8页 / 共17页
html5点餐系统docx.docx_第9页
第9页 / 共17页
html5点餐系统docx.docx_第10页
第10页 / 共17页
html5点餐系统docx.docx_第11页
第11页 / 共17页
html5点餐系统docx.docx_第12页
第12页 / 共17页
html5点餐系统docx.docx_第13页
第13页 / 共17页
html5点餐系统docx.docx_第14页
第14页 / 共17页
html5点餐系统docx.docx_第15页
第15页 / 共17页
html5点餐系统docx.docx_第16页
第16页 / 共17页
html5点餐系统docx.docx_第17页
第17页 / 共17页
亲,该文档总共17页,全部预览完了,如果喜欢就下载吧!
下载资源
资源描述

html5点餐系统docx.docx

《html5点餐系统docx.docx》由会员分享,可在线阅读,更多相关《html5点餐系统docx.docx(17页珍藏版)》请在冰点文库上搜索。

html5点餐系统docx.docx

html5点餐系统docx

 

题目:

班级:

姓名:

学号:

指导教师:

成绩:

电子与信息工程学院

信息与通信工程系

 

1研究背景3

1.1发展现状3

2点餐系统设计与开发3

2.1手机点餐流程3

2.1.1用户点餐流程3

2.1.2餐厅上菜流程4

2.2系统化框架及设计5

3具体设计6

3.1界面设计6

3.1.1所用技术6

3.2界面关联10

3.2.1所用技术10

3.3前后台交互11

3.3.1所用技术11

3.4后台及数据库13

3.4.1所用技术13

3.5兼容问题14

4总结15

5心得体会16

参考文献17

1研究背景

餐饮业作为我国第三产业中一个传统服务性行业,始终保持着旺盛的增长势头,取得了突飞猛进的发展,展现出繁荣兴旺的新局面。

2011年中国餐饮业收入达到20635亿元,同比增长16.9%,占社会消费品零售总额的比重为11.2%。

产业规模首次突破2万亿元大关,这距离2006年突破1一万元营业额仅用了5年时间,年均增长2000亿元以上。

随着移动互联网的发展,人们越来越倾向于使用移动终端来获取信息和服务,而智能手机无疑是引爆移动互联网浪潮的无比重要的一环。

它以全新的操控体验和性能掀起了大屏幕+触控技术+只能的新的移动终端风暴。

正式由于上面全方位的分析,我们以移动互联网为基础,抓住移动智能终端大规模应用的契机,以解决传统的餐饮行业在消费者消费行为分析、点餐流程等方面的问题为目的,推出一套完整的餐厅信息化解决方案,并决定设计并实现一个基于HTML5的新一代智能点餐系统。

1.1发展现状

目前国内的市场上已经出现了各式各样的点餐系统,但仍存在一些问题

下单速度缓慢

出错可能性大

点餐成本高

2点餐系统设计与开发

2.1手机点餐流程

2.1.1用户点餐流程

 

 

具体流程

用户通过手机上的微信的扫一扫功能扫描餐厅二维码并进入到点餐系统界面,在登录或注册账号之后开始进行点餐,点餐完毕后进入到我的菜单界面进行餐品的确认和结算,当订单确认后,进入下一界面,填写餐桌号码,填写正确的餐桌号码之后将订单提交到数据库。

2.1.2餐厅上菜流程

 

 

 

具体流程

餐品汇总界面每十分钟从数据库调用一次数据进行界面刷新,更新菜单,当某一桌的菜品完成后,点击已完成,当前用户的菜单在本界面上移除,数据库进行更新

2.2系统化框架及设计

 

具体流程

当用户打开界面时,连接服务器并向服务器发送请求,服务器连接成功后,服务器会向数据库发送请求数据的要求,并调用数据库中的数据并返回到服务器,再由服务器发送给用户,当用户确认订单完成并下单后,会再次调用服务器,服务器会将用户的数据传送给数据库并对数据库进行更改。

当餐厅打开菜单汇总页面时,连接服务器并向服务器发送请求,服务器连接成功后,服务器会连接数据,将用户的订单获取到并传送给服务器,服务器将获取到的数据发送给餐厅,餐厅根据顾客的订单准备菜品,当菜品完成时,餐厅点击已完成按钮,将再次连接服务器与数据库,对数据库进行修改。

3具体设计

具体设计分为界面设计、界面关联、前后台交互、后台以数据库、兼容问题共五个模块

3.1界面设计

3.1.1所用技术

界面设计主要是运用HTML5、CSS3样式和Bootstrap框架搭建而成

HTML5是超文本标记语言(HTML)的第五个标准,其设计目的是为了在移动设备上支持多媒体。

新的语法特征被引进以支持这一点,如:

video、audio、canvas等。

HTML5引进了许多新的功能,可以真正改变用户与文档的交互方式,包括:

·新的解析规则增强了灵活性

·新属性

·淘汰过时的或冗余的属性

·一个HTML5文档到另一个文档间的拖放功能

·离线编辑

·信息传递的增强

·详细的解析规则

·多用途互联网邮件扩展(MIME)和协议处理程序注册

在SQL数据库中存储数据的通用标准(WebSQL)

主界面构建部分代码如下:

按钮搭建

全部商品

新品上市

西贝经典

五谷杂粮

自制饮品

菜单列表

商品名称

单价

数量

小计

操作

导航栏

餐厅详情

注册

登录

CSS3

CSS3即层叠样式表。

在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改,就可以改变同一页面的不用部分,或者页数不同的网页的外观和格式。

部分代码如下:

body{font-family:

"ConsolasYahei";height:

100%;background-image:

url(img/bg1.png);background-size:

cover;background-position:

010%;}

.wrap{padding:

0;}

*{margin:

0;padding:

0;}

#nav{

width:

100%;height:

4.35rem;

background:

#fc9f4d;opacity:

.8;

display:

inline-block;

margin-bottom:

.5rem;

}

#navimg{float:

left;}

#nav.navbtn1,#nav.navbtn2{width:

3.7rem;margin-right:

.4rem;}

#nav.navbtn3{width:

5.3rem;}

#navbutton{font-size:

1.1rem;padding:

.1rem;border-radius:

.5rem;}

#more{background:

#5dac81;}

buttona{color:

#fff;text-decoration:

none;}

#login{background:

#d75455;}

/*button*/

buttona:

visited{color:

#fff;text-decoration:

none;}

buttona:

active{color:

#000;}

.logoimg1{width:

2.8rem;}

.logoimg2{width:

4.3rem;}

Bootstrap

Bootstrap,来自Twitter,是目前很受欢迎的前端框架。

Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。

部分代码如下:

餐厅详情

注册

登录

3.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.html"

}).when("/register",{

templateUrl:

"register.html"

}).when("/login",{

templateUrl:

"login.html"

}).when("/payment",{

templateUrl:

"payment.html"

}).when("/end",{

templateUrl:

"end.html"

});

});

3.3前后台交互

3.3.1所用技术

AJAX:

是一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下对网页的某个部分进行更新。

传统的网页如果需要更新内容,必须加载整个网页页面。

在本系统中,我们主要通过AJAX来进行后台与服务器进行少量的数据交换来拿到菜单等数据并返回给用户。

AJAX使用:

·定义AJAX函数

functionajax(settings){

//设置参数的初始值

varopts={

method:

settings.method||'get',

url:

settings.url||'',

dataType:

settings.dataType||'txt',

data:

settings.data||'',

callback:

settings.callback||function(){}

};

varxhr=newXMLHttpRequest();

if(opts.method=='get'){

xhr.open(opts.method,opts.url+"?

"+opts.data);

}else{

xhr.open(opts.method,opts.url);

}

xhr.onload=function(){

switch(opts.dataType){

case"json":

vardata=JSON.parse(xhr.responseText);

opts.callback(data);

break;

case"xml":

opts.callback(xhr.responseXML);

break;

default:

opts.callback(xhr.responseText);

break;

}

}

if(opts.method=='post'){

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send(opts.data);

}else{

xhr.send();

}

}

·在主界面中AJAX函数

部分代码如下:

functiontabelAjax(){

ajax({

url:

"php/cook.php?

",

dataType:

"json",

callback:

function(data){

for(vari=0;i

varoDiv=document.createElement("div");

oDiv.innerHTML="餐桌号码:

"+data[i].desknum+"

菜单列表

"+data[i].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文件,他们的作用分别是对数据库的添加、查找和删除。

部分代码如下:

php

$desknum=$_GET['desknum'];

$menu=$_GET['menu'];

echo$desknum;

echo$menu;

$mysqli=@newmysqli(":

3306","030lo3zwzl","kl4zmzhml50ljm544xk435455yihkjly4x4kl0x4","app_totoro");

$mysqli->query("setnamesutf8");

$sql="INSERTINTO`order`(`desknum`,`menu`)VALUES('$desknum','$menu')";

$sql2="SELECT*FROM`order`";

$mysqli->query($sql);

$res=$mysqli->query($sql2);

$allMessage=$res->fetch_all(MYSQLI_ASSOC);

echo$allMessage);

$mysqli->close();

?

>

·数据库

MySQL是一个关系型数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有的数据放在一个大仓库内,这样就增加了速度并提高了灵活性。

在本系统中,创建了一个数据库,其中包含了food、member和order三张表。

food主要存放了餐品的名称、图片、简介和价格,member主要存放了会员信息,order存放了用户订单。

3.5兼容问题

在本系统中,兼容问题主要存在于系统需要支持不同型号不同大小的移动设备,这就需要系统具有屏幕自适应的功能

具体解决办法如下:

定义函数,将系统规定的1rem改为自定义长度24px

(function(doc,win){

vardocEl=doc.documentElement,

resizeEvt='orientationchange'inwindow?

'orientationchange':

'resize',

recalc=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.addEventListener)return;

win.addEventListener(resizeEvt,recalc,false);

doc.addEventListener('DOMContentLoaded',recalc,false);

})(document,window);

4总结

通过本文设计和开发的基于HTML5技术的手机点餐系统与其他传统的点餐系统的比较,可以看到本文的手机点餐系统在采用了先进的HTML5技术之后,整个点餐系统具有如下的几个显著的优势:

1.通用的网络标准和跨平台特性

因为HTML5技术的设计和开发由苹果,诺基亚等许多手机生产厂商一起进行参与的,所以HTML5技术采用的是手机上通用的网络标准,这也就意味着本文设计和开发的手机点餐系统可以适用于许多型号的手机。

同时HTML5技术可进行跨平台的使用,这也确保了本文设计和开发的手机点餐系统可以非常方便地移植到各类手机平台上,甚至还可以通过封装技术,将手机点餐系统发放到APPStore中进行推广。

2.自适应网页设计和同步更新

由于采用了HTML5技术,本文设计和开发的手机点餐系统可以进行自适应网页设计,它通过自动识别不同手机的屏幕宽度,来对手机点餐系统的页面大小进行自适应调整。

同时在手机点餐系统进行系统更新的时候,HTML5技术也支持手机点餐系统的各个终端进行同步和即时的更新,从而确保手机点餐系统维持一个非常友好的用户体验。

3.先进的信息安全管理方案

由于本文设计和开发的手机点餐系统不仅涉及到用户的个人信息,还涉及到资金信息和餐饮企业的商业信息等机密信息,因此在手机点餐系统中,系统的信息安全就显得尤为重要。

本文对手机点餐系统的安全防护理念进行详细地说明,并且针对系统中的机密数据,本文对手机点餐系统的通信过程进行了严格的加密安全设置,从而有效地确保了手机点餐系统的信息安全保障水平。

5心得体会

经过开发开发本系统,让我加强了对HTML5,CSS3以及各种框架的掌握,加强了自己对前端和后台交互的理解与运用,数据库的调用与删减等,锻炼可自己独立做项目的能力,也学习到了一些PhotoShop的基础支持和UI的页面设计等。

增加了自己的项目经验,提高了能力。

参考文献

[1]柴晓路,梁宇奇.Webservices技术、架构和应用[M],北京:

电子工业出版社,2003.

[2]岳昆,王晓玲,周傲英.Web服务核心支撑技术:

研究综述[J].软件学报,2004.

[3]李劲.动态企业信息管理的Web服务[M].清华大学出版社,2002.[4]杨曼,徐东平.基于Web服务的动态企业信息管理的研究[J].计算机工程与设计,2006.

[5]引饶元,冯博琴.面向Web服务的动态企业信息管理集成框架[J].计算机集成制造系统,2004.

 

展开阅读全文
相关搜索

当前位置:首页 > 人文社科 > 法律资料

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2