|
|
|
步骤 2 : home.jsp 所包含页面 步骤 3 : header.jsp 步骤 4 : top.jsp 步骤 5 : search.jsp 步骤 6 : homePage.jsp 步骤 7 : footer.jsp
观察模仿天猫前端，可以发现前台页面有如下特点：
1. 有共同的置顶导航 2. 有共同的搜索栏 3. 有共同的页脚 根据这样的特点，在设计前台jsp页面的时候，就制作了很多公共页面，其他前台页面就共享这些公共页面，使得开发和维护成本降低不少
根据前台页面的特点，我们把home.jsp设计成如代码所示。
1. header.jsp 引入标准标签库，js,css，自定义javascript函数等 2. top.jsp 置顶导航 3. search.jsp 搜索栏 4. homePage.jsp 首页业务页面 5. footer.jsp 页脚 <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="include/header.jsp"%>
<%@include file="include/top.jsp"%>
<%@include file="include/search.jsp"%>
<%@include file="include/home/homePage.jsp"%>
<%@include file="include/footer.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <%@include file="include/header.jsp"%> <%@include file="include/top.jsp"%> <%@include file="include/search.jsp"%> <%@include file="include/home/homePage.jsp"%> <%@include file="include/footer.jsp"%>
header.jsp 做了如下工作
1. 声明为html5格式 <!DOCTYPE html> 2.让浏览器以UTF显示中文，本页面的中文文字采用UTF-8编码，启动EL表达式 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> 3. 引入标准标签库 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> c通常用于条件判断和遍历 fmt用于格式化日期和货币 fn用于校验长度 更多的关于JSTL的查看这里 4. 引入bootstrap和jquery <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> 5. 自定义前端样式 <link href="css/fore/style.css" rel="stylesheet"> 除了轮播和图标，前端几乎没用Bootstrap中的样式，所有的自定义样式都在这个文件里。 6. 各种自定义函数和事件监听。 这些内容在模仿天猫前端教程中详细讲解，本项目专注于服务端的内容，就不一一展开了 <!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<link href="css/fore/style.css" rel="stylesheet">
<script>
function formatMoney(num){
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + num + '.' + cents);
}
function checkEmpty(id, name){
var value = $("#"+id).val();
if(value.length==0){
$("#"+id)[0].focus();
return false;
}
return true;
}
$(function(){
$("a.productDetailTopReviewLink").click(function(){
$("div.productReviewDiv").show();
$("div.productDetailDiv").hide();
});
$("a.productReviewTopPartSelectedLink").click(function(){
$("div.productReviewDiv").hide();
$("div.productDetailDiv").show();
});
$("span.leaveMessageTextareaSpan").hide();
$("img.leaveMessageImg").click(function(){
$(this).hide();
$("span.leaveMessageTextareaSpan").show();
$("div.orderItemSumDiv").css("height","100px");
});
$("div#footer a[href$=#nowhere]").click(function(){
alert("模仿天猫的连接，并没有跳转到实际的页面");
});
$("a.wangwanglink").click(function(){
alert("模仿旺旺的图标，并不会打开旺旺");
});
$("a.notImplementLink").click(function(){
alert("这个功能没做，蛤蛤~");
});
});
</script>
</head>
<body>
置顶导航页面
这里会根据用户是否登录，决定是否显示退出按钮，或者登录注册按钮，以及购物车中的商品数量 <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<nav class="top ">
<div class="top_middle">
<a href="${contextPath}">
<span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<c:if test="${!empty user}">
<a href="login.jsp">${user.name}</a>
<a href="forelogout">退出</a>
</c:if>
<c:if test="${empty user}">
<a href="login.jsp">请登录</a>
<a href="register.jsp">免费注册</a>
</c:if>
<span class="pull-right">
<a href="forebought">我的订单</a>
<a href="forecart">
<span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-shopping-cart redColor"></span>
购物车<strong>${cartTotalItemNumber}</strong>件</a>
</span>
</div>
</nav>
这里会从session的属性"cs" 中获取到分类集合，并取第5个到第8个，一共4个来显示。 session的cs又是哪里放进去的呢？ 在后面的拦截器章节会讲到。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<div class="searchOutDiv">
<a href="${contextPath}">
<img id="logo" src="img/site/logo.gif" class="logo">
</a>
<form action="foresearch" method="post" >
<div class="searchDiv">
<input name="keyword" type="text" value="${param.keyword}" placeholder="时尚男鞋 太阳镜 ">
<button type="submit" class="searchButton">搜索</button>
<div class="searchBelow">
<c:forEach items="${cs}" var="c" varStatus="st">
<c:if test="${st.count>=5 and st.count<=8}">
<span>
<a href="forecategory?category.id=${c.id}">
${c.name}
</a>
<c:if test="${st.count!=8}">
<span>|</span>
</c:if>
</span>
</c:if>
</c:forEach>
</div>
</div>
</form>
</div>
这是首页业务页面，将在homePage.jsp中详细讲解，在此就不展开了。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<title>模仿天猫官网</title>
<div class="homepageDiv">
<%@include file="categoryAndcarousel.jsp"%>
<%@include file="homepageCategoryProducts.jsp"%>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <title>模仿天猫官网</title> <div class="homepageDiv"> <%@include file="categoryAndcarousel.jsp"%> <%@include file="homepageCategoryProducts.jsp"%> </div>
页脚部分,除了显示页脚的静态信息外，还包含了modal.jsp
这个modal.jsp里提供了两个模态窗口 1. 登录模态窗口 当用户在未登录状态，于产品页点击购买的时候会弹出 2. 删除模态窗口 当用户在我的订单页面,和购物车页面进行删除操作的时候，就会弹出模态删除窗口。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="modal.jsp" %>
<div id="footer" class="footer" style="display: block;">
<div id="footer_ensure" class="footer_ensure">
<a href="#nowhere">
<img src="img/site/ensure.png">
</a>
</div>
<div class="horizontal_line">
</div>
<div id="footer_desc" class="footer_desc">
<div class="descColumn">
<span class="descColumnTitle">购物指南</span>
<a href="#nowhere" >免费注册</a>
<a href="#nowhere" >开通支付宝</a>
<a href="#nowhere" >支付宝充值</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">天猫保障</span>
<a href="#nowhere" >发票保障</a>
<a href="#nowhere" >售后规则</a>
<a href="#nowhere" >缺货赔付</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">支付方式</span>
<a href="#nowhere" >快捷支付</a>
<a href="#nowhere" >信用卡</a>
<a href="#nowhere" >蚂蚁花呗</a>
<a href="#nowhere" >货到付款</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">商家服务</span>
<a href="#nowhere" >商家入驻</a>
<a href="#nowhere" >商家中心</a>
<a href="#nowhere" >天猫智库</a>
<a href="#nowhere" >天猫规则</a>
<a href="#nowhere" >物流服务</a>
<a href="#nowhere" >喵言喵语</a>
<a href="#nowhere" >运营服务</a>
</div>
<div class="descColumn">
<span class="descColumnTitle">手机天猫</span>
<a href="#nowhere" ><img src="img/site/ma.png"></a>
</div>
</div>
<div style="clear:both"></div>
<div id="copyright" class="copyright">
<div class="coptyrightMiddle">
<img id="cateye" class="cateye" src="img/site/cateye.png">
<div class="white_link" >
<a href="#nowhere" style="padding-left:0px" >关于天猫</a>
<a href="#nowhere" > 帮助中心</a>
<a href="#nowhere" >开放平台</a>
<a href="#nowhere" > 诚聘英才</a>
<a href="#nowhere" >联系我们</a>
<a href="#nowhere" >网站合作</a>
<a href="#nowhere" >法律声明</a>
<a href="#nowhere" >知识产权</a>
<a href="#nowhere" > 廉正举报 </a>
</div>
<div class="white_link" >
<a href="#nowhere" style="padding-left:0px"> 阿里巴巴集团</a><span class="slash">|</span>
<a href="#nowhere" > 淘宝网</a><span class="slash">|</span>
<a href="#nowhere" >天猫 </a><span class="slash">|</span>
<a href="#nowhere" > 聚划算</a><span class="slash">|</span>
<a href="#nowhere" >全球速卖通</a><span class="slash">|</span>
<a href="#nowhere" >阿里巴巴国际交易市场</a><span class="slash">|</span>
<a href="#nowhere" >1688</a><span class="slash">|</span>
<a href="#nowhere" >阿里妈妈</a><span class="slash">|</span>
<a href="#nowhere" > 阿里旅行·去啊 </a><span class="slash">|</span>
<a href="#nowhere" > 阿里云计算 </a><span class="slash">|</span>
<a href="#nowhere" > 阿里通信 </a><span class="slash">|</span>
<a href="#nowhere" > YunOS </a><span class="slash">|</span>
<a href="#nowhere" > 阿里旅行·去啊 </a><span class="slash">|</span>
<a href="#nowhere" > 万网 </a><span class="slash">|</span>
<a href="#nowhere" > 高德 </a><span class="slash">|</span>
<a href="#nowhere" > 优视 </a><span class="slash">|</span>
<a href="#nowhere" > 友盟 </a><span class="slash">|</span>
<a href="#nowhere" > 虾米 </a><span class="slash">|</span>
<a href="#nowhere" > 天天动听 </a><span class="slash">|</span>
<a href="#nowhere" > 来往 </a><span class="slash">|</span>
<a href="#nowhere" > 钉钉 </a><span class="slash">|</span>
<a href="#nowhere" > 支付宝 </a>
</div>
<div class="license">
<span>增值电信业务经营许可证： 浙B2-20110446</span>
<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
<div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
<div>
<img src="img/site/copyRight1.jpg">
<img src="img/site/copyRight2.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<div class="modal " id="loginModal" tabindex="-1" role="dialog" >
<div class="modal-dialog loginDivInProductPageModalDiv">
<div class="modal-content">
<div class="loginDivInProductPage">
<div class="loginErrorMessageDiv">
<div class="alert alert-danger" >
<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
<span class="errorMessage"></span>
</div>
</div>
<div class="login_acount_text">账户登录</div>
<div class="loginInput " >
<span class="loginInputIcon ">
<span class=" glyphicon glyphicon-user"></span>
</span>
<input id="name" name="name" placeholder="手机/会员名/邮箱" type="text">
</div>
<div class="loginInput " >
<span class="loginInputIcon ">
<span class=" glyphicon glyphicon-lock"></span>
</span>
<input id="password" name="password" type="password" placeholder="密码" type="text">
</div>
<span class="text-danger">不要输入真实的天猫账号密码</span><br><br>
<div>
<a href="#nowhere">忘记登录密码</a>
<a href="register.jsp" class="pull-right">免费注册</a>
</div>
<div style="margin-top:20px">
<button class="btn btn-block redButton loginSubmitButton" type="submit">登录</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="deleteConfirmModal" tabindex="-1" role="dialog" >
<div class="modal-dialog deleteConfirmModalDiv">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">确认删除？</h4>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
<button class="btn btn-primary deleteConfirmButton" id="submit" type="button">确认</button>
</div>
</div>
</div>
</div>
</div>
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
|
