圖片信息管理系統的設計

竇瑞娟

（長安大學信息工程學院 陜西省西安市 710000）

隨著5G、互聯網等信息時代的到來，人手一部手機、ipad、電腦已成為現實，種類豐富且海量的圖片也隨之而來。圖片的日益增加，給我們的生活帶來了很多的歡樂和幸福，帶來了很多的回憶與生活點滴，但與此同時也增加了圖片管理的難度。圖片過期無法下載、尋找圖片宛如大海撈針等問題隨之而來。對于日益增多的圖片資源，如何更好地存儲和有效檢索已成為當今世界人們面臨的一個新的難題。圖片管理是現在互聯網網站面臨的一項必要任務，設計一套行之有效的圖片信息管理系統不僅對于個人還是企業運營發展都具有非常重要的意義。

1 系統分析

1.1 需求分析

本課題為Web 應用的圖片信息管理系統，目的在于設計圖片管理系統，實現對大量圖片進行有效的計算與管理，不同的人可以按照自己的意愿對自己暫存的圖片進行分類管理，符合當前時代進步發展的潮流，緊跟時代腳步，滿足人們日益增長的物質文化需求，在提高人們幸福生活指數的同時，也方便了人們之間的溝通交流。本系統可以實現對圖片的增刪改查等功能，不僅可以查詢修改的圖片，還可以查詢修改的內容，還可以定位當前時間，為用戶提供了方便。其中查詢還可以根據相冊名稱或對圖片的描述進行查詢。

1.2 關鍵技術介紹

本系統主要采用了ASP.NET 技術、數據庫技術、前端頁面以及三層架構。ASP.NET 界面和邏輯結構分離，編寫調試較為簡單，適合大部分人的編程習慣，可被用于創建強大的Web 應用程序。數據庫技術處理的對象是數據，在理解分析數據的基礎上，通過設計相應的數據庫管理系統實現對數據庫中數據的增刪改查等操作，并利用設計的數據庫系統處理數據，滿足個人需求。本系統主要使用MySql 數據庫技術實現對圖片的增刪改查；前端頁面是綜合利用各種前端技術，對頁面布局進行設計，使頁面的排版更加美觀合理，主要運用了css 和js 技術；三層架構模式的出現將"高內聚低耦合"的思想貫徹到實處，分層次式結構在軟件體系架構設計中是最常見，也是最重要的一種模式結構。表示層的作用在于對用戶的請求作出響應，及相應數據的返回，為客戶在網站客戶端訪問應用程序奠定了基礎；數據訪問層中的各個函數主要負責各個對數據文件的操作，而不必管其他操作，主要負責處理數據間的邏輯關系；業務邏輯層主要對數據庫中的數據層進行操作。三層架構的使用，不僅能夠使代碼結構更加清晰，也大大減少了代碼量，易于后期的維護。

1.3 可行性分析

1.3.1 技術可行性

ASP.NET、三層架構、前端Bootstrap、數據庫等技術發展至今，已經日趨成熟，并且各自都表現出了大量的優點。以此為基礎，購物網站、聊天軟件等各類網站成功亮相于大眾視野，并成為人類生活不可缺少的一部分。本系統使用ASP.NET、三層框架架構、前端頁面等編程技術和流行數據庫SQL Server 作為開發工具，而且基于大型的信息管理系統已經有很多成功的方案，因而本系統在技術上具有可行性。

圖6：album 和image 表的依賴關系

圖7：album 表屬性圖

圖8：image 表屬性圖

1.3.2 操作可行性

圖9：login 表屬性圖

本系統以B/S 模型為出發點，設計的圖片信息管理系統實現了開放性、可操作性和較易維護性，可適應多種網絡運行環境，能夠同時在多個硬件平臺及操作系統上運行。當前幾乎所有流行的操作系統都自帶了一個以上的瀏覽器，因此更有益于后期系統的操作與維護。因此在確保網絡連通的情況下，通過任一瀏覽器部署好本系統后即可進行相關操作。考慮到學校目前的實際情況，本方案在操作上是可行的。

1.3.3 社會效益可行性

隨著手機電腦的日益普及，大量的圖片進入人們的世界，人們對圖片有效管理的需求日益增加。該系統就是對大量圖片進行有效管理，設計相冊封面，并添加相冊內容，相冊封面和圖片的內容都是可以隨時進行修改和查詢的，例如：我們現在最流行的聊天工具QQ、WeChat，以及抖音、火山小視頻等各類包含相冊的軟件，都需要對圖片進行分類管理，而且此系統對用戶的使用要求低，所需開發人員少，周期短，各方面支出少，在經濟上是可行的。

2 系統概要設計

2.1 系統總體設計

2.1.1 系統流程

管理員用戶執行操作的流程，如圖1所示。

圖1：管理員用戶執行操作流程圖

2.1.2 系統結構

圖片信息管理系統的功能模塊設計如圖2所示。

圖2：系統功能模塊設計

2.2 系統概要設計

系統概要設計如圖3所示。

圖3：系統概要設計圖

2.3 數據庫概要設計

2.3.1 邏輯結構設計

如圖4所示。

圖4：E-R 圖

2.3.2 物理結構設計

確定數據庫的物理結構主要包含四方面內容：確定數據的存儲方式、設計數據的存取路徑、確定數據的存放位置及確定系統配置。時間效率、空間效率、維護代價和各種用戶要求之間的權衡是數據庫物理設計過程中較為重要的影響因素，最終需要選擇一個優化方案作為數據庫的物理結構。數據庫具有三級模式結構，且模式間存在兩種映像。SQLSERVER 一種關系型數據庫管理系統，通過SQL語句可以對數據庫執行各種操作，數據庫中的每個數據文件都存放于主要數據文件和日志文件2 個文件中。實際上，SQL Server 數據庫中不管是數據頁還是索引頁都是以最小單位-頁進行存儲的，且頁的類型有很多種。

數據庫的物理存儲結構如圖5所示。

圖5：數據庫存儲結構圖

3 系統詳細設計

3.1 界面詳細設計

登錄模塊：管理員進入管理系統，首先需要輸入用戶名與密碼，當輸入用戶名與密碼，即用戶名與密碼不為空時，連接數據庫，對用戶輸入的用戶名和密碼與數據庫里存儲的用戶名和密碼是否相符進行驗證，若數據一致則進入圖片信息管理系統首頁，否則仍停留在登錄界面；當用戶沒有輸入用戶名登錄系統時，顯示“用戶名輸入不能為空”；當用戶輸入用戶名，但沒有輸入密碼登錄系統時，顯示“密碼輸入不能為空”；當輸入的用戶名和密碼與數據庫存儲的用戶名和密碼不相符時，顯示“用戶名、密碼輸入不正確”，并將內容清空，依然跳轉到登錄模塊首頁界面。

圖17：登錄模塊

創建相冊模塊：首頁左側點擊“創建相冊”，進入創建相冊界面。在此頁中可以創建你所喜愛的圖片相冊、在創建圖片相冊后您可以為相冊添加圖片、您還可以為您的圖片相冊設置封面。創建相冊時間是根據當前時間確定的，當沒有輸入相冊名稱直接創建時，會提示：相冊名稱不能為空；當輸入相冊名重復時，會提示：相冊名稱已存在。添加封面圖片時，會瀏覽當前所用計算機的各個盤去尋找添加的圖片，如果沒有添加圖片，將設置為默認封面；添加相冊簡介時，只需編輯內容即可，若不編輯任何內容，則默認編輯的內容：It is empty...。按“確定”按鈕，即可完成對相冊封面的添加；“重置”按鈕，會清空所填的內容，重新編輯；“創建相冊并添加圖片”按鈕，可以為相冊添加內容圖片以及相應圖片的信息。

修改相冊模塊：首頁中對任一相冊點擊“修改相冊”，進入“修改相冊”模塊。修改相冊界面會顯示之前圖片的信息，可以對任一方面進行修改，點擊“保存”，會保存修改的內容，跳轉到首頁，顯示修改后的信息，也可以重置，重新修改圖片內容，但相冊創建時間是不能修改的。

為相冊添加圖片模塊：和修改相冊模塊界面基本相同，但只獲取到相冊名稱，上傳的相冊內容和圖片簡介需要自己編輯，“確定”就可為相冊添加圖片，“重置”清空所填內容，“退出”返回到首頁。

瀏覽相冊中的圖片模塊：點擊任一相冊，可以查看該相冊中有哪些圖片，且詳細展示了每個圖片的名稱、所屬相冊名、圖片上傳時間、圖片簡介，而且在此界面，可以修改圖片所在位置，“刪除所選項”，可以將選中的圖片刪除，“選擇”可查看每張圖片的詳細信息。

刪除模塊：點擊相冊“刪除”按鈕，會彈出提示框：您確認要刪除嗎？點擊“確定”，刪除整個相冊，而瀏覽相冊中的“刪除所選項”，是刪除相冊里面的內容圖片，不會刪除相冊。

3.2 數據庫詳細設計

數據庫 login 表的詳細設計如圖10所示。

圖10：login 表詳細設計圖

4 系統實現

4.1 系統開發環境

圖18：主頁模塊

圖19：創建相冊模塊

圖20：刪除模塊

本系統是用ASP.NET 語言進行開發的，開發環境主要要求是：電腦上安裝好Visual Studio2010 編程工具，SQL Serve 數據庫以及編程部署所用到的IIS 服務器。

4.2 系統實現

4.2.1 登錄模塊

如圖11所示，管理員輸入用戶名與密碼，當輸入用戶名與密碼，即用戶名與密碼不為空時，連接數據庫，核查用戶輸入的用戶名和密碼與數據庫里存儲的用戶名和密碼是否相符，若一致則進入圖片信息管理系統首頁。

圖11：登錄模塊

4.2.2 創建和修改相冊模塊

如圖12所示，首頁左側點擊“創建相冊”，進入創建相冊界面。在此頁中可以創建你所喜愛的圖片相冊、在創建圖片相冊后您可以為相冊添加圖片、您還可以為您的圖片相冊設置封面。

圖12：創建和修改相冊模塊

4.2.3 添加圖片和修改圖片模塊

如圖13所示，和修改相冊模塊界面基本相同，但只獲取到相冊名稱，上傳的相冊內容和圖片簡介需要自己編輯，“確定”就可為相冊添加圖片，“重置”清空所填內容，“退出”返回到首頁。修改相冊界面會顯示之前圖片的信息，可以對任一方面進行修改，點擊“保存”，會保存修改的內容，跳轉到首頁，顯示修改后的信息。

圖13：添加圖片和修改圖片模塊

4.2.4 瀏覽相冊中的圖片和刪除模塊

點擊任一相冊，可以查看該相冊中有哪些圖片，且詳細展示了每個圖片的名稱、所屬相冊名、圖片上傳時間、圖片簡介，點擊相冊“刪除”按鈕，會彈出提示框：您確認要刪除嗎？點擊“確定”，刪除整個相冊。如圖14 和圖15所示。

圖14：瀏覽相冊中的圖片模塊

圖15：刪除模塊

4.3 系統運行環境要求

本系統是用ASP.NET 語言進行開發的，開發環境要求包括：

（1）Visual Studio2010 編程工具；

（2）SQL Serve 數據庫；

（3）IIS 服務器。

4.4 系統部署

系統部署是程序開發的最后一步，將開發的系統發布到網站上面，讓其他人也可以訪問我們建立的網站。系統部署大致分為三步，第一步是在本機上面建立一個新的網站，鼠標單擊“我的電腦--->右鍵--->管理--->服務和應用程序--->網絡信息服務（Internet Information Service）--->網站--->右鍵--->新建網站”；第二步，利用管理員身份打開Visual Studio2010--->生成--->發布網站--->選擇目標位置--->選擇IIS 和新網站--->打開--->發布；第三步，鼠標點擊“新建網站--->默認文檔--->添加系統首頁文件”；以上步驟都全部完成之后，網站就部署成功了。

5 性能測試與分析

如圖16-20所示。

圖16：登錄模塊

6 結論

圖片信息管理系統的各個模塊功能都已實現，各模塊互相作用，相輔相成，形成了一套完備的信息管理系統。該系統的實現不僅滿足了個人習慣的需求，而且積極地推動了各企業的運營發展，具有良好的發展前景。