實現首頁熱門最新商品查詢

一大岐發表於2020-12-01

步驟

  1. 在IndexServlet中重寫execute方法
    1. 呼叫業務層查詢最新商品、最熱商品，返回2個集合
    2. 將這2個集合放入到request
    3. 轉發到真實的首頁
  2. 建立商品模組相關程式
  3. 呼叫service,dao

程式碼實現

重寫execute方法

@WebServlet("/indexServlet")
public class IndexServlet extends BaseServlet {
    @Override
    public String execute(HttpServletRequest req, HttpServletResponse resp) throws Exception {
        ProductServiceImp productService = new ProductServiceImp();
        //獲取最新9件商品
        List<Product> list01 = productService.findNews();
        //獲取最熱9件商品
        List<Product> list02 = productService.findHots();
        //將最新商品放入request
        req.setAttribute("news", list01);
        //將最熱商品放入request
        req.setAttribute("hots", list02);
        //轉發到/jsp/index.jsp
        return "/jsp/index.jsp";
    }
}

DAO層

@Override
public List<Product> findHots() {
    String sql="SELECT * FROM product WHERE pflag=0 AND is_hot=1 ORDER BY pdate DESC LIMIT 0 ,9 ";
    return template.query(sql, new BeanPropertyRowMapper<>(Product.class));
}

@Override
public List<Product> findNews() {
    String sql="SELECT * FROM product WHERE pflag=0 ORDER BY pdate DESC LIMIT 0 , 9 ";
    return template.query(sql, new BeanPropertyRowMapper<>(Product.class));
}

index.jsp

<!--
    描述：最新商品顯示
-->
<div class="container-fluid">
    <div class="col-md-12">
        <h2>最新商品&nbsp;&nbsp;<img src="${pageContext.request.contextPath}/img/title2.jpg"/></h2>
    </div>
    <div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
        <img src="${pageContext.request.contextPath}/products/hao/big01.jpg" width="205" height="404"
                style="display: inline-block;"/>
    </div>
    <div class="col-md-10">
        <div class="col-md-6" style="text-align:center;height:200px;padding:0px;">
            <a href="product_info.htm">
                <img src="${pageContext.request.contextPath}/products/hao/middle01.jpg" width="516px" height="200px"
                        style="display: inline-block;">
            </a>
        </div>
        <c:forEach items="${news}" var="p">
            <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
                <a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${p.pid}">
                    <img src="${pageContext.request.contextPath}/${p.pimage}" width="130" height="130"
                            style="display: inline-block;">
                </a>
                <p><a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${p.pid}"
                        style='color:#666'>${p.pname}</a></p>
                <p><span style="font-size:16px; color: #E4393C; ">&yen;${p.shop_price}</span></p>
            </div>
        </c:forEach>
    </div>
</div>

<!--
    描述：熱門商品顯示
-->
<div class="container-fluid">
    <div class="col-md-12">
        <h2>熱門商品&nbsp;&nbsp;<img src="${pageContext.request.contextPath}/img/title2.jpg"/></h2>
    </div>
    <div class="col-md-2" style="border:1px solid #E7E7E7;border-right:0;padding:0;">
        <img src="${pageContext.request.contextPath}/products/hao/big01.jpg" width="205" height="404"
                style="display: inline-block;"/>
    </div>
    <div class="col-md-10">
        <div class="col-md-6" style="text-align:center;height:200px;padding:0px;">
            <a href="product_info.htm">
                <img src="${pageContext.request.contextPath}/products/hao/middle01.jpg" width="516px" height="200px"
                        style="display: inline-block;">
            </a>
        </div>
        <c:forEach items="${hots}" var="p">
            <div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
                <a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${p.pid}">
                    <img src="${pageContext.request.contextPath}/${p.pimage}" width="130" height="130"
                            style="display: inline-block;">
                </a>
                <p><a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${p.pid}"
                        style='color:#666'>${p.pname}</a></p>
                <p><span style="font-size:16px; color: #E4393C; ">&yen;${p.shop_price}</span></p>
            </div>
        </c:forEach>
    </div>
</div>

相關文章