day07-功能實現06

来源:https://www.cnblogs.com/liyuelian/archive/2022/12/21/16997470.html
-Advertisement-
Play Games

家居網購項目實現06 以下皆為部分代碼，詳見 https://github.com/liyuelian/furniture_mall.git 14.功能13-首頁分頁 14.1需求分析/圖解 顧客進入首頁頁面 分頁顯示家居 正確顯示分頁導航條 14.2思路分析 14.3代碼實現 14.3.1web層 ...


家居網購項目實現06

以下皆為部分代碼，詳見 https://github.com/liyuelian/furniture_mall.git

14.功能13-首頁分頁

14.1需求分析/圖解

image-20221221170124084
  1. 顧客進入首頁頁面
  2. 分頁顯示家居
  3. 正確顯示分頁導航條

14.2思路分析

14.3代碼實現

14.3.1web層

配置customerFurnServlet

<servlet>
    <servlet-name>CustomerFurnServlet</servlet-name>
    <servlet-class>com.li.furns.web.CustomerFurnServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>CustomerFurnServlet</servlet-name>
    <url-pattern>/customerFurnServlet</url-pattern>
</servlet-mapping>

實現servlet

package com.li.furns.web;

import com.li.furns.entity.Furn;
import com.li.furns.entity.Page;
import com.li.furns.service.FurnService;
import com.li.furns.service.impl.FurnServiceImpl;
import com.li.furns.utils.DataUtils;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class CustomerFurnServlet extends BasicServlet {

    private FurnService furnService = new FurnServiceImpl();

    /**
     * 處理首頁分頁請求
     *
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void page(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //這裡的業務邏輯和原先的家居後臺分頁非常相似
        int pageNo = DataUtils.parseInt(req.getParameter("pageNo"), 1);
        int pageSize = DataUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
        //調用service方法，獲取Page對象
        Page<Furn> page = furnService.page(pageNo, pageSize);
        //將page放入request域中
        req.setAttribute("page", page);
        //請求轉發到/views/customer/index.jsp - 真正的主頁
        req.getRequestDispatcher("/views/customer/index.jsp")
                .forward(req, resp);
    }
}

14.3.2前端頁面

1.web/index.jsp

<%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/12/21
  Time: 17:14
  Version: 1.0
--%>
<%--    直接請求到CustomerFurnServlet，
        獲取網站首頁要顯示的分頁數據，類似我們的網站入口頁面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--註意這裡如果沒有子元素的話不要分行！！！--%>
<jsp:forward page="/customerFurnServlet?action=page&pageNo=1"></jsp:forward>

2.web/views/customer/index.jsp

迴圈標簽顯示家居信息

<%--迴圈輸出--%>
<c:forEach items="${requestScope.page.items}" var="furn">
    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6" data-aos="fade-up"
         data-aos-delay="200">
        <!-- Single Prodect -->
        <div class="product">
            <div class="thumb">
                <a href="shop-left-sidebar.html" class="image">
                    <img src="${furn.imgPath}" alt="Product"/>
                    <img class="hover-image" src="${furn.imgPath}"
                         alt="Product"/>
                </a>
                <span class="badges">
                    <span class="new">New</span>
                </span>
                <div class="actions">
                    <a href="#" class="action wishlist" data-link-action="quickview"
                       title="Quick view" data-bs-toggle="modal"
                       data-bs-target="#exampleModal"><i
                            class="icon-size-fullscreen"></i></a>
                </div>
                <button title="Add To Cart" class=" add-to-cart">Add
                    To Cart
                </button>
            </div>
            <div class="content">
                <h5 class="title">
                    <a href="shop-left-sidebar.html">${furn.name}</a></h5>
                <span class="price">
                    <span class="new">家居:　${furn.name}</span>
                </span>
                <span class="price">
                    <span class="new">廠商:　${furn.maker}</span>
                </span>
                <span class="price">
                    <span class="new">價格:　￥${furn.price}</span>
                </span>
                <span class="price">
                    <span class="new">銷量:　${furn.sales}</span>
                </span>
                <span class="price">
                    <span class="new">庫存:　${furn.stock}</span>
                </span>
            </div>
        </div>
    </div>
</c:forEach>
<%--迴圈結束--%>

前端導航欄

<ul>
    <%--如果當前頁大於1,就顯示上一頁--%>
    <c:if test="${requestScope.page.pageNo>1}">
        <li><a href="customerFurnServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上頁</a></li>
    </c:if>
    <%--   顯示所有的分頁數
          先確定開始頁數 begin 第一頁
          再確定結束頁數 end 第page.TotalCount頁
    --%>
    <c:set var="begin" value="1"/>
    <c:set var="end" value="${requestScope.page.pageTotalCount}"/>
    <c:forEach begin="${begin}" end="${end}" var="i">
        <%--如果i為當前頁，就使用class=active來修飾--%>
        <c:if test="${i==requestScope.page.pageNo}">
            <li><a class="active" href="customerFurnServlet?action=page&pageNo=${i}">${i}</a></li>
        </c:if>
        <c:if test="${i!=requestScope.page.pageNo}">
            <li><a href="customerFurnServlet?action=page&pageNo=${i}">${i}</a></li>
        </c:if>
    </c:forEach>
    <%--  --%>
    <%--    如果當前頁小於總頁數，就往下一頁--%>
    <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotalCount}">
        <li><a href="customerFurnServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下頁</a></li>
    </c:if>
    <li><a>共${requestScope.page.pageTotalCount}頁</a></li>
    <li><a>共${requestScope.page.totalRow}記錄</a></li>
</ul>

14.4完成測試

在瀏覽器訪問http://localhost:8080/furniture_mall/，點擊分頁超鏈接，可以完成分頁顯示數據

image-20221221200303066 image-20221221200324398

15.功能14-首頁搜索

15.1需求分析/圖解

image-20221221200940695
  1. 顧客點擊首頁搜索框，可以輸入家居名
  2. 正確顯示分頁導航條，並且要求在分頁基礎上保留上次搜索條件（即點擊分頁，顯示的家居信息仍要符合搜索條件）

15.2思路分析

15.3代碼實現

15.3.1dao層

FurnDAO

/**
 * 根據furnName返回符合條件的記錄數
 *
 * @param furnName 搜索條件
 * @return 返回符合條件的記錄數
 */
public int getTotalRowByName(String furnName);

/**
 * 根據 begin,pageSize,furnName，返回furn的記錄
 *
 * @param furnName 搜索條件
 * @return 返回furn對象集合
 */
public List<Furn> getPageItemByName(int begin, int pageSize, String furnName);

FurnDAOImpl

@Override
public int getTotalRowByName(String furnName) {
    String sql = "SELECT  COUNT(*) " +
            "FROM `furn` " +
            "WHERE `name` LIKE ?";
    return ((Number) queryScalar(sql, "%" + furnName + "%")).intValue();
}

@Override
public List<Furn> getPageItemByName(int begin, int pageSize, String furnName) {
    String sql = "SELECT  `id` , `name` , `maker` , `price` , `sales` , `stock` , `img_path` AS imgPath " +
            "FROM `furn` " +
            "WHERE `name` LIKE ? LIMIT ?,?";
    return queryMulti(sql, Furn.class, "%" + furnName + "%", begin, pageSize);
}

FurnDAOImplTest

@Test
public void getPageTotalCountByName() {
    System.out.println("根據名字’沙發‘搜索=>" + furnDAO.getTotalRowByName("沙發"));
}

@Test
public void getPageItemByName() {
    //從第0條記錄開始，每頁顯示5個記錄
    List<Furn> furns = furnDAO.getPageItemByName(0, 5, "沙發");
    for (Furn furn : furns) {
        System.out.println(furn);
    }
}
image-20221221215619184 image-20221221215648702

15.3.2service層

FurnService

/**
 * 根據傳入的pageNo，pageSize和furnName，返回對應的page對象
 *
 * @param pageNo 表示第幾頁
 * @param pageSize 表示一頁取出多少條記錄
 * @param furnName 搜索的家居名
 * @return 返回對應的page對象
 */
public Page<Furn> pageByName(int pageNo, int pageSize, String furnName);

FurnServiceImpl

@Override
public Page<Furn> pageByName(int pageNo, int pageSize, String furnName) {
    //先創建一個page對象，然後根據實際情況填充屬性
    Page<Furn> page = new Page<>();
    //1.當前第幾頁
    page.setPageNo(pageNo);
    //2.每頁取出多少條記錄
    page.setPageSize(pageSize);
    //3.根據名字來返回總記錄數
    int totalRow = furnDAO.getTotalRowByName(furnName);
    page.setTotalRow(totalRow);
    //4.總頁數 = 總記錄數 / 每頁記錄數
    int pageTotalCount = totalRow / pageSize;
    if (totalRow % pageSize > 0) {
        //如果有餘數就把總頁數 +1
        pageTotalCount++;
    }
    page.setPageTotalCount(pageTotalCount);
    //5.數據集合items
    //SELECT * FROM table_name
    //LIMIT 每頁顯示記錄數*（第幾頁-1）,每頁顯示記錄數
    int begin = (pageNo - 1) * pageSize;
    List<Furn> pageItems = furnDAO.getPageItemByName(begin, pageSize, furnName);
    page.setItems(pageItems);
    //6.還差一個url，分頁導航，先放一放
    return page;
}

FurnServiceImplTest

@Test
public void pageByName() {
    Page<Furn> page = furnService.pageByName(1, 5, "桌子");
    for (Furn furn : page.getItems()) {
        System.out.println(furn);
    }
}
image-20221221215734380

15.3.3web層

CustomerFurnServlet

/**
 * 處理首頁搜索請求
 * 併進行分頁（只對搜索到的信息分頁）
 *
 * @param req
 * @param resp
 * @throws ServletException
 * @throws IOException
 */
protected void pageByName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //獲取請求參數
    int pageNo = DataUtils.parseInt(req.getParameter("pageNo"), 1);
    int pageSize = DataUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
    //如果參數有name但沒有值，接收的就是空串
    //如果參數沒有name，接收到的就是null
    String furnName = req.getParameter("furnName");
    //這樣做，將""和null的業務邏輯合併在一起
    if (furnName == null) {
        furnName = "";
    }
    //調用service方法，獲取Page對象
    Page<Furn> page = furnService.pageByName(pageNo, pageSize, furnName);
    //將page放入request中
    req.setAttribute("page", page);
    //請求轉發到/customer/index.jsp
    req.getRequestDispatcher("/views/customer/index.jsp")
            .forward(req, resp);
}

15.3.4customer/index.jsp

修改搜索框參數

<form class="action-form" action="customerFurnServlet">
    <input type="hidden" name="action" value="pageByName">
    <input class="form-control" name="furnName" placeholder="輸入家居名搜索" type="text" >
    <button class="submit" type="submit"><i class="icon-magnifier"></i></button>
</form>

關於攜帶上次檢索條件，即點擊分頁，顯示的家居信息仍要符合搜索條件：

  1. 功能13-首頁分頁實現，在導航欄的超鏈接上附上了請求的servlet路徑，servlet中方法以及當前頁數等參數。檢索信息的分頁 和 首頁分頁 的導航欄，兩者功能是相似的，只是在請求的servlet，servlet方法等參數不一致

  2. 檢索信息的分頁：

    由於furnName的值在搜索欄中提交給CustomerFurnServlet，我們可以在CustomerFurnServlet的pageByName方法中獲取到的furnName值，並設置在page的屬性url中，返回給jsp頁面，這樣就可以拿到furnName了

  3. 改進CustomerFurnServlet

    protected void pageByName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //獲取請求參數
    int pageNo = DataUtils.parseInt(req.getParameter("pageNo"), 1);
    int pageSize = DataUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
    //如果參數有name但沒有值，接收的就是空串
    //如果參數沒有name，接收到的就是null
    String furnName = req.getParameter("furnName");
    //這樣做，將""和null的業務邏輯合併在一起
    if (furnName == null) {
        furnName = "";
    }
    //調用service方法，獲取Page對象
    Page<Furn> page = furnService.pageByName(pageNo, pageSize, furnName);
    //根據furnName
    StringBuilder url = new StringBuilder("customerFurnServlet?action=pageByName");
    if (!"".equals(furnName)) {//如果furnName不為空串，就拼接 furnName參數
        url.append("&furnName=").append(furnName);
    }
    page.setUrl(url.toString());
    //將page放入request中
    req.setAttribute("page", page);
    //請求轉發到/customer/index.jsp
    req.getRequestDispatcher("/views/customer/index.jsp")
            .forward(req, resp);
}

  4. index.jsp的分頁導航欄

    <ul>
    <%--如果當前頁大於1,就顯示上一頁--%>
    <c:if test="${requestScope.page.pageNo > 1}">
        <li><a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">上頁</a></li>
    </c:if>
    <%--   顯示所有的分頁數
          先確定開始頁數 begin 第一頁
          再確定結束頁數 end 第page.TotalCount頁
    --%>
    <c:set var="begin" value="1"/>
    <c:set var="end" value="${requestScope.page.pageTotalCount}"/>
    <c:forEach begin="${begin}" end="${end}" var="i">
        <%--如果i為當前頁，就使用class=active來修飾--%>
        <c:if test="${i==requestScope.page.pageNo}">
            <li><a class="active" href="${requestScope.page.url}&pageNo=${i}">${i}</a></li>
        </c:if>
        <c:if test="${i!=requestScope.page.pageNo}">
            <li><a href="${requestScope.page.url}&pageNo=${i}">${i}</a></li>
        </c:if>
    </c:forEach>
    <%--  --%>
    <%--    如果當前頁小於總頁數，就往下一頁--%>
    <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotalCount}">
        <li><a href="${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">下頁</a></li>
    </c:if>
    <li><a>共${requestScope.page.pageTotalCount}頁</a></li>
    <li><a>共${requestScope.page.totalRow}記錄</a></li>
</ul>

15.3.5bugFix

上述代碼雖然可以解決搜索信息的分頁問題，但是如果我們第一次進入首頁的時候，走的是CustomerFurnServlet的page方法，因此返回的page的url中是null，如果這時直接點擊分頁導航欄，就會顯示錯誤，因為獲取不到page的url屬性，超鏈接拼接錯誤。

解決方案：直接將web/index.jsp的action改為pageByName，由於沒有給furnName參數，預設搜索的是所有家居信息

image-20221221233122681

15.4完成測試

訪問urlhttp://localhost:8080/furniture_mall/，首次進入首頁，點擊分頁導航欄，功能正常

在搜索框中搜索家居名稱，成功返回合法數據，點擊分頁導航欄，功能正常

image-20221221233842155

搜索結果第一頁：

image-20221221233859609

搜素結果第三頁：

image-20221221234049760
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用Keepalived工具實現集群節點的高可用
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 作者：蟹黃瓜子 文章來源：社區投稿 1.前言 在集群當中離不開的一個詞就是是高可用，用本文來簡單聊聊Keepalived是什麼、Keepalived如何 ...
  • GreatSQL MGR 使用 IPv6 連接
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 作者：王權富貴 文章來源：社區原創 1.概述 本文基於 GreatSQL 8.0.25-16 ，以下測試均使用此版本。 MySQL支持IPv6，創建用戶 ...
  • MySQL-執行計劃
    上官網看執行計劃文檔釋義，移步 此部分在MySQL官方文檔中的結構屬於優化(Optimization)-理解查詢執行計劃(Understanding the Query Execution Plan)。 此部分一共包括5個部分內容： 1，使用explain優化查詢 2，explain輸出內容釋義 3 ...
  • this指向終極解決方案（附帶手寫綁定函數）
    this指向 this定義 this用於指定對當前對象的引用。 this的兩種綁定方式 為什麼說是兩種？在《你不知道的JavaScript（上捲）》一書中共提到了四種綁定方式。如下： 預設綁定 隱式綁定 顯式綁定 new綁定 實際上這四種綁定方式有兩種方式重覆了（隱式綁定和new綁定）。我們在學習過 ...
  • 小程式開發與web開發的區別及特殊功能實現
    小程式開發整理 使用uni-app跨端開發框架，代碼寫法與vue2一致。 一、與web開發的區別 1. 運行方式不同 npm run dev:mp-weixin後，用微信開發者工具打開dist中工程。 2. 標簽與web開發不同 標簽的對應關係 | 小程式中使用 | web中使用 | | | | | ...
  • 一顆紅心,三手準備,分別基於圖片(img)/SCSS(樣式)/SVG動畫實現動態拉轟的點贊按鈕特效
    華麗炫酷的動畫特效總能夠讓人心曠神怡，不能自已。艷羡之餘，如果還能夠探究其華麗外表下的實現邏輯，那就是百尺竿頭，更上一步了。本次我們使用圖片、SCSS樣式以及SVG圖片動畫來實現“點贊”按鈕的動畫特效，並比較不同之處。 圖片實現 最簡單，也最容易理解的實現方式就是使用圖片。曾幾何時，幾乎所有前端特效 ...
  • 高併發架構設計經驗總結
    高併發解決的核心問題是在同一時間上有大量的請求過來，然後我們的系統要怎麼抗住這些請求帶來的壓力。本文從基礎設施層、服務端架構層、服務應用層分別做了一個簡單的梳理，在每一層通過什麼的方式去抗併發，給大家提供一個思路。 ...
  • PowerDotNet平臺化軟體架構設計與實現系列（15）：支付平臺
    PowerDotNet個人項目中功能全面而強大的一個系統是支付平臺。我對PowerDotNet的自信很大程度上來自於經過PowerDotNet重寫後的支付、財務、結算、CRM等業務型公共服務系統的穩定運行。 使用PowerDotNet和PowerDotNetCore特別開發的業務邏輯型公共服務既有極 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類