PageHelper实现多条件的分页查询，封装页码按钮的生成逻辑，对接后端接口_pagehelper后接多个查询

作者：从前慢现在也慢 | 2024-02-28 02:33:27

踩

pagehelper后接多个查询

效果图

难点分析

PageHelper的引入和使用，这里我就不多说了。有了PageHelper，后端的分页查询就非常简单了。

要实现携带多条件的分页查询，前端要如何跟后端接口对接呢？在开始代码之前，先来依次思考和分析下面的问题，然后再来整理思路，最后看代码。

问题1：前端需要传给后端什么参数？

（1）page：当前页。理应由前端传给后端，但是前端的传参有可能超出实际范围（比如说，一共才有10页，用户传参11，那么后端应该返回第10页的数据，而不应该返回空数据），这就必须交由后端来纠正之后，再查询对应页码的数据。然后后端将纠正后的当前页返回给前端，以便前端来渲染页码按钮组。如果不传，由后端返回默认值1。

（2）count：每页显示的记录数，由前端传给后端。如果不传，使用后端定义的默认值。

（3）各种条件参数。以上面的效果图为例，需要传给后端 4 个条件参数：① 商品名称关键词：prodName；②商品种类：cate；③最低价格：minPrice；④最高价格：maxPrice。

问题2：条件以什么方式提交给后端？

前端访问后端接口有 3 种情况，以效果图为例分析：

（1）第一次打开页面，以Get方式，此时没有携带任何条件

（2）点击 “查询” 按钮，以Post方式提交表单，此时携带多个条件，且有些提交可能为空

（3）点击页码按钮切换页面时，由于是通过a标签跳转，所以是Get方式。跳转时，有可能携带多个条件。

所以接口需要使用 @RequestMapping 注解

问题3：后端应该返回什么数据给前端？

（1）当前页的列表数据。如：List<Product>

（2）page：被后端纠正之后的当前页。用于生成分页按钮。

（3）total：总记录数。用于生成分页按钮。

（4）count：每一页显示的记录数，也有可能被后端纠正。用于生成分页按钮。

（5）urlParamsStr：由于点击页码按钮时，通过a标签跳转，可能需要携带多个条件，而且只能通过url参数的形式携带过去。所以后端需要将多个条件拼接成字符串，返回给前端，方便前端生成分页按钮。

问题4：生成页码按钮需要什么参数？如何封装页码按钮的逻辑？

（1）page：被后端纠正之后的当前页。用于生成分页按钮。

（2）total：总记录数。用于生成分页按钮。

（3）count：每一页显示的记录数，也有可能被后端纠正。用于生成分页按钮。

要想生成页码按钮，上面3个参数，必不可少！！！至于页码按钮的生成逻辑，参见我的另一篇博客：https://blog.csdn.net/qq_43290318/article/details/111601738。

后端代码

controller层


package easymall.controller;
 
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.ObjectUtils;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
 
import easymall.po.Products;
import easymall.pojo.ProdListReqParamsVo;
import easymall.service.ProductsService;
 
@Controller("productsController")
public class ProductsController {
 
	@Autowired
	private ProductsService productsService;
	
	/**
	 * 该接口必须支持post和get方式访问
	 * 因为表单提交是post方式，而第一次打开页面和点击页码切换页面都是get方式
	 * 
	 * @param page	    当前页。分页所需参数，如果前端不传，则默认为1
	 * @param count		每页显示多少条记录。分页所需参数，如果前端不传，则默认为2
	 */
	@RequestMapping("/prodlist") 
	public String prodlist(@ModelAttribute("params") ProdListReqParamsVo params, 
			Integer page, Integer count, Model model) {
		// 参数检查和纠正
		if (!ObjectUtils.isEmpty(params.getMinPrice()) &&
				!ObjectUtils.isEmpty(params.getMaxPrice())) {
			// 纠正 minPrice为非负数 
			if (params.getMinPrice() < 0) {
				params.setMinPrice(0d);
			}
			// 纠正为 minPrice <= maxPrice
			if (params.getMinPrice() > params.getMaxPrice()) {
				double min = params.getMinPrice();
				params.setMinPrice(params.getMaxPrice());
				params.setMaxPrice(min);
			}
		}
		// curPage 是否越界，可不需要判断，PageHelper内部会判断并纠正
		if (ObjectUtils.isEmpty(page)) {
			page = 1;
		}
		if (ObjectUtils.isEmpty(count) || count <= 0) {
			count = 2;
		}
		
		// 查询所有分类
		List<String> cates = productsService.allcategorys();
		
		// 调用PageHelper进行分页
		// 紧跟在这个方法后的第一个MyBatis 查询方法会被进行分页
		PageHelper.startPage(page, count);
		
		// 查询数据
		List<Products> prodList = productsService.getProdListByConds(params);
		
		// 获取各种分页属性
		PageInfo<Products> pageInfo = new PageInfo<>(prodList);
		// 将有效的参数拼接成url字符串，用于拼接到url后面。切换页码时携带
		String urlParamsStr = params.joinUrlParams();
		
		model.addAttribute("cates", cates);  // 分类数据
		model.addAttribute("prodList", prodList); // 商品列表数据
		model.addAttribute("page", pageInfo.getPageNum()); // 传给前端被修正后的当前页
		model.addAttribute("count", count);  // 每一页显示多少条记录
		model.addAttribute("total", pageInfo.getTotal()); // 总记录数
		model.addAttribute("urlParamsStr", urlParamsStr);
		
		return "prod_list";
	}
}

vo


package easymall.pojo;
 
 
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
 
import org.springframework.util.ObjectUtils;
 
/**
 * 商品列表接口的请求参数
 * 
 * @author	passerbyYSQ
 * @date	2020-11-30 19:49:08
 */
public class ProdListReqParamsVo {
	
	// 商品名称关键词。可以为空
	private String prodName;
	
	// 分类名字。可以为空，为空时表示所有分类
	private String cate;
	
	// 最低价格。不允许为负数，且 minPrice <= maxPrice 
	private Double minPrice;
	
	// 最高价格。不允许为负数，且 minPrice <= maxPrice 
	private Double maxPrice;
	
	/**
	 * 将有效的参数拼接成url字符串，用于拼接到url后面。切换页码时携带
	 */
	public String joinUrlParams() {
		StringBuilder urlParamsStr = new StringBuilder("");
		if (prodName != null) { // 可以为空串
			urlParamsStr.append("&prodName=").append(prodName);
		}
		if (cate != null) { // 可以为空串
			String cateTmp = cate;
			try {
				// 对中文进行url编码
				cateTmp = URLEncoder.encode(cate, "UTF-8");
			} catch (UnsupportedEncodingException e) {
				e.printStackTrace();
			}
			urlParamsStr.append("&cate=").append(cateTmp);
		}
		if (!ObjectUtils.isEmpty(minPrice)) {
			urlParamsStr.append("&minPrice=").append(minPrice);
		}
		if (!ObjectUtils.isEmpty(maxPrice)) {
			urlParamsStr.append("&maxPrice=").append(maxPrice);
		}
		
		return urlParamsStr.toString();
	}
 
	public String getProdName() {
		return prodName;
	}
	
	public void setProdName(String prodName) {
		this.prodName = prodName;
	}
 
	public String getCate() {
		return cate;
	}
 
	public void setCate(String cate) {
		this.cate = cate;
	}
 
	public Double getMinPrice() {
		return minPrice;
	}
 
	public void setMinPrice(Double minPrice) {
		this.minPrice = minPrice;
	}
 
	public Double getMaxPrice() {
		return maxPrice;
	}
 
	public void setMaxPrice(Double maxPrice) {
		this.maxPrice = maxPrice;
	}
 
	@Override
	public String toString() {
		return "ProdListReqParamsVo [goodsName=" + prodName + ", cate=" + cate + ", minPrice=" + minPrice
				+ ", maxPrice=" + maxPrice + "]";
	}
	
}

XML

由于Service层没有什么关键代码，这里我直接贴出XML中的SQL语句！


    <!-- 根据多条件检索商品 -->
   <select id="selectProdsByConds" parameterType="easymall.pojo.ProdListReqParamsVo" resultType="easymall.po.Products">
 
  	 select * from products
  	 <where>
  	 	<if test="prodName!=null and prodName!=''">
  	 		<!-- mybatis提供了<bind>标签来解决不同数据库模糊查询的差异，建议使用bind标签 -->
  	 		<bind name="prod_name" value="'%' + prodName + '%'" />
  	 		and name like #{prod_name}
  	 	</if>
  	 	<if test="cate!=null and cate!=''">
  	 		and category=#{cate}
  	 	</if>
  	 	<if test="minPrice!=null">
  	 		and price&gt;=#{minPrice}
  	 	</if>
  	 	<if test="maxPrice!=null">
  	 		and #{maxPrice} &gt;= price
  	 	</if>
  	 </where>
  		
  </select>

前端代码

prod_list.jsp


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<link href="${pageContext.request.contextPath }/css/prodList.css" rel="stylesheet" type="text/css">
	<link href="${pageContext.request.contextPath }/css/pageHelper.css" rel="stylesheet" type="text/css">
	
	<style>
		.pagehelper {
			text-align: center;
		}
	</style>
	
</head>
<body>
 
	<%@ include file="_head.jsp" %>
	
	<div id="content">
		<div id="search_div">
			<form method="post" action="${pageContext.request.contextPath}/prodlist">
				<span class="input_span">商品名：<input type="text" name="prodName" value="${params.prodName}"/></span>
				<span class="input_span">商品种类：</span>
				<select name="cate">
					<option value="">不限</option>
					<c:forEach items="${cates}" var="cate">
						<option value="${cate}" <c:if test="${cate==params.cate}">selected</c:if>>${cate}</option>
					</c:forEach>
 
				</select>
				<span class="input_span">商品价格区间：</span>
				<input type="text" name="minPrice" value="${params.minPrice}"/>
				- <input type="text" name="maxPrice" value="${params.maxPrice}"/>
				<input type="submit" value="查 询">
			</form>
		</div>
		
		<!-- 放置分页按钮 -->
		<div class="pagehelper">
			
		</div>
		
		<div id="prod_content">
		<c:forEach items="${prodList}" var="prod">
			<div class="prod_div">
				<a href="${pageContext.request.contextPath}/prodInfo?pid=${prod.id}" target="-blank">
				<img src="${pageContext.request.contextPath}${prod.imgurl}" border="0"></img>
				</a>
				<div id="prod_name_div">
					<a href="${pageContext.request.contextPath}/prodInfo?pid=${prod.id}" target="-blank">
						${prod.name}
					</a>
				</div>
				<div id="prod_price_div">
					￥${prod.price}元
				</div>
				<div>
					<div id="gotocart_div">
						<a href="${ pageContext.request.contextPath }/cart/addCart?pid=${prod.id}&buyNum=1">加入购物车</a>
					</div>					
					<div id="say_div">
						133人评价
					</div>					
				</div>
			</div>
			</c:forEach>
			<div style="clear: both"></div>
		</div>
	</div>
	<%@ include file="_foot.jsp" %>
	
	<script src="${pageContext.request.contextPath }/js/jquery-1.4.2.js"></script>
	<script src="${pageContext.request.contextPath }/js/pageHelper.js"></script>
	
	<script>
		$(function() {
			let API_URL = "${pageContext.request.contextPath}/prodlist";
			let curPage = ${page};  
			let total = ${total};
			let count = ${count}; 
			let sideBtnCount = 2;
			let urlParamsStr = '${urlParamsStr}';
			
			let btnHtml = pageHelper(API_URL, curPage, total, count, sideBtnCount, urlParamsStr);
			$('div.pagehelper').html(btnHtml);
		})
	</script>
</body>
</html>

pageHelper.js

封装页码的生成逻辑


/**
 * 生成分页按钮的html代码
 * @param curPage       当前页。理应由前端传给后端，但是前端的传参有可能超出实际范围，这就必须交由
 *                      后端来纠正之后，再查询对应页码的数据。然后后端将纠正后的当前页返回给前端，
 *                      以便前端来渲染页码按钮组。如果不传，由后端返回默认值1
 * @param total         总记录数。实际上，后端可以直接返回总页数就可以了，只不过有一定局限性：假如
 *                      前端还需要显示总记录数，凭借总页数和每页记录数，是无法计算出总记录数的。而返
 *                      回总记录数，前端可以自行计算总页数，同时还可以额外显示总记录数
 * @param count         每页显示的记录数，由前端传给后端。如果不传，使用后端定义的默认值
 * @param sideBtnCount  当前页按钮的左边有多少个按钮，不需要传给后端
 * @param urlParamsStr	点击页码切换页面时，携带的条件参数的字符串，拼接在url后面。由后端定义并传给
 *			            前端。后端接口并负责接收，按照自己定义的规则进行解析，拆解参数。
 *			            例子：&name=ysq&age=21。前面的&不能少
 */
function pageHelper(API_URL, curPage, total, count, sideBtnCount, urlParamsStr) {
    // 计算总页数
    let pageCount = Math.ceil(total / count);
	
 	let leftPage, rightPage;
 
	if (pageCount <= 2 * sideBtnCount + 1) {
		leftPage = 1;
		rightPage = pageCount; 
	} else {
		// 计算按钮组最左端和最右端的页码
	    // 将[1, pageCount]分为3个区间：
	    // [1, sideBtnCount]，[sideBtnCount+1, pageCount-sideBtnCount]，[pageCount-sideBtnCount+1, pageCount]
	   	if (curPage > sideBtnCount && curPage <= pageCount - sideBtnCount) {
	        // [sideBtnCount+1, pageCount-sideBtnCount]
	        leftPage = curPage - sideBtnCount;
	        rightPage = curPage + sideBtnCount;
	
	    } else if (curPage <= sideBtnCount) {
	        // [1, sideBtnCount]
	        leftPage = 1;
	        rightPage = 2 * sideBtnCount + 1;
	        // 越界时，修正当前页
	        if (curPage < 1) {
	            curPage = 1;
	        }
	
	    } else if (curPage > pageCount - sideBtnCount) {
	        // [pageCount-sideBtnCount+1, pageCount]
	        leftPage = pageCount - 2 * sideBtnCount;
	        rightPage = pageCount;
	        // 越界时，修正当前页
	        if (curPage > pageCount) {
	            curPage = pageCount;
	        }
	    }
	}
 
    return "<div class='pagination'>" +
            firstBtn('First') +
            preBtn('Pre') +
            numBtn(leftPage, rightPage) +
            nextBtn('Next') +
            lastBtn('Last') +
            "</div>";
 
    /**
     * 返回一个可点击的按钮的html代码
     * @param contentHtml   按钮中的内容
     */
    function clickableBtn(contentHtml, num) {
        //return  `<a href='${API_URL}?page=${num}${urlParamsStr}'>${contentHtml}</a>`;
		return  "<a href='" + API_URL + "?page=" + num + urlParamsStr + "'>" + contentHtml + "</a>";
    }
 
    /**
     * 返回一个当前页按钮的html代码
     * @param contentHtml
     */
    function currentBtn(contentHtml) {
        //return  `<span>${contentHtml}</span>`;
		return  "<span>" + contentHtml + "</span>";
    }
 
    /**
     * 返回上一页按钮的html代码
     * @param contentHtml
     */
    function preBtn(contentHtml) {
        if (curPage <= 1) {
            return ''; // 我这里直接返回空，你也可以根据你的喜好，返回禁用点击的按钮
        }
        return clickableBtn(contentHtml, curPage - 1);
    }
 
    /**
     * 返回下一页按钮的html代码
     * @param contentHtml
     */
    function nextBtn(contentHtml) {
        if (curPage >= pageCount) {
            return '';
        }
        return clickableBtn(contentHtml, curPage + 1);
    }
 
    /**
     * 返回首页按钮的html代码
     * @param contentHtml
     */
    function firstBtn(contentHtml) {
        if (leftPage <= 1) {
            // 如果首页(1)已经显示在了按钮组(>=leftPage)当中，则不需要首页按钮，这里我直接返回空
            return '';
        }
        return clickableBtn(contentHtml, 1);
    }
 
    /**
     * 返回末页按钮的html代码
     * @param contentHtml
     */
    function lastBtn(contentHtml) {
        if (pageCount <= rightPage) {
            // 如果末页(pageCount)已经显示在了按钮组(<=rightPage)当中，则不需要首页按钮，这里我直接返回空
            return '';
        }
        return clickableBtn(contentHtml, pageCount);
    }
 
    /**
     * 生成[left, right]区间的按钮的html代码
     * @param left
     * @param right
     */
    function numBtn(left, right) {
        let btnHtml = '';
        for (let i = left; i <= right; i++) {
            if (i === curPage) {  // 当前页
                btnHtml += currentBtn(i);
            } else {
                btnHtml += clickableBtn(i, i);
            }
        }
        return btnHtml;
    }
}
 
// 获取指定的路径参数，获取不到返回空串
function getUrlParam(key) {
    // ? 后面的
    let searchStr = window.location.search.substring(1);
    console.log(searchStr);
 
    let paramMap = new Array();
 
    let paramEntrys = searchStr.split('&');
    for(let i=0; i<paramEntrys.length; i++) {
        let entry = paramEntrys[i].split('=');
        paramMap[ entry[0] ] = entry[1];
    }
 
    console.log(paramMap);
 
    return paramMap[key];
}

pageHelper.css

自定义页码按钮的css样式


.pagination {
	margin: 12px;
}
.pagination a {
    background:url(../img/core_bg.png) #f8f8f8;
    border-color: #c9c9c9 #bdbdbd #b0b0b0;
    border-image: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    color: #666666;
    display: inline-block;
    line-height: 13px;
    margin-right: 3px;
    padding: 6px 10px;
    text-decoration: none;
    vertical-align: top;
}
.pagination a:hover {
	background-color: #f8f8f8;
    border-color:#c9c9c9 #bdbdbd #b0b0b0;
    border-image:none;
    border-radius:3px;
    border-style:solid;
    border-width:1px;
    color:#666666;
    display:inline-block;
    line-height:13px;
    margin-right:3px;
    padding:6px 10px;
    text-decoration:none;
    background:#488fcf;
    border-color: #2470b5 #488fcf #488fcf;
    color:#fff;
}
.pagination span {
    background-color: #f8f8f8;
    border-color:#c9c9c9 #bdbdbd #b0b0b0;
    border-image:none;
    border-radius:3px;
    border-style:solid;
    border-width:1px;
    color:#666666;
    display:inline-block;
    line-height:13px;
    margin-right:3px;
    padding:6px 10px;
    text-decoration:none;
    background:#488fcf;
    border-color: #2470b5 #488fcf #488fcf;
    color:#fff;
}

css引用的背景图：core_bg.png

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/157242