培训管理网站建设,wordpress 转换成帝国,怎样开发一个app软件,现在做网络的哪个方面最挣钱文章目录前言一、项目场景分析二、实体类定义描述#xff08;仅关键代码#xff09;2.1、实体类定义描述2.2、逻辑处理与分析2.3、遍历数据如何修改的问题暴露三、处理思路3.1、源码分析 jQuery 中的 each 遍历3.2、如何解决 jQuery 中控制获取 each 的遍历次数总结前言 前台…
文章目录前言一、项目场景分析二、实体类定义描述仅关键代码2.1、实体类定义描述2.2、逻辑处理与分析2.3、遍历数据如何修改的问题暴露三、处理思路3.1、源码分析 jQuery 中的 each 遍历3.2、如何解决 jQuery 中控制获取 each 的遍历次数总结前言 前台接收到的数据即为 data里面默认在一个 page 页面显示的是 6 条数据个别页面可能直接取 6 条数据能够满足我们的需求但是如果我们在其他页面也从 data 中取数据数据条数就可能不是 6 条这里仅说明6条的情况——根据实体类的定义走当我们直接使用 jquery 进行 each 遍历的时候直接遍历的结果就是 6 条很有可能就不满足我们的需求所以如果在不改变实体类、CSS 样式的情况下对在 jquery 中获取 each 的遍历次数的控制就是最好的实现方法。 一、项目场景分析
今天在做一个项目时遇到了列表遍历的一个问题定义一个实体类 Page数据写死默认每页显示 6 条数据通过 service 处理 dao 查询数据库的结果在当前 new 的对象 page 中存放 6 条数据并返给 servletservlet 通过返回 json 的形式将 page 对象返回给前台。
前台接收到的数据即为 data里面默认在一个 page 页面显示的是 6 条数据个别页面可能直接取 6 条数据能够满足我们的需求但是如果我们在其他页面也从 data 中取数据数据条数就可能不是 6 条这里仅说明 6 条的情况——根据实体类的定义走当我们直接使用 jquery 进行 each 遍历的时候直接遍历的结果就是 6 条很有可能就不满足我们的需求所以如果在不改变实体类、CSS 样式的情况下对在 jquery 中获取 each 的遍历次数的控制就是最好的实现方法。
二、实体类定义描述仅关键代码
2.1、实体类定义描述
我们对数据进行分页操作定义一个实体类 Page数据写死默认每页显示 6 条数据代码如下
public class Page {private Integer totalPage;// 总页数private Integer totalCount;// 总数据条数private Integer currentPage;// 当前页码private Integer pageCount 6;// 每页显示条数private ListRoute list;// 每页实际路线数据
}2.2、逻辑处理与分析
通过 dao 从数据库查询数据由 service 进行处理分页逻辑并将数据 return 给 servlet代码如下
public Page pageQuery(String cid, int cp) {Page page new Page();//封装5个数据//总条数int totalCount dao.findTotalCount(cid);page.setTotalCount(totalCount);//当前页码page.setCurrentPage(cp);//每页显示条数//固定每页显示6条//总页数/*** 总条数 每页显示条数 总页数* 29 6 5* 30 6 5* 31 6 6*/int totalPage;if (totalCount % 6 0) {totalPage totalCount / 6;}else {totalPage totalCount / 6 1;}page.setTotalPage(totalPage);//每页实际数据ListRoute list dao.findList(cid,cp,page.getPageCount());page.setList(list);return page;
}servlet 将获取到的 page 对象变成 json 形式的字符串发送给前台前台即接收到处理后的数据 data代码如下
Page page service.pageQuery(cid,cp);
//把数据传给前台
ObjectMapper om new ObjectMapper();
//把对象变成json形式的字符串
String s om.writeValueAsString(page);
//发送给前台
response.setContentType(application/json;charsetutf-8);
response.getWriter().write(s);我们直接使用 jquery 进行 each 遍历的时候直接遍历的结果就是 6 条代码如下
//在添加之前清空之前的数据
$(#popularityroute).html();
$(data.list).each(function(index,element){var li div classcol-md-3\na hrefjavascript:;\nimg srcimages/jiangxuan_4.jpg alt\ndiv classhas_border\nh3上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/h3\ndiv classprice网付价em/emstrong1/strongem起/em/div\n/div\n/a\n/div;//添加到ul里面$(#popularityroute).append(li);
})遍历结果如下图所示 2.3、遍历数据如何修改的问题暴露
但是如果我们在其他页面也从 data 中取数据数据条数就可能不是 6 条这里仅说明 6 条的情况——根据实体类的定义走当我们直接使用 jquery 进行 each 遍历的时候直接遍历的结果就是 6 条很有可能就不满足我们的需求。我们就需要取 4 条数据显示在本页面如下图所示 而如果不对遍历结果进行处理就是这样的情况如下图所示 很明显这是完全不符合我们需求的这破坏了页面的结构小心被前端程序员打死哦 那么为了避免矛盾产生作为 Java 程序员的我们就要对遍历的结果进行处理了。
三、处理思路
3.1、源码分析 jQuery 中的 each 遍历
首先我们先来熟悉一下这个 jquery 中的 each 遍历代码如下
//在添加之前清空之前的数据
$(#popularityroute).html();
$(data.list).each(function(index,element){var li div classcol-md-3\na hrefjavascript:;\nimg srcimages/jiangxuan_4.jpg alt\ndiv classhas_border\nh3上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/h3\ndiv classprice网付价em/emstrong1/strongem起/em/div\n/div\n/a\n/div;//添加到ul里面$(#popularityroute).append(li);
})我们通过console.log来输出一下返给前台数据data的内容一共是 5 个参数包含一个存了 6 条数据的list集合如下图所示 通过data.list来获取list的参数我们再通过console.log来输出一下list的内容以及index索引每个list即为一个li由于数据并未处理所以是 6 条相同的数据而现在我们仅需要显示前 4 条数据即可如下图所示 3.2、如何解决 jQuery 中控制获取 each 的遍历次数
显而易见现在我们只需要对数据的索引进行判断即可。比如如上页面我们仅需要前 4 条数据我们就可以通过控制索引的值来控制显示数据的条数——达到设定索引值结束遍历。如下图所示 解决方式index 的索引默认是从 0 开始计显示 4 条数据我们只需要在索引值达到 3 时把遍历停掉即可
if(index3){return true;
}补充这里使用了 jquery 跳出 each 循环的功能。我们在 Java 中熟悉的是 break 和 continue。
而在 jquery 中使用的是
return false——跳出所有循环相当于 javascript 中的 break 效果return true——跳出当前循环进入下一个循环相当于 javascript 中的 continue 效果
这样就满足了我们的需求同时也不改变后端逻辑与代码也不会破坏前端页面结构结果如下图所示 总结 优点通过这个方法我们基本就可以忽略在实体类中定义的默认一个 page 显示多少条数据的约束以实体类中的约束作为最大限制即可只要是在这个范围内的数据我们都可以控制和取到。既也不改变后端逻辑与代码也不会破坏前端页面结构。 缺点多余的数据会被隐藏掉所以在分页中不建议使用会造成丢失数据的情况。如果仅使用前几条数据进行限制还是没有任何问题的。 我是白鹿一个不懈奋斗的程序猿。望本文能对你有所裨益欢迎大家的一键三连若有其他问题、建议或者补充可以留言在文章下方感谢大家的支持
