Java Web 分頁實現

niaonao發表於2016-04-16

  分頁實現的效果:

  •  



一、從效果可以看出內容由兩部分組成:

1. 學生資訊 2. 頁碼查詢(當前頁碼為第一頁或最後一頁時,不可點選,該內容會在 tab.jsp 檔案中具體寫出)

二、主要知識為:

JDBC資料庫的連線、Java 基礎類介面及泛型的知識、JSP、Servlet、XML

三、此處所用平臺為 MyEclipse 資料庫為 MySQL  (也可用其他)

SpringMVC 架構MVC(model-view-controller)

四、具體實現

首先 JDBC 的相關操作:

新建資料庫 mysql2,新建表 student

(1)表的資訊

(2)表各屬性的型別及長度


分頁實現就是

將資料庫表內的內容通過伺服器在瀏覽器上查詢能實現分頁查詢

資料庫的表資訊處理好後,新建 web Project 專案,

在 /WebRoot/WEB-INF/lib 下匯入 jar 用於資料庫連線的包 /WebRoot/WEB-INF/lib/mysql-connector-java-5.0.3-bin.jar

在 src 下新建包 檔名、包名自己定義(以下新建 類、包、jsp、servlet 等命名自定義 )

1. 在所建包 pers.ms.rfeng.util 建立類 DBO 用於平臺與資料庫的連線,程式碼如下:

新建測試連線是否成功,程式碼如下:


新建學生類及泛型類程式碼如下

////////

/ ////////

學生資訊類對應的 DAO 包下

新建介面 StudentDao,寫一個待實現的方法 按頁查詢內容 findByPage(),

同時新建類 StudentDaoImpl 實現該介面。

對應程式碼如下:

//////////////////////////////實現介面的程式碼//////////////////////////////////////

新建類 StudentService 類呼叫按頁查詢內容的方法,

程式碼如下:

////////新建跳轉頁面 index.jsp 程式碼如下

新建對應的 servlet 名為 StudentServlet ,處理來自檢視的命令或資料的接收

程式碼如下:

/////////////////////////////////////////

StudentServlet 中跳轉的介面對應的 message. jsp 就是開頭效果所展示的內容的 檢視,

程式碼如下:

其中頁碼的跳轉條是 tab.jsp ,

程式碼如下:

最後配置檔案 web.xml

(說明:一般該檔案,在MyEclipse是自動生成的,eclipse下需自己建立編寫程式碼)

程式碼如下:

<?xml version="1.0" encoding="UTF-8"?>  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">    <display-name>Manager</display-name>    <servlet>      <description>This is the description of my J2EE component</description>      <display-name>This is the display name of my J2EE component</display-name>      <servlet-name>StudentServlet</servlet-name>      <servlet-class>pers.ms.rfeng.servlet.StudentServlet</servlet-class>    </servlet>      <servlet-mapping>      <servlet-name>StudentServlet</servlet-name>      <url-pattern>/StudentServlet</url-pattern>    </servlet-mapping>      <welcome-file-list>      <welcome-file>index.html</welcome-file>      <welcome-file>index.htm</welcome-file>      <welcome-file>index.jsp</welcome-file>      <welcome-file>default.html</welcome-file>      <welcome-file>default.htm</welcome-file>      <welcome-file>default.jsp</welcome-file>    </welcome-file-list>  </web-app>  複製程式碼


    部分截圖字型較小,Ctrl + 即可調介面大小,對應 Ctrl -

效果如開始所展示那樣,

具體的頁面風格,像內容居中,顏色,加一些自己的風格,可以在,對應的 jsp 寫相應的修改


相關文章