SSM使用layui实现商品展示并分页，类似淘宝那样

蔚落 2023-07-17 15:38 16阅读 0赞

# 一. 问题背景 #

## 1.1 效果图 ##

如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]

## 1.2 本项目用到的技术 ##

后台：SSM  
前台：layui，全是html，没有jsp，所以在写路径时要记得加上`/项目名`  
商品展示：使用layui的laypage，用ajax 同步请求提交

# 二. 解决方案 #

*  首先定义一个容器div用来展示商品，定义一个容器div用来显示分页导航栏

*  在这里先列出最最最关键的代码，就是渲染分页，记住必须在分页显示前就获取到商品的数据，否则分页导航栏将显示不出来

//分页的完整功能，page，limit，resCount都是自定义的全局变量
            function renderPage1(){ 
                 renderProduct(page, limit);//关键
            	 laypage.render({ 
                     elem: 'layuipage'//div的id，不能加#
                     ,count: resCount//数据总条数
                     ,limit: limit//每页显示多少条数据
                     ,limits: [limit]//可选择的 每页显示多少条数据
                     ,curr: page//当前页码
                     ,theme: '#FFB800'//分页导航栏的颜色，用了橘色
                     ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                     ,jump: function(obj, first){ 
                       console.info(obj);
                       page = obj.curr;
                       if(!first){ //如果不是首次加载，那么进行ajax同步获取数据请求
                    	   renderProduct(page, limit);//关键
                       }
                     }
                   });
            }

**解释：** 注意，elem的值中不能加\#，从上面可以看到有一个`renderProduct(page, limit)`的方法，这是最最最最最最关键的代码，必须在进行渲染分页前就获得商品的数据（如商品ID，商品名称等等），获取完数据后，再进行分页渲染，然后在`jump`中的`if(!first)`中再次进行获取数据，否则会进行无限刷新

*  下面给出js的完整的代码

*  ajax提交的请求，交给servlet处理，servlet必须返回json格式（所以必须加`@ResponseBody`注释的数据且接口必须是code，msg，count，data格式，servlet代码如下：

@ResponseBody  
    	@RequestMapping(value="/getProductPage")
    	public Map<String, Object> getProductPage(@RequestParam("page")Integer page,
    			@RequestParam("limit")Integer limit){ 
    		Map<String,Object> map = new HashMap<String, Object>();
    		PageInfo<Product> pageInfo = productService.getProductPage(page, limit);
    		map.put("code", 0);
    		map.put("msg", "操作成功");
    		map.put("count", pageInfo.getTotal());
    		map.put("data", pageInfo.getList());
    		return map;
    	}

有问题的小伙伴欢迎留言

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/fe486e85802549c9a007dfb083d85565.png