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

本产品为基于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="img/logo.png" class="img-responsive" alt=""/>
 3 <p>账户余额</p></li>
 4 <li class="product_right">
 5 <h3>2017.12.14</h3>
 6 <h4><strong>12.7 元</strong></h4>
 7 <span class="model"><a>交易明细</a></span><br>
 8 <span class="model"><a>支付设置 </a></span>
 9 <div class="but1">
10 <a href="DD.html">充值</a></div></li>
11 <div class="clearfix"> </div> </ul>

 

图片滚动效果:

 1 <marquee> 
 2 <img src="img\s0.jpg" width="150" height="150"> 
 3 <img src="img\s1.jpg" width="150" height="150">
 4 <img src="img\s2.jpg" width="150" height="150">
 5 <img src="img\s3.jpg" width="150" height="150"> 
 6 <img src="img\s4.jpg" width="150" height="150">
 7 <img src="img\s5.jpg" width="150" height="150"> 
 8 <img src="img\s6.jpg" width="150" height="150"> 
 9 <img src="img\s7.jpg" width="150" height="150"> 
10 <img src="img\s8.jpg" width="150" height="150"> 
11 </marquee>
posted @ 2017-12-17 21:02  夹竹桃天下第一  阅读(361)  评论(1编辑  收藏  举报