电子商务系统的设计与实现(十三):分页组件,从前到后,从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;
}
//发送请求并渲染table
FuPage.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的更多相关文章
- 电子商务系统的设计与实现(十):DWZ框架与第三方分页组件整合
晚上,就是刚刚,在后端管理系统中使用DWZ框架. 先是,直接使用官网网站的Demo,dwz-jui,与编程语言无关的纯静态的那个原始项目. 很快就搭建好了左侧菜单,打开菜单后,出现Tab页面,然后显示 ...
- 电子商务系统的设计与实现(七):前后端系统UI设计的一些思考
对于大部分开发者来说,写界面是最烦人的事.我想,开发者最初诞生,以及我们在大学学习的时候,更加侧重的是程序设计和逻辑思维,而不是界面.界面更象是艺术,艺术和程序设计是两回事. 我个人还是想成为全栈式开 ...
- 基于Web在线考试系统的设计与实现
这是一个课程设计的文档,源码及文档数据库我都修改过了,貌似这里复制过来的时候图片不能贴出,下载地址:http://download.csdn.net/detail/sdksdk0/9361973 ...
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- B2C电子商务系统研发——商品SKU分析和设计(二)
转:http://www.cnblogs.com/winstonyan/archive/2012/01/07/2315886.html 上文谈到5种商品SKU设计模式,本文将做些细化说明. 笔者研究过 ...
- B2C电子商务系统研发——商品SKU分析和设计(一)
一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...
- 基于WPF系统框架设计(10)-分页控件设计
背景 最近要求项目组成员开发一个通用的分页组件,要求是这个组件简单易用,通用性,兼容现有框架MVVM模式,可是最后给我提交的成果勉强能够用,却欠少灵活性和框架兼容性. 设计的基本思想 传入数据源,总页 ...
- ASP.NET之电子商务系统开发-4(二级分类)
一.前言 继上次的订单,这是第四篇.记录一下分类和筛选.这功能是最后做的,因为我完全不懂其原理.后来通过同学的指导(一位很有天赋的同学,比我牛逼一个层次,同样是高三.:D),终于也是完成了.在写这篇博 ...
- 基于Mvc3,Ef,领域驱动电子商务系统的EShop开发
分享自己从代码小工一步步走向搭架子,ING... 简单了解UnitOfWork 摘要: UnitOfWorkUnit Of Work模式,即工作单元,它是一种数据访问模式.它是用来维护一个由已经被业务 ...
随机推荐
- spring与cxf整合配置webservice接口(以jaxws:server的方式配置)
ps:最近项目需要跟其他系统做同步,需要使用webservice来提供接口给其他系统调用:临时抱佛脚赶紧去网上找了下资料,发现用Endpoint的方式发布接口好容易哦:赶紧写了个例子做验证,发布成功. ...
- 【Educational Codeforces Round 33 A】Chess For Three
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.知道哪个人是旁观者就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever ...
- finalkeyword对JVM类载入器的影响
众所周知,当訪问一个类的变量或方法的时候.假设没有初始化该类.就会先去初始化一个类 可是,当这个类的变量为final的时候,就不一定了 请看以下的样例 package com.lala.shop; i ...
- Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值
Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值 题外话:一个问题研究到最后,那边记录文档的前半部分基本上都是没用的,甚至是错误的. 重点在最后,前边不过一些假想猜測. ht ...
- android studio 一次编译错误:Error:Minimum supported Gradle version is 2.14.1.
因为需要,今天从git上重新下载工程到另一个目录下,结果运行的时候报了这个错:Error:Minimum supported Gradle version is 2.14.1. Current ve ...
- 很安逸的离线API文档查询工具Dash和Zeal
大家开发的时候难免会查询一些文档,看一下API的调用方法等,所以会不同的语言去某一个地方去找,确实很麻烦,今天给大家安逸两款软件,肯定会让你爱不释手! Dash for macOS 官方地址:http ...
- Swift UIView 层次调整
Swift 中添加的UIView都是有层级的. 我们先添加三个看一看 let view1=UIView(frame: CGRectMake(10, 50, 200, 200)) let view2=U ...
- C语言深度剖析-----C语言中的字符串
S1字符数组 S2字符串,存在于栈空间 S3最常规的写字符串的方法,malloc是堆空间,存在于只读存储区,我们不能够改变指向S3的数据 S4堆空间 S4 字符串的长度 判断字符串长度,assert ...
- hdu 5078 Osu!(鞍山现场赛)
Osu! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Total Sub ...
- 解决linux下cocos2dx不能播放声音
cocos2dx2.2.1在linux下引用#include "SimpleAudioEngine.h".报错找不到该文件. 改动makefile文件,加入 SHAREDLIBS ...