大屏监控jsp页面设计

Ⅰ 在jsP中如何实现分页技术啊

title: JSP分页技术实现
summary:使用工具类实现通用分页处理
author: evan_zhao
email: [email protected]

目前比较广泛使用的分页方式是将查询结果缓存在HttpSession或有状态bean中，翻页的时候从缓存中取出一页数据显示。这种方法有两个主要的缺点：一是用户可能看到的是过期数据；二是如果数据量非常大时第一次查询遍历结果集会耗费很长时间，并且缓存的数据也会占用大量内存，效率明显下降。
其它常见的方法还有每次翻页都查询一次数据库，从ResultSet中只取出一页数据（使用rs.last();rs.getRow()获得总计录条数，使用rs.absolute()定位到本页起始记录）。这种方式在某些数据库(如oracle)的JDBC实现中差不多也是需要遍历所有记录，实验证明在记录数很大时速度非常慢。
至于缓存结果集ResultSet的方法则完全是一种错误的做法。因为ResultSet在Statement或Connection关闭时也会被关闭，如果要使ResultSet有效势必长时间占用数据库连接。

因此比较好的分页做法应该是每次翻页的时候只从数据库里检索页面大小的块区的数据。这样虽然每次翻页都需要查询数据库，但查询出的记录数很少，网络传输数据量不大，如果使用连接池更可以略过最耗时的建立数据库连接过程。而在数据库端有各种成熟的优化技术用于提高查询速度，比在应用服务器层做缓存有效多了。

在oracle数据库中查询结果的行号使用伪列ROWNUM表示（从1开始）。例如select * from employee where rownum<10 返回前10条记录。但因为rownum是在查询之后排序之前赋值的，所以查询employee按birthday排序的第100到120条记录应该这么写：
[pre] select * from (
select my_table.*, rownum as my_rownum from (
select name, birthday from employee order by birthday
) my_table where rownum <120
) where my_rownum>=100
[/pre]
mySQL可以使用LIMIT子句：
select name, birthday from employee order by birthday LIMIT 99,20
DB2有rownumber()函数用于获取当前行数。
SQL Server没研究过，可以参考这篇文章：http://www.csdn.net/develop/article/18/18627.shtm

在Web程序中分页会被频繁使用，但分页的实现细节却是编程过程中比较麻烦的事情。大多分页显示的查询操作都同时需要处理复杂的多重查询条件，sql语句需要动态拼接组成，再加上分页需要的记录定位、总记录条数查询以及查询结果的遍历、封装和显示，程序会变得很复杂并且难以理解。因此需要一些工具类简化分页代码，使程序员专注于业务逻辑部分。下面是我设计的两个工具类：
PagedStatement 封装了数据库连接、总记录数查询、分页查询、结果数据封装和关闭数据库连接等操作，并使用了PreparedStatement支持动态设置参数。
RowSetPage 参考PetStore的page by page iterator模式， 设计RowSetPage用于封装查询结果（使用OracleCachedRowSet缓存查询出的一页数据，关于使用CachedRowSet封装数据库查询结果请参考JSP页面查询显示常用模式）以及当前页码、总记录条数、当前记录数等信息， 并且可以生成简单的HTML分页代码。
PagedStatement 查询的结果封装成RowsetPage。

下面是简单的使用示例：

//DAO查询数据部分代码：
…
public RowSetPage getEmployee(String gender, int pageNo) throws Exception{
String sql="select emp_id, emp_code, user_name, real_name from employee where gender =?";
//使用Oracle数据库的分页查询实现,每页显示5条
PagedStatement pst =new PagedStatementOracleImpl(sql, pageNo, 5);
pst.setString(1, gender);
return pst.executeQuery();
}

//Servlet处理查询请求部分代码：

…
int pageNo;
try{
//可以通过参数pageno获得用户选择的页码
pageNo = Integer.parseInt(request.getParameter("pageno") );
}catch(Exception ex){
//默认为第一页
pageNo=1;
}
String gender = request.getParameter("gender" );
request.setAttribute("empPage", myBean.getEmployee(gender, pageNo) );
…

//JSP显示部分代码
<%@ page import = "page.RowSetPage"%>
…
<script language="javascript">
function doQuery(){
form1.actionType.value="doQuery";
form1.submit();
}
</script>
…
<form name=form1 method=get>
<input type=hidden name=actionType>
性别：
<input type=text name=gender size=1 value="<%=request.getParameter("gender")%>">
<input type=button value=" 查询 " onclick="doQuery()">
<%
RowSetPage empPage = (RowSetPage)request.getAttribute("empPage");
if (empPage == null ) empPage = RowSetPage.EMPTY_PAGE;
%>
…
<table cellspacing="0" width="90%">
<tr> <td>ID</td> <td>代码</td> <td>用户名</td> <td>姓名</td> </tr>
<%
javax.sql.RowSet empRS = (javax.sql.RowSet) empPage.getRowSet();
if (empRS!=null) while (empRS.next() ) {
%>
<tr>
<td><%= empRS.getString("EMP_ID")%></td>
<td><%= empRS.getString("EMP_CODE")%></td>
<td><%= empRS.getString("USER_NAME")%></td>
<td><%= empRS.getString("REAL_NAME")%></td>
</tr>
<%
}// end while
%>
<tr>
<%
//显示总页数和当前页数(pageno)以及分页代码。
//此处doQuery为页面上提交查询动作的javascript函数名， pageno为标识当前页码的参数名
%>
<td colspan=4><%= empPage .getHTML("doQuery", "pageno")%></td>
</tr>
</table>
</form>

效果如图：

因为分页显示一般都会伴有查询条件和查询动作，页面应已经有校验查询条件和提交查询的javascript方法（如上面的doQuery），所以RowSetPage.getHTML()生成的分页代码在用户选择新页码时直接回调前面的处理提交查询的javascript方法。注意在显示查询结果的时候上次的查询条件也需要保持，如<input type=text name=gender size=1 value="<%=request.getParameter("gender")%>">。同时由于页码的参数名可以指定，因此也支持在同一页面中有多个分页区。
另一种分页代码实现是生成每一页的URL，将查询参数和页码作为QueryString附在URL后面。这种方法的缺陷是在查询条件比较复杂时难以处理，并且需要指定处理查询动作的servlet，可能不适合某些定制的查询操作。
如果对RowSetPage.getHTML()生成的默认分页代码不满意可以编写自己的分页处理代码，RowSetPage提供了很多getter方法用于获取相关信息（如当前页码、总页数、 总记录数和当前记录数等）。
在实际应用中可以将分页查询和显示做成jsp taglib， 进一步简化JSP代码，屏蔽Java Code。

附：分页工具类的源代码， 有注释，应该很容易理解。

1.Page.java
2.RowSetPage.java(RowSetPage继承Page)
3.PagedStatement.java
4.PagedStatementOracleImpl.java(PagedStatementOracleImpl继承PagedStatement)

您可以任意使用这些源代码，但必须保留author [email protected]字样

///////////////////////////////////
//
// Page.java
// author: [email protected]
//
///////////////////////////////////

package page;

import java.util.List;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Collections;

/**
* Title: 分页对象<br>
* Description: 用于包含数据及分页信息的对象<br>
* Page类实现了用于显示分页信息的基本方法，但未指定所含数据的类型，
* 可根据需要实现以特定方式组织数据的子类，<br>
* 如RowSetPage以RowSet封装数据，ListPage以List封装数据<br>
* Copyright: Copyright (c) 2002 <br>
* @author [email protected] <br>
* @version 1.0
*/
public class Page implements java.io.Serializable {
public static final Page EMPTY_PAGE = new Page();
public static final int DEFAULT_PAGE_SIZE = 20;
public static final int MAX_PAGE_SIZE = 9999;

private int myPageSize = DEFAULT_PAGE_SIZE;

private int start;
private int avaCount,totalSize;
private Object data;

private int currentPageno;
private int totalPageCount;

/**
* 默认构造方法，只构造空页
*/
protected Page(){
this.init(0,0,0,DEFAULT_PAGE_SIZE,new Object());
}

/**
* 分页数据初始方法，由子类调用
* @param start 本页数据在数据库中的起始位置
* @param avaCount 本页包含的数据条数
* @param totalSize 数据库中总记录条数
* @param pageSize 本页容量
* @param data 本页包含的数据
*/
protected void init(int start, int avaCount, int totalSize, int pageSize, Object data){

this.avaCount =avaCount;
this.myPageSize = pageSize;

this.start = start;
this.totalSize = totalSize;

this.data=data;

//System.out.println("avaCount:"+avaCount);
//System.out.println("totalSize:"+totalSize);
if (avaCount>totalSize) {
//throw new RuntimeException("记录条数大于总条数？！");
}

this.currentPageno = (start -1)/pageSize +1;
this.totalPageCount = (totalSize + pageSize -1) / pageSize;

if (totalSize==0 && avaCount==0){
this.currentPageno = 1;
this.totalPageCount = 1;
}
//System.out.println("Start Index to Page No: " + start + "-" + currentPageno);
}

public Object getData(){
return this.data;
}

/**
* 取本页数据容量（本页能包含的记录数）
* @return 本页能包含的记录数
*/
public int getPageSize(){
return this.myPageSize;
}

/**
* 是否有下一页
* @return 是否有下一页
*/
public boolean hasNextPage() {
/*
if (avaCount==0 && totalSize==0){
return false;
}
return (start + avaCount -1) < totalSize;
*/
return (this.getCurrentPageNo()<this.getTotalPageCount());
}

/**
* 是否有上一页
* @return 是否有上一页
*/
public boolean hasPreviousPage() {
/*
return start > 1;
*/
return (this.getCurrentPageNo()>1);
}

/**
* 获取当前页第一条数据在数据库中的位置
* @return
*/
public int getStart(){
return start;
}

/**
* 获取当前页最后一条数据在数据库中的位置
* @return
*/
public int getEnd(){
int end = this.getStart() + this.getSize() -1;
if (end<0) {
end = 0;
}
return end;
}

/**
* 获取上一页第一条数据在数据库中的位置
* @return 记录对应的rownum
*/
public int getStartOfPreviousPage() {
return Math.max(start-myPageSize, 1);
}

/**
* 获取下一页第一条数据在数据库中的位置
* @return 记录对应的rownum
*/
public int getStartOfNextPage() {
return start + avaCount;
}

/**
* 获取任一页第一条数据在数据库中的位置，每页条数使用默认值
* @param pageNo 页号
* @return 记录对应的rownum
*/
public static int getStartOfAnyPage(int pageNo){
return getStartOfAnyPage(pageNo, DEFAULT_PAGE_SIZE);
}

/**
* 获取任一页第一条数据在数据库中的位置
* @param pageNo 页号
* @param pageSize 每页包含的记录数
* @return 记录对应的rownum
*/
public static int getStartOfAnyPage(int pageNo, int pageSize){
int startIndex = (pageNo-1) * pageSize + 1;
if ( startIndex < 1) startIndex = 1;
//System.out.println("Page No to Start Index: " + pageNo + "-" + startIndex);
return startIndex;
}

/**
* 取本页包含的记录数
* @return 本页包含的记录数
*/
public int getSize() {
return avaCount;
}

/**
* 取数据库中包含的总记录数
* @return 数据库中包含的总记录数
*/
public int getTotalSize() {
return this.totalSize;
}

/**
* 取当前页码
* @return 当前页码
*/
public int getCurrentPageNo(){
return this.currentPageno;
}

/**
* 取总页码
* @return 总页码
*/
public int getTotalPageCount(){
return this.totalPageCount;
}

/**
*
* @param queryJSFunctionName 实现分页的JS脚本名字，页码变动时会自动回调该方法
* @param pageNoParamName 页码参数名称
* @return
*/
public String getHTML(String queryJSFunctionName, String pageNoParamName){
if (getTotalPageCount()<1){
return "<input type='hidden' name='"+pageNoParamName+"' value='1' >";
}
if (queryJSFunctionName == null || queryJSFunctionName.trim().length()<1) {
queryJSFunctionName = "gotoPage";
}
if (pageNoParamName == null || pageNoParamName.trim().length()<1){
pageNoParamName = "pageno";
}

String gotoPage = "_"+queryJSFunctionName;

StringBuffer html = new StringBuffer("\n");
html.append("<script language=\"Javascript1.2\">\n")
.append("function ").append(gotoPage).append("(pageNo){ \n")
.append( " var curPage=1; \n")
.append( " try{ curPage = document.all[\"")
.append(pageNoParamName).append("\"].value; \n")
.append( " document.all[\"").append(pageNoParamName)
.append("\"].value = pageNo; \n")
.append( " ").append(queryJSFunctionName).append("(pageNo); \n")
.append( " return true; \n")
.append( " }catch(e){ \n")
// .append( " try{ \n")
// .append( " document.forms[0].submit(); \n")
// .append( " }catch(e){ \n")
.append( " alert('尚未定义查询方法：function ")
.append(queryJSFunctionName).append("()'); \n")
.append( " document.all[\"").append(pageNoParamName)
.append("\"].value = curPage; \n")
.append( " return false; \n")
// .append( " } \n")
.append( " } \n")
.append( "}")
.append( "</script> \n")
.append( "");
html.append( "<table border=0 cellspacing=0 cellpadding=0 align=center width=80%> \n")
.append( " <tr> \n")
.append( " <td align=left><br> \n");
html.append( " 共" ).append( getTotalPageCount() ).append( "页")
.append( " [") .append(getStart()).append("..").append(getEnd())
.append("/").append(this.getTotalSize()).append("] \n")
.append( " </td> \n")
.append( " <td align=right> \n");
if (hasPreviousPage()){
html.append( "[<a href='javascript:").append(gotoPage)
.append("(") .append(getCurrentPageNo()-1)
.append( ")'>上一页</a>] \n");
}
html.append( " 第")
.append( " <select name='")
.append(pageNoParamName).append("' onChange='javascript:")
.append(gotoPage).append("(this.value)'>\n");
String selected = "selected";
for(int i=1;i<=getTotalPageCount();i++){
if( i == getCurrentPageNo() )
selected = "selected";
else selected = "";
html.append( " <option value='").append(i).append("' ")
.append(selected).append(">").append(i).append("</option> \n");
}
if (getCurrentPageNo()>getTotalPageCount()){
html.append( " <option value='").append(getCurrentPageNo())
.append("' selected>").append(getCurrentPageNo())
.append("</option> \n");
}
html.append( " </select>页 \n");
if (hasNextPage()){
html.append( " [<a href='javascript:").append(gotoPage)
.append("(").append((getCurrentPageNo()+1))
.append( ")'>下一页</a>] \n");
}
html.append( "</td></tr></table> \n");

return html.toString();

}
}

///////////////////////////////////
//
// RowSetPage.java
// author: [email protected]
//
///////////////////////////////////
package page;

import javax.sql.RowSet;

/**
* <p>Title: RowSetPage</p>
* <p>Description: 使用RowSet封装数据的分页对象</p>
* <p>Copyright: Copyright (c) 2003</p>
* @author [email protected]
* @version 1.0
*/

public class RowSetPage extends Page {
private javax.sql.RowSet rs;

/**
*空页
*/
public static final RowSetPage EMPTY_PAGE = new RowSetPage();

/**
*默认构造方法，创建空页
*/
public RowSetPage(){
this(null, 0,0);
}

/**
*构造分页对象
*@param crs 包含一页数据的OracleCachedRowSet
*@param start 该页数据在数据库中的起始位置
*@param totalSize 数据库中包含的记录总数
*/
public RowSetPage(RowSet crs, int start, int totalSize) {
this(crs,start,totalSize,Page.DEFAULT_PAGE_SIZE);
}

/**
*构造分页对象
*@param crs 包含一页数据的OracleCachedRowSet
*@param start 该页数据在数据库中的起始位置
*@param totalSize 数据库中包含的记录总数
*@pageSize 本页能容纳的记录数
*/
public RowSetPage(RowSet crs, int start, int totalSize, int pageSize) {
try{
int avaCount=0;
if (crs!=null) {
crs.beforeFirst();
if (crs.next()){
crs.last();
avaCount = crs.getRow();
}
crs.beforeFirst();
}
rs = crs;
super.init(start,avaCount,totalSize,pageSize,rs);
}catch(java.sql.SQLException sqle){
throw new RuntimeException(sqle.toString());
}
}

/**
*取分页对象中的记录数据
*/
public javax.sql.RowSet getRowSet(){
return rs;
}

}

///////////////////////////////////
//
// PagedStatement.java
// author: [email protected]
//
///////////////////////////////////

package page;

import foo.DBUtil;

import java.math.BigDecimal;
import java.util.List;
import java.util.Iterator;
import java.util.Collections;

import java.sql.Connection;
import java.sql.SQLException;
import java.sql.ResultSet;
import java.sql.Statement;
import java.sql.PreparedStatement;
import java.sql.Timestamp;
import javax.sql.RowSet;

/**
* <p>Title: 分页查询</p>
* <p>Description: 根据查询语句和页码查询出当页数据</p>
* <p>Copyright: Copyright (c) 2002</p>
* @author [email protected]
* @version 1.0
*/
public abstract class PagedStatement {
public final static int MAX_PAGE_SIZE = Page.MAX_PAGE_SIZE;

protected String countSQL, querySQL;
protected int pageNo,pageSize,startIndex,totalCount;
protected javax.sql.RowSet rowSet;
protected RowSetPage rowSetPage;

private List boundParams;

/**
* 构造一查询出所有数据的PageStatement
* @param sql query sql
*/
public PagedStatement(String sql){
this(sql,1,MAX_PAGE_SIZE);
}

/**
* 构造一查询出当页数据的PageStatement
* @param sql query sql
* @param pageNo 页码
*/
public PagedStatement(String sql, int pageNo){
this(sql, pageNo, Page.DEFAULT_PAGE_SIZE);
}

/**
* 构造一查询出当页数据的PageStatement，并指定每页显示记录条数
* @param sql query sql
* @param pageNo 页码
* @param pageSize 每页容量
*/
public PagedStatement(String sql, int pageNo, int pageSize){
this.pageNo = pageNo;
this.pageSize = pageSize;
this.startIndex = Page.getStartOfAnyPage(pageNo, pageSize);
this.boundParams = Collections.synchronizedList(new java.util.LinkedList());

this.countSQL = "select count(*) from ( " + sql +") ";
this.querySQL = intiQuerySQL(sql, this.startIndex, pageSize);
}

/**
*生成查询一页数据的sql语句
*@param sql 原查询语句
*@startIndex 开始记录位置
*@size 需要获取的记录数
*/
protected abstract String intiQuerySQL(String sql, int startIndex, int size);

/**
*使用给出的对象设置指定参数的值
*@param index 第一个参数为1，第二个为2

Ⅱ 后端和前端是什么意思

通俗一点的说，[前端]就是我们可以直接查看的内容，包含用户可以看到和体验的一切，比如你浏览网站或使用APP的时候，各种各样的页面布局、图片、按钮、菜单、文字、视频等等，而[后端]是程序中无法被用户看到的这部分，进行数据交互及网站数据的保存和读取，它包含着所有的逻辑功能，支撑着前端。

可以这样理解：在网页页面上或者小程序、APP上能看见的都是前端，看不见的就是后端。

前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。其实主要区别体现在以下两个方面：知识结构与实现和工作职责。

1、知识结构

（1）展示的方式不同

前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。

后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多的多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。

（2）所用的技术、技能与工具不同

前端开发，就是要创造上面提到的网站面向用户的部分背后的代码，并通过建立框架，构建沉浸性的用户体验。为了实现这个目标，开发需要熟练运用下列语言、框架、工具库：

后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新?Web应用。但在写代码之前，他们需要与客户沟通，了解其实际需求并转化为技术目标，制定最有效且精简的方案来进行实现。

（3）所用技术不同

前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js、Webpack，AngularJs，ReactJs，VueJs等技术。

后端开发以java为例主要用到的是包括但不限于协议ServletTomcat服务器等技术。

2、工作职责

前端工程师主要的工作职责分为三大部分，分别是传统的Web前端开发，移动端开发和大数据呈现端开发。Web前端开发主要针对的是PC端开发任务；

移动端开发则包括Android开发、iOS开发和各种小程序开发，在移动互联网迅速发展的带动下，移动端的开发任务量是比较大的，随着5G标准的落地，未来移动端的开发任务将得到进一步的拓展；大数据呈现则主要是基于已有的平台完成最终分析结果的呈现，呈现方式通常也有多种选择，比如大屏展示等。

后端工程师的主要职责也集中在三大部分，分别是平台设计、接口设计和功能实现。平台设计主要是搭建后端的支撑服务容器；接口设计主要针对于不同行业进行相应的功能接口设计，通常一个平台有多套接口，就像卫星导航平台设有民用和军用两套接口一样；功能实现则是完成具体的业务逻辑实现。

(2)大屏监控jsp页面设计扩展阅读

前端和后端的应用范围

1、PC(PersonalComputer)即个人电脑。

目前电脑端仍是前端一个主要的领域，主要分为面向大众的各类网站，如新闻媒体、社交、电商、论坛等和面向管理员的各种CMS(内容管理系统)和其它的后台管理系统。

2、WebApp是指使用Web开发技术，实现的有较好用户体验的Web应用程序。

它是运行在手机和桌面端浏览中，随着移动端网络速度的提升，WebApp为我们提供了很大的便利。此外近两年Google提出了一种新的WebApp形态，即PWA(渐进增强WebAPP)。

3、WeChat(微信)这个平台，拥有大量的用户群体，因此它也是我们前端开发另一个重要的领域。微信的公众号与订阅号为市场营销和自媒体从业者，打造了一个新的天地。

4、HybridApp(混合应用)是指介于WebApp、原生App(主要是Android或iOS)之间的App，它兼具原生App良好用户交互体验的优势和WebApp跨平台开发的优势。

5、Game（游戏），HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后，就开始一发不可收拾。不过现在游戏开发变得越来越复杂，需要制作各种炫丽炫丽的效果，还要制作各炫丽于2D或者3D的场景。

6、Desktop桌面应用软件，就是我们日常生活中电脑中安装的各类软件。早期要开发桌面应用程序，就需要有专门的语言UI(界面)库支持，如C++中的Qt库、MFC库，Java的Swing、Python的PyQT等，否则语言是没办法进行快速界面开发。

7、ServerNode.js一发布，立刻在前端工程师中引起了轩然大波，前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。看到Node.js这个名字，初学者可能会误以为这是一个Java应用，事实上，Node.js采用C++语言编写而成，是一个Java的运行环境。