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 :

前台页面的特点

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
步骤 2 :

home.html 所包含页面

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
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>
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<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>
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
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>
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
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>
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<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>
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-05-10 首页的logo,在手机浏览器显示位置会偏移,请问这个如何解决?
啊啊啊大撒



首页的logo,在手机浏览器显示位置会偏移,请问这个如何解决?

							

							


3 个答案

how2j 答案时间:2019-05-12
哦,那么把这个决定定位的图片的 z-index设置为0, 放在下面试试?

啊啊啊大撒 答案时间:2019-05-11
你代码就是绝对定位啊。
你代码就是绝对定位啊。

how2j 答案时间:2019-05-11
把logo修改成绝对定位试试?



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-04-26 站长,我的top页分别在两边,没有在中间,代码和你的是一样的,请问是什么原因?谢谢。
咸鱼搬砖



站长,我的top页分别在两边,没有在中间,代码和你的是一样的,请问是什么原因?谢谢。

							

							


1 个答案

how2j 答案时间:2019-04-26
那就肯定是代码不一样嘛。 请比较可运行项目,哪里不一样呢: http://how2j.cn/k/tmall_springboot/tmall_springboot-1862/1862.html



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-04-26 站长你好,这个值从没太明白,从哪里传过来的




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫整站Springboot-home.html 的提问

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

上传截图