祝大家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} + ']'"></span><span th:text="${#strings.abbreviate(com.comName, 30)}"></span></h6>
       </li>
   </ul>
</div>
<!-- 分页部分 -->
<h1 th:text="'第' + ${pageInfo.pageNum} + '页 共' + ${pageInfo.pages} + '页'" class="u-text-sm text-center"></h1>
<nav aria-label="Page navigation" class="u-text-sm">
   <!--/*@thymesVar id="pageInfo" type="com.github.pagehelper.PageInfo"*/-->
       <ul class="pagination justify-content-center">
           <li class="page-item"><a class="page-link" th:href="'/index.html/' + ${pageInfo.navigateFirstPage}">首页</a></li>
           <li class="page-item">
               <a class="page-link" th:href="'/index.html/' + ${pageInfo.prePage}" aria-label="Previous">
                   <span aria-hidden="true">&laquo;</span>
               </a>
           </li>
           <li class="page-item" th:each="p : ${pageInfo.navigatepageNums}">
               <a th:href="'/index.html/' + ${p}" th:text="${p}" th:class="'page-link' + ${p == pageInfo.pageNum ? ' bg-info text-light' : ''}"></a>
           </li>
           <li class="page-item">
               <a class="page-link" th:href="'/index.html/' + ${pageInfo.nextPage}" aria-label="Next">
                   <span aria-hidden="true">&raquo;</span>
               </a>
           </li>
           <li class="page-item"><a class="page-link" th:href="'/index.html/' + ${pageInfo.navigateLastPage}">末页</a></li>
       </ul>
</nav>

控制层

@GetMapping("/index.html/{pageNow}")
  public String findAllByPage(ModelMap modelMap,
                              @PathVariable(value = "pageNow" , required = false)
                                      Integer pageNow,
                              @RequestParam(value = "pageSize", defaultValue = "10")
                                      Integer pageSize){

      if(pageNow == null) pageNow = new Integer(1);
      PageHelper.startPage(pageNow, pageSize);
      List<Commodity> comInfo = commodityMapper.selectByExample(new CommodityExample());
      PageInfo<Commodity> pageInfo = new PageInfo<>(comInfo);
      // 首页设置上一个页面为1，防止上一页到末页
      if(pageNow == 1) pageInfo.setPrePage(1);
      // 末页设置最后一个页面，防止下一页到首页
      if(pageInfo.getNextPage() == 0) pageInfo.setNextPage(pageInfo.getPrePage() + 1);

      modelMap.addAttribute("pageNow", pageNow);
      modelMap.addAttribute("pageSize", pageSize);
      modelMap.addAttribute("comInfo", comInfo);
      modelMap.addAttribute("pageInfo", pageInfo);
      return "index";
  }

三、根据商品名称进行模糊查询

使用MyBatis逆向工程生成的Mapper接口进行查询

前端页面：

<nav class="nav input-group input-group-sm mt-3 container" th:fragment="search">
    <input id="input-search" 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>

控制层

@GetMapping("/search.html/{searchText}/{pageNow}")
public String findBySome(ModelMap modelMap,
                         @PathVariable String searchText,
                         @PathVariable(value = "pageNow" , required = false)
                                     Integer pageNow,
                         @RequestParam(value = "pageSize", defaultValue = "10")
                                     Integer pageSize){
    if(pageNow == null) pageNow = new Integer(1);
    PageHelper.startPage(pageNow, pageSize);
    CommodityExample e1 = new CommodityExample() {{
        createCriteria().andComNameLike("%" + searchText + "%");
    }};
    List<Commodity> comInfo = commodityMapper.selectByExample(e1);
    PageInfo<Commodity> pageInfo = new PageInfo<>(comInfo);
    // 首页设置上一个页面为1，防止上一页到末页
    if(pageNow == 1) pageInfo.setPrePage(1);
    // 末页设置最后一个页面，防止下一页到首页
    if(pageInfo.getNextPage() == 0) pageInfo.setNextPage(pageInfo.getPrePage() + 1);

    modelMap.addAttribute("pageNow", pageNow);
    modelMap.addAttribute("pageSize", pageSize);
    modelMap.addAttribute("comInfo", comInfo);
    modelMap.addAttribute("pageInfo", pageInfo);
    System.out.println("ok!" + searchText);
    return searchText == null ? "/index.html/1" : "index";
}

四、Thymeleaf引擎使用

基本语法：

• th:fragment="名称" 创建页面
• th:replace="页面路径::页面部分" 替换指定的页面

使用Thymeleaf渲染页面十分方便，能把不同的代码分为不同模块，如下图所示：

其中，除了 link 、script 标签借助 th:href、th:src 引入了pom.xml依赖里的jar包和静态资源以外，能使用其他的元素内标签借助th:replace进行替换，替换的内容就是在其他支持thymeleft的HTML页面的一部分，比如search.html的内容就是之前实现模糊查询的部分，如下图所示：

search.html 里声明当前标签的为 th:fragment="search"

五、BUG & DeBug

5.1 iframe指定其他页面，显示找不到路径

BUG：

解决： 在使用th:标签时指定路径，需要加上@{}符号，如：

<iframe th:src="@{/templates/code.html} ... />"

5.2 JS函数修改全局变量的形参没有作用

解决： 在JS函数最后 return 修改的全局变量，传参的同时赋一下值，如：

int a = 1
function add(a){
	return ++a;
}
a = add(a)

5.3 Thymeleaf页面获取不到session域的值

解决： 通过session域直接获取用户，然后直接获取属性值

实体类

private class User{
	private String userCode;
	private String passwrod;
}

控制层

@Controller
private class UserAction{
	@PostMapping
	public String login(User user, HttpSession session){
		// ...登陆的业务处理逻辑
		session.setAttribute("userInfo", user);
		return "index";
	}
}

前端页面

<span th:text="${session.userInfo.userCode}"/>

最后

以上就是虚幻鞋子最近收集整理的关于Web项目实战 | 购物系统v2.0 | 开发记录（三）分页显示 | 根据商品名称进行模糊查询祝大家2022新年快乐!历史记录一、运行环境二、PagheHelper插件插件实现分页显示三、根据商品名称进行模糊查询四、Thymeleaf引擎使用五、BUG & DeBug的全部内容，更多相关Web项目实战内容请搜索靠谱客的其他文章。