基于MVC的订餐系统的设计与实现Word格式.docx
《基于MVC的订餐系统的设计与实现Word格式.docx》由会员分享,可在线阅读,更多相关《基于MVC的订餐系统的设计与实现Word格式.docx(17页珍藏版)》请在冰豆网上搜索。
![基于MVC的订餐系统的设计与实现Word格式.docx](https://file1.bdocx.com/fileroot1/2022-11/17/22c976d5-7c4f-4914-b76d-a23ce7cd045e/22c976d5-7c4f-4914-b76d-a23ce7cd045e1.gif)
JSP是基于JavaServlet以及整个Java体系的web开发技术。
在传统的网页HTML文件(*.htm,*.html)中加入脚本片段和JSP标记(Tag),构成JSP网页(*.jsp)。
JSP技术为创建显示动态生成内容的web页面提供了简便的方法。
JSP作为Java家族的一员,承袭了Java的特点,即跨平台的特性,也即一次编译,到处运行。
在本系统中,通过大量运用<
%%>
插入java代码片段,从数据库中读取到信息,再<
%=%>
把数据显示在页面上。
AJAX技术是一项异步数据传输功能,在不刷新页面的情况下对页面信息更新。
在本系统中,这项技术主要运用在注册页面当中。
在用户注册的时候,通过JavaScript的XMLHttpRequest对象向服务器端发送异步数据请求,从数据库中检索输入的用户名是否存在,如果存在就想客户端返回已经注册的消息,如果没有注册就向客户端返回可以注册的消息。
3、模块总体设计
用例图:
顾客用例图(主要对订单的增加和修改)
管理员用例图(主要对用户、订单和食物的查增删改)
数据流图:
模块图:
系统总功能模块
注册模块图:
登录模块图:
ER图:
系统er图
数据库表:
customer表
属性
数据类型
允许空
cno
varchar(3)
notnull
Primarykey
cpassword
varchar(10)
cadress
cphone
super
varchar
(1)
order表
ono
fno
price
int
number
food表
fname
ftype
fimage
varchar(20)
fprice
int(3)
4、系统实现
这一部分主要是截图,包括开发环境(MyEclipse或者EclipseJ2EE的工程文件夹部分)截图,系统运行截图,另外对于核心代码也可以贴一两段出来,不过凡是出现的代码和截图都必需配有文字说明。
EclipseJ2EE的工程文件夹部分:
用户注册界面:
运用ajax判断用户名是否可以注册。
JavaScript部分代码如下:
、
//此段通过XMLHttpRequest对象的状态对页面中id为msg的div元素的内容进行设置。
functioncallback(){
varmsg=document.getElementById("
msg"
);
msg.innerHTML="
"
;
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
vardata=xmlHttpRequest.responseText;
if(data=="
true"
){
msg.innerHTML="
用户<
br>
已存在"
msg.style.color="
red"
document.getElementById("
username"
).select();
}else{
ok"
green"
}
}
}
}
//此段创建XMLHttpRequest对象并传入的username设置参数,处理器的url等。
functioncheckUserExists(){
varusername=document.getElementById("
varurl="
checkUserServlet"
varparam="
username="
+encodeURIComponent(username.value);
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=callback;
xmlHttpRequest.open("
POST"
url,true);
xmlHttpRequest.setRequestHeader("
Content-type"
"
application/x-www-form-urlencoded"
xmlHttpRequest.send(param);
下面用正则表达式判断用户名是否合法:
functioncheck(){
varregm1=/^[a-zA-Z_]+[a-zA-Z0-9_]+$/;
if(form.username.value=="
||form.username.value=='
username'
)
{
alert("
Nameisnull.."
form.username.focus();
returnfalse;
if(!
form.username.value.match(regm1))
Nameisnotright..."
用户登录界面:
用户点餐界面:
显示食物部分代码(其中图片用相对路径):
//此段通过java代码从数据库中取出食物表的信息,在页面中显示出来。
<
ulclass="
changelist"
>
<
h4class="
mix"
地道小吃类<
/h4>
%
Stringsql="
select*fromfood"
Connectionconn=dataAccess.getConnection();
Statementstat=conn.createStatement();
ResultSetrs=stat.executeQuery(sql);
while(rs.next()){
%>
liclass="
list-1-o"
divclass="
lesson-info"
formaction="
orderServlet"
mothed="
post"
name="
form1"
imgsrc=<
%=rs.getString("
fimage"
)%>
inputtype="
text"
value="
fname"
class="
fno"
fprice"
price"
textvalue="
数量:
number"
buttontype="
submit"
onclick="
returncheck1();
点餐<
/button>
/form>
/div>
/li>
%}%>
/ul>
订购成功界面:
购物车界面:
管理员管理界面:
添加用户:
添加完跳转至用户显示信息界面:
添加食物(图片为默认图片):
添加完成跳转至食物信息界面:
添加订单:
添加完成后跳转至查看订单界面:
按号查找用户:
查找完成跳转到用户信息显示页面:
对信息修改后显示所有用户信息(修改c01密码为c02):
5、总结
这个系统是基于MVC的订餐系统,其中仅仅实现了很少一部分功能,还有很大的完善空间,以后我也会尽量完善我的订餐系统。
在系统制作过程中,运用了很多方面的知识,JSP、MYSQL、XML、HTML、CSS、JAVASCRIPT等,大大的丰富了我的知识量,也是对某些已经学过的知识的回顾和比较系统的应用。
在系统的制作过程中遇到了不少的问题,比如说一个页面的参数传不到另外一个页面,后来通过查找资料后不断尝试,终于用session的方法解决了这个问题。
另外通过这个系统的制作,我明白了注重编程细节的重要性,比如说函数的命名要科学直观,可以使用驼峰式命名法,这样便于查找和修改,最好能写上注释。
我会在以后的学习和工作中不断完善自己。
参考文献
[1]燕卫.计算机辅助教学中有关问题研究与实践初探[J].福建电大泉州分校,2008,7(4):
31~47.
[2]张立敏,曾绍庚.JavaWebf应用开发基础教程[M].北京:
中国水利水电出版社,2016.
--------------