校园在线订餐网站的设计和实现-学位论文

南京邮电大学通达学院题目：校园在线订餐网站的设计和实现专业：软件工程学生姓名：班级学号：12003227指导教师：指导单位：计算机学院、软件学院__日期：2015年12月1日至2016年6月12日本人郑重声明：所提交的毕业设计（论文），是本人在导师指导下，独立进行研究工作所取得的成果。除文中已注明引用的内容外，本毕业设计（论文）不包含任何其他个人或集体已经发表或撰写过的作品成果。对本研究做出过重要贡献的个人和集体，均已在文中以明确方式标明并表示了谢意。论文作者签名：日期：年月日第一章绪论1.1课题研究背景和意义在这个信息科技快速发展的时代，互联网已经基本融入我们的生活当中。信息科技的更新日新月异。B2C模式过渡到O2O模式改变的不仅仅是行业内营销的模式，还影响了大多数人的消费使用习惯。俗话说得好：“民以食为天”，餐饮行业在我国一直占有着重要的地位。李克强总理曾经提出的“互联网+”的发展概念就为O2O外卖行业的高速发展带来了新的春天。根据CNNIC发布的第36次中国互联网络发展状况统计报告显示，截止至2015年6月，中国网民的数量高达6.68亿，互联网的普及率接近百分之五十，和2014年底相比上升了0.9%。7月30日，“易观智库”发布的《中国互联网餐饮外卖市场2015上半年专题研究报告》显示，2015年上半年中国的互联网餐饮外卖市场的订单规模呈现了一种高速增长的趋势，成交金额超过了120亿元。相对来说，餐饮外卖平台的用户多是80、90后年轻人，其中学生更是餐饮外卖的一个大的用户群体。因此，校园在线订餐系统的开发成为了改变大学生校园快捷生活，为学生省下更多的时间学习的必要研究课题。校园在线订餐系统应该充分利用互联网带来的优势，使传统餐饮流程以一个简洁、直观的方式展现到网页上，并且利用可视化界面使餐品的管理和购买流程变得方便、快捷，不仅要大大缩短传统餐饮的复杂过程，无需排队，购买便利，而且卖家管理起来也变得更方便，使学生的用餐效率能有所提高，也减轻了餐饮管理人员的负担。这样一来，面对传统的流程以及杂乱的订单管理和人员安排，在线订餐系统的优势也显而易见，方便了学生也方便餐厅。同时从接受能力强的大学方面入手，从而逐渐推广在线订餐到大众，这也是我们加速实现信息化、现代化和国际化的重要步骤之一。1.2课题研究现状在我国的一个大环境下，在线订餐的模式最早出现在20世纪90年代的末期。早在1998年的时候，广州等以吃闻名的大城市已经出现了网上订餐业务。2000年7月，北京丽华快餐公司为追求新模式的经济发张方式，选择了探索餐饮业在网络上经营的道路，然后就推出了网上订餐的模式,成为探索网上订餐的行业的探路者。国内的外卖市场发展到了现在，基本上形成了这样的一个市场格局：“饿了么”和“美团”遥遥领先，占领了第一阵营，位列第二梯队的“淘点点”和“百度外卖”也在开拓创新、不断赶超，剩下的外卖平台百花齐放，各有优势。以第一梯队的和第二梯队的“饿了么”等公司现状来分析，目前这些平台各有优劣：饿了么：从国内卓越的互联网数据统计分析公司“易观国际”的分析结果来看，占据外卖市场第一位置的“饿了么”以30.58%的占比摇摇领先，它的先发优势是其它外卖平台不具备的，这个优势不单是进入到网上外卖行业的时间节点，还有用户心中先入为主的一个形象，所以“饿了么”成为了外卖行业的一个代名词。“饿了么”在网络外卖行业中惯性了网络订餐的模式，让用户和商家都养成了一个线上下单、推销的习惯。美团：能力出众、身经百战的“美团”连续创业者王兴带领他的团队成员做出来的成果是我们有目共睹，出色的“地推”能力带来的不仅是品牌效应，同时在网络团购上面也坐实了国内的团购平台老大的地位，同时也给了他外卖上的业务带来了大量的客户资源和品牌口碑，但是它有一个比较其他外卖平台的更长的业务种类，这也是一个不可忽视的问题目前“美团”已经包含了了外卖、团购、电影、旅游、酒店等多个模块，在不同的业务中都有不同的竞争对手，同时还要面对新对手的加入，各行业虎视眈眈的情况下做到这样真是一个大成功。淘点点：第二梯队的淘点点虽然名声不是很响亮，但是他的靠山你肯定如雷贯耳，作为“阿里系”的一员从来不用担心资金和客户量的不足，更不用担心大服务平台的建设。即便如此，如今“淘点点”拓展的城市也只有20多个，和“饿了么”和“美团”的200多个城市的规模相比就屈指可数了，因为他们主要打造的是服务性的平台，而且这也是他们擅长的地方，从自己的优势入手做成移动餐饮的生活服务性平台，最终造就一个餐饮界的淘宝也不是梦想。百度外卖：国际大品牌百度的涉及业务之广是众所周知的，根据“易观国际”数据的分析来看，百度外卖以非常迅速的扩张趋势来弥补它进入角逐的时间晚的劣势，到现在已经覆盖了八十多个城市。根据百度的一贯作风，它总是可以另辟蹊径，在外卖平台上建立起了属于自己的物流团队：“百度骑士”来保证送餐的速度，刚刚好满足了用户点外卖的初衷：方便。虽然国内外卖O2O百家争鸣外卖，但是也是从国外的多个平台借鉴而来的。外卖O2O模式最早的发源地是欧美，并且由于时间的优势现在运作的已经非常的成熟。欧美的外卖平台相比较中式的外卖平台差异很大，目前在欧美地区比如Yelp、JustEat、GrubHub等多家外卖公司都已经成功的上市：YelpPlatform：YelpPlatform是美国的公司也是大众点评的借鉴对象，也就是说它是一个可以点评、社交和移动一个平台，它的用户主要在平台上对商家进行点评和打分。Yelp在2013年的时候开始用推广Platform平台的方式来尝试着经营订餐的业务。主要的盈利方式是商业广告等，目前不仅成功上市，而且市值超过30亿美金。JustEat：21世纪初就在丹麦创办了，仅仅五年就扩展到了英国，从而奠定了它在英国的在线订餐网的领先地位，它主要靠收取加盟店的上架费用和每个订单的分成盈利，并且它还拥有一个线下流程向没有外卖业务的餐厅提供服务，而且以收购的方式快速的扩张，仅仅2013年一年，他的平台处理的订单数就达到了4000万份。两年前JustEat就在伦敦证券交易所上市了，目前估值14.7亿英镑。GrubHub：GrubHub是美国首屈一指的外卖平台。它的用户主要通过电脑或手机登录该平台查找所选择地区附近的加盟店，然后选择所选商家提供的商品后进行下单。加盟店在第一时间就会收到提醒，然后配置餐品自行配送到目的地。它的平台是供用户免费使用的，主要来靠它加盟商的收入分成盈利。在2013年完成了和Seamless的正式合并以后成功上市，目前市值达到37亿美金。国内外的订餐业务的区别也是很明显的：国外的用户正常的餐品都是汉堡、披萨之类的一些快餐食品，制作和配送起来都比较方便。国内送餐的服务标准和操作难度就上升了一个档次了，中国餐饮类食品种类丰富多样，每个地域都有很大的差别。低门槛的表象需要用高标准的运营、执行能力来支撑，这就要求在外卖领域求生存的团队不仅要有高效的下运营团队和出色的线上服务能力，还要拥有充足的资本来扩张和支撑。所以在客观环境下，中式在线订餐业务必须高举高打，快速的进行融资和扩张，迅速建立起市场第一的地位。相比英美用户成熟的操作习惯，国内市场目前还处在参差不齐的一个发展阶段，尤其在二三线城市中，比如说“饿了么”，迅速的在多轮融资的支持下扩张到260多个城市，加盟的商家多达二十万，高峰期的日订单量达到200多万，因此有相当丰富的资源来建立起自己业内老大的领导地位。虽然“美团网”在14年1月份才刚刚正式退出紫的外卖服务，但是在品牌效应下，也就是其他业务积累的资源的支持下也进行了非常的迅速扩张，目前已经覆盖了250多个城市。这样的扩张速度在国外是无法想象的。1.3论文的组织结构本论文一共有五个章节，图1-1展示了下面几章的内容概要：第一章的绪论主要介绍了本次校园在线点餐系统的课题的要求，目的和意义及论文的组织结构。第二章主要描述了校园在线订餐系统的相关技术原理。第三章主要介绍了本系统的开发目的、应用情景、相关需求以及总体设计。第四章主要介绍校园在线订餐系统的设计与实现，包括界面的详细设计和各功能模块的实现情况。第五章是对软件的实际运行情况的测试和展现。结束语主要介绍开发设计完成之后，对开发设计的总结和未来展望，遇到问题怎样解决，以及后续工作。第一章绪论第一章绪论第二章技术介绍第二章技术介绍第四章详细设计与系统实现第三章需求分析与总体设计第四章详细设计与系统实现第三章需求分析与总体设计第五章系统演示与测试第五章系统演示与测试结束语结束语图1-1论文组织结构第二章技术介绍2.1JavaWeb介绍SunMicrosystems公司在20世纪九十年代中期正式推出了Java编程的技术，并且仅仅用了二十多年的时间就由一门小小的编程语言发展到在全球范围内通用的大开发平台。因为在计算机行业中的主要公司接受了Java技术的使用，从而导致越来越多的国际技术标准化的组织也开始进行规范使用。Java看中机会并迅速的推广了自己的三大平台：\o"undefined"JavaSE、\o"undefined"JavaEE、Java

ME，从而给这个世界带来了巨大的革新，由此也给Java开发的团队带来了巨大的商机，让他们有充足的资金再进一步。为了解决关于web互联网领域的相关技术，Java推出了Javaweb来实现相关功能，Javaweb有广泛使用的web服务器和使用并不是很多的web客户端两个部分。客户端上面的应用有javaapplet等，服务器端的应用有Servlet、JSP和许多第三方的框架等等。Web领域的发展因为有Java技术加入散发出磅礴的生机，强大的动力也会使web更进一步。2.1.1主要框架因为Javaweb发展迅速而诞生了丰富的后台框架大大简化了开发人员的工作，但是它们的底层实现方式还是差不多的：浏览器发送一个请求后，由对应的Servlet或者Filter来进行拦截，然后用MVC的设计模式来进行整体架构的一个设计，相关配置的联系和耦合则用Annotation、约定或XML配置文件来关联起来，浏览器发送的响应的流程和面向抽象的请求则由基础的Java面向对象的这个特点来实现，视图解析就由JSP、Velocity和FreeMarker等来支持。如今已经淡出开发人员视线的Struts框架是以J2EE的MVC模式为底层，以Servlet和JSP的技术实现的老牌强大框架。Struts的出现很快的由于它的简单快捷受到相当大的反响，不仅可以充分的满足开发人员最繁琐的应用开发的需求，而且使新开发人员可以快速上手。编程本就是一个赶时间的工作，而且学习的内容繁多啰嗦，而Struts集成了自定义标签、信息资源、JSP、Servlet等一些常用功能，由此让程序员不用重复的去搭建完整的MVC模式，新的开发人员也可以先使用然后慢慢学习原理，不仅节省了大部分时间，还降低了开发门槛，这就是Struts被广泛应用的原因。最近被众多公司广泛使用Struts2也是apache项目下的一个web框架。虽然它看起来好像是Struts的2.0版本，但实际上是一个全新的完整框架。Struts2是Struts社区和WebWork合作研发出来的第二代基于MVC开发的具有强大的扩展性的web应用框架。让人们诧异的是Struts2的功能结构更接近之前WebWork而不是名称相近的Struts，但是研发人员声明它会和Struts相似，同时也会比后者更加的快捷方便。JavaServerPages简称JSP，中文叫java服务器页面，从字面上理解就是把页面当作JAVA服务器来使用。就像上面说的，它的底层实现也是同样的原理，即尽量的去使Servlet的实现简单快捷。JSP的实现方式是在常用的HTML文件如.html、.htm中使用Java程序和自定义的标签文件，这样就形成了一个后缀名为.jsp的文件。因为这样编写的Web程序具有很好的跨平台的特性，不只是window操作系统，在其它的诸如Linux之类的系统下也可以运行，由此使得以SunMicrosystems公司领头的诸多公司倡导把JSP打造成一种动态的网页技术标准。由SpringMVC实现的MVC模型是最清晰的，所以它渐渐被众JavaWeb研发公司所接受。它使用Controller连接请求和业务逻辑，而不是其它框架使用的Action。控制器会根据接收到的请求参数执行相关操作然后返回对应的叫做ModelAndView的界面，即一个带有模型的视图，要注意的是模型是Map类型的而不是Object。诸如Struts之类的框架的Action则直接返回视图的名称，相应的模型参数就要用另外的方式进行传递，如HttpServletRequest.setAttribute()、Action本身的属性数据或者是存为Context参数。因为是现在主流框架，所以本次设计就是使用的此框架，下面会进行详细的讲解。2.2系统框架介绍本系统主要使用的Web框架是SpringMVC，与数据库的交互使用的是iBATIS，前端使用的是基于JavaScript的jQuery，UI方面前台使用的是Bootstrap，后台使用的是EasyUI，下面我们逐一介绍这5种主要的框架。2.2.1SpringMVCSpringMVC框架属于SpringFrameWork的后续产品，是一个基于Java实现Model-View-Controller模式的轻量级框架，它的主要功能是用MVC模式的思想来解除web层的耦合性，基于request-response模型帮助我们用来简化日常的web系统的一个开发。SpringMVC框架是一种MVC框架。它的主要使用核心控制器DispatcherServlet来操作流程的进行；应用控制器其实拆为处理器映射器(HandlerMapping)和视图解析器(ViewResolver)，ViewResolver用来管理视图，HandlerMapping用来管理处理器；页面的跳转、请求的发送则到对应的Controller里面。它提供了非常灵活的、数据验证和数据绑定机制，同时支持文件的上传、本地化的解析等，主要采用约定注释的方式而不是繁琐的配置进行编程，比查看复杂的配置文件更容易熟悉和上手。

SpringMVC框架也是一个基于驱动的MVC框架，完全遵循MVC模式的思想把Model、View和Controller进行了很好的分离。SpringMVC主要通过核心控制器DispatcherServlet来调度工作和处理流程，DispatcherSerlvet接收到请求后根据配置映射规则分发给对应的Controller，然后通过开发人员自己配置的映射根据映射处理器Handlermappings来处理请求并返回对应的视图界面。SpringMVC的一个完整的流程处理过程如图2-1所示。图2-1SpringMVC流程图图2-1只是SpringMVC比较粗浅的执行过程。由图2-1可知，SpringMVC大致的执行流程如下：1、首先用户在浏览器发送请求并且由前端控制器DispatcherServlet接收，然后前端控制器根据请求的内容和条件选择经过配置的对应控制器来处理并把收到的请求转发给它，即以前的业务逻辑控制器部分。2、页面控制器接收到转发的请求之后会对功能进行处理和运行相关逻辑，首先需把请求的参数进行收集、绑定到一个在SpringMVC中的命令对象里面，同时对该对象进行验证，然后将这个对象传递到Service层（业务对象）进行处理；业务对象处理之后控制器将返回模型数据和逻辑视图名，即之前提到的ModelAndView；3、DispatcherServlets接收数据进行控制，根据返回的逻辑视图名选择对应的视图并传入模型数据配合进行视图的渲染、加载资源从而完成界面的展示。4、DispatcherServlets继续执行控制的权利把响应的内容返回到客户端浏览器，以此结束一个流程。SpringMVC撇开如Struts2等框架繁琐的的配置，以更为直白快捷的注解的方式进行相关配置映射关系：@Controller：用来表明所在类是一个处理器；@CookieValue：把cookie类型的数据绑定到具体Controller中对应方法方法的参数上；@ModelAttribute：用于绑定请求的参数到对应的命令对象中；@SessionAttributes：写在处理器类的上方，主要用来标明这个存储的属性是session级别的，一般列出了对应的名称的模型属性，比如说如@ModelAttribute等，就会被透明的保存到Session当中；@Autowired：用来标注成员变量、方法和构造函数，来完成自动装配的工作；@Qualifier("serviceImpl")@Autowired是根据类型进行自动装配的，如果需要按名称进行装配，则需要配合@Qualifier使用；在实现Service接口的ServiceImpl类开始加上@Service("serviceImpl")即可完成装配@InitBinder：解析请求的参数并通过datebind机制与handlermethod中的参数做绑定；@RequestMapping：用来映射请求到控制器或方法的规则；@RequestParam：接收请求参数并绑定到自定义参数上面，requried指参数是否必须要带，true为默认，必须带，false为可以不带；@RequestHeader：把接收的请求头中的数据绑定到Controller中对应方法方法的参数上；@RequestBody：绑定请求的body体的，用消息转换器（HttpMessageConverter）完成请求报文到对象的转换；@ResponseBody：标注该处理方法的返回值是响应体，不加的话返回值一般解析成跳转路径，返回的是数据时要加上，也是用消息转换器进行对象到响应报文的转换；@ResponseStatus：返回一个指定的httpresponse状态码以及原因。；@ExceptionHandler：注解式声明异常处理器；SpringMVC的优势如下：1、对所有功能有一个直观的角色的划分：DispatcherServlet（前/核心控制器）、HandlerAdapter（处理器适配器）、ViewResolver（视图解析器）、HandlerMapping（处理器映射）、Validator（验证器）、Controller（控制器/处理器）、FormObject（表单对象）、Command（命令对象）、。2、可以很轻松的根据自己需要进行扩展，虽然基本上没有这个必要，而且有一个明确的分工，用起来也很有条理；3、因为使用的命令对象根本就是POJO，所以没必要对框架特定的相关API进行集成，可以把命令对象直接当做业务对象来使用；4、和Spring的其他框架无缝集成，是其它Web框架所不具备的；5、具有强大的适配性，因为有HandlerAdapter支持，从而可以把任意的类当做处理器进行逻辑处理；6、具有可定制性，可以对HandlerMapping、ViewResolver等相关的功能根据自己需求进行简单的定制；7、提供如绑定机制、数据验证、格式化等强大的功能；8、因为集成了Spring，所以可以使用其提供的Mock对象进行Web层的一个单元测试，并且操作起来非常的简单；9、因为支持本地化和主题的解析，所以搭建的强木可以很容易的切换主体和进行国际化操作。10、提供了丰富的可以共JSP使用的标签库，使用JSP来编写的话会更加的容易。还有比如基于注解的零配置支持、约定大于配置的契约式编程支持、简单的文件上传、RESTful风格的支持等等，总之，SpringMVC的强大是有目共睹的。2.2.2iBATISiBATIS这个名称是根据“internet”和“abates”组合而来，是Apache公司在2002年启动的一个开源项目，开发目的主要是用来支持.NET和Java的一个持久化的框架，本身也是以SQL映射为基础。iBATIS的是保持数据到持久层的一个框架，它包含了DAO层和SQL映射两个部分，而且还提供了一个用iBATIS开发出来的一个例子JPetStore来使新手更快的理解掌握。和其它的数据库连接框架诸如Hibernate等全套封装起来的ORM比起来，iBATIS则是以一种半封装的ORM的方式来实现的，它最大的特点就是小巧、上手很快。当前iBATIS只支持Ruby、Java和.NET三种语言编写的程序的集成使用。“半自动化”的概念的理解可能有点困难。相对当前行业内主流的ORM(对象关系映射)来说，无论是Apache

OJB还是Hibernate，都是对数据库进行封装，同时提供了从POJO到具体数据库表的一个映射机制。开发人员通常只需要把POJO到哪张数据库表的映射关系定义好，就可以使用项目所集成的数据库框架封装好的方法来对映射的实体类进行操作，既可以完成数据库的增删改查，这样一来，开发人员有时候都不需要对SQL语句有着熟练的应用，因为在调用封装的相关方法后，该框架就会自动生成对应的SQL语句对数据库进行操作。在现在的快节奏社会，这样的快捷开发方式非常的便捷，而且再一次降低开发人员的门槛。但是在某些特定的开发环境下，这种一站式的处理方法却并不适合。iBATIS以一种“半自动化”的姿态高调出现很好的弥补了这个缺陷。这个“半自动化”的含义是对于其它的数据库框架比如说hibernate之类的封装全部操作的相当于“全自动化”的ORM实现的机制来说的，“全自动化”的ORM实现主要靠建立数据库表和POJO的一个映射关系，并且可以根据调用的方法自动生成SQL语句完成对数据库操作，而不是像iBATIS那样的建立SQL语句和POJO的映射，把执行结果封装到对应bean中。从根本上讲，iBATIS主要是用XML格式的文件来配置相关映射和集成框架，然后在配置文件中直接写SQL语句然后对执行结果进行处理，即将定义的对象映射到具体SQL语句执行的结果的方式，因此它使用起来更加的灵活，并且针对不同数据库的专有函数来说，不需要去进行过多处理。对于系统的服务器开发人员来说，使用半封装的iBATIS提供的对象关系映射机制时面对的是一个纯粹的Java对象，这一点和其它框架基本相同。至于具体的对数据库操作的方式，Hibernate是封装好的可自动生成操作语句的方法，iBATIS是自己配置结果映射然后写自己所需的SQL语句。相对于Hibernate等对象关系映射的机制来说，iBATIS就比较繁琐，不仅要对数据库语句有很好的理解，而且代码量也比较多，相关数据库迁移起来也不方便；但是也是因为这样，它才可以更加的灵活，更加的自由化。在这种全封装机制的框架遍地的情况下，iBATIS是必不可少的。2.2.3JQuery在萨姆.斯蒂芬森开发出更有利于开发人员的Javascript库prototype之后，越来越多的优秀JS库出现在开发人员的视线当中，比如说比较出色的轻量级的JS库JQuery。它有非常强大的兼容性，兼容范围不仅包括了CSS3，还有各式各样的令开发人员非常头痛的冷门或传统的浏览器，比如说IE

6.0、

Opera

9.0等，不过jQuery官方发布消息称后面的2.0+版本就不再提供对IE6/7/8浏览器的支持。jQuery还可以使用户非常快捷的进行html页面的设计和实现，比如说相关动画效果、标签选择，常用函数等等，而且还对和后台进行动态交互的ajax进行了封装，减少了开发人员的代码量，理解起来也很快。jQuery能有现在的地位还有一个最主要的原因是它的API很全面，细节方面写的也很详细，看似没必要，其实对于新开发来说，这是非常重要的，而且对比文档去理解底层实现原理会更加容易，并且还有很丰富的插件可以使用。jQuery的还让开发人员不需要在html代码中插入JS来实现相关功能和效果，只需要找到标签的id或class就可以分离JS和html进行编程实现。jQuery使用的是命名源于麻省理工学院的MIT许可协议，是一个免费的开源框架，它的核心理念是writeless，domore，并且在我看来已经实现的很好了。2006年一月份的时候，一个叫做JohnResig的美国人在纽约举行的国际网络研讨会上进行了发布，因此吸引了世界各地的很多JS高手前去加入，然后由DaveMethvin带队进行进一步的完善和实现，直到现在流行在全国的开发人员中，并且世界上访问最多的网页中有百分之五十五的用户使用的是jQuery。jQuery这个词是由是JavaScript和Query组合而来的，词面意思是对JavaScript的查询，也就是辅助JavaScript开发的库。jQuery部分常用实例如下：选择器：$("input")选取页面上所有<input>元素。$("input.name")选取页面上包含class为"name"的全部<input>元素。$("#user")选取页面上id为"user"的元素。$("[src]")选取页面上带有src属性的全部元素。$("[src='javascript:void(0)']")选取页面上带有src值等于"'javascript:void(0)"的全部元素。$("[src!=''javascript:void(0)']")选取页面上带有src值不等于"'javascript:void(0)"的全部元素。$("[src^='/www/']")选取页面上src值以/www/"开头的全部元素。$("[src$='end']")选取页面上src值以"'end'"结尾的全部元素。事件处理：直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。$("#user").click(function(){//这里填写点击后的逻辑});用on来绑定事件，off来解绑事件。从版本1.7.2之后才支持，之前使用的是bind等方法。$("#button").on('click',function(){//这里填写点击后的逻辑});AJAX：jQuery$.get()方法：$.get(请求地址,返回函数);jQuery$.post()方法：$.post(请求地址,请求参数,回调函数);jQuery$.ajax()方法(即我通常使用的方法)： $,ajax({ url:”xxx”,请求的地址 type:”post”,请求的方式 data:{ xx:xx, xxx:xxx},请求的参数async:false,是否异步请求cache:false,是否缓存dataType:”json”,返回值类型success:function(){ },请求成功执行方法error:function(){ }请求失败执行方法});更多的方法和具体如何的使用可以去查询jQuery的API。2.2.4BootstrapBootstrap是一个基于CSS、JS和html的前端UI框架，最开始出现在Twitter上面，因其简洁美观的界面而非常受欢迎。Bootstrap是一款如同其它框架设计的有相同原则的框架，主要目的就是自由简单，让开发人员的开发更加的高效便捷。它的设计师是来自Twitter的JacobThornton和MarkOtto，他们二人用动态的CSS语言Less合作设计出了这个优秀的HTML/CSS框架。因环境所致，大部分小的web开发公司并不会有美工这个的职业，让形象在大多数人心中并不友好的程序员来进行页面的规划还是不现实的，Bootstrap以其优美大方的界面而受众多程序员的欢迎，并且在开源代码库GitHub上一直很热门，包括在美国航空航天局的微软全国广播公司的BreakingNews页面用的都是这个框架。在我国的一些移动端的开发人员所熟悉的WeX5等开源UI框架也是对Bootstrap的源码进行优化后设计出来的。Bootstrap中有着非常充足的Web组件，一般的常用组件都有，不常用的也可以基于部分的组件组合而成，具体包括的组件有：分页、进度条、缩略图、下拉菜单、按钮下拉菜单、按钮组、导航、导航条、路径导航等。Bootstrap自还有13个基于jQuery的动态加载的插件，这些插件使Bootstrap中的相关组件更加的灵活。其中就有：模式对话框、下拉菜单、滚动监听、按钮等。Bootstrap同时还可以根据自己的需求对展示主体和效果进行一个定制，只要输入自己满意的样式就可下载响应的js和css包。因为这些功能，用它搭建一个完整美观的网站就非常的容易了。2.2.5EasyUIEasyUI包含了丰富的基于jQuery的UI插件，它的目标就是使web开发人员可以更快捷、更轻松、更方便的开发出一个界面友好，功能强大的网站。EasyUI使用户摒弃了复杂的JS程序，并且不需要过多的去了解CSS，只需要对html的标签有着熟悉的使用就可以了。EasyUI提供的UI插件快捷方便，比如：Layout、Menu与Button、Form、Window、DataGrid和Tree等等，并且可以对多个功能组合使用和扩展，比如说树形表格、可编辑的表格和报表等等。相对于extjs来说，EasyUI就是一个轻量级的框架，虽然功能没有前者丰富，但是页面上更加美观，并且可以在官网上进行主题的定制，同时还有多个主题供用户选择，这一点还是非常的不错的。EasyUI相比较而言有如下的几个特点：1、它是以jQuery为基础的，并且拥有丰富的UI组件和插件。2、提供和服务器有交互插件的数据加工和渲染。3、EasyUI有直接写成JS和在标签上加属性两种方式来对组件进行加工渲染。4、在对应标签添加data-options这个属性就可以完美的支持HTML5。5、对一个页面进行开发时使用EasyUI会更加快速。6、使用起来非常简便，而且功能相当丰富。7、可以按照自己的需求对相关组件进行组合、扩展，还有多种主题可供选择。8、现在仍在继续更新，所以可以继续的改进和弥补自己的不足之处。2.3HTML语言HTML的全称叫做HyperTextMarkupLanguage，中文叫超文本标记语言，是标准通用标记语言下的一个应用。因为html页面可以包含图片、音乐、视频、链接等非文本模块，所以叫做“超文本”。一个html页面包括head和body两个部分，head部分就是这个页面的相关信息，比如说编码、标题、设计者之类的；body部分就是这个页面上展现的具体内容。2.3.1由来Web上把一个包含多种模块如文字、图片、音乐等多种媒体的文档叫做一个页面。当访问一个网页的时候，输入网址首先展现的页面叫做首页，或者叫主页，往往一个首页里面会有很多点击会跳转到其他页面或下载相关文件的超链接，超链接就是点击了之后可以跳转到对应的页面或者下载对应的内容得一个URL，这是html被大范围使用的一个非常重要的原因。通常的网站是指用于展示特定内容的相关整体网页的集合。HTML的设计主要是用来制作网页的显示内容和查找网页的相关信息。网页设计代码的本质就是HTML语言，搭配其它的诸如CSS、JavaScript和服务器程序等Web技术就可以设计元素多样化、功能齐全的网页。所以说Web的编程设计是以HTML为基础进行实现和拓展的。超文本标记语言因为在文本中包扩了多个具有超链接功能的点击模块，所以被叫做超文本标记语言。2.3.2定义HTML主要通过定义的元素和对应属性来标记一个页面中的不同模块和功能的展示效果，它实际上是一种规范，一种现在的页面设计都遵守的一个标准。html文件就是一个文本文件，然后在对应的部分加入元素和定义相关的属性，就相当于把一个人的肖像描述给一个画家来听，然后画家根据描述的内容进行绘画，完成一个人物的展现，这里面的画家角色主要由浏览器担任。浏览器从头到尾的对网页文件进行分析，然后根据HTML的标准对相关的元素和属性进行渲染和展示，如果在编写的过程中出错，浏览器并不会停止解析，指导一个文本文件全部渲染完毕，从而展示一个页面，开发人员只能根据最后的显示效果和自己设定的模样进行分析调整错误代码，从而达到一个页面的设计完成。这边需要指出一点就是不同的画师会有不同的绘画风格，即不同浏览器对不同元素或者属性的解析也是有不同效果的，所以这一点还是要开发人员进行注意和调整的。2.3.3语言特点虽然HTML的编写十分简单，但是它有着强大的功能，同时在一个html文本文件中可以包含多种不同数据格式的文件，这也是现在万维网使用范围如此广泛的一个原因，它主要由如下的几个特点：简易性：HTML的升级主要是在老的版本上进行一个内容的扩展，而且不改变已有元素和属性，因此更为灵活，版本更新也不会有负效果。可扩展性：由于HTML的广泛应用，所以必不可少的有功能扩展和元素增加等使用需求，因为其使用的是子类元素的设计方式，所以保证了对系统进行扩展的性能。平台无关性：不同人员会使用不同的电脑，不同的电脑也会有不同的操作系统，不同的操作系统就涉及到不同的编程语言，HTML语言在多个平台上都可以很好的使用，这是万维网使用广泛的另外的一个原因。通用性：HTML一种简单、通用的全置标记语言，是现在的网络上的通用语言,。开发人员可以用它制作文本、图片甚至音乐、视频互相结合的复杂的网页，并且无论用户使用的是什么类型的浏览器，都可以访问到对应的网站。现如今手机的部分软件界面都可以用HTML进行设计，新出的HTML5大有替代安卓手机软件界面设计方式的趋势，手机淘宝等页面替换频繁的软件也都是用设计简单灵活的HTML替代iOS和安卓原生编程语言的2.3.4整体结构一个完整的网站是以多个HTML文本文件组合而成的，HTML文本文件都是用.htm或.html作为扩展名。通常可以生成TXT文本文件的编辑器都可以用来编写HTML文件，只需要把最终的文件后缀名改成.htm或.html就可以进行页面的显示。一个标准的HTML文件都会有标准的整体结构，即标记页面头部的<head>标签、标记页面实体的<body>标签和标记页面整体的<html>标签，一般的标签都是有结尾标志的，比如说文件实体部分的结尾就需要用</body>来结束，也有部分独立标签，比如说<input/>和<img/>等，由此可见标签的结尾即加上一个“/”就可以了。2.4本章小结本章主要介绍了本系统所涉及的框架以及技术，开发语言主要涉及JAVA和HTML，前端框架主要是jQuery、Bootstrap和EasyUI，后端框架是SpringMVC，数据库交互用的是iBATIS,数据库使用的是MySQL，好的工具对开发是有很大的助力的，好的框架不仅可以使代码规范化，而且表现的形式也是比自己设计的好很多，熟练使用这些工具和框架是我能开发出本系统的基本条件。第三章需求分析与总体设计3.1开发的时代背景随着餐饮行业的不断创新，现代信息技术的不断发展，人民饮食效率的不断提高，在线点餐成为大势所趋。学生学习生活的紧迫，餐饮行业的人员紧张以及如何有效率的订餐和管理成为了现阶段餐饮行业的问题，由于学生的接受能力出色，并且他们需要一种更快捷，更高效的的饮食习惯，从而有更多的时间来学习，而且餐饮行业的人员问题也可以得到解决，并且有个更直观的订单管理的方式，同时还可以有效的接受客户意见并做出改进。所以，校园在线订餐系统的设计和实现是一项必不可少的任务。3.2功能需求在进行校园在线订餐系统设计开发所达到的需求，这其中就包括买家的餐品购买和卖家的商品管理。3.2.1买家购买系统提供商品的不登录浏览，查看详情以及评价，餐厅商品的分类还有系统公告的查看。新用户可以注册账号，填好餐厅所需要的信息即可进行登录，然后就可以购买商品，添加购物车等操作。添加至购物车的商品可以删除也可以购买，购买的商品可以以评价的方式对餐厅提出自己的建议以及评价。3.2.2商品管理商品管理模块则是卖家操作的后台管理模块，卖家登录了后可以对买家的账号进行锁定，也可以对管理员的账号进行修改，最主要的功能就是对商品进行管理，也可对商品进行分类操作，同时卖家也可对买家的评价进行一个查看，相关模块的搜索功能也是必须要有的，从而简化卖家的操作，本系统还特意设置一个公告栏对卖家想要发布的信息进行修改和增加，从而达到卖家和买家的双向互动。3.3总体设计根据系统的需求，初步拟定的系统架构总体设计如图3-1校园校园在线订餐系统买家登录卖家登录餐品选择账号设置餐品购买餐品信息设置餐品出售统计账号设置图3-1系统结构图据图3-2所示，将在线订餐系统分为两个模块，分别为买家模块和卖家。其中买家模块又分为餐品选择、餐品购买和账号设置，卖家模块则包括餐品管理、餐品统计和账号设置。3.3.1用户登录用户分为卖家和买家两个模块，由于默认为单家餐厅，即卖家也是管理员，不同用户登录有不同的功能。对部分模块不登录的用户进行拦截。3.3.2卖家功能1）商品管理：对商品进行简单的增加，删除，上架下架等基础操作。2）类别管理：对商品类别进行管理，从而在前台首页进行推荐。3）订单管理：对已购买的订单的进行搜索和信息查看。4）公告管理：对首页餐厅的公告栏进行修改。5）用户管理：对买家进行管理。6）账户设置：修改和添加管理员。7）账户登出：卖家退出系统。3.3.3买家功能1）买家注册：可以注册成会员并登陆订餐。2）购物车：对添加的餐品进行管理。3）个人中心：对个人账号的设置，个人信息的修改。4）订餐功能：餐品的浏览、搜索、选择以及下单或添加购物车5）订单管理：对未完成或已完成订单进行查看。6）商品评价：对订单进行评价，从而提出对餐厅的建议。7）注销退出：买家退出系统。3.4本章小结本章主要介绍软件的需求分析，从功能需求，运行需求等方面进行全面的分析。功能需求中提出了系统应完成些什么功能，功能之间的联系，为下一步的软件的模块设计打下基础。运行需求中对主要的界面及其出现故障时的处理情况。本章主要为了下一章的系统设计打下基础，简单分析了整个软件的需求情况。第四章设计与实现4.1用户登录在使用系统的时候，需要用户进行登录，我设计的是两个登录模块，即买家和卖家是不同的登录模块，这里我把卖家的定为后台系统，买家的定为前台系统，因为两个用户涉及的功能差别很大，所以我用不同登录进行明显的区分。在用户未登录之前要进行过滤，某些不可用模块要跳转到登陆页面的判断，这个模块我用了一个filter过滤器，首先在web.xml中添加配置： <filter> <filter-name>sessionFilter</filter-name> <filter-class>com.lzj.filter.SessionFilter</filter-class> </filter> <filter-mapping> <filter-name>sessionFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>然后在对应的filter中进行编写过滤条件： publicclassSessionFilterextendsOncePerRequestFilter{protectedvoiddoFilterInternal(HttpServletRequestrequest,HttpServletResponseresponse,FilterChainfilterChain)throwsServletException,IOException{//把不进行过滤的URL放到这里String[]notFilter=newString[]{"login","dengLu","userLogin","managerLogin","addGwc","addProductList"};//获取请求的URLStringuri=request.getRequestURI();//URL中包含user时才进行过滤，前台系统的过滤if(uri.indexOf("/user/")!=-1){//定义是否过滤booleandoFilter=true;for(Strings:notFilter){//遍历请求的地址if(uri.indexOf(s)!=-1){//如果URL中包含不过滤的URL，则不进行过滤doFilter=false;break;}}if(doFilter){//执行过滤//从session中获取用户idObjectobj=request.getSession().getAttribute("userid");if(null==obj){ //未登录返回登录界面 response.sendRedirect("login");}else{//如果登陆就继续filterChain.doFilter(request,response);}}else{//如果包含user则不执行过滤，继续filterChain.doFilter(request,response);}}elseif(uri.indexOf("/manager/")!=-1){//后台管理系统的过滤booleandoFilter=true;for(Strings:notFilter){if(uri.indexOf(s)!=-1){doFilter=false;break;}}if(doFilter){Objectobj=request.getSession().getAttribute("managerid");if(null==obj){ response.sendRedirect("login");}else{filterChain.doFilter(request,response);}}else{filterChain.doFilter(request,response);}}else{filterChain.doFilter(request,response);}}}在程序中我用了三个Controller，一个MainController，一个UserController，一个ManagerController，这个过滤器主要针对UserController和ManagerController进行过滤达到不登录的用户访问部分功能跳转到登陆界面的作用4.2功能模块设计FreeMarker的模板文件是以ftl为后缀的文件，内容的写法和jsp差不多，主要就是不用使用JSTL标签和EL表达式，并且有自己的标签和函数，后台则用ModelAndView类进行对返回界面的处理4.2.1卖家模块后台的ui插件主要使用的是EasyUI，在页面中引入下面的两个js和一个css包：<scriptsrc="${base}/js/jquery.js"></script><scriptsrc="${base}/js/jquery.easyui.min.js"></script><linkhref="${base}/css/easyui.css"rel="stylesheet"/>如果想使用EasyUI的图标，则需要再引入一个css包：<linkhref="${base}/css/icon.css"rel="stylesheet"/>${base}是FreeMarker的显示后台传过来的参数的一种表现形式，这一点和EL表达式一样，我把项目地址设为一个全局变量base，这样页面在引用共同的js或css的时候就不会因为路径的问题发生错误。EasyUI很好的封装了一个表格插件DataGrid，只要在后台接收固定参数，即可展现一个简洁方便的带分页的表格，从而对数据进行显示，获取用户列表方法如下：@RequestMapping(value="/getYhGL")@ResponseBodypublicDataGridgetUserGl(@RequestParam(value="searchtext",required=false)Stringsearchtext,@RequestParam("page")intpage,@RequestParam("rows")introws){ Mapmap=newHashMap(); map.put("searchtext",searchtext); returnmanagerService.getUserGl(map,page,rows);}相关注释的含义上面对SpringMVC的介绍中已经提到过了，searchtext是我定义的一个搜索的参数，page是DataGrid传的页数参数，rows是每页显示条数的参数，我把DataGrid需要的参数写了一个bean，把获取的内容也在数据库交互的BaseDao中写了一个方法，所以直接按照项目层级调用到Dao层，调用getDataGrid方法就可以了。ftl页面上则使用封装好的方法对表格进行渲染，代码如下：$('#usertable').datagrid({ width:$(this).width()*0.98,//宽度 rownumbers:true,//是否显示行号 pagination:true,//是否分页fit:true,//是否自适应表格 fitColumns:true,//是否自适应行 height:'auto',//表格高度 getYhGL"url:"getYhGL",//请求地址pageSize:10,//每页显示行数 pageList:[10,15,20],//可选择显示行数 onClickRow:function(){ $('#usertable').datagrid('clearSelections'); },//取消点击高亮});列对应的属性我是在标签中定义的，下面是对应账号列：<thdata-options="field:'account',align:'center',width:100">账号</th>对行列进行操作对应的是js的方法，我基本上都是用ajax实现的，ajax的写法上面的jQuery中已经说过了，后台调用相应的增加或删除或修改方法即可实现。4.2.2买家模块后台的方法大同小异，买家模块因为界面比较重要，所以我选择的是注重美观的Bootstrap框架。同样需要引入三个包：<linkrel="stylesheet"href="${base}/css/bootstrap.min.css"><scriptsrc="${base}/js/jquery.js"></script><scriptsrc="${base}/js/bootstrap.min.js"></script>Bootrstrap注重的是页面展示，所以基于js的动态方法并不多，并且在标签中加入相应的class就可以展现出来，所以虽然展示美观，但是编程写起来繁琐，js方法到需要自己写。仅仅一个商品展示的分页模块就需要写的完全，还要适应页面的其他要求。4.3SpringMVC配置首先在web.xml中加入spring的配置：<servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:/springmvc-servlet.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping><context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext*.xml</param-value></context-param>然后新建springmvc-servlet.xml，加入需要的配置<?xmlversion="1.0"encoding="UTF-8"?><beansxmlns="/schema/beans" xmlns:xsi=/2001/XMLSchema-instancexmlns:mvc="/schema/mvc" xmlns:context="/schema/context" xsi:schemaLocation="/schema/beans /schema/beans/spring-beans-3.2.xsd /schema/mvc /schema/mvc/spring-mvc-3.2.xsd /schema/context /schema/context/spring-context-3.2.xsd"><!--自动扫描该包，使SpringMVC认为包下用了@controller注解的类是控制器--><context:component-scanbase-package="com.lzj.controller"/><mvc:annotation-driven><mvc:message-convertersregister-defaults="true"><beanclass="org.springframework.http.converter.StringHttpMessageConverter"><constructor-argvalue="UTF-8"index="0"></constructor-arg><propertyname="supportedMediaTypes"value="text/plain;charset=UTF-8"/></bean><beanid="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"><!--为了处理返回的JSON数据的编码，默认是ISO-88859-1的，这里把它设置为UTF-8,解决有乱码的情况--><propertyname="supportedMediaTypes"value="text/html;charset=UTF-8"/></bean></mvc:message-converters></mvc:annotation-driven> <!--公共映射配置--><mvc:view-controllerpath="/"view-name="index"/><mvc:default-servlet-handler/> <!--处理JSON数据转换的--> <!--SpringMVC上传文件时，需要配置MultipartResolver处理器--><beanid="multipartResolver"class="mons.CommonsMultipartResolver"><!--指定所上传文件的总大小不能超过2000KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和--><propertyname="maxUploadSize"value="20000000"/></bean><!--SpringMVC在超出上传文件限制时，会抛出org.springframework.web.multipart.MaxUploadSizeExceededException--><!--该异常是SpringMVC在检查上传的文件信息时抛出来的，而且此时还没有进入到Controller方法中--><beanid="exceptionResolver"class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"><propertyname="exceptionMappings"><props><!--遇到MaxUploadSizeExceededException异常时，自动跳转到/WEB-INF/jsp/error_fileupload.jsp页面--><propkey="org.springframework.web.multipart.MaxUploadSizeExceededException">index.jsp</prop></props></property></bean><!--视图解析器--><beanid="viewResolver"class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver"><propertyname="viewClass"value="org.springframework.web.servlet.view.freemarker.StaticFreeMarkerView"/><propertyname="cache"value="true"/><!--propertyname="prefix"value="/WEB-INF/views/"--><propertyname="suffix"value=".ftl"/><propertyname="contentType"value="text/html;charset=UTF-8"/><propertyname="allowSessionOverride"value="true"/><propertyname="allowRequestOverride"value="true"/><propertyname="requestContextAttribute"value="request"/><propertyname="exposeSpringMacroHelpers"value="true"/><propertyname="exposeRequestAttributes"value="true"/><propertyname="exposeSessionAttributes"value="true"/></bean><beanid="freemarkerConfig"class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"><propertyname="templateLoaderPath"> <value>/WEB-INF/views/</value></property><propertyname="freemarkerSettings"> <props> <propkey="locale">zh_CN</prop> <propkey="defaultEncoding">UTF-8</prop> <propkey="date_format">yyyy-MM-dd</prop> <propkey="time_format">HH:mm:ss</prop> <propkey="datetime_format">yyyy-MM-ddHH:mm:ss</prop> <propkey="number_format">0.################</prop> </props></property></bean><!--异常解析器--><beanid="simpleMappingExceptionResolver"class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"><propertyname="exceptionMappings"> <props> <propkey="org.springframework.web.multipart.MaxUploadSizeExceededException">common/fileerror</prop> <propkey="java.lang.exception">common/fileerror</prop> </props></property></bean></beans>4.4本章小结本章主要介绍了登录、过滤器、前后端部分功能代码的实现方式以及前端框架的使用方式和本系统最重要的后台框架SpringMVC的配置内容。在登录模块主要阐述了登录的方式以及各系统都会有的防止未登录访问的过滤，一般可以用过滤器和拦截器两种方式，我使用的是过滤器并附上了实现代码。然后讲解了前后端的部分方法的代码，因为从实现上来说，根据功能不同查看相关API进行调整就可以了，大致上还是相同的实现原理。最后我着重附上了后台的SpringMVC框架的搭建，并且对作为本系统最重要的一部分内容进行了注释。本章所描述实现模块的代码方面也为下一章各个模块的的测试提供相应方向、分类和测试标准。第五章系统演示与测试5.1买家界面演示与测试5.1.1系统主界面系统有一个初始主界面，如图5-1，主要功能是展现买家的可用菜单