day06-功能實現05

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

家居網購項目實現05 以下皆為部分代碼,詳見 https://github.com/liyuelian/furniture_mall.git 12.功能11-後臺分頁(分頁顯示家居) 12.1需求分析/圖解 管理員進入到家居管理後臺頁面 點擊家居管理,可以按分頁規則顯示家居信息 12.2思路分析 分 ...


家居網購項目實現05

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

12.功能11-後臺分頁(分頁顯示家居)

12.1需求分析/圖解

image-20221220162728424
  1. 管理員進入到家居管理後臺頁面
  2. 點擊家居管理,可以按分頁規則顯示家居信息

12.2思路分析

image-20221220162903568

分頁顯示,每次發出請求後返回的數據是不一樣的;不同的頁面顯示的頁數不同,導航條也會根據當前頁數變化;並且用戶可能會改變每頁的顯示數量。

這些數據如果分開進行操作,將會非常麻煩,因為是這些數據分散的,經常變化的。

這裡創建一個數據模型,將經常變化的這些數據封裝到裡面,該數據模型體現為一個Javabean,該Javabean中的屬性根據實際需求定義,包括pageSize-每頁顯示的大小,pageNo-當前頁數,items-該頁要顯示的Furn集合等。

12.3代碼實現

12.3.1entity層

Page

package com.li.furns.entity;

import java.util.List;

/**
 * Page是一個Javabean,是一個分頁的數據模型(包含分頁的各種信息)
 *
 * @author 李
 * @version 1.0
 */
public class Page<T> {//T表示泛型,將來分頁的模型對應的數據是不確定的

    //因為每頁顯示多少條記錄,是其他地方也可能使用的,將其置為static屬性
    //選中字元+ctrl+shift+u=>切換大小寫
    public static final Integer PAGE_SIZE = 3;

    //當前頁
    private Integer pageNo;
    //每頁顯示的記錄數
    private Integer pageSize = PAGE_SIZE;
    //表示一共有多少頁,計算出來的
    private Integer pageTotalCount;
    //資料庫對應的表一共有多少行記錄,通過totalRow和pageSize計算出PageTotalCount
    private Integer totalRow;
    //該頁要顯示的數據集合
    private List<T> items;
    //分頁導航的字元串
    private String url;


    public Integer getPageNo() {
        return pageNo;
    }

    public void setPageNo(Integer pageNo) {
        this.pageNo = pageNo;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getPageTotalCount() {
        return pageTotalCount;
    }

    public void setPageTotalCount(Integer pageTotalCount) {
        this.pageTotalCount = pageTotalCount;
    }

    public Integer getTotalRow() {
        return totalRow;
    }

    public void setTotalRow(Integer totalRow) {
        this.totalRow = totalRow;
    }

    public List<T> getItems() {
        return items;
    }

    public void setItems(List<T> items) {
        this.items = items;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

12.3.2dao層

FurnDAO介面

//分析:Page中只有 表的總記錄數totalRow 以及
// 返回的對象item集合 是可以直接從資料庫中獲取的
// 因此將這兩個屬性的填充任務放在dao層

/**
 * 查詢furn表中的總記錄數
 *
 * @return 返回總記錄數
 */
public int getTotalRow();

/**
 * 獲取當前頁要顯示的數據
 *
 * @param begin    表示從第幾條記錄開始獲取,從0開始計算
 * @param pageSize 表示取出多少條記錄
 * @return 返回對應對象的集合
 */
public List<Furn> getPageItems(int begin, int pageSize);

FurnDAOImpl

@Override
public int getTotalRow() {
    String sql = "SELECT COUNT(*) FROM `furn`";
    //return (Integer) queryScalar(sql);==>會有隱患,可能出現ClassCastException異常
    return ((Number) queryScalar(sql)).intValue();
}

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

FurnDAOImplTest

@Test
public void getTotalRow() {
    int totalRow = furnDAO.getTotalRow();
    System.out.println(totalRow);
}

@Test
public void getPageItems() {
    List<Furn> pageItems = furnDAO.getPageItems(1, 3);
    for (Furn pageItem : pageItems) {
        System.out.println(pageItem);
    }
}

12.3.3service層

FurnService介面

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

FurnServiceImpl

@Override
public Page<Furn> page(int pageNo, int pageSize) {
    //先創建一個page對象,然後根據實際情況填充屬性
    Page<Furn> page = new Page<>();

    page.setPageNo(pageNo);
    page.setPageSize(pageSize);

    int totalRow = furnDAO.getTotalRow();
    page.setTotalRow(totalRow);

    //總頁數等於總記錄數/每頁記錄數
    int pageTotalCount = totalRow / pageSize;
    if (totalRow % pageSize > 0) {
        //如果有餘數就把總頁數+1
        pageTotalCount++;
    }
    page.setPageTotalCount(pageTotalCount);

    //SELECT * FROM table_name
    //LIMIT 每頁顯示記錄數*(第幾頁-1),每頁顯示記錄數
    int begin = (pageNo - 1) * pageSize;
    List<Furn> pageItems = furnDAO.getPageItems(begin, pageSize);
    page.setItems(pageItems);

    //還差一個url

    return page;
}

FurnServiceImplTest

@Test
public void page() {
    Page<Furn> page = furnService.page(2, 2);
    System.out.println(page.getItems());
}

12.3.4web層

FurnServlet

/**
 * 處理分頁請求
 *
 * @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);
    //請求轉發到furn_manage.jsp
    req.getRequestDispatcher("/views/manage/furn_manage.jsp")
            .forward(req, resp);
}

前端頁面修改略

12.4完成測試

由於還沒實現分頁導航,這裡直接在url中給定參數http://localhost:8080/furniture_mall/manage/furnServlet?action=page&pageNo=2

image-20221220190824389

13.功能實現12-後臺分頁(分頁導航)

13.1需求分析/圖解

image-20221220191532770
  1. 管理員進入到家居管理後臺頁面
  2. 可以通過分頁導航條來進行分頁顯示
  3. 上頁按鈕功能
  4. 下頁按鈕功能
  5. 顯示共幾頁
  6. 點擊分頁導航,可以顯示對應頁的家居信息
  7. 在管理員進行修改,刪除,添加家居後,能夠回顯原來操作所在頁面數據

13.2思路分析

根據12.2思路分析圖

13.3代碼實現

13.3.1web層

修改FurnServlet:

add方法,在添加完家居後跳轉到page方法,進行分頁,同時顯示的當前頁是添加家居前的頁數

image-20221220212422155

delete方法,在刪除完家居後跳轉到page方法,進行分頁顯示,同時顯示的當前頁是刪除家居前的頁數

image-20221220212721122

update方法同上

image-20221220212827638

13.3.2前端頁面

分別在manage_menu.jsp,furn_mamage.jsp,furn_update.jsp,furn_add.jsp中修改對應介面,傳遞參數

manage_menu.jsp:

image-20221220213048886

在家居管理頁面furn_mamage.jsp添加分頁導航條(部分代碼)

<!--  Pagination Area Start 分頁導航條 -->
<div class="pro-pagination-style text-center mb-md-30px mb-lm-30px mt-6" data-aos="fade-up">
    <ul>
        <%--如果當前頁大於1,就顯示上一頁--%>
        <c:if test="${requestScope.page.pageNo>1}">
            <li><a href="manage/furnServlet?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="manage/furnServlet?action=page&pageNo=${i}">${i}</a></li>
            </c:if>
            <c:if test="${i!=requestScope.page.pageNo}">
                <li><a href="manage/furnServlet?action=page&pageNo=${i}">${i}</a></li>
            </c:if>
        </c:forEach>
        <%--  --%>
        <%--    如果當前頁小於總頁數,就往下一頁--%>
        <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotalCount}">
            <li><a href="manage/furnServlet?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>
</div>
<!--  Pagination Area end -->
image-20221220213325934

furn_update.jsp:

image-20221220213428879

furn_add.jsp:

image-20221220213529769

13.4完成測試

image-20221220213651175 image-20221220213952125

點擊任何顯示頁數都正常跳轉,並且在修改,增加,刪除家居信息後可以返回當前頁數。

最大頁數顯示限制之後再完成


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

-Advertisement-
Play Games
更多相關文章
  • 前言 今年又是一個非常寒冷的冬天,很多公司都開始人員精簡。市場從來不缺前端,但對高級前端的需求還是特別強烈的。一些大廠的面試官為了區分候選人對前端領域能力的深度,經常會在面試過程中考察一些前端框架的源碼性知識點。Vuejs 作為世界頂尖的框架之一,幾乎在所有的面試場景中或多或少都會被提及。 筆者之前 ...
  • 正文開始之前,我們先要瞭解一個概念,就是什麼是 登錄態。 主流Web應用比如瀏覽器是基於http協議的,而http協議是 無狀態 的。什麼是 無狀態?就是伺服器不知道是誰發送了這個http請求,無法識別區分用戶身份。 所以登錄態就是服務端用來區分用戶身份,同時對用戶進行記錄的技術方案。 ...
  • 軟體開發中常見的幾種不同服務模型包括SaaS(軟體即服務)、LaaS(許可即服務)、PaaS(平臺即服務)、CaaS(容器即服務)、IaaS(基礎設施即服務)和FaaS(功能即服務)。 很多人認為IaaS和FaaS是趨勢,是未來軟體設計與開發人員的基本必備技能,PowerDotNet和PowerDo ...
  • matplotlib plt.plot()繪製線性圖 繪製單條線形圖 繪製多條線形圖 設置坐標系的比例plt.figure(figsize=(a,b)) 設置圖例legend() 設置軸的標識 圖例保存 fig = plt.figure() plt.plot(x,y) figure.savefig( ...
  • 1.技術介紹 框架:unittest 請求處理:requests excel數據處理:openpyxl 參數化:ddt 配置解析器:configparser 報告模板:HTMLTestRunnerNew.py(下載地址:https://pan.baidu.com/s/1w9AZU9AkIpxCYuz ...
  • pandas的級聯和合併 級聯操作 pd.concat, pd.append pandas使用pd.concat函數,與np.concatenate函數類似,只是多了一些參數: objs axis=0 keys join='outer' / 'inner':表示的是級聯的方式,outer會將所有的項 ...
  • 1.configparser介紹 configparser是python自帶的配置參數解析器。可以用於解析.config文件中的配置參數。ini文件中由sections(節點)-key-value組成 2.安裝: pip install configparse 3.獲取所有的section impo ...
  • 1.技術介紹 框架:unittest 請求處理:requests excel數據處理:openpyxl 參數化:ddt 報告模板:HTMLTestRunnerNew.py(下載地址:https://pan.baidu.com/s/1w9AZU9AkIpxCYuzTto0EQA?pwd=1234) t ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...