Springboot2 的分页集成 前后端数据

Springboot 的集成 pagehelper 插件做分页，后端的比较简单的一些，在做的过程中踩了一些坑，现在很多文章贴的都是后端的实现，现在记录一下自己做的成果，感觉还不错！开始吧 》》》 

1、 在 pom.xml 文件中添加（可以去Maven Repository 下载最新的版本的）：

<!-- 分页插件 -->
<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
	<version>1.2.5</version>
</dependency>

2、在 application.properties 中添加（里面的意思不贴了，自己可去百度）：

# Pagehelper #分页插件
pagehelper.helper-dialect=mysql 
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
pagehelper.params=count=countSql 

3、 Controller 层

@Controller
@RequestMapping("/")
public class CompanyNewsController {
	@Autowired
	private ICompanyNewsService iCompanyNewsService;
	//数据
	@RequestMapping(value="cpn",method= {RequestMethod.GET,RequestMethod.POST})//这里GET、POST请求都可以
	@ResponseBody
	public PageInfo<CompanyNews> getAll(@RequestParam(value = "page",defaultValue = "1") Integer page){
		int row = 10;//自定义10行 或者传参 @RequestParam(value = "row",defaultValue = "10") Integer row)
		PageInfo<CompanyNews> st= iCompanyNewsService.findCompanyN(page, row);
		if(st != null && st.getSize() > 0) {
			return st;
		}
		return null;
	}
    //页面访问
        @RequestMapping(value = "/companyNews")
	public String showCompanyN() {
		return "companyNews";
	}

}

4、Service层

@Service
public class CompanyNewsImp implements ICompanyNewsService{
	@Autowired
	private ICompanyNewsDao iCompanyNewsDao;
	@Override
	public PageInfo<CompanyNews> findCompanyN(Integer page, Integer row) {
		PageHelper.startPage(page, row);//页数 和 行数
	    List<CompanyNews> ls = iCompanyNewsDao.findCompanyN();//得到数据
	    PageInfo<CompanyNews> ss = new PageInfo<>(ls);//封装到 PageInfo 里面
		return ss;
	}
}

实体类:

@Component
public class CompanyNews {

	private Integer cnId;
	private Integer cnNo;//序号
	private String cnTitle;//标题
	private String cnPath;//路径
	private String cnDate;//时间

    // get和set自己去生成;我就不贴那么多了
}

5、resources 下的 Mapper 层 

<sql id="comN-sql">cn_id as cnId,cn_no as cnNo,cn_title as cnTitle,cn_path as cnPath,cn_date as cnDate</sql>
 <!-- 查询 -->
 <select id="findCompanyN" resultType="com.lenze.ssm.entity.CompanyNews">
 	select <include refid="comN-sql"/> from company_news order by cn_id desc
 </select>

6、html （重要部分代码，UI显示层）

<div class="apu_aboutAndContact_apd" >
	<ul id="ad_ul" class="apu_aboutAndContact_ul"></ul>
</div>
<div class="apu_aboutAndContact_page">
	<ul class="apu_aboutAndContact_page_ul">
		<li id="ad_page" class="apu_aboutAndContact_page_li" style="display:none"></li>
		<li class="apu_aboutAndContact_page_li">
			<a onclick="prePage()" class="apu_aboutAndContact_page_btn prePage">上一页</a>
		</li>
		<li class="apu_aboutAndContact_page_li">
			<input type="text" class="apu_aboutAndContact_page_input select_go">
			<a onclick="goPage()" class="apu_aboutAndContact_page_go">GO</a>
		</li>
		<li class="apu_aboutAndContact_page_li">
		    <a onclick="nextPage()" class="apu_aboutAndContact_page_btn nextPage">下一页</a>
		</li>
	</ul>
</div>	

7、JavaScript （这才是鸡腿，）

<script type="text/javascript">
	$(document).ready(function(){//初始化	加载
		var num = 1;
		loadPage(num);//默认
	});		
	function loadPage(num){
		$.ajax({ 
			type: "POST", //发送POST
			url: "cpn", //发送的地址
			dataType: "json", //传输数据的格式
			data: {"page": num}, //传输的数据
			success: function(data) {   //成功的回调函数
			    var ht = "";//定义
			    $(".prePage").show();//定义
				$(".nextPage").show();//定义
				var lts = data.list;
				for(var i in lts){
					ht += "<li class='apu_aboutAndContact_li'><a href='"+lts[i].cnPath+"'>"+lts[i].cnTitle+"</a><span class='apu_aboutAndContact_date'>"+lts[i].cnDate+"</span></li>";
				}
				$("#ad_ul").html(ht);//显示数据到页面
				//存放页面数据
				$("#ad_page").html("<span id='prePage' class='ad_page_none'>"+data.prePage+"</span><span id='nextPage' class='ad_page_none'>"+data.nextPage+"</span><span id='pagesPage' class='ad_page_none'>"+data.pages+"</span><span id='nowPage' class='ad_page_none'>"+data.pageNum+"</span>");
				if(data.prePage == 0){//判断上一页按钮
					$(".prePage").hide();
				}
				if(data.pageNum == data.pages){//判断下一页按钮
					$(".nextPage").hide();
				}
			}, 
			error: function() {   //失败的回调函数
				 console.log("error");
			} 
		}) 	 
	}
	function prePage(){//上一页
		var pre = $("#prePage").text();
		loadPage(pre);
	}
	function nextPage(){//下一页
		var next = $("#nextPage").text();
		loadPage(next);
	}
	function goPage(){//跳转
		var go = $(".select_go").val().trim();
		var last = $("#pagesPage").text();
		if(go > 0 && go <= last){
		    loadPage(go);
		    $(".select_go").val("");//清空数据
	    }
		console.log(last);//打印
	}
</script>

说说一些不够细心容易忽略(坑)的细节：（1）实体类的引用用错属性（2）Mapper 层忽视容易返回 null 数据 （3）就是数据的显示与ajax调用 。

参考他人的来源：https://blog.csdn.net/qq_40237472/article/details/80177379

扫描二维码关注公众号，回复： 5074443 查看本文章

本人做的页面效果：欢迎你的到来