javaWeb实战教程10-商品模块的编码实现

来源：互联网发布：保留小数位数的函数sql 编辑：程序博客网时间：2024/06/08 06:40

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数据，使用浏览器访问页面查看最终的效果。

阅读全文

0 0