天猫整站（简易版）SSM（六）无需登录即可使用的功能

首页

目录

一、所需的数据

二、Category

三、ProductService

四、ProductServiceImpl

五、ForeController

六、home.jsp

6.1 包含的页面

6.2 header.jsp

6.3 top.jsp

6.4 search.jsp

6.5 fotter.jsp

6.6 homePage.jsp

6.6.1 包含关系

6.6.2 categoryAndcarousel.jsp

6.6.3 categoryMenu.jsp

6.6.4 productsAsideCategorys.jsp

6.6.5 carousel.jsp

6.6.6 homepageCategoryProducts.jsp

---

一、所需的数据

那么首页需要什么数据呢？ 
1. 在横向导航栏上提供4个分类连接 
2. 在纵向导航栏上提供全部17个分类连接 
3. 当鼠标移动到某一个纵向分类连接的时候，显示这个分类下的推荐产品列表 
4. 按照每种分类显示5个商品的方式，显示所有17种分类 
注：推荐产品列表就是如图所示的一个分类右边的产品列表。

二、Category

Category新增两个瞬时字段products和productsByRow。

List<Product> products;

List<List<Product>> productsByRow;

products：代表一个分类下有多个产品。
productsByRow：这个属性的类型是List<List<Product>> productsByRow。即一个分类又对应多个 List<Product>，提供这个属性，是为了在首页竖状导航的分类名称右边显示推荐产品列表。如下图所示，一个分类会对应多行产品，而一行产品里又有多个产品记录。为了实现界面上的这个功能，为Category类设计了List<List<Product>> productsByRow这样一个集合属性。

package com.li.tmall.pojo;

import javax.persistence.Transient;
import java.util.List;

public class Category {
    private Integer id;

    private String name;

    /**
     * 在前端展示分类时，要同时获取分类下的所有产品信息
     */
    @Transient
    private List<Product> products;

    /**
     * 在前端导航栏里，点击对应的分类右侧会显示推荐商品列表
     */
    @Transient
    private List<List<Product>> productsRow;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name == null ? null : name.trim();
    }

    public List<Product> getProducts() {
        return products;
    }

    public void setProducts(List<Product> products) {
        this.products = products;
    }

    public List<List<Product>> getProductsRow() {
        return productsRow;
    }

    public void setProductsRow(List<List<Product>> productsRow) {
        this.productsRow = productsRow;
    }

    @Override
    public String toString() {
        return "Category{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", products=" + products +
                ", productsRow=" + productsRow +
                '}';
    }
}

三、ProductService

ProductService新增加3个方法

public void fill(List<Category> categorys);

public void fill(Category category);

public void fillByRow(List<Category> categorys);

四、ProductServiceImpl

ProductServiceImpl为ProductService中新增加的三个方法提供实现。
1. 为分类填充产品集合

public void fill(Category category);

2. 为多个分类填充产品集合

public void fill(List<Category> categorys);

3.为多个分类填充推荐产品集合，即把分类下的产品集合，按照8个为一行，拆成多行，以利于后续页面上进行显示

public void fillByRow(List<Category> categorys);

    /**
     * 为多个分类填充产品集合
     * @param categories
     */
    @Override
    public void fill(List<Category> categories) {
        for (Category category : categories){
            fill(category);
        }
    }

    /**
     * 为分类填充产品集合
     * @param category
     */
    @Override
    public void fill(Category category) {
        List<Product> products = list(category.getId());
        category.setProducts(products);
    }


    /**
     * 为多个分类填充推荐产品集合，即把分类下的产品集合，按照8个为一行，拆成多行，以利于后续页面上进行显示
     * @param categories
     */
    @Override
    public void fillByRow(List<Category> categories) {
        int productNumEachRow = 8;
        for (Category category : categories){
            List<Product> products = category.getProducts();
            List<List<Product>> productRow = new ArrayList<>();
            for (int i = 0; i < products.size(); i += productNumEachRow){
                int size = i + productNumEachRow;
                size = size > products.size() ? products.size() : size;
                List<Product> temp = products.subList(i,size);
                productRow.add(temp);
            }
            category.setProductsRow(productRow);
        }
    }

五、ForeController

home()方法映射首页访问路径 "forehome".
1. 查询所有分类
2. 为这些分类填充产品集合
3. 为这些分类填充推荐产品集合
4. 服务端跳转到home.jsp

    @RequestMapping("forehome")
    public String home(Model model) {
        List<Category> cs= categoryService.list();
        productService.fill(cs);
        productService.fillByRow(cs);
        model.addAttribute("cs", cs);
        return "fore/home";
    }

六、home.jsp

6.1 包含的页面

根据前台页面的特点，把home.jsp设计成如代码所示。
1. header.jsp
引入标准标签库，js,css，自定义javascript函数等
2. top.jsp
置顶导航
3. search.jsp
搜索栏
4. homePage.jsp
首页业务页面
5. footer.jsp
页脚

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="../include/fore/header.jsp"%>
<%@include file="../include/fore/top.jsp"%>
<%@include file="../include/fore/search.jsp"%>
<%@include file="../include/fore/home/homePage.jsp"%>
<%@include file="../include/fore/footer.jsp"%>

6.2 header.jsp

header.jsp 做了如下工作
1. 声明为html5格式

<!DOCTYPE html>
2.让浏览器以UTF显示中文，本页面的中文文字采用UTF-8编码，启动EL表达式 

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8" isELIgnored="false"%>
3. 引入标准标签库

<%@ 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" %>
c通常用于条件判断和遍历
fmt用于格式化日期和货币
fn用于校验长度
4. 引入bootstrap和jquery

<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>
5. 自定义前端样式

<link href="css/fore/style.css" rel="stylesheet">
除了轮播和图标，前端几乎没用Bootstrap中的样式，所有的自定义样式都在这个文件里。
6. 各种自定义函数和事件监听。
 

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>



<html>

<head>
	<script src="${pageContext.request.contextPath}/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="${pageContext.request.contextPath}/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="${pageContext.request.contextPath}/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<link href="${pageContext.request.contextPath}/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>

6.3 top.jsp

置顶导航页面,这里会根据用户是否登录，决定是否显示退出按钮，或者登录注册按钮，以及购物车中的商品数量

<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" isELIgnored="false"%>

<nav class="top ">
	<a href="forehome">
		<span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-home redColor"></span>
		天猫首页
	</a>

	<span>喵，欢迎来天猫</span>

	<c:if test="${!empty user}">
		<a href="loginPage">${user.name}</a>
		<a href="forelogout">退出</a>
	</c:if>

	<c:if test="${empty user}">
		<a href="loginPage">请登录</a>
		<a href="registerPage">免费注册</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>

6.4 search.jsp

这里会从request的属性"cs" 中获取到分类集合，并取第5个到第8个，一共4个来显示。

<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" isELIgnored="false"%>

<a href="${contextPath}/forehome">
	<img id="logo" src="${pageContext.request.contextPath}/img/site/logo.gif" class="logo">
</a>

<form action="foresearch" method="post" >
	<div class="searchDiv">
		<input name="keyword" type="text" value="${param.keyword}" 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.5 fotter.jsp

页脚部分,除了显示页脚的静态信息外，还包含了modal.jsp
这个modal.jsp里提供了两个模态窗口
1. 登录模态窗口
当用户在未登录状态，于产品页点击购买的时候会弹出
2. 删除模态窗口
当用户在我的订单页面,和购物车页面进行删除操作的时候，就会弹出模态删除窗口。

<%@ 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="${pageContext.request.contextPath}/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="${pageContext.request.contextPath}/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="${pageContext.request.contextPath}/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">&copy; 2003-2016 TMALL.COM 版权所有</div>
				<div>
					<img src="${pageContext.request.contextPath}/img/site/copyRight1.jpg">
					<img src="${pageContext.request.contextPath}/img/site/copyRight2.jpg">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

6.6 homePage.jsp

<%@ 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>

在homePage中要显示如下内容

• 天猫超市连接右侧有4个分类数据
• 竖状导航栏显示17个分类数据
• 每个分类又再对应不同的推荐产品集合
• 中部会显示17个分类
• 每个分类又显示前5款产品
• 每款产品又会显示第一张图片，标题，价格等信息

倘若把这些功能都在一个jsp中开发出来看，那么这个jsp就会变得非常的长，并且难以维护和扩展。在这里，就可以借鉴home.jsp的思路，把一个大的页面，拆成各个小的jsp，这样维护起来就相对容易了。

6.6.1 包含关系

1. categoryAndcarousel.jsp分类和轮播

• categoryMenu.jsp竖状分类菜单
• productsAsideCategorys.jsp竖状分类菜单右侧的推荐产品列表
• carousel.jsp轮播

2. homepageCategoryProducts.jsp总体17种分类以及每种分类对应的5个产品

<%@ 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>

6.6.2 categoryAndcarousel.jsp

categoryAndcarousel.jsp 页面利用ForeController传递过来的数据，天猫国际几个字旁边显示4个分类超链
另外包含了其他3个页面：
categoryMenu.jsp
productsAsideCategorys.jsp
carousel.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="${pageContext.request.contextPath}/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="${pageContext.request.contextPath}/img/site/chaoshi.png"/></a></span>
		<span><a href=""><img src="${pageContext.request.contextPath}/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>

6.6.3 categoryMenu.jsp

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>  

6.6.4 productsAsideCategorys.jsp

productsAsideCategorys.jsp 进行了三层遍历
1. 先取出每个分类
2. 然后取出每个分类的productsByRow集合
3. 根据productsByRow集合，取出每个产品，把产品的subTitle信息里的第一个单词取出来显示。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<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.productsRow}" 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>
	

6.6.5 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="${pageContext.request.contextPath}/img/lunbo/1.jpg" >
    </div>
    <div class="item">
      <img  class="carouselImage" src="${pageContext.request.contextPath}/img/lunbo/2.jpg" >
    </div>
    <div class="item">
		<img  class="carouselImage" src="${pageContext.request.contextPath}/img/lunbo/3.jpg" >
    </div>

    <div class="item">
        <img  class="carouselImage" src="${pageContext.request.contextPath}/img/lunbo/4.jpg" >
    </div>

  </div>
  
</div>	

6.6.6 homepageCategoryProducts.jsp

homepageCategoryProducts.jsp 进行了2次遍历
1. 遍历所有的分类，取出每个分类对象
2. 遍历分类对象的products集合，取出每个产品，然后显示该产品的标题，图片，价格等信息

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<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="${pageContext.request.contextPath}/img/productSingle_middle/${p.productImage.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="${pageContext.request.contextPath}/img/site/end.png">

</div>