how2j.cn

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

步骤 1 :

前台页面的特点

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

home.jsp 所包含页面

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

header.jsp

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

top.jsp

edit 顶 折
纠 问
增值内容，请先登录
完整的J2EE模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈， 从无到有涵盖全部147个知识点，475个开发步骤, 充实J2EE项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <nav class="top "> <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> </nav>
步骤 5 :

search.jsp

edit 顶 折
纠 问
增值内容，请先登录
完整的J2EE模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈， 从无到有涵盖全部147个知识点，475个开发步骤, 充实J2EE项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <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" 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?cid=${c.id}"> ${c.name} </a> <c:if test="${st.count!=8}"> <span>|</span> </c:if> </span> </c:if> </c:forEach> </div> </div> </form>
步骤 6 :

homePage.jsp

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

footer.jsp

edit 顶 折
纠 问
增值内容，请先登录
完整的J2EE模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈， 从无到有涵盖全部147个知识点，475个开发步骤, 充实J2EE项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
footer.jsp
<%@ 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 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> <img id="cateye" class="cateye" src="img/site/cateye.png"> <div id="copyright" class="copyright"> <div class="white_link" > <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> <a href="#nowhere" > 廉正举报 </a> </div> <div class="white_link" > <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" >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> </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公众号，关注后实时获知最新的教程和优惠活动，谢谢。


问答区域    
2020-08-08 这里img的路径没搞清楚
伽椰子的呃呃

关于 实践项目-天猫整站J2EE-home.jsp 的提问



这里的img的当前路径不是footer.jsp的文件夹么？是怎么访问到的？能讲讲路径的概念么，不太清楚
加载中 

							

						

								
						

							

								

							

						
				
					
						
			

		

	
		











1 个答案 
	

	
	

		
		


				
				
		
		
		
				伽椰子的呃呃 
					

					
				
				

				
				
					答案时间：2020-08-09
				
				
				
		
		
			
解决了，是include的原因，在根路径下的jsp包含了include文件下的东西， 访问img文件就不用../了

		

							
		
		
		
		
	
	
	












	






		
		
		
		
		














	

		回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢	
	






		

		

		答案 或者
		代码
			 请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
		

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2020-01-09
	  		
	  				
	  					 
	  
					
						为什么预加载的都是同一张图片？ 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  

	    
		

			

				
				
					
					
					
					
					
					LZPsss 
					
					

					
					
					
					


						
				
				
					
						
关于
							
							
								
									 
									实践项目-天猫整站J2EE-home.jsp
									
								
							
							 的提问
						

 					
					
					
					
					

					

					
									
						

						

							
站长大大，为什么预加载的都是8891.jpg这一张图片？
按照逻辑来说，不是应该会遍历5张小图的bigImage的属性，预加载5张大图在div.img4load中吗？还请解答，感谢！

								
						
		
						

								
									
								
									
										

										
											加载中
										
										
										
									
								
						
		
						

							

								
$("img.bigImg").load(
            function(){
                $("img.smallImage").each(function(){
                    var bigImageURL = $(this).attr("bigImageURL");
                    img = new Image();
                    img.src = bigImageURL;
                    
                    img.onload = function(){
                        console.log(bigImageURL);	
                        $("div.img4load").append($(img));
                    };
                });		
            }
        );

							

						

								
						

							

								

							

						
				
					
						
			

		

	
		











1 个答案 
	

	
	

		
		


				
				
		
		
		
				how2j 
					

					
				
				

				
				
					答案时间：2020-01-09
				
				
				
		
		
			
这里看到的图片都是 8891，是因为最后呈现的html dom 结果是这样，并不等于过程都是 8891。
在f12, network, all 里，重新刷新页面可以观察到对不同图片的预加载。

		

							
		
		
		
		
	
	
	












	






		
		
		
		
		














	

		回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢	
	






		

		

		答案 或者
		代码
			 请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到
		

		
		

		

			

				
				
					
					

						
			

			

				
				
					
					

						
			

		

		
			
		

			
			

			
		

		
					
	


			







		
	
		
		
		
			

			

		
		
	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2019-10-25
	  		
	  				
	  					 
	  
					
						header.jsp  的 function formatMoney(num) 函数是干什么的啊？ 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2019-10-21
	  		
	  				
	  					 
	  
					
						top.jsp内右上角统计购物车商品数量的方法如何实现 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	

	
	
	


	

	  

	  		
	  
	  	2019-10-11
	  		
	  				
	  					 
	  
					
						modal 
					
					
						
							
						
											
							
					
					

					
	  

	  
	  
	  	    
	    
	  

	

	
	
	
	






	






			
			
			
			
			









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


			













		

			
		

		

			
			提问之前请登陆
			
		





	

		提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢	
	






		

		
关于
		 
		实践项目-天猫整站J2EE-home.jsp 
		
		 的提问

		

		
		
		

		
尽量提供截图、代码和异常信息，有助于分析和解决问题。
		
		
		
		
			也可进本站QQ群交流: 578362961
			


				提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。

				对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度 

				在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。

				请使用和站长一样的版本，可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了，都统一放在了这里， 方便大家下载：
				https://how2j.cn/k/helloworld/helloworld-version/1718.html
				 
				
				
				
				 



			

		 
		
		
		
		

		

		

			

				
					
						上传截图