how2j.cn

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

步骤 1 :

homePage.jsp 的复杂性

edit
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
步骤 2 :

homePage.jsp 所包含页面关系

edit
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
homePage.jsp 所包含页面关系
步骤 3 :

categoryAndcarousel.jsp

edit
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
categoryAndcarousel.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <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(){ $("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); }); </script> <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> <c:forEach items="${cs}" var="c" varStatus="st"> <c:if test="${st.count<=4}"> <span> <a href="forecategory?cid=${c.id}"> ${c.name} </a></span> </c:if> </c:forEach> </div> </div> <div style="position: relative"> <%@include file="categoryMenu.jsp" %> </div> <div style="position: relative;left: 0;top: 0;"> <%@include file="productsAsideCategorys.jsp" %> </div> <%@include file="carousel.jsp" %> <div class="carouselBackgroundDiv"> </div> </div>
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
categoryMenu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <div class="categoryMenu"> <c:forEach items="${cs}" var="c"> <div cid="${c.id}" class="eachCategory"> <span class="glyphicon glyphicon-link"></span> <a href="forecategory?cid=${c.id}"> ${c.name} </a> </div> </c:forEach> </div>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
	
<div class="categoryMenu">
		<c:forEach items="${cs}" var="c">
			<div cid="${c.id}" class="eachCategory">
				<span class="glyphicon glyphicon-link"></span>
				<a href="forecategory?cid=${c.id}">
					${c.name}
				</a>
			</div>
		</c:forEach>
	</div>  
步骤 5 :

productsAsideCategorys.jsp

edit
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
productsAsideCategorys.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <script> $(function(){ $("div.productsAsideCategorys div.row a").each(function(){ var v = Math.round(Math.random() *6); if(v == 1) $(this).css("color","#87CEFA"); }); }); </script> <c:forEach items="${cs}" var="c"> <div cid="${c.id}" class="productsAsideCategorys"> <c:forEach items="${c.productsByRow}" var="ps"> <div class="row show1"> <c:forEach items="${ps}" var="p"> <c:if test="${!empty p.subTitle}"> <a href="foreproduct?pid=${p.id}"> <c:forEach items="${fn:split(p.subTitle, ' ')}" var="title" varStatus="st"> <c:if test="${st.index==0}"> ${title} </c:if> </c:forEach> </a> </c:if> </c:forEach> <div class="seperator"></div> </div> </c:forEach> </div> </c:forEach>
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
carousel.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <div id="carousel-of-product" class="carousel-of-product carousel slide1" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-of-product" data-slide-to="0" class="active"></li> <li data-target="#carousel-of-product" data-slide-to="1"></li> <li data-target="#carousel-of-product" data-slide-to="2"></li> <li data-target="#carousel-of-product" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="carousel carouselImage" src="img/lunbo/1.jpg" > </div> <div class="item"> <img class="carouselImage" src="img/lunbo/2.jpg" > </div> <div class="item"> <img class="carouselImage" src="img/lunbo/3.jpg" > </div> <div class="item"> <img class="carouselImage" src="img/lunbo/4.jpg" > </div> </div> <!-- Controls --> <!-- <a class="left carousel-control" href="#carousel-of-product" role="button" data-slide="prev"> --> <!-- <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> --> <!-- </a> --> <!-- <a class="right carousel-control" href="#carousel-of-product" role="button" data-slide="next"> --> <!-- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> --> <!-- </a> --> </div>
步骤 7 :

homepageCategoryProducts.jsp

edit
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
homepageCategoryProducts.jsp
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <c:if test="${empty param.categorycount}"> <c:set var="categorycount" scope="page" value="100"/> </c:if> <c:if test="${!empty param.categorycount}"> <c:set var="categorycount" scope="page" value="${param.categorycount}"/> </c:if> <div class="homepageCategoryProducts"> <c:forEach items="${cs}" var="c" varStatus="stc"> <c:if test="${stc.count<=categorycount}"> <div class="eachHomepageCategoryProducts"> <div class="left-mark"></div> <span class="categoryTitle">${c.name}</span> <br> <c:forEach items="${c.products}" var="p" varStatus="st"> <c:if test="${st.count<=5}"> <div class="productItem" > <a href="foreproduct?pid=${p.id}"><img width="100px" src="img/productSingle_middle/${p.firstProductImage.id}.jpg"></a> <a class="productItemDescLink" href="foreproduct?pid=${p.id}"> <span class="productItemDesc">[热销] ${fn:substring(p.name, 0, 20)} </span> </a> <span class="productPrice"> <fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2"/> </span> </div> </c:if> </c:forEach> <div style="clear:both"></div> </div> </c:if> </c:forEach> <img id="endpng" class="endpng" src="img/site/end.png"> </div>
增值内容,请先登录
完整的SSM模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE,SSM一整套技术栈, 从无到有涵盖全部126个知识点,560个开发步骤, 充实SSM项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢


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


问答区域    
2021-04-20 图片加载不出来
生若夏花




把图片都导入了,还是加载不出来,咋回事啊
加载中

							

							


1 个答案

how2j
答案时间:2021-04-21
是不是导入错地方了? 看看视频里是怎么做的,参考一下



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





2021-03-04 主页商品图片加载不出来
裴立营




找了好长时间,也对比了源文件,就是这个图片加载不出来,源文件就可以加载出来
加载中

							

							


2 个答案

生若夏花
答案时间:2021-04-20
请问你图片有加载出来吗,我图片都导入了 还是加载不出来

how2j
答案时间:2021-03-07
是不是没有图片啊,要在这个步骤把图片导入进去才是: https://how2j.cn/k/tmall_ssm/tmall_ssm-1488/1488.html



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





2020-11-05 为什么我的menu不显示呢,,都是粘过来的代码
2020-09-09 <c:if test="${empty param.categorycount}">
2020-05-30 没有导航栏也没有显示商品,这是咋回事啊


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 26 条以前的提问,请 点击查看

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

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

上传截图