第四次团队作业:网络订餐平台实现与测试

Posted 宇宙真理

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第四次团队作业:网络订餐平台实现与测试相关的知识,希望对你有一定的参考价值。

本产品为基于javascript的网络订餐平台,由于时间与能力的有限,本产品只能实现一个大概的模型,功能比较简单。代码地址:https://github.com/wz1115a/WM

简易快速使用指南与软件测试
本产品主要实现:
用户注册与登录
商家商品界面浏览
生成支付页面与个人中心

进入主页

 

登录与注册页面

可以选择商家与餐品

点击进入付款页面

 

 

代码实现
界面代码我是参考了不少网站的格式,学习借鉴最后整合出来
主要界面:

 1 <li><a href="http://localhost:8848/IS/t99.jsp">首页</a></li>
 2 <li><a href="#" >精彩活动</a></li>
 3 <li><a href="person.jsp">个人中心</a></li>
 4 <li><a href="#" >意见反馈</a></li>
 5 <li><a href="#" >关于</a></li>
 6 <div class="row content_bottom">
 7 <div class="col-md-3">
 8 <div class="content_box"><a href="jysp.jsp">
 9 <div class="view view-fifth">
10 <img src="img/p1.jpg" class="img-responsive" alt=""/>
11 <div class="content_box-grid">
12 <p class="m_1">焗艺尚品</p>
13 <ul class="product_but">
14 <li class="but3">进入</li>
15 <li class="like"><span>252</span><i class="like1"> </i></li>
16 <div class="clearfix"> </div>
17 </ul><div class="mask"><div class="info">Quick View</div></div></div></div></a></div></div>

 

CSS样式:

.header{
width: 100%;
height:50px;
background: #333333;
min-width: 1200px;
font-size: 14px;
}
.headerinner{
width: 1200px;
height: 100%;
padding:0 50px;
margin:0 auto;
box-sizing:border-box;
position: relative;
}

 


实现登录注册功能则是由serlvt后台完成,将注册的数据与登录数据相比较

<script>
$(function(){
/*搜索*/
$(".search_pic").click(function(){
$(".headernav").fadeOut(500);
$(".search_main").fadeIn(1000);
});
$(".search_main .close_btn").click(function(){
$(".search_main").fadeOut(500);
$(".headernav").fadeIn(1000);
});
/*登录*/
$(".list a").click(function(){
$(".member").slideToggle(500);
});

});
</script>

 

注册模块:

1 <p align="center"style="color:red"><img src="D:\\BaiduNetdiskDownload\\111.jpg" /><br><br><font size="7">夹竹桃外卖用户注册</font></p>
2 <form align="center" action="http://localhost:8848/IS/M61.jsp" method="POST">
3 <table align="center" width="%" border=""><tr>
4 <td> 输入账号:<input type="text" name="zh1" ><td></tr><br/>
5 <tr><td>输入密码:<input type="text" name="mm1" ><td></tr><br/><tr><td>

 

登录模块:

1 <p align="center" style="color:red"><font size="7">登陆页面</font></p>
2 <form align="center" action="http://localhost:8848/IS/servlet/login" method="get">
3 <div style="position:absolute;width:500px;height:200px;top:200px;left:600px">
4 <table width="%" border="">
5 <tr>
6 <td>

 


输入账号:

1 <input type="text" name="zh2" required="required"> 
2 </td></tr><br><br>
3 <tr>
4 <td>输入密码:
5 <input type="text" name="mm2" required="required"> 
6 </td></tr><br><br>
7 <tr>

 

验证模块:

1 if(c1.equals(c)){
2 if(m1.equals(m)){
3 if(u1.equals(u)){
4 out.println("登陆成功!");
5 request.getSession().setAttribute("YZ","1");
6 out.println("<input type=\'button\' onclick=\\"location.href=\'http://localhost:8848/IS/t99.jsp\'\\" value=\'商品浏览\'>");}
7 else{out.println("账号不存在!!!");request.getSession().setAttribute("YZ","2");}}
8 else{out.println("密码输入错误!!!");request.getSession().setAttribute("YZ","2");}

 

验证码实现:

1 int b;
2 g.setColor(c);
3 g.fillRect(0, 0, 100, 30);//绘制填充框
4 for(int i=0; i<4; i++){
5 b = r.nextInt(a);
6 g.setColor(new Color(r.nextInt(100),r.nextInt(200),r.nextInt(250)));
7 g.drawString(ch[b]+"", (i*20)+5, 20);//产生字符距离
8 s.append(ch[b]);//插入数据}
1 <script type="text/javascript">
2 function reloadCode(){
3 var time = new Date().getTime();
4 document.getElementById("imagecode").src="http://localhost:8848/IS/servlet/ing?d="+time;
5 }
6 </script>

 

点击选中商家后,进入商家页面,选中餐品即可付款(因为我的电脑连接数据库失败了,只好编一些数据)

餐品浏览:

 1 <ul class="review1">
 2 <li class="review1_img"><img src="img/pic2.jpg" class="img-responsive" alt=""/></li>
 3 <li class="review1_desc"><h3><a href="#">烤腿+炸腿的便当</a></h3><p>2017.12.11</p></li>
 4 <div class="clearfix"> </div></ul></li><li><ul class="review1">
 5 <li class="review1_img"><img src="img/pic3.jpg" class="img-responsive" alt=""/></li>
 6 <li class="review1_desc"><h3><a href="#">干锅牛蛙大份</a></h3><p>2017.12.11</p></li>
 7 <div class="clearfix"> </div></ul></li><div class="but">
 8 <a href="#">更多选择<i class="but_arrow">
 9 <div class="category_box">
10 <h3 >分类</h3>
11 <ul class="category">
12 <li><a href="#">快餐饮料</a></li>
13 <li><a href="#">风味小吃</a></li>
14 <li><a href="#">异国料理</a></li>
15 <li><a href="#">果蔬生鲜</a></li>
16 <li><a href="#">商店超市</a></li>
17 <li><a href="#">医药健康</a></li>
18 <li><a href="#">下午茶</a></li>
19 <li><a href="#">夜宵</a></li></ul> </div>

 

商家的更多选择(量太大,实际并没有写)

 1 <ul class="dc_pagination dc_paginationA dc_paginationA06">
 2 <li> <a href="#" class="current">1</a> </li>
 3 <li><a href="#" >2</a></li>
 4 <li><a href="#">3</a></li>
 5 <li><a href="#">4</a></li>
 6 <li><a href="#">5</a></li>
 7 <li><a href="#">...</a></li>
 8 <li><a href="#">19</a></li>
 9 <li><a href="#">20</a></li>
10 <li><a href="#" class="previous"> 下一页</a></li>
11 <li><a href="#" class="next">尾页>></a></li> </ul>

 

通过jsp传递数据来生成不同的付款界面

1 <% String x1="1"; String x2="2"; String x3="3";
2 String s=request.getParameter("a"); %>
3 <br>
4 <% if(s.equals(x1))out.println("<img src=\'img/pic8.jpg\' class=\'img-responsive\' alt=\'\'/>");
5 if(s.equals(x2))out.println("<img src=\'img/pic7.jpg\' class=\'img-responsive\' alt=\'\'/>");
6 if(s.equals(x3))out.println("<img src=\'img/pic9.jpg\' class=\'img-responsive\' alt=\'\'/>");%>
7 <h3><%if(s.equals(x1))out.print("芝士焗土豆+柠檬红茶");
8 if(s.equals(x2))out.print("奥尔良鸡肉焗饭");
9 if(s.equals(x3))out.print("海鲜焗饭");%> </h3>

 

个人中心以及一些其他功能

 1 <ul class="product_img">
 2 <li class="product_left"><img src以上是关于第四次团队作业:网络订餐平台实现与测试的主要内容,如果未能解决你的问题,请参考以下文章

2021年人工神经网络第四次作业要求

第四次团队作业:记账小能手

软工实践第四次小组作业

第四次团队作业:社团申请App

第四次作业

软件工程第四次作业——团队作业