基于bootstrap响应式电子菜单系统设计与实现

【】伴随移动智能终端的普及，我国移动互联网应用服务形成巨大的规模。餐饮行业作为与人类生活关的永续产业也在做着重大的改变电子菜单作为响应餐饮行基于此本根据对市场数据的大量分析以及实地基本确定了项目目标和功能需 】点餐系统，响应式，用户体DesignandImplementationofResponsive SystemBasedonBootstrap 】Withtherapiddevelopmentandpopularizationofmobileinligentterminals,Chinesemobileinternetapplicationservicesquicklytoformahugescale.Asasustainableindustrythatcateringtopeople’slivesisalsongalotofmajorchanges.Foodindustryisundergoingtheinformatizationreform,electronic isasignofthisinformatizationreform，whichisgoodatuserexperienceandresourceconservation.Currently,themobileterminalorderingsystemhasattractedalotofbusiness,buttherearestillsomeproblemsanddeficiencies.Accordingtothemarket ysisandthefieldtrips,thethesisdeterminestheprojectgoalandfunctionalrequirements.Inviewofthesitetobeusedinavarietyofcross-platformterminalequipment,theresponsiveordersystemappliedthecurrentrelativelypopularfront-endframework.Itwillachievetheorderingservice,thekitchenservice,thecustomerreviewsserviceandtheshopcartservice.Finally,cross-platformfunctionaltestingcanprovethefunctionofthesystemtomeetthemostcurrentbusinessandcustomer 】orderingsystem,responsive,user目绪 项目背 国内外研究现 主要研究内 本文的组织结 基本技术介 技术概 B/S结构与C/S结构简 SQLSERVER数据 .NET服务端框架简 IIS服务器简 AJAX简 NHIBERNATE技 本章小 系统的分 项目可行性分 项目需求分 数据模型分 本章小 系统设计与实 数据库设 系统设 系统重点模块实 本章小 系统测 测试计 管理员登陆账号测 系统功能测 测试用 系统兼容性测 对功能测试的结 本章小 总结与展 总 进一步工作展 参考文 绪伴随特色新发展中国的经济体制越来越完善经济的急速发展导致扑面而不适应和不平衡经济增长的下行压力与产能相对而言过剩的有所加剧各行各们生活关的永续产业同样着这些。于是创新中求发展的行动就此展的问题繁琐的等待以及纸质菜单的资源浪费餐厅的导致的诸多不便，持所以餐厅需要事先昂贵的硬件设备和支持另外一些电子菜单则需要顾客使用自己的移动设备一些应用，这就导致顾客排斥这种电子菜单的应用。如果将电子菜单制作成网页形式供给顾客就是传统的B/S结构顾客只需要扫描餐厅提供的前需要针对不同显示设备设计不同系统的繁缛操作轻松解决用户不愿意各种应用的、可以做到从顾客选择菜品、添加购物车菜品制作详情、支付订单等等功能的、单的及时更新仅仅需要管理员上传或者选择颜色就可以做到一键换肤的效果这是4做出什么新颖的改变用户可以通过服务手中的触屏设备进行选择菜品这种方式便无线PDA点餐：它是较早出现的无线连接设备，需要通过PDA显示命令的API，让ISM物进行波段的覆盖。IPad平板和安卓平板设备。它很好的实现了电子点提前点餐让顾客未进入餐厅即可开始选择菜品大大解决了选择症顾客的尴尬。有效的节约了点餐时间，还可以节约服务的资源为顾客提供的服务。服务沟通交流菜品的时间。准确性：避免了传统手抄式点餐的本文主要研究的是基于bootstrap的响应式点餐系统。该系统的是一个 队，顾客扫 后，不仅可以得知自己需要等待的时间，还可以自主进行预点餐bootstrapbootstrap框架。具体一些餐厅的业务流程，对点餐系统进行需求分析，然后完成基本的功能需6bootstrap的响应式点第二章：技术综述。本章对bootstrap技术和 基本技术介本点餐系统是基于Bootstrap技术开发设计的，现在介绍本系统开发过用到的相关技术和理论。其中包括技术、B/S结构、SQLsever数据库系统以及.net服务端开发框架、IISAjaxNHibernate技术。 来一些信息。然而，它实际上上是由许多几何的画面拼凑在一起组成的当然存在着特定的机制体现出来的就是大家常常看到的黑白色的一个个小方格组成的其实它的逻辑与计算机基础的逻辑结构相同， 的四个角上的方块的二维

生成技术主要通过引入ThoughtWorks.QRCode.dll文件来实现。它是一个生 B/SC/SB/SB/S结构的全称叫做浏览器/服务器结rowser/Server）。这个结构的就是常说的部分逻辑代码写台页面上。其实就是实现三层模式，其中包括客户应用端、服务器、和数据库面的结合。B/S结构的系统最大的优点就是可以通过浏览器直接，而不需要安装各种客户端应用。览器的解析，而复杂的逻辑处理则全部放在了服务器上。C/SC/SSocketC/S结构就是通过这两种方式与异地的客户端进行数据传输和Socket连接C/S结构之所以现在不如B/S结构受欢迎的B/SB/S轻客户端：用户无需安装庞大的客户端应用程序，只要有浏览器就可以进行SQLserverSQLserver数据库是公司推出的一款关系型数据库。其中SQL是结构化查询语言（StructuredQueryLanguage）的简称。它是一种简单实用却应用广泛的查询语言，目前大多数数据库都在使用这种语言。它也引申设计到一些其他开发语言中等等。SQLSQLserver20002014SQLserver2012，就是一个大的改进，它将各个功能集成在一个service里，方便用户安装使用。其中的增强的PowerS支持可以看出微软对开发服务端产品对PowerS的支持。SQLserver数据库中自带的系统数据库一直是开发所必须要了解到的东西接下来一次对其进行简单介绍：首先是Master数据库。Master顾名思义，它是这个数configMastermaster中创建用户对象，否则就必须更加频繁的对他据库时所需要的信息。因此，如果新的数据库被创建时，服务器就会通过Model数据的内容来建立新数据库的部分内容固定模板建立好后剩余部分则有用户自己填Tempdb数据库。Temp顾名思义，它是用来临时一些信息的。应用程序和数据库都需要通过它来临时数据但需要注意的是一个实例的所有用户都仅仅共个Tempdb。而且tempdb只有一个filegroup，不能再额外添加文件组。Tempdb会保存SQLSERVER的优化配置起着重要的作用。MSdb数据库。MSdb顾名思义，它主要是用来调度任务排除故障。也可以作为数据.net.NET是微软设计的独立于操作系统之上的一个平台。也就是.NETXMLWebServicesXMLWebServices提供了应用程序连接网络便可进行数据通信的功能，才使的任何操作系统都可以安装.net框架，运行.net首先，XML是一种可扩展性标记语言。它是专门用来数据使用的，具有良好的UI（表现层）、BLL（业务逻辑户提供的数据和反馈结果。BLLUI层和DAL层的交互作用。对数据进行一些业务逻辑上的处理。DAL层是直接和数据库进行交DAL层来处理的。值得注意的是各层之间的依赖：UIBLL,BLLDALIISWindows的互联网基本服务。件就可以使用。IIS的全称是互联网信息服务。它最主要的功能就是通过互联网发布发布IIS对于系统硬件的消耗。IIS发布web时，包含了多种服务器，其中有web服务器、FTP服务器、NNTPSMTP服务器。针对不同的需求可以选择不同功能的服务器进行发布。它使得AJAX（synchronousat）sript。首ttpRequestAJAX终于走上了舞台。AJAX具体工作原理则是，javascriptXMLHttpRequest对象来保存一个页面，这AJAXWEB应用程序。NHibernateNHibernate的是.NET平台的对象关系（ORM）解决方案。它提供了用于一个面象的域模型来传统的关系数据库的框架其目的是为了从关系数据持久性相关的编程任务显著部分缓解的显影剂。NHibernateGNU宽通用公共证下发布的开源。NHibernate的仅仅是是Hibernate中的一个端口。 的相关概念通过类库系统集成到 进入菜单页面方便快捷然后我们阐述了B/S和C/S结构的区别以及为什么本系统采用B/S结构和B/S结构的优缺点等等接着我们介绍了系统所用到的SQLSEVER数据库，以及制作本系统时采用的基本框架。还有IIS服务器来帮助本系统完成想要达到的目的。最后介绍了一些的技术，例如AJAX技术来异步获取数据，通过NHibernate来连接系统的分项目系统成本费用主要有这个项目系统所需要的配套的硬件以及的成本费用等在经过分析和考虑不管从哪方面来说都是非商业的系统开发和本系统相关的都可以在网上免费的和安装至于开发的费用以及数据录入的分析和整理所产生的费用也都是可以忽系统安装、运行和费，非常的复杂在一般的情况下本系统的升级和的工作也是非常的方便和升级的，计，做了流程图的分析中可以得知，本项目系统开发的风险比较的小，具有可行性。内存：2G100G其他：服务器（笔记本代替操作系统：Windows10系统数据库：SQLsever数据库开发环境：visualstudio2015浏览器：chromeB/SIEWEB服务器发送请求，WEB服务器在接收到请求后进行处理，如果用户的请求涉及到需要数据库的话，WEB服务器就确定要的是哪一个数据库，然后就会操作数据库，从数据库能够有效的保护数据平台和系统的管理权限服务器上的数据库中的数据也是相对比有触犯在知识方面对他人的劳动成果也没有任何的地方因此本系统在法律上需求的分析在的开发过起着非常重要的可以说是决策性的作用为的开发指明了方向并且也为开发者致命了开发带的策略在开发以及后期的的过都起了举足轻重的作用需要开发付出足够的重视程度需求分析的结果是不是完整和没有错误将影响整个开发的后的过程环节也最终的决定了项目时候能够满足客户的需求。所以需求的分析直接决定和奠定了工程和项目的管理的基础。准确性和及时性及时和正确无误的处理是系统必须要考虑的系统应该确保，对于用户的输入的信息能够的及时的响应。易用性和安全性本系统面对公司普通的操作由于每个员工的水平不一样，电子菜单系统分为用户和管理员两个角色。分别进行各自的操作。管理员在，对用户、菜品、订单记录等进行管理，包括增加、删除、修改等基本操作。用户登录用户的主线包括、登录、用户功能模块及页面，管理员的主线包括登录、管理员功能模块及页面，两者共同的操作是在业务层，都对业务层进行，业务层再调用DAO层对数据库进行操作。两者，在系统中都进行各自的操作，互不。本系统的架构设计图3-2-2

3-1 3-2餐 管理员可以通过账号登 管理界面， 系统进行相

3-3E-R图将现实4111对多还有多对多的关系等等。3-4E-R顾客ID、用户名、、联系邮箱等等。管理员实体主要用来对用户订单进行处理，对3-53-6

3-73-8本章的主要内容介绍了系统的整个分析过程。首先从项目制作的可行性角度进行分最后进行项目的功能性需求分析。详细的对本项目的需求进行分析。系统设计与实重要的可以把大批量的数据按照既定的数据格式进行组织和管理起来很方便对用户的数据进行起来进行查找数据和这些大批量的数据的能够让系统的管理非E-R图模型的结构图表，基本确定数据库的结构。图下如是数据库表的设计图。根据E-RTable_UserID字段、UserNamePassWord字段以及Contact字段等字段4-1Table_User1423用户4的登陆账号和。4-2Table_Admin14234用户5Table_MealOrder表主要记录每一笔订单的详细内容。其中会包括有订单的创建者和4-3Table_MealOrder1423456菜品的原材料和菜品的展示等等。让顾客可以轻松的浏览各种菜品。4-4Table_Dish142434567Table_Cusine表是存放餐厅的菜系信息。它是菜品信息的一个分类列表。其中同样4-5Table_Cusine1424345Table_Cart表是存放顾客的购物车信息。它是订单列表的一个雏形列表。其中同样4-5Table_Cart14243455本系统采用所提供的法连接数据库NHibernate技术面向.netjavaHibernate关系型持久化工具。NHibernate不仅仅是管理.net类到数据库表的还是供给数据的寻查和获得数据的方法这样就极力的减少了手工SQLADO.NET来处理数据的时间。4-1NHibernateXML在将来的更新过要求系统能够不用费多大耗费的情况下就能够完成系统的升级和系统的所以在设计过尽可能的需要对系统的各个模块都有很好的划够针对不同的环境进行灵活的搭配，也能够使先前的系统进行更好的升级和。 顾客登录模块顾客在此即进行登录操作必须在此模块登录且用户名和正确无入此模块，在此模块进行管理员的功能操作，包括菜品管理，管理等功能操作。系选择、菜品选择，包括浏览菜品和菜品制作原料等等。4-2管理员功能模块管理员在登录成功后管理员功能模块在此模块管理可以进行管理、菜品管理、订单管理、评论管理、系统管理等等功能操作。管理功能模块：管理员在此功能模块对信息进行管理操作。4-3

生成代顾客通过在登陆界面进行输入用户名和进入进行菜品预览如下顾客登陆界面图：这是终端设备登录后的界面效果图和电脑设备上面登录后的界面效果图对比bootstrap框架结构实现的随着浏览设备的不同而做出的响应式的效

价顾客也可以在此呼叫餐厅服务这能大大的节省了顾客和服务之间的交聊天室功能的实现主要依赖于ASP.NETSignalR类库，在系统中该类库后，进管理员通过登录进入管理模块即可开始一天的工作。首先是管理模块的首

图4-12首管理员通过管理系统可以对餐厅的服务进行管理对服务的信息进行浏

4-13

本系统运用的是NHibernateHelper类对数据库的进行封装利用它即可避免重复SQL

图4-15数据操E-R模型图以及数据库的数据表。然后介绍了系统的具体模块设计，把整个系统测，，，在每个系统程序的构建过的测试的上线准备的上线都是一项非常重要和艰巨的工作不仅仅是检查是否是按照需求进行设计的还要检查的的相比，WEB服务有很多先进的地方，这包括和测试相关的几个方面：，，，能够对非常多的用户的进试，即同时响应很多的用户的，并且对用信息的发布有着举足轻重的作用。很多以前的看中的是运算的能力，但是在总的来说，WEBB/SWEB服务和硬件之间的依赖关系不是那么的紧针对本电子菜单系统主要是进行了登录界面的测试和系统的安全性进试功能进试，端的兼容性进试等。当管理员输入账号和后便可跳转到管理界面管理员可对管理页面进行登出登入功能如果账号和二者有任何一个不正确均不能达到进入管理页面主要检测用户通 扫描后，是否能登陆到本系统5-1开发亮亮黑盒测试设计日期测试人员亮1Pc电脑一台，可以连接动一部。IIS服务无无无2打开IIS服务器和VS2015，将准备的项目IIS服务器上。通过电脑浏览器进行本地。移动设备需要连接内网进行电脑和手机都可以正确的访问到电脑和手机都可以准确的访问无3通过打开首页，点击“进入”按通过电脑打开首页，点击“进入”按的页面显示正以跳转到的页面显示正常，按钮功能正常，可以跳转到预无4回到首页点击“登录”按钮leo页面的显入法可以正常输入汉字和字确的账号和页面的显示正常；输入法可以正常输入汉字和字母；输入正确的账号和密码后可以无表5-1测试用 5涉及到的压面显示可以添加购物车列表与实际涉及到的压面显示正常，菜品可以添加到购物车；购物车列表与实际一无6可以准确的进入聊可以输入室发言状态显示正可以准确的进入聊天室页面；可以输入汉字；聊天室发言状态显示正无7安全性测试检测网站是否可以正常使用安全性测试检测网站是否可以正常使用无85.51122各种显示设备的页面展示均各种显示设备的页面展示均无器、基于FireFox内核的火狐浏览器中，进行兼容性检测。将本系统分别在平板电脑等不同尺寸显示屏上试用检测的响应式功能对功能测试的结WEBB/S模式，采用的是人性化的设计方案，简单的操作，容易上手的设计，帮助服务能够非常轻松的按照系统的操作完成业务不仅仅是节省了时间的成本也提高了本章的主要内容就是对本系统进行各个方面的测试测试时开发环节中的重要的总结与展本是相对于目前一些餐饮行业的实际状况对其进行深度的剖析发现就目前而言餐饮行业的点餐方式存在的诸多问题其中包括餐饮实体店的较为传统的点HTML5Bootstrap的响应式点备都可以轻松我们的系统而管理员也可以在随时随地轻松的完成工作本系统排队功能：现在一些口碑较好的餐饮店在饮食期间一般都需要排队等这种方式解决餐厅聊天室功能：本系统为了方便进入餐厅的顾客和餐厅服务之间的沟通交流，特意设置了一个聊天呼叫功能，顾客可以通过这个功能呼叫服务寻求帮助。的进入餐饮行业，的了解餐饮各个流程。对于支付流程，本系统暂时没有涉及 。过，思维不甚缜密和语言相对贫乏的我，由衷的感谢导师—尊敬的老师。是她在忙碌的教学时间中还抽身出来帮助我、修改。正因为有指引和鼓励，我才能如此顺利的完成这次毕业设计老师本着严谨