how2j.cn


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

步骤 1 : homePage.html 的复杂性   
步骤 2 : homePage.html 代码讲解   
步骤 3 : homePage.html 所包含页面关系   
步骤 4 : categoryAndcarousel.html   
步骤 5 : categoryMenu.html   
步骤 6 : productsAsideCategorys.html   
步骤 7 : carousel.html   
步骤 8 : homepageCategoryProducts.html   
步骤 9 : 总结   

步骤 1 :

homePage.html 的复杂性

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

homePage.html 代码讲解

edit
增值内容,请先登录
完整的 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>
步骤 3 :

homePage.html 所包含页面关系

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

categoryAndcarousel.html

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,564个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
categoryAndcarousel.html
<div th:fragment="html"> <img src="img/site/catear.png" id="catear" class="catear"/> <div class="categoryWithCarousel"> <div class="headbar show1"> <div class="head "> <span style="margin-left:10px" class="glyphicon glyphicon-th-list"></span> <span style="margin-left:10px" >商品分类</span> </div> <div class="rightMenu"> <span><a href=""><img src="img/site/chaoshi.png"/></a></span> <span><a href=""><img src="img/site/guoji.png"/></a></span> <span v-for="c,index in categories" v-if='index<=3'> <a :href="'category?cid='+c.id">{{c.name}}</a> </span> </div> </div> <div style="position: relative"> <div th:replace="include/fore/home/categoryMenu::html" ></div> </div> <div style="position: relative;left: 0;top: 0;"> <div th:replace="include/fore/home/productsAsideCategorys::html" ></div> </div> <div th:replace="include/fore/home/carousel::html" ></div> <div class="carouselBackgroundDiv"> </div> </div> </div>
步骤 5 :

categoryMenu.html

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