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

祝大家2022新年快乐!

历史记录

---

• 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

二、PagheHelper插件插件实现分页显示

PageHelper插件是基于MyBatis框架实现的，使用原先的pageHelper插件需要有配置文件，而在SpringBoot项目中只要设置起步依赖，配置即用，十分的方便
pom.xml

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.1</version>
</dependency>

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.1</version>
</dependency>

前端代码：

<!-- 商品列表 -->
<div class="container">
   <ul style="list-style: none" class="row">
       <!--/*@thymesVar id="comInfo" type="java.util.List<com.uni.pojo.Commodity>"*/-->
       <li th:each="com : ${comInfo}" class="col-md-2 col-sm-4 u-card-body text-center">
           <img th:src="${com.comImgSrc}" class="u-card-img">
           <h6 class="u-text-sm text-danger">￥<span th:text="${com.comPrice}"></span></h6>
           <h6 class="u-text-sm"><span th:text="'[' + ${com.comType} + ']'">