目录
6.6.4 productsAsideCategorys.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">© 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>