大屏監控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的運行環境。