淘淘商城第21讲——MyBatis分页插件(PageHelper)的使用以及商品列表的展示

最新推荐文章于 2024-06-28 11:50:46 发布

李阿昀

最新推荐文章于 2024-06-28 11:50:46 发布

阅读量9.8k

点赞数 8

分类专栏：阿昀的淘淘商城系列项目实战之淘淘商城文章标签：淘淘商城

本文链接：https://blog.csdn.net/yerenyuan_pku/article/details/72774381

版权

本文详细介绍了如何使用MyBatis分页插件PageHelper实现商品列表的分页查询功能。首先分析了商品列表展示页面的结构，接着讲解了EasyUI的页面局部刷新特性。然后重点阐述了PageHelper的使用，包括配置和测试，最后展示了如何在服务端和前端实现分页查询功能。

摘要由CSDN通过智能技术生成

上文我们实现了展示后台页面的功能，而本文我们要实现的主要功能是展示商品列表，大家要是实现了该功能，点击查询商品超链接，就能看到如下图所示的效果了。
在这里插入图片描述
下面我就来教大家如何实现展示商品列表这个功能。

如何分析商品列表展示页面呢？

我们知道，EasyUI的最大特点便是局部刷新，所有展示都是分模块展示的，不像我们一般页面采用全部刷新。查询商品列表只是index.jsp页面中的一个模块展示而已，我们下面来看下index.jsp页面的内容，如下图所示，可以看到，当我们点击查询商品这个链接的时候实际上是去访问了item-list这么一个逻辑视图。
在这里插入图片描述
然后我们再来看下item-list.jsp页面的内容，如下图所示，我们可以看到这个页面中的内容只是有个table和一个div，并没有文件头和尾，因此这并不是一个完整的页面，而只是一个片段而已（它是index.jsp页面中的一个代码片段而已，而EasyUI的特点便是对这样的代码块进行刷新，而不会刷新其它模块）。
在这里插入图片描述
从上面可看出item-list.jsp页面并不是一个完整的html，如果是一个完整的html，它应该是以<html>开头，以</html>结尾。除了index.jsp页面是一个完整的html之外，你会发现其他的jsp页面都是一个html的片段，因为EasyUI其实就是一个单页面的功能，EasyUI这里面所有的动作都是在一个html中完成的，它加载的这些jsp页面，都只是在加载一个片段而已，最后它再把这个片段添加到当前页面中。这就是我们通常所说的页面优化，大家是不是又学到了一个技能点呢？

下面我们再具体看下item-list.jsp这个页面的内容。首先看下<table>头信息，如下所示，可以看到，table的class设置成了easyui-datagrid，设置了它之后便默认把表格渲染成我们在最上方那张图所看到的表格样式。虽然不太好看，但是对于后台来说能用即可，美观并不是多么的重要。

<table class="easyui-datagrid" id="itemList" title="商品列表" 
       data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/list',method:'get',pageSize:30,toolbar:toolbar">

下面我对该<table>标签作如下简要说明：

data-options中的singleSelect:false表示可以多选，如果想要实现只能选择一条记录的效果，那么可以把singleSelect的值设置为true
collapsible:true所表示的意思是是否显示折叠按钮，如下图最右边红色框框圈住的按钮：

如果把collapsible的值设置为false，那么你将发现这个按钮将不再显示
pagination:true表示的意思是要显示分页，如果不想分页就把该值设置为false
url:'/item/list'的意思是我们初始化商品列表时请求的url路径
method:'get'表示请求的方式是GET
pageSize:30表示每页显示30条记录，我们从有分页信息的图中可以看到30这样的字样，它就是这里设置的值

toolbar:toolbar指定工具栏，如上图所示的新增、编辑、删除、下架以及上架这些菜单。我们要知道，toolbar是由js定义的，代码就在item-list.jsp页面下方的js代码中，如下所示：

var toolbar = [{
     
    text:'新增',
    iconCls:'icon-add',
    handler:function(){
     
    	$(".tree-title:contains('新增商品')").parent().click();
    }
},{
     
    text:'编辑',
    iconCls:'icon-edit',
    handler:function(){
     
    	var ids = getSelectionsIds();
    	if(ids.length == 0){
     
    		$.messager.alert('提示','必须选择一个商品才能编辑!');
    		return ;
    	}
    	if(ids.indexOf(',') > 0){
     
    		$.messager.alert('提示','只能选择一个商品!');
    		return ;
    	}
    	
    	$("#itemEditWindow").window({
     
    		onLoad :function(){
     
    			//回显数据
    			var data = $("#itemList").datagrid("getSelections")[0];
    			data.priceView = TAOTAO.formatPrice(data.price);
    			$("#itemeEditForm").form("load",data);
    			
    			// 加载商品描述
    			$.getJSON('/rest/item/query/item/desc/'+data.id,function(_data){
     
    				if(_data.status == 200){
     
    					//UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
    					itemEditEditor.html(_data.data.itemDesc);
    				}
    			});
    			
    			//加载商品规格
    			$.getJSON('/rest/item/param/item/query/'+data.id,function(_data){
     
    				if(_data && _data.status == 200 && _data.data &&

最低0.47元/天解锁文章

李阿昀

关注

8
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
16
评论
淘淘商城第21讲——MyBatis分页插件(PageHelper)的使用以及商品列表的展示

上文我们实现了展示后台页面的功能，而本文我们实现的主要功能是展示商品列表，大家要是实现了该功能，点击查询商品超链接，就能看到如下所示结果：下面我就来教大家如何实现展示商品列表这个功能。我们知道，EasyUI的最大特点便是局部刷新，所有展示都是分模块展示的，不像我们一般页面采用全部刷新。查询商品是index.jsp中的一个模块展示而已，我们下面来看下index.jsp页面代码，如下图所示。
复制链接

扫一扫