how2j.cn


5分15秒
本视频采用html5方式播放,如无法正常播放,请将浏览器升级至最新版本,推荐火狐,chrome,360浏览器 如果装有迅雷,播放视频呈现直接下载状态,请调整 迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)

步骤 1 : 前台页面的特点   
步骤 2 : home.html 所包含页面   
步骤 3 : header.html   
步骤 4 : top.html   
步骤 5 : search.html   
步骤 6 : homePage.html   
步骤 7 : footer.html   

步骤 1 :

前台页面的特点

观察模仿天猫前端,可以发现前台页面有如下特点:
1. 有共同的置顶导航
2. 有共同的搜索栏
3. 有共同的页脚

根据这样的特点,在设计前台 html 页面的时候,就制作了很多公共页面,其他前台页面就共享这些公共页面,使得开发和维护成本降低不少
步骤 2 :

home.html 所包含页面

根据前台页面的特点,我们把home.html设计成如代码所示。
1. header.html
引入标准标签库,js,css,自定义javascript函数等
2. top.html
置顶导航
3. search.html
搜索栏
4. homePage.html
首页业务页面
5. footer.html
页脚
home.html 所包含页面
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="include/fore/header::html" ></head> <body> <div id="workingArea"> <div th:replace="include/fore/top::html" ></div> <div th:replace="include/fore/search::html" ></div> <div th:replace="include/fore/home/homePage::html" ></div> <div th:replace="include/fore/footer::html" ></div> </div> </body> </html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/header::html" ></head>
<body>
<div id="workingArea">
    <div th:replace="include/fore/top::html" ></div>
    <div th:replace="include/fore/search::html" ></div>
    <div th:replace="include/fore/home/homePage::html" ></div>
    <div th:replace="include/fore/footer::html" ></div>
</div>
</body>
</html>
步骤 3 :

header.html

1. 引入各种js 和css

<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>
<script src="js/vue/2.5.16/vue.min.js"></script>
<script src="js/axios/0.17.1/axios.min.js"></script>
<script src="js/moment/2.22.2/moment.js"></script>
<link href="css/fore/style.css" rel="stylesheet">

jquery, bootstrap, vue, axios 这几个是常用的,后台都用过了的。 moment 这个是日期格式化, fore/style.css 是前台页面的样式。 这些样式的详细讲解放在 天猫前端项目里单独讲解,有兴趣夯实前端基础的同学可以访问 : 天猫前端项目

2. 自定义函数
getUrlParms: 用于获取页面参数
formatMoney: 格式化金额
checkEmpty: 判断是否为空
linkDefaultActions: 给超链加上默认的监听。

3. Vue 全局拦截器
Vue.filter("subStringFilter" ... :用于字符串截取
Vue.filter("formatMoneyFilter" ... :用于格式化金额
Vue.filter('formatDateFilter' ... :格式化日期

4. 指定编码方式为 UTF-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


其中的3和4,是每个页面都会声明,方便页面逻辑上进行调用
<template th:fragment="html"> <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> <script src="js/vue/2.5.16/vue.min.js"></script> <script src="js/axios/0.17.1/axios.min.js"></script> <script src="js/moment/2.22.2/moment.js"></script> <link href="css/fore/style.css" rel="stylesheet"> <script> function getUrlParms(para){ var search=location.search; //页面URL的查询部分字符串 var arrPara=new Array(); //参数数组。数组单项为包含参数名和参数值的字符串,如“para=value” var arrVal=new Array(); //参数值数组。用于存储查找到的参数值 if(search!=""){ var index=0; search=search.substr(1); //去除开头的“?” arrPara=search.split("&"); for(i in arrPara){ var paraPre=para+"="; //参数前缀。即参数名+“=”,如“para=” if(arrPara[i].indexOf(paraPre)==0&& paraPre.length<arrPara[i].length){ arrVal[index]=decodeURI(arrPara[i].substr(paraPre.length)); //顺带URI解码避免出现乱码 index++; } } } if(arrVal.length==1){ return arrVal[0]; }else if(arrVal.length==0){ return null; }else{ return arrVal; } } function formatMoney(num){ num = new String(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 linkDefaultActions(){ $("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("这个功能没做,蛤蛤~"); }); } Vue.filter("subStringFilter", function(value, start, end){ if (!value) return ''; return value.substring(start,end); }); Vue.filter("formatMoneyFilter", function(value){ return formatMoney(value); }); Vue.filter('formatDateFilter', function (value, formatString) { if(null==value) return ""; formatString = formatString || 'YYYY-MM-DD HH:mm:ss'; return moment(value).format(formatString); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </template>
步骤 4 :

top.html

置顶导航页面
这里会根据用户是否登录,决定是否显示退出按钮,或者登录注册按钮,以及购物车中的商品数量
其中 application.contextPath 会在其他拦截器 中讲解, session.user 会在 登录状态拦截器
top.html
<nav class="top" th:fragment="html"> <a th:href="${application.contextPath}"> <span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-home redColor"></span> 天猫首页 </a> <span>喵,欢迎来天猫</span> <span th:if="${null!=session.user}"> <a href="login" th:text="${session.user.name}"></a> <a href="forelogout" >退出</a> </span> <span th:if="${null==session.user}"> <a href="login">请登录</a> <a href="register">免费注册</a> </span> <span class="pull-right"> <a href="bought">我的订单</a> <a href="cart"> <span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-shopping-cart redColor"></span> 购物车<strong th:text="${session.cartTotalItemNumber}"></strong>件</a> </span> </nav>
步骤 5 :

search.html

其中 application.categories_below_search 会在其他拦截器 中讲解, session.user 会在 登录状态拦截器
search.html
<div class th:fragment="html"> <a th:href="${application.contextPath}"> <img id="logo" src="img/site/logo.gif" class="logo"> </a> <form action="search" method="get" > <div class="searchDiv"> <input name="keyword" type="text" placeholder="时尚男鞋 太阳镜 "> <button type="submit" class="searchButton">搜索</button> <div class="searchBelow"> <span th:each="c,status: ${application.categories_below_search}" th:if="${status.index>=5 && status.index<=8}"> <a th:href="@{'category?cid='+${c.id}}" th:text="${c.name}" ></a> <span th:if="${status.index!=8}">|</span> </span> </div> </div> </form> </div>
<div class th:fragment="html">
    <a th:href="${application.contextPath}">
        <img id="logo" src="img/site/logo.gif" class="logo">
    </a>
    <form action="search" method="get" >
        <div class="searchDiv">
            <input name="keyword" type="text" placeholder="时尚男鞋  太阳镜 ">
            <button  type="submit" class="searchButton">搜索</button>
            <div class="searchBelow">
				<span th:each="c,status: ${application.categories_below_search}" th:if="${status.index>=5 && status.index<=8}">
					<a th:href="@{'category?cid='+${c.id}}" th:text="${c.name}" ></a>
					<span th:if="${status.index!=8}">|</span>
	            </span>

            </div>
        </div>
    </form>
</div>
步骤 6 :

homePage.html

这是首页业务页面,将在homePage.html中详细讲解,在此就不展开了。
<div th:fragment="html"> <script> function showProductsAsideCategorys(cid){ $("div.eachCategory[cid="+cid+"]").css("background-color","white"); $("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA"); $("div.productsAsideCategorys[cid="+cid+"]").show(); } function hideProductsAsideCategorys(cid){ $("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3"); $("div.eachCategory[cid="+cid+"] a").css("color","#000"); $("div.productsAsideCategorys[cid="+cid+"]").hide(); } function homePageRegisterListeners(){ $("div.eachCategory").mouseenter(function(){ var cid = $(this).attr("cid"); showProductsAsideCategorys(cid); }); $("div.eachCategory").mouseleave(function(){ var cid = $(this).attr("cid"); hideProductsAsideCategorys(cid); }); $("div.productsAsideCategorys").mouseenter(function(){ var cid = $(this).attr("cid"); showProductsAsideCategorys(cid); }); $("div.productsAsideCategorys").mouseleave(function(){ var cid = $(this).attr("cid"); hideProductsAsideCategorys(cid); }); $("div.rightMenu span").mouseenter(function(){ var left = $(this).position().left; var top = $(this).position().top; var width = $(this).css("width"); var destLeft = parseInt(left) + parseInt(width)/2; $("img#catear").css("left",destLeft); $("img#catear").css("top",top-20); $("img#catear").fadeIn(500); }); $("div.rightMenu span").mouseleave(function(){ $("img#catear").hide(); }); var left = $("div#carousel-of-product").offset().left; $("div.categoryMenu").css("left",left-20); $("div.categoryWithCarousel div.head").css("margin-left",left); $("div.productsAsideCategorys").css("left",left-20); $("div.productsAsideCategorys div.row a").each(function(){ var v = Math.round(Math.random() *6); if(v == 1) $(this).css("color","#87CEFA"); }); } $(function(){ var data4Vue = { uri:'forehome', categories: [] }; //ViewModel var vue = new Vue({ el: '#workingArea', data: data4Vue, mounted:function(){ //mounted 表示这个 Vue 对象加载成功了 linkDefaultActions(); this.load(); }, methods: { load:function(){ var url = this.uri; axios.get(url).then(function(response) { vue.categories = response.data; vue.$nextTick(function(){ //要等渲染结束之后,才来进行监听,否则他们都没有被创建出来,监听也没有意义呀 homePageRegisterListeners(); }) }); } }, filters:{ subTitleFilter:function(value) { if (!value) return ''; //如果为空,则返回空字符串 return value.split(" ")[0]; //根据空格拆分,并且只获取数组第一个值 } } }); }); </script> <title>模仿天猫官网</title> <div class="homepageDiv"> <div th:replace="include/fore/home/categoryAndcarousel::html" ></div> <div th:replace="include/fore/home/homepageCategoryProducts::html" ></div> </div> </div>
步骤 7 :

footer.html

页脚部分
footer.html
<div th:fragment="html"> <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> <div th:fragment="html">


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 实践项目-天猫整站Springboot-home.html 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图