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

2023-08-07 05:44| 来源: 网络整理| 查看: 265

1 问题背景

效果图如下所示：

在这里插入图片描述

2 前言

针对本篇博文，有问题的小伙伴欢迎留言

3 技术栈后台：SSM前台：Layui。因为全是html，没有jsp，所以在写任何路径时要记得加上/项目名商品展示：使用Layui的laypage，用ajax 同步请求提交 4 解决方案

定义2个容器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的完整的代码：

layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji', 'laypage'], function () { var $ = layui.jquery, layer = layui.layer, miniAdmin = layui.miniAdmin, miniTongji = layui.miniTongji, laypage = layui.laypage; var page = 1;//当前页 var limit = 16;//每页显示的数目 var resCount, resData ; var resPage = renderPage1(); //渲染展示商品的html页面 function renderProductHtml(data){ var str = "";//用来存储html内容 if(data.length > 0){ $.each(data, function(v, o){ str += "

"; str += "商品名称:"+o.productName+""; str += "价格:￥"+o.price+""; str += "新旧程度:"+o.degree+""; str += "销量:"+o.sales+""; str += "库存:"+o.stock+""; str += "商品ID:"+o.product_id+""; }); $("#product").html(str); } } //同步加载商品数据 function renderProduct(page, limit){ $.ajax({ async: false, url: '/UsedProduct/product/getProductPage', data: {"page": page, "limit": limit}, dataType: 'json', success: function(result){ console.info(result); resCount = result.count; resData = result.data; renderProductHtml(resData); } }); } //分页的完整功能 function renderPage1(){ renderProduct(page, limit); laypage.render({ elem: 'layuipage' ,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){ renderProduct(page, limit); } } }); } });

ajax提交的请求，交给servlet处理，servlet必须返回json格式（所以必须加@ResponseBody注释。响应报文的格式必须包含code、msg、count、data字段。servlet代码如下：

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

更新于2022-04-12：

本博文是笔者在校期间做的一个小demo，算不得一个项目。看着接近毕业日期，很多小伙伴看笔者的这篇文章。如果大家拿来做毕设，不推荐使用Layui作为前端技术栈，推荐使用vue。如果觉得压力大，无法完成前后端所有工作，毕设可以考虑做其他东西，比如缓存一致性算法、高可用解决方案、高性能解决方案、排序算法的变种。追求细致的点，没必要做那种完整的项目，学校老师多年经验都看腻了那些完整项目的毕设了，都非常极力推荐有亮点、更加细致的东西。笔者做的是一个高并发场景下如何提高数据加载速率，涉及到了一整套缓存架构，其中有jvm内存缓存、分布式缓存、nginx缓存架构等等，做起来也不会枯燥乏味。针对本篇博文，有问题的小伙伴欢迎留言。

【本文地址】

公司简介

联系我们