电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java

一、概述
学习实践Web开发5年多了，直到今天，我才算真正实现了最基本最常用的分页组件。

包括：
a.前端JS异步加载并渲染；
b.前端JSP、Freemarker、Struts标签渲染；
c.后端分页
自己写具体的分页算法和逻辑。
使用Mybatis分页插件。

今天，重点介绍下前端JS异步分页，简短介绍下后端Java提供数据。

二、关键数据结构

 public class PageVo {/** 总记录数 */protected Integer totalCount = 0;/** 总共有多少页 */protected Integer totalPage = 0;/** 第几页 */protected Integer pageNo = 1;/** 每页显示条数 */protected Integer pageSize = 10;/** 表格中的数据 */protected List<?> rows;
｝

三、后端Java提供分页数据源的思路：
控制层

@RequestMapping("list")public void list(PageVo pageVo, HttpServletResponse response) {PageVo page = adminGoodsService.page(pageVo);super.jsonPage(page, response);}

服务层，就是获得PageVo对象，包含了分页和list集合的数据。
持久层，获得list和totalCount、totalPage等count数目，具体思路就是用Mybatis拦截器，拦截list查询，截取list的sql，拼接成count。
关键规律：list的sql和count的sql，后半部分是完全一样的，比如
listSql ="select * from goods";
countSql =" select count(*) from goods":

四、前端分页组件

Html内容部分

<table ><thead><tr><th>流水号</th><th>ID</th><th>分类</th><th>名称</th><th>标题</th><th>现价</th><th>原价</th><th>浏览量</th><th>创建时间</th><th>状态</th><th>操作</th></tr></thead><tbody id="bodyHolder"></tbody></table><div id="pageHolder"></div>

这部分，解决2个问题，1是表头部分确定了2是留出了2个div，“bodyHolder”和"pageHolder"。
bodyHolder最终放动态生成的表主体的html内容，pageHolder主要放动态生成的分页栏。

调用JS组件部分

<script>(function() {var fuPage = new FuPage({"url" : "/goods/list.html","params" : {"pageNo" : 1,"pageSize" : 1},"bodyHolder" : "bodyHolder","pageHolder" : "pageHolder","tableTemplate" : "<tr><td>{id}</td><td>{goodsId}</td></tr>"});fuPage.send();})();
</script>

url：提供数据源的url
params：分页参数，查询参数等参数部分
bodyHolder和pageHolder请参考上面的介绍
tableTemplate:表主体的一行row的模版。

JS组件的结构

function FuPage(options) {this.url = options.url;this.params = options.params;this.startNo = 1;this.endNo = 1;this.tableTemplate = options.tableTemplate;this.bodyHolder=options.bodyHolder;this.pageHolder=options.pageHolder;
}
//发送请求并渲染tableFuPage.prototype.send = function() {var that = this;$.post(this.url, this.params, function(data) {var page = data.page;if (that.isTable) {that.renderTable(page);} else {that.renderList(that, page);}renderPage(that, page);addPageEvent(that, page);});
}FuPage.prototype.renderTable = function(page) {}
// 渲染分页栏
function renderPage(fuPage, page) {}
// 为分页超链接绑定click事件
function addPageEvent(fuPage, page) {}

以上是主要的思路，前端异步，后端提供数据的一种解决方案。待完善。

时候不早了，抽空续写，感谢大家“收看” ~

小雷FansUnion-博学的互联网技术工作者

2015年1月7日-凌晨

湖北-武汉-循礼门

电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java相关推荐

电子商务系统数据库设计（一）
数据库基本操作最近学数据库数据库学得飞起,学数据库当然少不了学sql,老师讲得很多很系统,但是我相信很多初学者不可能在短短40分钟之内把所有老师将的课程都吸收,个人认为,数据库的精髓在于多实践,多练 ...
电子商务毕业论文php,基于PHP的校园电子商务系统的设计与实现.doc
摘要:近二十年,我国经济快速发展.科技不断提升,随着这些变化,人们的生活方式和思维方式也被慢慢的影响了,在衣食住行等日常生活的各个方面也在发生了极大的变化.信息化教育.网络化校园已经逐渐成为教育发展的 ...
电子商务系统的设计与实现：数据库设计
用户相关 malling_user:前端商城系统的用户,用户名.密码等 malling_user_delivery_address,用户的收获地址,一个用户可以有多个收获地址 malling_admi ...
电子商务系统的设计与实现(十二)：技术选型
2019独角兽企业重金招聘Python工程师标准>>> Web前端最标准化的3项技术:HTML.JavaScript.CSS. 其中,HTML主要使用4, JS框架主要使用j ...
非小型电子商务系统数据库设计
转载自:IT博客吧: http://www.itblog8.cn/sql/20130604139.html 前言做了两年多针对淘宝的电子商务数据线下数据系统,越到后面越觉得自己还没入门,不管技术上还 ...
电子商务系统的设计与实现(五)：账务系统的功能接口设计
2019独角兽企业重金招聘Python工程师标准>>> 电商系统.p2p网贷系统.第三方支付都可以有自己的账务系统, 账务系统与用户系统可以完全独立,不需要用户ID等信息,只提供给其 ...
电子商务系统的设计与实现(十一)：数据库设计
用户相关 malling_user:前端商城系统的用户,用户名.密码等 malling_user_delivery_address,用户的收获地址,一个用户可以有多个收获地址 malling_admi ...
电子商务系统的设计与实现(九)：后端管理系统功能细化
2019独角兽企业重金招聘Python工程师标准>>> 1.商品管理 1.1 创建商品.修改商品.删除商品.商品列表.条件查询 1.2商品分类 2.用户管理基本 ...
电子商务系统测试软件相关文档,电子商务系统软件测试文档
<电子商务系统软件测试文档>由会员分享,可在线阅读,更多相关<电子商务系统软件测试文档(15页珍藏版)>请在人人文库网上搜索. 1.电子商务系统测试说明(节选)软件技术专业2 ...

电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java

电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java相关推荐

最新文章

热门文章