JSP應(yīng)用開(kāi)發(fā)與實(shí)踐第14章 綜合案例-九宮格日記網(wǎng)

1、本章要求：第14章 綜合案例九宮格日記網(wǎng)九宮格日記網(wǎng)的基本開(kāi)發(fā)流程九宮格日記網(wǎng)的功能結(jié)構(gòu)及系統(tǒng)流程九宮格日記網(wǎng)的數(shù)據(jù)庫(kù)設(shè)計(jì)編寫(xiě)數(shù)據(jù)庫(kù)連接及操作的類(lèi)配置解決中文亂碼的過(guò)濾器九宮格日記網(wǎng)主界面的實(shí)現(xiàn)顯示九宮格日記列表模塊的實(shí)現(xiàn)寫(xiě)九宮格日記模塊的實(shí)現(xiàn)九宮格日記網(wǎng)的編譯與發(fā)布共107頁(yè)主要內(nèi)容1. 需求分析2. 總體設(shè)計(jì)3. 數(shù)據(jù)庫(kù)設(shè)計(jì)4. 公共模塊設(shè)計(jì)5. 網(wǎng)站主要模塊開(kāi)發(fā)6. 網(wǎng)站編譯與發(fā)布第14章 綜合案例九宮格日記網(wǎng)14.1 需求分析 隨著工作和生活節(jié)奏的不斷加快，屬于自己的私人時(shí)間也越來(lái)越少，日記這種傳統(tǒng)的傾訴方式也逐漸被人們所淡忘，取而代之的是各種各樣的網(wǎng)絡(luò)日志。不過(guò)，最近網(wǎng)絡(luò)中又出現(xiàn)了一

2、種全新的日記方式，九宮格日記，它由九個(gè)方方正正的格子組成，讓用戶(hù)可以像做填空題那樣對(duì)號(hào)入座，填寫(xiě)相應(yīng)的內(nèi)容，從而完成一篇日記，整個(gè)過(guò)程不過(guò)幾分鐘。九宮格日記因其便捷、省時(shí)等優(yōu)點(diǎn)在網(wǎng)上迅速風(fēng)行開(kāi)來(lái)，倍受學(xué)生、年輕上班族青睞。通過(guò)實(shí)際調(diào)查，要求九宮格日記網(wǎng)具有以下功能：為了更好的體現(xiàn)九宮格日記的特點(diǎn)，需要以圖片的形式保存每篇日記，并且日記的內(nèi)容寫(xiě)在九宮格中。為了便于瀏覽，默認(rèn)情況下，只顯示日記的縮略圖。對(duì)于每篇日記需要提供查看原圖、左轉(zhuǎn)和右轉(zhuǎn)功能。需要提供分頁(yè)瀏覽日記列表功能。寫(xiě)日記時(shí)，需要提供預(yù)覽功能。在保存日記時(shí)，需要生成日記圖片和對(duì)應(yīng)的縮略圖。 14.2.1 系統(tǒng)目標(biāo)14.2.2 構(gòu)建開(kāi)發(fā)環(huán)

3、境14.2.3 網(wǎng)站功能結(jié)構(gòu)14.2.4 系統(tǒng)流程圖14.2 總體設(shè)計(jì)根據(jù)需求分析的描述及與用戶(hù)的溝通，現(xiàn)制定網(wǎng)站實(shí)現(xiàn)目標(biāo)如下：界面友好、美觀。日記內(nèi)容靈活多變，即可以做選擇題，也可以做填空題。采用Ajax實(shí)現(xiàn)無(wú)刷新數(shù)據(jù)驗(yàn)證。網(wǎng)站運(yùn)行穩(wěn)定可靠。具有多瀏覽器兼容性，即要保證在IE 9下正常運(yùn)行，又要保證在火狐瀏覽器下正常運(yùn)行。14.2.1 系統(tǒng)目標(biāo) 1網(wǎng)站開(kāi)發(fā)環(huán)境開(kāi)發(fā)工具：Eclipse IDE for Java EE。開(kāi)發(fā)技術(shù)：JSP+Ajax+HTML 5+JavaScript。后臺(tái)數(shù)據(jù)庫(kù)：MySQL。開(kāi)發(fā)平臺(tái)：Windows XP（SP2）/Windows Server 2003（SP2）

4、/Windows 7。Java開(kāi)發(fā)包：Java SE Development KET(JDK) version 7 Update 3。2服務(wù)器端操作系統(tǒng)：Windows XP（SP2）/Windows Server 2003（SP2）/Windows 7。Web服務(wù)器：Tomcat 7.0.27。數(shù)據(jù)庫(kù)服務(wù)器：MySQL。3客戶(hù)端瀏覽器：IE 9.0以上版本、Firefox等。分辨率：最佳效果16801050像素。14.2.2 構(gòu)建開(kāi)發(fā)環(huán)境 根據(jù)九宮格日記網(wǎng)的特點(diǎn)，可以將其分為用戶(hù)模塊、顯示九宮格日記列表和寫(xiě)九宮格日記3個(gè)部分設(shè)計(jì)。下面分別進(jìn)行介紹。顯示九宮格日記列表模塊顯示九宮格日記列表主要

5、用于分頁(yè)顯示全部九宮格日記、分頁(yè)顯示我的日記、展開(kāi)和收縮日記圖片、顯示日記原圖、對(duì)日記圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)以及刪除自己的日記等。寫(xiě)九宮格日記模塊寫(xiě)九宮格日記主要用于填寫(xiě)日記信息、預(yù)覽生成的日記圖片和保存日記圖片。其中，在填寫(xiě)日記信息時(shí)，允許用戶(hù)選擇并預(yù)覽自己喜歡的模板，以及選擇預(yù)置日記內(nèi)容等。用戶(hù)模塊用戶(hù)模塊又需要包括用戶(hù)注冊(cè)、用戶(hù)登錄、退出登錄和找回密碼等4個(gè)子功能。其中，用戶(hù)注冊(cè)主要用于新用戶(hù)注冊(cè)。在進(jìn)行用戶(hù)注冊(cè)；用戶(hù)登錄主要用于用戶(hù)登錄網(wǎng)站，登錄后的用戶(hù)可以查看自己的日記、刪除自己的日記以及寫(xiě)九宮格日記等；退出登錄主要用于登錄用戶(hù)退出當(dāng)前登錄狀態(tài)；找回密碼主要用于當(dāng)用戶(hù)忘記密碼時(shí)，根據(jù)密碼

6、提示問(wèn)題和答案找回密碼。14.2.3 網(wǎng)站功能結(jié)構(gòu)根據(jù)以上說(shuō)明，我們可以得出如圖14-1所示的九宮格日記網(wǎng)的功能結(jié)構(gòu)圖。圖14-1 九宮格日記網(wǎng)的功能結(jié)構(gòu)圖說(shuō)明： 在圖14-1中，用虛線(xiàn)框起來(lái)的部分為只有用戶(hù)登錄后，才可以有的功能。九宮格日記網(wǎng)的系統(tǒng)流程如圖14-2所示。圖14-2 九宮格日記網(wǎng)的系統(tǒng)流程圖14.2.4 系統(tǒng)流程圖14.3 數(shù)據(jù)庫(kù)設(shè)計(jì)14.3.1 數(shù)據(jù)庫(kù)概要說(shuō)明14.3.2 數(shù)據(jù)庫(kù)實(shí)體圖14.3.3 數(shù)據(jù)表結(jié)構(gòu) 從讀者角度出發(fā)，為了使讀者對(duì)本網(wǎng)站數(shù)據(jù)庫(kù)中的數(shù)據(jù)表有更清晰的認(rèn)識(shí)，筆者在此設(shè)計(jì)了數(shù)據(jù)表樹(shù)形結(jié)構(gòu)圖，如圖14-3所示，其中包含了對(duì)系統(tǒng)中所有數(shù)據(jù)表的相關(guān)描述。圖14-3

7、清爽夏日九宮格日記網(wǎng)的數(shù)據(jù)庫(kù)14.3.1數(shù)據(jù)庫(kù)概要說(shuō)明 根據(jù)對(duì)網(wǎng)站所做的需求分析、流程設(shè)計(jì)及系統(tǒng)功能結(jié)構(gòu)的確定，規(guī)劃出滿(mǎn)足用戶(hù)需求的各種實(shí)體及它們之間的關(guān)系，本網(wǎng)站規(guī)劃出的數(shù)據(jù)庫(kù)實(shí)體對(duì)象只有兩個(gè)，分別為用戶(hù)實(shí)體和日記實(shí)體。 用戶(hù)實(shí)體包括用戶(hù)編號(hào)、用戶(hù)名、密碼、E-mail、密碼提示問(wèn)題、提示問(wèn)題答案和所在地等屬性。用戶(hù)實(shí)體的實(shí)體圖如圖14-4所示。圖14-4 用戶(hù)信息實(shí)體圖14.3.2 數(shù)據(jù)庫(kù)實(shí)體圖 日記實(shí)體包括日記編號(hào)、標(biāo)題、日記保存的地址、寫(xiě)日記的時(shí)間和用戶(hù)ID等屬性。日記實(shí)體的實(shí)體圖如圖14-5所示。圖14-5 日記信息實(shí)體圖 在設(shè)計(jì)完數(shù)據(jù)庫(kù)實(shí)體E-R圖之后，根據(jù)相應(yīng)的實(shí)體E-R圖設(shè)計(jì)數(shù)

8、據(jù)表，下面分別介紹本網(wǎng)站中的用到的兩張數(shù)據(jù)表的數(shù)據(jù)結(jié)構(gòu)和用途。tb_user（用戶(hù)信息表）用戶(hù)信息表主要用于存儲(chǔ)用戶(hù)的注冊(cè)信息。該數(shù)據(jù)表的結(jié)構(gòu)如表14-1所示。表14-1 tb_user表14.3.3 數(shù)據(jù)表結(jié)構(gòu)字 段 名 稱(chēng)數(shù) 據(jù) 類(lèi) 型是 否 為 空是 否 主 鍵默 認(rèn) 值說(shuō) 明idINT(10)No NullYes自動(dòng)編號(hào)IDusernameVARCHAR(50)No Null用戶(hù)名pwdVARCHAR(50)No Null密碼emailVARCHAR(100)NullNullE-mailquestionVARCHAR(45)NullNull密碼提示問(wèn)題answerVARCHAR(45)

9、NullNull提示問(wèn)題答案cityVARCHAR(30)NullNull所在地tb_diary（日記表）日記表主要用于存儲(chǔ)日記的相關(guān)信息。該數(shù)據(jù)表的結(jié)構(gòu)如圖14-2所示。表14-2 tb_diary表字 段 名 稱(chēng)數(shù) 據(jù) 類(lèi) 型是 否 為 空是 否 主 鍵默 認(rèn) 值說(shuō) 明idINT(10)No NullYes自動(dòng)編號(hào)IDtitleVARCHAR(60)No Null標(biāo)題addressVARCHAR(50)No Null日記保存的地址writeTimeTIMESTAMPNo NullCURRENT_TIMESTAMP寫(xiě)日記時(shí)間useridINT(10)No Null用戶(hù)ID14.4 公共模塊設(shè)

10、計(jì)14.4.1 編寫(xiě)數(shù)據(jù)庫(kù)連接及操作的類(lèi)14.4.2 編寫(xiě)保存分頁(yè)代碼的JavaBean14.4.3 配置解決中文亂碼的過(guò)濾器14.4.4 編寫(xiě)實(shí)體類(lèi) 數(shù)據(jù)庫(kù)連接及操作類(lèi)通常包括連接數(shù)據(jù)庫(kù)的方法getConnection()、執(zhí)行查詢(xún)語(yǔ)句的方法execute- Query()、執(zhí)行更新操作的方法executeUpdate()、關(guān)閉數(shù)據(jù)庫(kù)連接的方法close()。下面將詳細(xì)介紹如何編寫(xiě)清爽夏日九宮格日記網(wǎng)的數(shù)據(jù)庫(kù)連接及操作的類(lèi)ConnDB。（1）指定類(lèi)ConnDB保存的包，并導(dǎo)入所需的類(lèi)包，本例將其保存到com.wgh.tools包中，代碼如下：package com.wgh.tools;/將該

11、類(lèi)保存到com.wgh.tools包中import java.io.InputStream; /導(dǎo)入java.io.InputStream類(lèi)import java.sql.*; /導(dǎo)入java.sql包中的所有類(lèi)import java.util.Properties; /導(dǎo)入java.util.Properties類(lèi)注意： 包語(yǔ)句以關(guān)鍵字package后面緊跟一個(gè)包名稱(chēng)，然后以分號(hào)“;”結(jié)束；包語(yǔ)句必須出現(xiàn)在import語(yǔ)句之前；一個(gè).java文件只能有一個(gè)包語(yǔ)句。14.4.1 編寫(xiě)數(shù)據(jù)庫(kù)連接及操作的類(lèi)（2）定義ConnDB類(lèi)，并定義該類(lèi)中所需的全局變量及構(gòu)造方法，代碼如下：public cl

12、ass ConnDB public Connection conn = null; / 聲明Connection對(duì)象的實(shí)例public Statement stmt = null; / 聲明Statement對(duì)象的實(shí)例public ResultSet rs = null; / 聲明ResultSet對(duì)象的實(shí)例private static String propFileName = connDB.properties;/ 指定資源文件保存的位置private static Properties prop=new Properties();/創(chuàng)建并實(shí)例化Properties對(duì)象的實(shí)例/ 定義保存數(shù)

13、據(jù)庫(kù)驅(qū)動(dòng)的變量private static String dbClassName = com.mysql.jdbc.Driver;private static String dbUrl = jdbc:mysql:/:3306/db_9griddiary?user=root&password=root&useUnicode=true;public ConnDB() / 構(gòu)造方法try / 捕捉異常/ 將Properties文件讀取到InputStream對(duì)象中InputStream in = getClass().getResourceAsStream(propFileName);prop.lo

14、ad(in); / 通過(guò)輸入流對(duì)象加載Properties文件dbClassName = prop.getProperty(DB_CLASS_NAME); / 獲取數(shù)據(jù)庫(kù)驅(qū)動(dòng)/ 獲取連接的URLdbUrl = prop.getProperty(DB_URL, dbUrl); catch (Exception e) e.printStackTrace(); / 輸出異常信息（3）為了方便程序移植，這里將數(shù)據(jù)庫(kù)連接所需信息保存到properties文件中，并將該文件保存在com.wgh.tools包中。connDB.properties文件的內(nèi)容如下：DB_CLASS_NAME=com.mysql

15、.jdbc.DriverDB_URL=jdbc:mysql:/:3306/db_9griddiary?user=root&password=root&useUnicode=true說(shuō)明： properties文件為本地資源文本文件，以“消息/消息文本”的格式存放數(shù)據(jù)。使用Properties對(duì)象時(shí)，首先需創(chuàng)建并實(shí)例化該對(duì)象，代碼如下：private static Properties prop = new Properties();再通過(guò)文件輸入流對(duì)象加載Properties文件，代碼如下：prop.load(new FileInputStream(propFileName);最后通過(guò)Prop

16、erties對(duì)象的getProperty方法讀取properties文件中的數(shù)據(jù)。（4）創(chuàng)建連接數(shù)據(jù)庫(kù)的方法getConnection()，該方法返回Connection對(duì)象的一個(gè)實(shí)例。getConnection()方法的代碼如下：/* * 功能：獲取連接的語(yǔ)句 * * return */public static Connection getConnection() Connection conn = null;try / 連接數(shù)據(jù)庫(kù)時(shí)可能發(fā)生異常因此需要捕捉該異常Class.forName(dbClassName).newInstance(); / 裝載數(shù)據(jù)庫(kù)驅(qū)動(dòng)/ 建立與數(shù)據(jù)庫(kù)URL中定

17、義的數(shù)據(jù)庫(kù)的連接conn = DriverManager.getConnection(dbUrl); catch (Exception ee) ee.printStackTrace();/ 輸出異常信息if (conn = null) System.err.println(警告: DbConnectionManager.getConnection() 獲得數(shù)據(jù)庫(kù)鏈接失敗.rn鏈接類(lèi)型:+ dbClassName + rn鏈接位置: + dbUrl); / 在控制臺(tái)上輸出提示信息return conn; / 返回?cái)?shù)據(jù)庫(kù)連接對(duì)象（5）創(chuàng)建執(zhí)行查詢(xún)語(yǔ)句的方法executeQuery，返回值為Resu

18、ltSet結(jié)果集。executeQuery方法的代碼如下：/* * 功能：執(zhí)行查詢(xún)語(yǔ)句 */public ResultSet executeQuery(String sql) try / 捕捉異常/ 調(diào)用getConnection()方法構(gòu)造Connection對(duì)象的一個(gè)實(shí)例connconn = getConnection();stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);rs = stmt.executeQuery(sql); catch (SQLExcept

19、ion ex) System.err.println(ex.getMessage();/ 輸出異常信息return rs; / 返回結(jié)果集對(duì)象（6）創(chuàng)建執(zhí)行更新操作的方法executeUpdate()，返回值為int型的整數(shù)，代表更新的行數(shù)。executeQuery()方法的代碼如下：/* * 功能:執(zhí)行更新操作 */public int executeUpdate(String sql) int result = 0; / 定義保存返回值的變量try / 捕捉異常/ 調(diào)用getConnection()方法構(gòu)造Connection對(duì)象的一個(gè)實(shí)例connconn = getConnection(

20、);stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);result = stmt.executeUpdate(sql); / 執(zhí)行更新操作 catch (SQLException ex) result = 0; / 將保存返回值的變量賦值為0return result; / 返回保存返回值的變量（7）創(chuàng)建關(guān)閉數(shù)據(jù)庫(kù)連接的方法close()。close()方法的代碼如下：/* * 功能:關(guān)閉數(shù)據(jù)庫(kù)的連接 */public void close() try / 捕捉異常

21、if (rs != null) / 當(dāng)ResultSet對(duì)象的實(shí)例rs不為空時(shí)rs.close(); / 關(guān)閉ResultSet對(duì)象if (stmt != null) / 當(dāng)Statement對(duì)象的實(shí)例stmt不為空時(shí)stmt.close(); / 關(guān)閉Statement對(duì)象if (conn != null) / 當(dāng)Connection對(duì)象的實(shí)例conn不為空conn.close();/ 關(guān)閉Connection對(duì)象 catch (Exception e) e.printStackTrace(System.err); / 輸出異常信息14.4.2 編寫(xiě)保存分頁(yè)代碼的JavaBean 由于在清爽

22、夏日九宮格日記網(wǎng)中，需要對(duì)日記列表進(jìn)行分頁(yè)顯示，所以需要編寫(xiě)一個(gè)保存分頁(yè)代碼的JavaBean。保存分頁(yè)代碼的JavaBean的具體編寫(xiě)步驟如下。（1）編寫(xiě)用于保存分頁(yè)代碼的JavaBean，名稱(chēng)為MyPagination，保存在com.wgh.tools包中，并定義一個(gè)全局變量list和3個(gè)局部變量，關(guān)鍵代碼如下：package com.wgh.tools;import java.util.ArrayList;/導(dǎo)入java.util.ArrayList類(lèi)import java.util.List; /導(dǎo)入java.util.List類(lèi)import com.wgh.model.Diary;/

23、導(dǎo)入com.wgh.model.Diary類(lèi)public class MyPagination public List list=null;private int recordCount=0;/保存記錄總數(shù)的變量private int pagesize=0;/保存每頁(yè)顯示的記錄數(shù)的變量private int maxPage=0;/保存最大頁(yè)數(shù)的變量（2）在JavaBean“MyPagination”中添加一個(gè)用于初始化分頁(yè)信息的方法getInitPage()，該方法包括3個(gè)參數(shù)，分別是用于保存查詢(xún)結(jié)果的List對(duì)象list、用于指定當(dāng)前頁(yè)面的int型變量Page和用于指定每頁(yè)顯示的記錄數(shù)的in

24、t型變量pagesize。該方法的返回值為保存要顯示記錄的List對(duì)象。具體代碼如下：public List getInitPage(List list,int Page,int pagesize)List newList=new ArrayList();this.list=list;recordCount=list.size();/獲取list集合的元素個(gè)數(shù)this.pagesize=pagesize;this.maxPage=getMaxPage();/獲取最大頁(yè)數(shù)try/捕獲異常信息for(int i=(1)*pagesize;i=recordCount)break;/跳出循環(huán)catch

25、(Exception e)newList.add(Diary)list.get(i);catch(Exception e)e.printStackTrace();/輸出異常信息return newList; （4）向服務(wù)器發(fā)送請(qǐng)求。XMLHttpRequest對(duì)象的send()方法可以實(shí)現(xiàn)向服務(wù)器發(fā)送請(qǐng)求，該方法需要傳遞一個(gè)參數(shù)，如果發(fā)送的是GET請(qǐng)求，可以將該參數(shù)設(shè)置為null，如果發(fā)送的是POST請(qǐng)求，可以通過(guò)該參數(shù)指定要發(fā)送的請(qǐng)求參數(shù)。向服務(wù)器發(fā)送GET請(qǐng)求的代碼如下：http_request.send(null);/向服務(wù)器發(fā)送請(qǐng)求向服務(wù)器發(fā)送POST請(qǐng)求的代碼如下：var param

26、=user=+form1.user.value+&pwd=+form1.pwd.value+&email=+form1.email.value;/組合參數(shù)http_request.send(param);/向服務(wù)器發(fā)送請(qǐng)求需要注意的是：在發(fā)送POST請(qǐng)求前，還需要設(shè)置正確的請(qǐng)求頭，具體代碼如下：http_request.setRequestHeader(Content-Type,application/x-www-form-urlencoded);上面的這句代碼，需要添加在http_request.send(param);語(yǔ)句之前。（3）在JavaBean“MyPagination”中添加一個(gè)

27、用于獲取指定頁(yè)數(shù)據(jù)的方法getAppointPage()，該方法只包括一個(gè)用于指定當(dāng)前頁(yè)數(shù)的int型變量Page。該方法的返回值為保存要顯示記錄的List對(duì)象。具體代碼如下：/獲取指定頁(yè)的數(shù)據(jù)public List getAppointPage(int Page)List newList=new ArrayList();try/通過(guò)for循環(huán)獲取當(dāng)前頁(yè)的數(shù)據(jù)for(int i=(1)*pagesize;i=recordCount)break; /跳出循環(huán)catch(Exception e)newList.add(Diary)list.get(i);catch(Exception e)e.pri

28、ntStackTrace();/輸出異常信息return newList;（4）在JavaBean“MyPagination”中添加一個(gè)用于獲取最大記錄數(shù)的方法getMaxPage()，該方法無(wú)參數(shù)，其返回值為最大記錄數(shù)。具體代碼如下：public int getMaxPage()int maxPage=(recordCount%pagesize=0)?(recordCount/pagesize):(recordCount/pagesize+1);return maxPage;（5）在JavaBean“MyPagination”中添加一個(gè)用于獲取總記錄數(shù)的方法getRecordSize()，該

29、方法無(wú)參數(shù)，其返回值為總記錄數(shù)。具體代碼如下：public int getRecordSize()return recordCount;（6）在JavaBean“MyPagination”中添加一個(gè)用于獲取當(dāng)前頁(yè)數(shù)的方法getPage()，該方法只有一個(gè)用于指定從頁(yè)面中獲取的頁(yè)數(shù)的參數(shù)，其返回值為處理后的頁(yè)數(shù)。具體代碼如下：public int getPage(String str)if(str=null)/當(dāng)頁(yè)數(shù)等于null時(shí)，讓其等于0str=“0”;int Page=Integer.parseInt(str);if(PagerecordCount)/當(dāng)頁(yè)數(shù)大于最大頁(yè)數(shù)時(shí)，讓其等于最大頁(yè)數(shù)

30、Page=maxPage;return Page;（7）在JavaBean“MyPagination”中添加一個(gè)用于輸出記錄導(dǎo)航的方法printCtrl()，該方法包括3個(gè)參數(shù)，分別為int型的Page（當(dāng)前頁(yè)數(shù)）、String類(lèi)型的url（URL地址）和String類(lèi)型的para（要傳遞的參數(shù)），其返回值為輸出記錄導(dǎo)航的字符串。具體代碼如下：public String printCtrl(int Page,String url,String para)String strHtml= 當(dāng)前頁(yè)數(shù)：【+Page+/+maxPage+】tryif(Page1)strHtml=strHtml+第一頁(yè);

31、strHtml=strHtml+上一頁(yè);if(PagemaxPage)strHtml=strHtml+下一頁(yè)最后一頁(yè)strHtml=strHtml+ ;catch(Exception e)e.printStackTrace();return strHtml; 在程序開(kāi)發(fā)時(shí)，通常有兩種方法解決程序中經(jīng)常出現(xiàn)的中文亂碼問(wèn)題，一種是通過(guò)編碼字符串處理類(lèi)，對(duì)需要的內(nèi)容進(jìn)行轉(zhuǎn)碼；另一種是配置過(guò)濾器。其中，第二種方法比較方便，只需要在開(kāi)發(fā)程序時(shí)配置正確即可。下面將介紹本系統(tǒng)中配置解決中文亂碼的過(guò)濾器的具體步驟。（1）編寫(xiě)CharacterEncodingFilter類(lèi)，讓它實(shí)現(xiàn)Filter接口，成為一個(gè)S

32、ervlet過(guò)濾器，在實(shí)現(xiàn)doFilter()接口方法時(shí)，根據(jù)配置過(guò)濾時(shí)設(shè)置的編碼格式參數(shù)分別設(shè)置請(qǐng)求對(duì)象的編碼格式和響應(yīng)對(duì)象的內(nèi)容類(lèi)型參數(shù)。WebFilter(urlPatterns = /* , initParams = WebInitParam(name = “encoding”, value = “UTF-8”)public class CharacterEncodingFilter implements Filter protected String encoding = null; / 定義編碼格式變量protected FilterConfig filterConfig = nu

33、ll; / 定義過(guò)濾器配置對(duì)象public void init(FilterConfig filterConfig) throws ServletException this.filterConfig = filterConfig; / 初始化過(guò)濾器配置對(duì)象/ 獲取配置文件中指定的編碼格式this.encoding = filterConfig.getInitParameter(“encoding”); / 過(guò)濾器的接口方法，用于執(zhí)行過(guò)濾業(yè)務(wù)public void doFilter(ServletRequest request, ServletResponse response,FilterC

34、hain chain) throws IOException, ServletException if (encoding != null) request.setCharacterEncoding(encoding); / 設(shè)置請(qǐng)求的編碼/ 設(shè)置應(yīng)答對(duì)象的內(nèi)容類(lèi)型（包括編碼格式）response.setContentType(“text/html; charset=” + encoding);chain.doFilter(request, response); / 傳遞給下一個(gè)過(guò)濾器public void destroy() this.encoding = null;this.filterC

35、onfig = null;14.4.3 配置解決中文亂碼的過(guò)濾器 實(shí)體類(lèi)就是由屬性及屬性所對(duì)應(yīng)的getter和setter方法組成的類(lèi)。實(shí)體類(lèi)通常與數(shù)據(jù)表相關(guān)聯(lián)。在清爽夏日九宮格日記網(wǎng)中，共涉及到兩張數(shù)據(jù)表，分別是用戶(hù)信息表和日記表。通過(guò)這兩張數(shù)據(jù)表可以得到用戶(hù)信息和日記信息，根據(jù)這些信息可以得出用戶(hù)實(shí)體類(lèi)和日記實(shí)體類(lèi)。由于實(shí)體類(lèi)的編寫(xiě)方法基本類(lèi)似，所以這里將以日記實(shí)體類(lèi)為例進(jìn)行介紹。 編寫(xiě)Diary類(lèi)，在該類(lèi)添加id、title、address、writeTime、userid和username屬性，并為這些屬性添加對(duì)應(yīng)的getter和setter方法，關(guān)鍵代碼如下：import java.

36、util.Date;public class Diary private int id = 0;/ 日記ID號(hào)private String title = ;/ 日記標(biāo)題private String address = ;/ 日記圖片地址private Date writeTime = null;/ 寫(xiě)日記的時(shí)間private int userid = 0;/ 用戶(hù)IDprivate String username = ;/ 用戶(hù)名public int getId() /id屬性對(duì)應(yīng)的getter方法return id;public void setId(int id) /id屬性對(duì)應(yīng)的set

37、ter方法this.id = id; /此處省略了其他屬性對(duì)應(yīng)的getter和setter方法14.4.4 編寫(xiě)實(shí)體類(lèi)14.5 網(wǎng)站主要模塊開(kāi)發(fā)14.5.1 主界面設(shè)計(jì)14.5.2 顯示九宮格日記列表模塊14.5.3 寫(xiě)九宮格日記模塊設(shè)計(jì) 當(dāng)用戶(hù)訪(fǎng)問(wèn)清爽夏日九宮格日記網(wǎng)時(shí)，首先進(jìn)入的是網(wǎng)站的主界面。清爽夏日九宮格日記網(wǎng)的主界面主要包括以下4部分內(nèi)容：Banner信息欄：主要用于顯示網(wǎng)站的Logo。導(dǎo)航欄：主要用于顯示網(wǎng)站的導(dǎo)航信息及歡迎信息。其中導(dǎo)航條目將根據(jù)是否登錄而顯示不同的內(nèi)容。主顯示區(qū)：主要用于分頁(yè)顯示九宮格日記列表。版權(quán)信息欄：主要用于顯示版權(quán)信息。下面看一下本項(xiàng)目中設(shè)計(jì)的主界面，如

38、圖14-6所示。14.5.1 主界面設(shè)計(jì)1技術(shù)分析 在清爽夏日九宮格日記網(wǎng)主界面中，Banner信息欄、導(dǎo)航欄和版權(quán)信息，并不是僅存在于主界面中，其他功能模塊的子界面中也需要包括這些部分。因此，可以將這幾個(gè)部分分別保存在單獨(dú)的文件中，這樣，在需要放置相應(yīng)功能時(shí)只需包含這些文件即可。在JSP頁(yè)面中包含文件有兩種方法：一種是應(yīng)用指令實(shí)現(xiàn)，另一種是應(yīng)用動(dòng)作元素實(shí)現(xiàn)。 指令用來(lái)在JSP頁(yè)面中包含另一個(gè)文件。包含的過(guò)程是靜態(tài)的，即在指定文件屬性值時(shí)，只能是一個(gè)包含相對(duì)路徑的文件名，而不能是一個(gè)變量，也不可以在所指定的文件后面添加任何參數(shù)。其語(yǔ)法格式如下： 動(dòng)作元素可以指定加載一個(gè)靜態(tài)或動(dòng)態(tài)的文件，但運(yùn)行

39、結(jié)果不同。如果指定為靜態(tài)文件，那么這種指定僅僅是把指定的文件內(nèi)容加到JSP文件中去，則這個(gè)文件不被編譯。如果是動(dòng)態(tài)文件，那么這個(gè)文件將會(huì)被編譯器執(zhí)行。由于在頁(yè)面中包含查詢(xún)模塊時(shí)，只需要將文件內(nèi)容添加到指定的JSP文件中即可，所以此處可以使用加載靜態(tài)文件的方法包含文件。應(yīng)用動(dòng)作元素加載靜態(tài)文件的語(yǔ)法格式如下：jsp:include page=relativeURL | flush=true/ 使用指令和動(dòng)作元素包含文件的區(qū)別是：使用指令包含的頁(yè)面，是在編譯階段將該頁(yè)面的代碼插入到了主頁(yè)面的代碼中，最終包含頁(yè)面與被包含頁(yè)面生成了一個(gè)文件。因此，如果被包含頁(yè)面的內(nèi)容有改動(dòng)，需重新編譯該文件。而使用動(dòng)

40、作元素包含的頁(yè)面可以是動(dòng)態(tài)改變的，它是在JSP文件運(yùn)行過(guò)程中被確定的，程序執(zhí)行的是兩個(gè)不同的頁(yè)面，即在主頁(yè)面中聲明的變量，在被包含的頁(yè)面中是不可見(jiàn)的。由此可見(jiàn)，當(dāng)被包含的JSP頁(yè)面中包含動(dòng)態(tài)代碼時(shí)，為了不和主頁(yè)面中的代碼相沖突，需要使用動(dòng)作元素包含文件。應(yīng)用動(dòng)作元素包含查詢(xún)頁(yè)面的代碼如下： 考慮到本頁(yè)面中需要包含的多個(gè)文件之間相對(duì)比較獨(dú)立，并且不需要進(jìn)行參數(shù)傳遞，屬于靜態(tài)包含，因此采用指令實(shí)現(xiàn)。2實(shí)現(xiàn)過(guò)程九宮格日記網(wǎng)主界面的實(shí)現(xiàn)過(guò)程如下：（1）創(chuàng)建文件listAllDiary.jsp，作為網(wǎng)站的主界面。在該頁(yè)面中，應(yīng)用指令包含文件的方法進(jìn)行主界面布局，具體的代碼如下：顯示九宮格日記列表（2）編

41、寫(xiě)CSS樣式，讓采用DIV+CSS布局的頁(yè)面內(nèi)容居中。具體的代碼如下：bodymargin:0px; /*設(shè)置外邊距*/padding:0px; /*設(shè)置內(nèi)邊距*/font-size: 9pt; /*設(shè)置字體大小*/#boxmargin:0 auto auto auto;/*設(shè)置外邊距*/width:800px;/*設(shè)置頁(yè)面寬度*/clear:both;/*設(shè)置兩側(cè)均不可以有浮動(dòng)內(nèi)容*/background-color: #FFFFFF;/*設(shè)置背景顏色*/ 用戶(hù)訪(fǎng)問(wèn)網(wǎng)站時(shí)，首先進(jìn)入的是網(wǎng)站的主界面，在主界面的主顯示區(qū)中，將以分頁(yè)的形式顯示九宮格日記列表。顯示九宮格日記列表主要用于分頁(yè)顯示全部

42、九宮格日記、分頁(yè)顯示我的日記、展開(kāi)和收縮日記圖片、顯示日記原圖、對(duì)日記圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)以及刪除我的日記等。其中，分頁(yè)顯示我的日記和刪除我的日記功能，只有在用戶(hù)登錄后才可以使用（如圖14-7所示）。圖14-7 分頁(yè)顯示我的日記頁(yè)面14.5.2顯示九宮格日記列表模塊1技術(shù)分析 在實(shí)現(xiàn)顯示九宮格日記列表時(shí)，主要涉及到3個(gè)技術(shù)點(diǎn)，分別是展開(kāi)和收縮圖片、查看日記原圖和對(duì)日記圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)，下面分別進(jìn)行介紹。展開(kāi)和收縮圖片 在顯示九宮格日記列表時(shí)，默認(rèn)情況下顯示的是日記圖片的縮略圖。將鼠標(biāo)移動(dòng)到該縮略圖上時(shí)，鼠標(biāo)將顯示為一個(gè)帶+號(hào)的放大鏡，如圖14-8所示。單擊該縮略圖，可以展開(kāi)該縮略圖，此時(shí)鼠標(biāo)將

43、顯示為帶-號(hào)的放大鏡，如圖14-9所示，單擊日記圖片或收縮超級(jí)鏈接，可以將該圖片再次顯示為如圖14-8所示的縮略圖。 圖14-8 日記圖片的縮略圖 圖14-9 展開(kāi)日記圖片 在實(shí)現(xiàn)展開(kāi)和收縮圖片時(shí)，主要應(yīng)用JavaScript對(duì)圖片的寬度、高度、圖片來(lái)源、鼠標(biāo)樣式等屬性進(jìn)行設(shè)置。下面將對(duì)這些屬性進(jìn)行詳細(xì)介紹。設(shè)置圖片的寬度通過(guò)document對(duì)象的getElementById()方法獲取圖片對(duì)象后，可以通過(guò)設(shè)置其width屬性來(lái)設(shè)置圖片的寬度，具體的語(yǔ)法如下：imgObject.width=value;其中imgObject為圖片對(duì)象，可以通過(guò)document對(duì)象的getElementById

44、()方法獲??；value為寬度值，單位為像素值或百分比。設(shè)置圖片的高度通過(guò)document對(duì)象的getElementById()方法獲取圖片對(duì)象后，可以通過(guò)設(shè)置其height屬性來(lái)設(shè)置圖片的高度，具體的語(yǔ)法如下：imgObject.height=value;其中imgObject為圖片對(duì)象，可以通過(guò)document對(duì)象的getElementById()方法獲取；value為高度值，單位為像素值或百分比。設(shè)置圖片的來(lái)源 通過(guò)document對(duì)象的getElementById()方法獲取圖片對(duì)象后，可以通過(guò)設(shè)置其src屬性來(lái)設(shè)置圖片的來(lái)源，具體的語(yǔ)法如下：imgObject.src=path; 其

45、中imgObject為圖片對(duì)象，可以通過(guò)document對(duì)象的getElementById()方法獲取；path為圖片的來(lái)源URL，可以使用相對(duì)路徑，也可以使用HTTP絕對(duì)路徑設(shè)置鼠標(biāo)樣式通過(guò)document對(duì)象的getElementById()方法獲取圖片對(duì)象后，可以通過(guò)設(shè)置其style屬性的子屬性cursor來(lái)設(shè)置鼠標(biāo)樣式，具體的語(yǔ)法如下：imgObject.style.cursor=uri;其中imgObject為圖片對(duì)象，可以通過(guò)document對(duì)象的getElementById()方法獲??；uri為ICO圖標(biāo)的路徑，這里需要使用url()函數(shù)將圖標(biāo)文件的路徑括起來(lái)。由于在清爽夏日九宮

46、格日記網(wǎng)中，需要展開(kāi)和收縮的圖片不只一個(gè)，所以這里需要編寫(xiě)一個(gè)自定義的JavaScript函數(shù)zoom()來(lái)完成圖片的展開(kāi)和收縮。zoom()函數(shù)的具體代碼如下：/展開(kāi)或收縮圖片的方法function zoom(id,url)document.getElementById(diary+id).style.display = ;/顯示圖片if(flagid)/用于展開(kāi)圖片/設(shè)置要顯示的圖片document.getElementById(diary+id).src=images/diary/+url+.png;document.getElementById(diary+id).style.curs

47、or=url(images/ico02.ico),auto;/為圖片添加自定義鼠標(biāo)樣式document.getElementById(control+id).style.display=;/顯示控制工具欄document.getElementById(diaryImg+id).style.width=401;/設(shè)置日記圖片的寬度document.getElementById(diaryImg+id).style.height=436;/設(shè)置日記圖片的高度document.getElementById(canvas+id).style.cursor=url(images/ico02.ico),a

48、uto;document.getElementById(diary+id).width=400;/設(shè)置圖片的寬度document.getElementById(diary+id).height=400;/設(shè)置圖片的高度f(wàn)lagid=false;else/設(shè)置圖片顯示為縮略圖document.getElementById(diary+id).src=images/diary/+url+scale.jpg;/設(shè)置控制工具欄不顯示document.getElementById(control+id).style.display=none;document.getElementById(diary+i

49、d).style.cursor=url(images/ico01.ico),auto;/為圖片添加自定義鼠標(biāo)樣式document.getElementById(diaryImg+id).style.width=60;/設(shè)置日記圖片的寬度document.getElementById(diaryImg+id).style.height=60;/設(shè)置日記圖片的高度document.getElementById(canvas+id).style.cursor=url(images/ico01.ico),auto;/為畫(huà)布添加自定義鼠標(biāo)樣式document.getElementById(diary+i

50、d).width=60;/設(shè)置圖片的寬度document.getElementById(diary+id).height=60;/設(shè)置圖片的高度f(wàn)lagid=true;document.getElementById(canvas+id).style.display=none;/設(shè)置面板不顯示var i=0;/標(biāo)記變量，用于記錄當(dāng)前頁(yè)共幾條日記 為了分別控制每張圖片的展開(kāi)和收縮狀態(tài)，還需要設(shè)置一個(gè)記錄每張圖片狀態(tài)的標(biāo)記數(shù)組，并在頁(yè)面載入后，通過(guò)while循環(huán)將每個(gè)數(shù)組元素的值都設(shè)置為true，具體代碼如下：var flag=new Array(i);/定義一個(gè)標(biāo)記數(shù)組window.onload

51、= function()while(i0)flagi=true;/初始化一維數(shù)組的各個(gè)元素i-;在圖片的上方添加收縮超級(jí)鏈接，并在其onClick事件中調(diào)用zoom()方法，關(guān)鍵代碼如下：收縮同時(shí)，還需要在圖片和面板的onClick事件中調(diào)用zoom()方法，關(guān)鍵代碼如下：說(shuō)明：上面代碼中的canvas面板主要是用于對(duì)圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)時(shí)使用的。查看日記原圖在將圖片展開(kāi)后，可以通過(guò)單擊“查看原圖”超級(jí)鏈接，查看日記的原圖，如圖14-10所示。圖14-10 查看日記原圖 在實(shí)現(xiàn)查看日記原圖時(shí)，首先需要獲取請(qǐng)求的URL地址，然后在頁(yè)面中添加一個(gè)查看原圖的超級(jí)鏈接，并將該URL地址和圖片相對(duì)路徑組合

52、成HTTP絕對(duì)路徑作為超鏈接的地址，具體代碼如下：a href=/images/diary/$diaryList.address .png target=_blank查看原圖對(duì)日記圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn) 在清爽夏日九宮格日記網(wǎng)中，還提供了對(duì)展開(kāi)的日記圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)功能。例如，展開(kāi)標(biāo)題為“心情不錯(cuò)”的日記圖片，如圖14-11所示，圖14-11 沒(méi)有進(jìn)行旋轉(zhuǎn)的圖片單擊“左轉(zhuǎn)”超級(jí)鏈接，將顯示和圖14-12所示的效果。圖14-12 向左轉(zhuǎn)一次的效果 在實(shí)現(xiàn)對(duì)圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)時(shí)，這里應(yīng)用了Google公司提供的excanvas插件。該插件的下載地址是：/group/google-excanvas/d

53、ownload?s=files。應(yīng)用excanvas插件對(duì)圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)的具體步驟如下：（1）下載excanvas插件，并將其中的excanvas-modified.js文件復(fù)制到項(xiàng)目的JS文件夾中。（2）在需要對(duì)圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)的頁(yè)面中應(yīng)用以下代碼包含該JS文件，本項(xiàng)目中為listAllDiary.jsp文件。（3）編寫(xiě)JavaScript代碼，應(yīng)用excanvas插件對(duì)圖片進(jìn)行左轉(zhuǎn)和右轉(zhuǎn)，由于在本網(wǎng)站中，需要進(jìn)行旋轉(zhuǎn)的圖片有多個(gè)，所以這里需要通過(guò)循環(huán)編寫(xiě)多個(gè)旋轉(zhuǎn)方法，方法名由字符串“rotate+ID號(hào)”組成。具體代碼如下：i+;/標(biāo)記變量，用于記錄當(dāng)前頁(yè)共幾條日記function

54、rotate$id.count ()var param$id.count = right: document.getElementById(rotRight$id.count ),left: document.getElementById(rotLeft$id.count ),reDefault: document.getElementById(reDefault$id.count ),img: document.getElementById(diary$id.count ),cv: document.getElementById(canvas$id.count ),rot: 0var rot

55、ate = function(canvas,img,rot)var w = 400;/設(shè)置圖片的寬度var h = 400;/設(shè)置圖片的高度/角度轉(zhuǎn)為弧度if(!rot)rot = 0;if(!rot)rot = 0;var rotation = Math.PI * rot / 180;var c = Math.round(Math.cos(rotation) * 1000) / 1000;var s = Math.round(Math.sin(rotation) * 1000) / 1000;/旋轉(zhuǎn)后canvas面板的大小canvas.height = Math.abs(c*h) + Mat

56、h.abs(s*w);canvas.width = Math.abs(c*w) + Math.abs(s*h);/繪圖開(kāi)始var context = canvas.getContext(2d);context.save();/改變中心點(diǎn)if (rotation = Math.PI/2) /旋轉(zhuǎn)角度小于等90度時(shí)context.translate(s*h,0); else if (rotation = Math.PI) /旋轉(zhuǎn)角度小于等180度時(shí)context.translate(canvas.width,-c*h); else if (rotation 270)param$id.count .

57、rot = -90;fun.right();/調(diào)用向右轉(zhuǎn)的方法reDefault: function()/恢復(fù)默認(rèn)的方法param$id.count .rot = 0;rotate(param$id.count .cv, param$id.count .img, param$id.count .rot);,left: function()/向左轉(zhuǎn)的方法param$id.count .rot -= 90;if(param$id.count .rot = -90)param$id.count .rot = 270;rotate(param$id.count .cv, param$id.count

58、.img, param$id.count .rot);/旋轉(zhuǎn)指定角度;param$id.count .right.onclick = function()/向右轉(zhuǎn)param$id.count .cv.style.display=;/顯示畫(huà)圖面板fun.right();return false;param$id.count .left.onclick = function()/向左轉(zhuǎn)param$id.count .cv.style.display=;/顯示畫(huà)圖面板fun.left();return false;param$id.count .reDefault.onclick = functio

59、n()/恢復(fù)默認(rèn)fun.reDefault();/恢復(fù)默認(rèn)return false;（4）在頁(yè)面中圖片的上方添加“左轉(zhuǎn)”、“右轉(zhuǎn)”和“恢復(fù)默認(rèn)”的超級(jí)鏈接。其中，“恢復(fù)默認(rèn)”的超級(jí)鏈接設(shè)置為不顯示，該超級(jí)鏈接是為了在收縮圖片時(shí)，將旋轉(zhuǎn)恢復(fù)為默認(rèn)而設(shè)置的，關(guān)鍵代碼如下：左轉(zhuǎn)右轉(zhuǎn)恢復(fù)默認(rèn)（5）在頁(yè)面中插入顯示日記圖片的標(biāo)記和面板標(biāo)記，關(guān)鍵代碼如下：（6）在頁(yè)面的底部，還需要實(shí)現(xiàn)當(dāng)頁(yè)面載入完成后，通過(guò)while循環(huán)執(zhí)行旋轉(zhuǎn)圖片的方法，具體代碼如下：window.onload = function()while(i0)eval(rotate+i)();/執(zhí)行旋轉(zhuǎn)圖片的方法i-; 2實(shí)現(xiàn)過(guò)程實(shí)現(xiàn)顯示九宮格日記列表模塊時(shí)，可以分為以下3個(gè)步驟來(lái)實(shí)現(xiàn)。（1）實(shí)現(xiàn)顯示全部九宮格日記功能。用戶(hù)訪(fǎng)問(wèn)清爽夏日九宮格日記網(wǎng)時(shí)，進(jìn)入的頁(yè)面就是顯示全部九宮格日記頁(yè)面。在該頁(yè)面將分頁(yè)顯示最新的50條九宮格日記，具體的實(shí)現(xiàn)過(guò)程如下： 編寫(xiě)處理日記信息的Servlet“DiaryServlet”，在該類(lèi)中，首先需要在構(gòu)造方法中實(shí)例化DiaryDao類(lèi)（該類(lèi)用于實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的交互），然后編寫(xiě)doGet()和doPost()方法，在這兩個(gè)方法中根據(jù)request的getParameter()方法獲取的action參數(shù)值執(zhí)行相應(yīng)方法，由于這兩個(gè)方法中的代碼相同，所以只需在第一個(gè)方法doPost()中寫(xiě)