圖片信息管理系統(tǒng)的設(shè)計(jì)

竇瑞娟

（長(zhǎng)安大學(xué)信息工程學(xué)院 陜西省西安市 710000）

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

1 系統(tǒng)分析

1.1 需求分析

本課題為Web 應(yīng)用的圖片信息管理系統(tǒng)，目的在于設(shè)計(jì)圖片管理系統(tǒng)，實(shí)現(xiàn)對(duì)大量圖片進(jìn)行有效的計(jì)算與管理，不同的人可以按照自己的意愿對(duì)自己暫存的圖片進(jìn)行分類管理，符合當(dāng)前時(shí)代進(jìn)步發(fā)展的潮流，緊跟時(shí)代腳步，滿足人們?nèi)找嬖鲩L(zhǎng)的物質(zhì)文化需求，在提高人們幸福生活指數(shù)的同時(shí)，也方便了人們之間的溝通交流。本系統(tǒng)可以實(shí)現(xiàn)對(duì)圖片的增刪改查等功能，不僅可以查詢修改的圖片，還可以查詢修改的內(nèi)容，還可以定位當(dāng)前時(shí)間，為用戶提供了方便。其中查詢還可以根據(jù)相冊(cè)名稱或?qū)D片的描述進(jìn)行查詢。

1.2 關(guān)鍵技術(shù)介紹

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

1.3 可行性分析

1.3.1 技術(shù)可行性

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

圖6：album 和image 表的依賴關(guān)系

圖7：album 表屬性圖

圖8：image 表屬性圖

1.3.2 操作可行性

圖9：login 表屬性圖

本系統(tǒng)以B/S 模型為出發(fā)點(diǎn)，設(shè)計(jì)的圖片信息管理系統(tǒng)實(shí)現(xiàn)了開(kāi)放性、可操作性和較易維護(hù)性，可適應(yīng)多種網(wǎng)絡(luò)運(yùn)行環(huán)境，能夠同時(shí)在多個(gè)硬件平臺(tái)及操作系統(tǒng)上運(yùn)行。當(dāng)前幾乎所有流行的操作系統(tǒng)都自帶了一個(gè)以上的瀏覽器，因此更有益于后期系統(tǒng)的操作與維護(hù)。因此在確保網(wǎng)絡(luò)連通的情況下，通過(guò)任一瀏覽器部署好本系統(tǒng)后即可進(jìn)行相關(guān)操作?？紤]到學(xué)校目前的實(shí)際情況，本方案在操作上是可行的。

1.3.3 社會(huì)效益可行性

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

2 系統(tǒng)概要設(shè)計(jì)

2.1 系統(tǒng)總體設(shè)計(jì)

2.1.1 系統(tǒng)流程

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

圖1：管理員用戶執(zhí)行操作流程圖

2.1.2 系統(tǒng)結(jié)構(gòu)

圖片信息管理系統(tǒng)的功能模塊設(shè)計(jì)如圖2所示。

圖2：系統(tǒng)功能模塊設(shè)計(jì)

2.2 系統(tǒng)概要設(shè)計(jì)

系統(tǒng)概要設(shè)計(jì)如圖3所示。

圖3：系統(tǒng)概要設(shè)計(jì)圖

2.3 數(shù)據(jù)庫(kù)概要設(shè)計(jì)

2.3.1 邏輯結(jié)構(gòu)設(shè)計(jì)

如圖4所示。

圖4：E-R 圖

2.3.2 物理結(jié)構(gòu)設(shè)計(jì)

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

數(shù)據(jù)庫(kù)的物理存儲(chǔ)結(jié)構(gòu)如圖5所示。

圖5：數(shù)據(jù)庫(kù)存儲(chǔ)結(jié)構(gòu)圖

3 系統(tǒng)詳細(xì)設(shè)計(jì)

3.1 界面詳細(xì)設(shè)計(jì)

登錄模塊：管理員進(jìn)入管理系統(tǒng)，首先需要輸入用戶名與密碼，當(dāng)輸入用戶名與密碼，即用戶名與密碼不為空時(shí)，連接數(shù)據(jù)庫(kù)，對(duì)用戶輸入的用戶名和密碼與數(shù)據(jù)庫(kù)里存儲(chǔ)的用戶名和密碼是否相符進(jìn)行驗(yàn)證，若數(shù)據(jù)一致則進(jìn)入圖片信息管理系統(tǒng)首頁(yè)，否則仍停留在登錄界面；當(dāng)用戶沒(méi)有輸入用戶名登錄系統(tǒng)時(shí)，顯示“用戶名輸入不能為空”；當(dāng)用戶輸入用戶名，但沒(méi)有輸入密碼登錄系統(tǒng)時(shí)，顯示“密碼輸入不能為空”；當(dāng)輸入的用戶名和密碼與數(shù)據(jù)庫(kù)存儲(chǔ)的用戶名和密碼不相符時(shí)，顯示“用戶名、密碼輸入不正確”，并將內(nèi)容清空，依然跳轉(zhuǎn)到登錄模塊首頁(yè)界面。

圖17：登錄模塊

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

修改相冊(cè)模塊：首頁(yè)中對(duì)任一相冊(cè)點(diǎn)擊“修改相冊(cè)”，進(jìn)入“修改相冊(cè)”模塊。修改相冊(cè)界面會(huì)顯示之前圖片的信息，可以對(duì)任一方面進(jìn)行修改，點(diǎn)擊“保存”，會(huì)保存修改的內(nèi)容，跳轉(zhuǎn)到首頁(yè)，顯示修改后的信息，也可以重置，重新修改圖片內(nèi)容，但相冊(cè)創(chuàng)建時(shí)間是不能修改的。

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

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

刪除模塊：點(diǎn)擊相冊(cè)“刪除”按鈕，會(huì)彈出提示框：您確認(rèn)要?jiǎng)h除嗎？點(diǎn)擊“確定”，刪除整個(gè)相冊(cè)，而瀏覽相冊(cè)中的“刪除所選項(xiàng)”，是刪除相冊(cè)里面的內(nèi)容圖片，不會(huì)刪除相冊(cè)。

3.2 數(shù)據(jù)庫(kù)詳細(xì)設(shè)計(jì)

數(shù)據(jù)庫(kù) login 表的詳細(xì)設(shè)計(jì)如圖10所示。

圖10：login 表詳細(xì)設(shè)計(jì)圖

4 系統(tǒng)實(shí)現(xiàn)

4.1 系統(tǒng)開(kāi)發(fā)環(huán)境

圖18：主頁(yè)模塊

圖19：創(chuàng)建相冊(cè)模塊

圖20：刪除模塊

本系統(tǒng)是用ASP.NET 語(yǔ)言進(jìn)行開(kāi)發(fā)的，開(kāi)發(fā)環(huán)境主要要求是：電腦上安裝好Visual Studio2010 編程工具，SQL Serve 數(shù)據(jù)庫(kù)以及編程部署所用到的IIS 服務(wù)器。

4.2 系統(tǒng)實(shí)現(xiàn)

4.2.1 登錄模塊

如圖11所示，管理員輸入用戶名與密碼，當(dāng)輸入用戶名與密碼，即用戶名與密碼不為空時(shí)，連接數(shù)據(jù)庫(kù)，核查用戶輸入的用戶名和密碼與數(shù)據(jù)庫(kù)里存儲(chǔ)的用戶名和密碼是否相符，若一致則進(jìn)入圖片信息管理系統(tǒng)首頁(yè)。

圖11：登錄模塊

4.2.2 創(chuàng)建和修改相冊(cè)模塊

如圖12所示，首頁(yè)左側(cè)點(diǎn)擊“創(chuàng)建相冊(cè)”，進(jìn)入創(chuàng)建相冊(cè)界面。在此頁(yè)中可以創(chuàng)建你所喜愛(ài)的圖片相冊(cè)、在創(chuàng)建圖片相冊(cè)后您可以為相冊(cè)添加圖片、您還可以為您的圖片相冊(cè)設(shè)置封面。

圖12：創(chuàng)建和修改相冊(cè)模塊

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

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

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

4.2.4 瀏覽相冊(cè)中的圖片和刪除模塊

點(diǎn)擊任一相冊(cè)，可以查看該相冊(cè)中有哪些圖片，且詳細(xì)展示了每個(gè)圖片的名稱、所屬相冊(cè)名、圖片上傳時(shí)間、圖片簡(jiǎn)介，點(diǎn)擊相冊(cè)“刪除”按鈕，會(huì)彈出提示框：您確認(rèn)要?jiǎng)h除嗎？點(diǎn)擊“確定”，刪除整個(gè)相冊(cè)。如圖14 和圖15所示。

圖14：瀏覽相冊(cè)中的圖片模塊

圖15：刪除模塊

4.3 系統(tǒng)運(yùn)行環(huán)境要求

本系統(tǒng)是用ASP.NET 語(yǔ)言進(jìn)行開(kāi)發(fā)的，開(kāi)發(fā)環(huán)境要求包括：

（1）Visual Studio2010 編程工具；

（2）SQL Serve 數(shù)據(jù)庫(kù)；

（3）IIS 服務(wù)器。

4.4 系統(tǒng)部署

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

5 性能測(cè)試與分析

如圖16-20所示。

圖16：登錄模塊

6 結(jié)論

圖片信息管理系統(tǒng)的各個(gè)模塊功能都已實(shí)現(xiàn)，各模塊互相作用，相輔相成，形成了一套完備的信息管理系統(tǒng)。該系統(tǒng)的實(shí)現(xiàn)不僅滿足了個(gè)人習(xí)慣的需求，而且積極地推動(dòng)了各企業(yè)的運(yùn)營(yíng)發(fā)展，具有良好的發(fā)展前景。