javaWeb实战教程

---

7.商品模块的开发

商品模块分为商品列表和商品详细两个页面，其中商品列表可以按照商品分类筛选，还可以按照多种方法排序；商品详细除了有这个商品的信息外，还推荐了几个商品。

根据数据库新建Product.java:

public class Product {private int id;private String name;private String des;private double price;private double oldprice;private int stock;private String pic1;private String pic2;private String pic3;private String pic4;private String txt;private int click;private int rank;private int claszId;
}

其中click是商品的点击量，点击量越高说明人气越高；rank是商品的排序等级，rank越高排序越靠前；claszId是外键clasz的主键id。

---

7.1 商品列表页面

商品列表页面是通过页头的分类点击进来的，所以商品列表按照分类进行筛选；其次商品列表根据综合排序、价格、人气、上架时间进行排序；商品列表还带分页功能，可以显示一共有多少条数据。

根据这些需求，我们一步步来编码实现。

---

7.1.1 dao的实现

新建ProductDao.java，在里面写上方法：

public List<Product> getListByClaszId(int claszId, String orderby, boolean isDesc, int page, int max)
public int getListCountByClaszId(int claszId)

getListByClaszId是根据clasz的id，按照orderby进行排序的方法，这涉及到sql语句的拼接：

StringBuffer sqlBuffer = new StringBuffer();
sqlBuffer.append("select * from Product ");
if (claszId > 0)sqlBuffer.append(" where claszId=? ");
sqlBuffer.append(" order by ");
sqlBuffer.append(orderby);
if (isDesc)sqlBuffer.append(" desc");
sqlBuffer.append(" limit ?,?");

最后发起查询：

Object[] params = null;
if (claszId > 0) {params = new Object[] { claszId, (page - 1) * max, max };
} else {params = new Object[] { (page - 1) * max, max };
}return new QueryRunner().query(connection, sqlBuffer.toString(),new BeanListHandler<>(Product.class), params);

getListCountByClaszId方法是根据clasz的id来查询商品总数：

public int getListCountByClaszId(int claszId) throws SQLException {return new QueryRunner().query(connection,"select count(*) from product where claszId=?",new ScalarHandler<Long>(), claszId).intValue();}

---

7.1.2 service的实现

这里并没有什么义务逻辑，主要是数据库查询，直接调用productDao：

public List<Product> getListByClaszId(int claszId, String orderby, int page, int max) {Connection connection = DBUtil.getConnection();productDao.setConnection(connection);try {return productDao.getListByClaszId(claszId, orderby,orderby.equals("price") ? false : true, page, max);} catch (Exception e) {throw new RuntimeException(e);} finally {DBUtil.close(connection);}
}public int getListCountByClaszId(int typeId) {Connection connection = DBUtil.getConnection();productDao.setConnection(connection);try {return productDao.getListCountByClaszId(typeId);} catch (Exception e) {throw new RuntimeException(e);} finally {DBUtil.close(connection);}
}

---

7.1.3 servlet的实现

新建ProductServlet.java，写上list方法来展示列表页面；商品列表的访问是/product/list?page=1&claszId=1&orderby=rank,其中page代表页码、claszId代表商品分类id、orderby是排序方法，从request中取出这些值：

int page = request.getParameter("page") == null ? 1 : Integer.parseInt(request.getParameter("page"));
int max = 20;
String orderby = request.getParameter("orderby") == null ? "rank" : request.getParameter("orderby");
int claszId = Integer.parseInt(request.getParameter("claszId"));

根据取到的值从serice层请求商品列表和商品总数：

List<Product> list = productService.getListByClaszId(claszId, orderby, page, max);
int count = productService.getListCountByClaszId(claszId);

最后根据总数和每页数量计算最大的页码：

int maxPage = (count - count % max) / max + ((count % max) == 0 ? 0 : 1);

将这些值都放到request.setAttribute中传给jsp页面展示：

request.setAttribute("page", page);
request.setAttribute("max", max);
request.setAttribute("orderby", orderby);
request.setAttribute("claszId", claszId);
request.setAttribute("list", list);
request.setAttribute("count", count);
request.setAttribute("maxPage", maxPage);

跳转到前台jsp：

request.getRequestDispatcher("/WEB-INF/jsp/products.jsp").forward(request,response);

---

7.1.4 jsp的实现

新建products.jsp，将静态页面中的代码复制过来：

<div class="fy-list-top"><a class="active">综合排序<icon></icon></a><a>价格<icon></icon></a><a>人气<icon></icon></a><a>上架时间<icon></icon></a><a class="right">下一页</a><a class="right">上一页</a><span class="right">共16件商品,第1/2页</span>
</div><div class="fy-list"><a><img src="img/product_1.jpg" /><span class="title">九三非转基因灵芝豆奶粉500g</span><span class="price">￥21.80</span></a>
</div>

使用el和jstl标签展示数据：

<div class="fy-list-top"><a href="product/list?claszId=${claszId }&orderby=rank" class="${orderby=='rank'?'active':''}">综合排序<icon></icon></a><a href="product/list?claszId=${claszId}&orderby=price" class="${orderby=='price'?'active':''}">价格<icon></icon></a><a href="product/list?claszId=${claszId }&orderby=click" class="${orderby=='click'?'active':''}">人气<icon></icon></a><a href="product/list?claszId=${claszId }&orderby=id" class="${orderby=='id'?'active':''}">上架时间<icon></icon></a><a href="product/list?claszId=${claszId }&orderby=${orderby}&page=${(page+1)>maxPage?maxPage:(page+1)}" class="right">下一页</a><a href="product/list?claszId=${claszId }&orderby=${orderby}&page=${(page-1)<1?1:(page-1)}" class="right">上一页</a><span class="right">共${count }件商品,第${page }/${maxPage }页</span>
</div><div class="fy-list"><c:forEach items="${list}" var="p"><a href="product/detail?id=${p.id }"><img src="${p.pic1 }" /><span class="title">${p.name }</span><span class="price">${p.price }</span></a></c:forEach></div>

---

7.2 商品详细页面

商品详细页面展示了特定商品的详细信息和同类型的商品推荐。

7.2.1 dao的实现

在ProductDao.java里增加根据id查询product的方法：

public Product getById(int id) throws SQLException {return new QueryRunner().query(connection, "select * from Product where id=?",new BeanHandler<>(Product.class), id);}

查询同类型的商品列表还是使用getListByClaszId方法。

7.2.2 service的实现

public Product getById(int id) {Connection connection = DBUtil.getConnection();productDao.setConnection(connection);try {return productDao.getById(id);} catch (Exception e) {throw new RuntimeException(e);} finally {DBUtil.close(connection);}
}

7.2.3 servlet的实现

用户访问的url是/product/detail?id=1,其中id是product的主键id。在servlet新增方法detail，在方法里获取request传来的id：

int id = Integer.parseInt(request.getParameter("id"));

通过id获得product实例：

Product product=productService.getById(id);

根据product所属的claszId获得推荐商品列表：

List<Product> list=productService.getListByClaszId(product.getClaszId(), "rank", 1, 5);

最后将这些值都放入到request的Attribute里：

request.setAttribute("product", product);
request.setAttribute("list", list);

跳转到展示用jsp：

request.getRequestDispatcher("/WEB-INF/jsp/product.jsp").forward(request,response);

7.2.4 jsp的实现

新建product.jsp，将静态页面商品详细.html的代码复制进来，再使用el和jstl替换需要展示的数据：

<div class="fy-pro"><div class="left"><div class="pic"><img src="${product.pic1 }"/></div><div class="sub-pic"><img src="${product.pic1 }"/><c:if test="${product.pic2!=null}"><img src="${product.pic2 }"/></c:if><c:if test="${product.pic3!=null}"><img src="${product.pic3 }"/></c:if><c:if test="${product.pic4!=null}"><img src="${product.pic4 }"/></c:if></div></div><div class="right"><span class="title">${product.name }</span><span class="des">${product.des }</span><div class="line"></div><div class="params">价格:<span class="price">￥${product.price }</span>原价:<span class="oldprice">￥${product.oldprice }</span></div><div class="params">购买数量:<div class="input"><span onclick="if(parseInt($('#count').val())<=1)return;$('#count').val(parseInt($('#count').val())-1)">-</span><input type="text" value="1" id="count"/><span onclick="if(parseInt($('#count').val())>=${product.stock })return;$('#count').val(parseInt($('#count').val())+1)">+</span></div></div><div class="params">剩余库存:${product.stock }件</div><a class="bigbt">立即购买</a><a href="javascript:location.href='cart/add?productId=${product.id}&count='+$('#count').val()" class="bigbt">加入购物车</a></div>
</div><div class="fy-detail"><div class="left"><div class="title"><span class="active" i="page1">商品详细</span><span i="page2">售后保障</span></div><div class="detail page1">${product.txt }</div><div class="detail page2"></div></div><div class="right"><div class="top">热卖产品推荐</div><c:forEach items="${list }" var="l"><a href="product/detail?id=${l.id }"><img src="${l.pic1 }" /><span class="title">${l.name }</span><span class="price">￥${l.price}</span></a></c:forEach></div>
</div>

---

可以在数据库中添加几个product数据，使用浏览器访问页面查看最终的效果。