基于MVC的圖片管理系統設計與實現

摘要:本文將詳細介紹實現一種基于MVC并結合FLASH、JDOM等多種技術來設計實現對圖片進行有效管理的系統。本系統使得圖片或圖文的布局、顯示不再復雜凌亂，給用戶帶來簡單美觀體驗，同時“水印”及“下載圖片”功能的定制可起到維護圖片版權的作用。

關鍵詞:MVC 圖片管理系統 FLASH

0 引言

隨著網絡技術迅速發展，人們通過網絡瀏覽相關信息愈發方便，簡單的羅列展示信息已經不能適應用戶對復雜信息簡潔具體、美觀醒目體驗需求。圖片，作為一種生動形象的信息表現形式，在網頁的信息展示和美觀效果的追求中都起到的作用舉足輕重。無論是專門的圖片管理系統(網站)還是普通的主題闡述網頁都涉及如何美觀、簡潔地對大量相關圖片進行展示。傳統圖片顯示形式存在很多缺陷，如圖片可隨意地被復制、下載和使用。

本文結合MVC多層設計模式開發速度快、易于維護測試和擴展等優點[2]及Flash應用在視圖層(View)所帶來的視覺體驗的特性，來實現動態、簡潔及美觀的圖片管理功能。XML技術可以作為實現這種結合紐帶，大大減低了這兩種技術依賴性，更好地實現各個層面開發的獨立性。

1 系統分析和設計

1.1 架構流程分析

擁有創建相冊并上傳圖片的權限角色可以創建相冊并上傳圖片，系統把圖片壓縮處理生成小圖并原始圖片加上水印，然后把相冊和圖片的基本信息和關系存入數據庫。

根據用戶選擇的相冊，系統查找并呈現出該相冊及其包含圖片的信息，同時把這些圖片及其壓縮后的預覽小圖的地址都寫入XML文件中;界面顯示FLASH相冊，其自動加載XML文件，讀取其指向的圖片，當用戶點擊供預覽小圖時，原始圖片顯現。

1.2 類與對象的識別及實體關系分析:

系統涉及的對象包括:相冊對象、圖片對象、XML對象，(FLASH對象在FLASH開發中考慮)。在設計相冊類、圖片類，XML類時，本文將分別建立各自的實體類和對數據基本操作的類，如相冊類(AlbumBean，AlbumDao)。

該系統核心的實體是相冊和照片，他們之間是一對多的包含關系。

1.3 數據庫及界面設計:

數據庫設計，按系統特性選擇使用數據庫，并根據識別的類與對象及實體關系設計數據表。

界面(包括FLASH界面)的設計要力求簡單、美觀和響應較快的特點。所有界面的風格應一致，具有相同含義的術語含義相同，且易于理解，而且擁有良好的直覺特征。

FLASH設計，是否提供下載圖片的功能。

2 技術分析

本系統采用J2EE架構技術、應用MVC模式，視圖層采用JSP技術為主，使用JavaScript腳本語言進行驗證和簡單的顯示控制，并結合FLASH技術進行美觀布局。模型層，將對象和相應操作數據庫的方法分別封裝成JavaBean的形式。控制層則通過創建Servlet來進行請求和數據流轉的控制。從而保證業務邏輯、數據邏輯、控制邏輯以及顯示邏輯之間的相對獨立性。

FLASH技術[3]:要通過利用FLASH技術，制作出外形動感、美觀的相冊，需要制作者有一定的美工技術和Flash制作經驗。網絡上有很多開源的很好的FLASH作品，進行必要的改動后同樣可以使用，但這樣可能往往與網站風格等方面缺乏統一性，而且也體現不出系統的個性、特性所在。

XML技術:XML(Extensible Markup Language)即可擴展標記語言，是SGML(標準通用標記語言)。XML是Internet環境中跨平臺的，依賴于內容的技術，是當前處理結構化文檔信息的有力工具。

將上面介紹的主要技術有效結合，就成為該系統成功實現的關鍵。這里我引用了JDOM這個開源技術來作為搭建XML文檔這個重要橋梁的技術工具。JDOM是一個開源項目，它基于樹型結構，利用純JAVA的技術對XML文檔實現解析、生成、序列化以及多種操作。

3 系統實現

系統實現，就以顯示圖片的核心模塊來做具體的分析。

如圖3.1所示，當用戶點擊index.jsp(列出相冊的頁面)中的某一相冊封面，則頁面就會向控制層的DoSthServlet.java提出請求(request)，該Servlet提取request中的參數，繼而調用操作類AlbumDao(對相冊對象的數據庫操作類)和PicDao(對圖片對象的數據庫操作類)分別依據對象類AlbumBean(相冊實體類)、PicBean(圖片實體類)，查出對應相冊的主題和文章內容并存入HttpRequest對象的屬性中以供調用，并找到有哪些圖片屬于該相冊(即查詢出所有圖片信息)，DoSthServlet再調用XmlEditBean，取到并清空XML文檔，再利用JDOM將上一步所查詢出的所有圖片的地址(根據圖片名加上路徑)、圖片描述逐條逐條地寫入Xml文檔中，并輸出該文檔。最后，DoSthServlet給予response(相應)，簡單調轉到last.jsp頁面，該頁面取到請求對象屬性中關于相冊的主題、文章的內容并將其顯示，此時頁面又自動加載FLASH文件，FLASH文件開始運行時就先加載指定的XML文檔，此時FLASH就能定位到用戶所要查看的圖片了。

至此該系統的顯示圖片模塊功基本實現。然而當用戶多次點擊相冊查看圖片會發現出現圖片不是用戶所點擊相冊中的，而是歷史記錄。這是因為客戶端瀏覽器中緩存了XML文檔，最新的XML文檔就不會被FLASH加載到。解決的方法是在FLASH文件動作的代碼中調用XML文檔地址的后面加上隨機函數作為參數。

參考文獻:

[1]Elliotte Rusty Harold.Processing XML with Java.A Guide to SAX.DOM.JDOM.JAXP.and TrAX [M].Addison Wesley.2002.8.

[2]Budi Kurniawan等.深入淺出Struts[M].北京.人民郵件出版社.2007.9.

[3]朱治國，繆亮，陳艷麗.Flash Action Script 3.0編程技術教程 [M].北京.清華大學出版社.2008.6.

[4]張懷彬，臧潔.基于MVC模式的合作醫療信息平臺的設計與實現[J].遼寧大學學報.2008年01期.62-64.