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

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

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

进入主页

 

登录与注册页面

可以选择商家与餐品

点击进入付款页面

 

 

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

<li><a href="http://localhost:8848/IS/t99.jsp">首页</a></li>
<li><a href="#" >精彩活动</a></li>
<li><a href="person.jsp">个人中心</a></li>
<li><a href="#" >意见反馈</a></li>
<li><a href="#" >关于</a></li>
<div class="row content_bottom">
<div class="col-md-3">
<div class="content_box"><a href="jysp.jsp">
<div class="view view-fifth">
<img src="img/p1.jpg" class="img-responsive" alt=""/>
<div class="content_box-grid">
<p class="m_1">焗艺尚品</p>
<ul class="product_but">
<li class="but3">进入</li>
<li class="like"><span>252</span><i class="like1"> </i></li>
<div class="clearfix"> </div>
</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>

 

注册模块：

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

 

登录模块：

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

 

输入账号:

<input type="text" name="zh2" required="required"> 
</td></tr><br><br>
<tr>
<td>输入密码:
<input type="text" name="mm2" required="required"> 
</td></tr><br><br>
<tr>

 

验证模块：

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

 

验证码实现：

int b;
g.setColor(c);
g.fillRect(0, 0, 100, 30);//绘制填充框
for(int i=0; i<4; i++){
b = r.nextInt(a);
g.setColor(new Color(r.nextInt(100),r.nextInt(200),r.nextInt(250)));
g.drawString(ch[b]+"", (i*20)+5, 20);//产生字符距离
s.append(ch[b]);//插入数据}

<script type="text/javascript">
function reloadCode(){
var time = new Date().getTime();
document.getElementById("imagecode").src="http://localhost:8848/IS/servlet/ing?d="+time;
}
</script>

 

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

餐品浏览：

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

 

商家的更多选择（量太大，实际并没有写）

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

 

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

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

 

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

<ul class="product_img">
<li class="product_left"><img src="img/logo.png" class="img-responsive" alt=""/>
<p>账户余额</p></li>
<li class="product_right">
<h3>2017.12.14</h3>
<h4><strong>12.7 元</strong></h4>
<span class="model"><a>交易明细</a></span><br>
<span class="model"><a>支付设置 </a></span>
<div class="but1">
<a href="DD.html">充值</a></div></li>
<div class="clearfix"> </div> </ul>

 

图片滚动效果：

<marquee> 
<img src="img\s0.jpg" width="150" height="150"> 
<img src="img\s1.jpg" width="150" height="150">
<img src="img\s2.jpg" width="150" height="150">
<img src="img\s3.jpg" width="150" height="150"> 
<img src="img\s4.jpg" width="150" height="150">
<img src="img\s5.jpg" width="150" height="150"> 
<img src="img\s6.jpg" width="150" height="150"> 
<img src="img\s7.jpg" width="150" height="150"> 
<img src="img\s8.jpg" width="150" height="150"> 
</marquee>