Web项目实战 | 购物系统v2.0 | 开发记录（四）单个页面单个请求解决根据商品类型进行分页查询 | 使用省市区三级联动 | 使用JQuery 插件实现图片上传

历史记录

• Web项目实战 | 购物系统v2.0 | 开发记录（一）需求分析 | 技术选型 | 系统设计 | 数据表设计 | SpringBoot、SSM、Thymeleaf、Bootstrap…

• Web项目实战 | 购物系统v2.0 | 开发记录（二）搭建SpringBoot+SSM框架环境 | 配置Druid+MyBatis | 基于Bootstrap实现登陆页面| 图片验证码接口

• Web项目实战 | 购物系统v2.0 | 开发记录（三）分页显示 | 根据商品名称进行模糊查询

一、运行环境

---

• windows10
• IDEA 2021.1 专业版
• JDK8
• SpringBoot2
• Druid 1.2.5
• Bootstrap 4.6.0
• MySQL 8
• Navicat 11

二、根据商品类查询

---

在实现此功能时有几个难点，如：1）搜索的同时要支持分页显示，保证下一页仍是当前类型；2）支持显示当前选择的类型。

解决思路：

对所有到商品页面的请求添加一个键值对，键为 comType，值为商品类型的ID，若是所有商品就设置为-1，这样在前端页面就可以用th:style标签直接使用三目运算符进行判断，因显示分类标签时是通过th:each循环显示的，所以可以得知当前的商品类型的ID。

除了分类按钮的显示外，还有分页的功能，之前分页请求的地址和固定类型后的请求地址不同，所以需要使用th:href标签借助三目运算符进行判断，若当前comType是-1，则跟原先的请求地址一样/index/页数，若是其他的值，那么请求的地址需要变化/index/type/页数。

至此，解决了分类显示、分页的问题，最后还有搜索商品的问题：之前的搜索是默认为所有商品的，现在需要加上一个类型的选择，这样用户可以搜索固定的类别，在前端样式上需稍作修改。

前端代码-搜索部分：

<nav class="nav input-group input-group-sm mt-3 container" th:fragment="search">
    <div class="input-group-prepend">
        <button id="btn-ctype" class="btn btn-outline-dark dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"
            th:text="${comType.comTypeName}" th:data-id="${comType.id}">
            所有商品
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item">所有商品</a>
            <a class="dropdown-item"
               th:each="ct: ${session.ctypeInfo}"
               th:text="${ct.comTypeName}"
               th:onclick="chose([[${ct.id}]], [[${ct.comTypeName}]])"
               th:data-id="${ct.id}"
            />
        </div>
    </div>
    <input id="input-search" th:value="${searchText}" type="text" class="form-control" placeholder="请输入查询的商品，商品名称/种类/...">
    <div class="input-group-append">
        <button class="input-group-text btn btn-info" id="btn-search">
            <i class="bi bi-search"></i>
        </button>
    </div>
</nav>

前端代码-商品分页部分

<!-- 分页部分 -->
 <h1 th:text="'第' + ${pageInfo.pageNum} + '页 共' + ${pageInfo.pages} + '页'" class="u-text-sm text-center"></h1>
 <nav aria-label="Page navigation" class="u-text-sm" th:if="${comInfo.size > 0}">
     <ul class="pagination justify-content-center">
         <!--首页-->
         <li class="page-item">
                 <a class="page-link u-a-com"
                    th:data-type="${comType.id}"
                    th:data-searchtext="${searchText}"
                    th:data-pagenow="${pageInfo.navigateFirstPage}">
                     首页
                 </a>
         </li>
         <!--上一页-->
         <li class="page-item">
             <a class="page-link u-a-com"
                th:data-type="${comType.id}"
                th:data-searchtext="${searchText}"
                th:data-pagenow="${pageInfo.prePage}" aria-label="Previous">
                 <span aria-hidden="true">&laquo;</span>
             </a>
         </li>
         <!--某一页-->
         <li class="page-item" th:each="pageNow : ${pageInfo.navigatepageNums}">
             <a th:data-type="${comType.id}"
                th:data-searchtext="${searchText}"
                th:data-pagenow="${pageNow}" th:text="${pageNow}"
                th:class="'page-link u-a-com' + ${pageNow == pageInfo.pageNum ? ' bg-info text-light' : ''}">
             </a>
         </li>
         <!--下一页-->
         <li class="page-item">
             <a class="page-link u-a-com"
                th:data-type="${comType.id}"
                th:data-searchtext="${searchText}"
                th:data-pagenow="${pageInfo.nextPage}" aria-label="Next">
             <span aria-hidden="true">&raquo;</span>
             </a>
         </li>
         <!--最后一页-->
         <li class="page-item">
             <a class="page-link u-a-com"
                th:data-type="${comType.id}"
                th:data-searchtext="${searchText}"
                th:data-pagenow="${pageInfo.navigateLastPage}">
                 末页
             </a>
         </li>
     </ul>
 </nav>

分页部分JS代码：

$('.u-a-com').click