基于MVC的订餐系统的设计与实现

1、基于 MVC 的订餐系统的设计与实现摘 要： 本文分析了传统餐饮现状和面临的问题， 发现传统的服务模式已经不能适应 市场发展的需求。随着网络技术的普及，方便、快捷的网上订餐服务正在进入人们的生活。 针对这类问题， 本文规划了一套最贴切的服务模式， 为餐饮店铺提供区域网络门户， 适应不 同的客户群。本设计是一个基于 MVC 模式的网上订餐系统， 能提供网络选择浏览菜品、 点菜订餐等 服务。为管理员提供一个智能的服务平台实现顾客信息与顾客订单的管理， 从而提高了服务 的质量。1 、 目的与意义现代社会， 人们生活节奏加快， 有些甚至连外出吃饭的时间都抽不出来， 本系统的设计 目的是为了满足消费者只

2、要通过互联网就可以足不出户的订购自己喜欢的菜品， 改变传统商 业交易，在互联网上进行交易， 实现网上购买食物。在订餐系统中，除了用户注册和用户登 录功能， 最为核心的功能就是订餐部分的功能。 订餐模块的特点是： 用户通过简单的输入数 量和点击确认按钮操作完成点餐， 并能在购物车中查看自己的购物信息。 本系统在此模块的 运行方式： 在页面上显示食物的信息，包括食物名称、食物价格和食物图片等，当用户找到 自己喜欢的食物时， 通过输入自己订购的数量后， 点击确定按钮后订餐。 然后在购物车中可 以查看到自己当前订餐的情况， 可以删除不想要的食物， 或者修改订餐的数量。另外， 本系 统中还开发了管理员的

3、管理功能，如对用户的查询、删除、修改、增加，对事物的查询、删 除、修改、增加，对订单的查询删除和修改。2 、 理论基础及技术路线本系统应用了 MVC 的开发模式，结合 JSP 和少量 AJAX 技术实现的。MVC （model 、 view 、 controller ）模式，实现了业务模型和用户视图的分离。在本 系统中， MVC 的处理流程：首先通过点击视图表单中的 submit 按钮，再通过表单中的 method 值获取传输的方法， 通过 action 值在 web.xml 中找到对应 servlet ，再到 servlet 中调用 business 处理数据，最后将数据返回视图。这种视图层

4、和业务层分离，允许更改视 图层代码而不用重新编译模型和控制器代码， 同样业务流程或者业务规则的改变只需要改动模型层即可。JSP 是基于 JavaServlet 以及整个 Java 体系的 web 开发技术。在传统的网页 HTML 文件 (*.htm,*.html) 中加入脚本片段和 JSP 标记 (Tag) ，构成 JSP 网页 (*.jsp) 。JSP 技术为 创建显示动态生成内容的 web 页面提供了简便的方法。 JSP 作为 Java 家族的一员，承袭 了 Java 的特点，即跨平台的特性，也即一次编译，到处运行。在本系统中，通过大量运用 插入 java 代码片段，从数据库中读取到信息，

5、再 把数据显示在页面上。AJAX 技术是一项异步数据传输功能， 在不刷新页面的情况下对页面信息更新。 在本系 统中，这项技术主要运用在注册页面当中。在用户注册的时候，通过 JavaScript 的 XMLHttpRequest 对象向服务器端发送异步数据请求，从数据库中检索输入的用户名是否 存在，如果存在就想客户端返回已经注册的消息， 如果没有注册就向客户端返回可以注册的 消息。3 、 模块总体设计用例图：顾客用例图(主要对订单的增加和修改)添加用户用户管理删竝用户O_ ga 一 -M管理员查找订单増加育输任官、删涂倉物_ 血言沙* YS- -亦p信息订里管理删涂订卑修改订单修改食物信息管理员

6、用例图（主要对用户、订单和食物的查增删改）数据流图:模块图：注册模块图：系统总功能模块登录模块图：ER 图：系统 er 图数据库表：customer 表属性数据类型允许空cnovarchar(3)not nullPrimary keycpasswordvarchar(10)not nullcadressvarchar(10)not nullcphonevarchar(10)not nullsupervarchar(1)not nullorder 表属性数据类型允许空onovarchar(3)not nullPrimary keycnovarchar(3)not nullfnovarchar(3

7、)not nullpriceintnot nullnumberintnot nullfood 表属性数据类型允许空fnamevarchar(10)not nullPrimary keyftypevarchar(3)fimagevarchar(20)fpriceint(3)not null4、系统实现这一部分主要是截图，包括开发环境（ MyEclipse 或者 Eclipse J2EE 的工程文件夹 部分） 截图，系统运行截图，另外对于核心代码也可以贴一两段出来，不过凡是出现的代码和截图都必需配有文字说明。Eclipse J2EE 的工程文件夹部分：用户注册界面：运用 ajax 判断用户名是否可

8、以注册。 JavaScript 部分代码如下：/ 此段通过 XMLHttpRequest 对象的状态对页面中 id 为msg 的 div 元素的内容进行设置 function callback()var msg = document.getElementById(msg);msg.innerHTML=;if (xmlHttpRequest.readyState = 4)if (xmlHttpRequest.status = 200)var data =xmlHttpRequest.responseText;if (data = true)msg.innerHTML = 用户 已存在 msg.s

9、tyle.color=red;document.getElementById(username).select();else msg.innerHTML = ok;msg.style.color=green;/ 此段创建 XMLHttpRequest 对象并传入的 username 设置参数，处理器的 url 等。function checkUserExists()var username = document.getElementById(username);var url = checkUserServlet;var param = username= + encodeURICompone

10、nt(username.value);xmlHttpRequest = createXmlHttpRequest();xmlHttpRequest.onreadystatechange = callback;xmlHttpRequest.open(POST,url, true );xmlHttpRequest.setRequestHeader(Content-type,application/x-www-form-url encoded);xmlHttpRequest.send(param);下面用正则表达式判断用户名是否合法：function check() var regm1 =/a-zA

11、-Z_+a-zA-Z0-9_+$/;if (form.username.value = | form.username.value=username) alert(Name is null.);form.username.focus();return false ;if (!form.username.value.match(regm1)alert(Name is not right.);form.username.focus();return false ;用户登录界面：用户点餐界面：显示食物部分代码（其中图片用相对路径） / 此段通过 java 代码从数据库中取出食物表的信息，在页面中显示

12、出来 地道小吃类 img src=% class=fno% class=fno点餐 input type=text value=input type=text value= 数量 :订购成功界面：购物车界面：管理员管理界面：添加用户 :添加完跳转至用户显示信息界面：添加食物（图片为默认图片）添加完成跳转至食物信息界面：添加订单：添加完成后跳转至查看订单界面：按号查找用户：查找完成跳转到用户信息显示页面：对信息修改后显示所有用户信息（修改 c01 密码为 c02 ）：5、总结这个系统是基于 MVC 的订餐系统， 其中仅仅实现了很少一部分功能， 还有很大的完善 空间，以后我也会尽量完善我的订餐系统。在系统制作过程中，运用了很多方面的知识， JSP 、MYSQL 、XML 、HTML 、CSS 、JAVASCRIPT 等，大大的丰富了我的知识量，也 是对某些已经学过的知识的回顾和比较系统的应用。 在系统的制作过程中遇到了不少的问题， 比如说一个页面的参数传不到另外一个页面，后来通过查找资料后不断尝试，终于用 session 的方法解决了这个问题。 另外通过这个系统的制作， 我明白了注重编程细节的重要 性，比如说函数的