文章目录
历史记录
-
Web项目实战 | 购物系统v2.0 | 开发记录(一)需求分析 | 技术选型 | 系统设计 | 数据表设计 | SpringBoot、SSM、Thymeleaf、Bootstrap…
-
Web项目实战 | 购物系统v2.0 | 开发记录(二)搭建SpringBoot+SSM框架环境 | 配置Druid+MyBatis | 基于Bootstrap实现登陆页面| 图片验证码接口
一、运行环境
- 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">«</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">»</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