蔣昌兵

摘要：進入數(shù)字化時代，日常工作中產生了大量的多媒體圖片數(shù)據，為了高效存儲和使用，設計了一個基于Java語言開發(fā)后端為SSM（Spring+SpringMVC+MyBatis）框架的圖片信息管理系統(tǒng)，集圖片采集、分析、存儲、管理于一體。系統(tǒng)通過基礎數(shù)據采集、圖片數(shù)據管理和數(shù)據流轉追溯最終實現(xiàn)圖片資源整合、資源共享、資源流轉追溯的閉合管理，打破數(shù)據孤島使圖片資源能夠更好地進行整合與共享，降低圖片管理難度，提升信息化管理水平。

關鍵詞：圖片管理；SSM框架；軟件工程；系統(tǒng)實現(xiàn)

一、前言

當前我國正從互聯(lián)網時代進入數(shù)字化時代，各行各業(yè)信息化與數(shù)字化建設如火如荼，教學、培訓、科研、會議、活動等業(yè)務會產生大量的多媒體數(shù)據，其中圖片數(shù)據居多。因歸口部門不同，這些數(shù)據都是各自保存管理，久而久之形成了數(shù)據孤島，不利于資源整合、資源共享，隨著時間的推移給后期進行數(shù)據利用造成了極大的不便[1]。研發(fā)圖片信息管理系統(tǒng)對海量圖片數(shù)據實現(xiàn)存儲、分類、查詢、添加特征碼和圖片轉碼等功能，能對工作中產生的圖片數(shù)據管理起到關鍵性作用[2]。因此建設一套能有效處理多媒體數(shù)據資源的圖片信息管理系統(tǒng)對實現(xiàn)內部信息化與數(shù)字化建設發(fā)展具有重要意義。

二、系統(tǒng)分析

（一）需求分析

本系統(tǒng)是一款B/S架構的圖片信息管理系統(tǒng)，系統(tǒng)支持用戶注冊、登錄、修改密碼、注銷和權限管理等基本功能。使用者根據分配的權限對圖片進行管理，可為圖片添加標題、類型和備注等信息。系統(tǒng)支持圖片信息的增刪改查，校驗圖片格式，可以按上傳日期、標題、標簽等進行排序。所有的用戶信息和圖片信息都存儲在MySQL數(shù)據庫中，以實現(xiàn)數(shù)據的持久化?？紤]到用戶可能會在不同的設備上使用系統(tǒng)，因此系統(tǒng)的用戶界面應采用成熟的前端頁面框架設計，以適應不同的屏幕尺寸。

（二）關鍵技術介紹

本系統(tǒng)使用Java語言開發(fā)，前端采用EasyUI框架，后端采用SSM框架，是經典的MVC開發(fā)模式。視圖層與邏輯層結構分離實現(xiàn)低耦合，符合當前計算機信息系統(tǒng)開發(fā)理念，也適合軟件研發(fā)人員的編碼習慣，常用于企業(yè)級Web應用開發(fā)。本系統(tǒng)使用MySQL數(shù)據庫系統(tǒng)對圖片信息進行持久化進而實現(xiàn)對圖片的增刪改查。通過對業(yè)務量的分析可以對MySQL數(shù)據庫進行針對性的設置，選擇適合的存儲引擎實現(xiàn)數(shù)據的高效存儲，做主從部署從而實現(xiàn)讀寫分離提高讀寫速度。EasyUI在樣式上已經適配各類瀏覽器，研發(fā)過程中無需再考慮頁面兼容性，其支持響應式設計，可以適應不同的屏幕尺寸，因此非常適合用來創(chuàng)建圖片信息管理系統(tǒng)的用戶界面。SSM框架主要負責系統(tǒng)中業(yè)務邏輯處理，使系統(tǒng)中的各模塊形成弱關聯(lián)，遵循軟件開發(fā)的“高內聚低耦合”思想。MVC設計模式使系統(tǒng)的結構層次清晰，不會出現(xiàn)HTML代碼、JS代碼、Java代碼都混合在一個頁面，冗余代碼大量減少代碼可讀性增強。

（三）可行性分析

1.技術可行性

JDK1.8環(huán)境、EasyUI前端框架、SSM框架和MySQL數(shù)據庫是當前Web應用開發(fā)的主流開發(fā)技術和開發(fā)環(huán)境。用戶能在任何遵循GPL協(xié)議下使用EasyUI前端框架；JDK1.8是商業(yè)免費版本；SSM框架是免費的開源框架，擁有成熟的社區(qū)和用戶群；MySQL Community Server社區(qū)版本開源免費且使用群體大。采用以上技術無商業(yè)風險且市面上有大量的信息管理系統(tǒng)成熟案例，因此本系統(tǒng)在技術上具備可行性。

2.操作可行性

本系統(tǒng)基于B/S架構開發(fā)易于部署和維護，移植性強，可根據使用需求跨平臺部署，可以在不同的硬件服務器與網絡操作系統(tǒng)上運行，系統(tǒng)升級只需要考慮服務器端進而降低了總體維護成本[3]。通信采用標準的HTTP/HTTPS協(xié)議，具有良好的可擴展性。使用者只需打開瀏覽器就可以進行相應操作，因此本系統(tǒng)在操作上具備可行性。

三、系統(tǒng)開發(fā)技術

（一）前端技術

本系統(tǒng)前端頁面使用一種基于jQuery的用戶界面庫EasyUI來進行頁面信息的展示，是一款幫助開發(fā)者更容易地構建Web應用程序的前端用戶界面插件開發(fā)庫。EasyUI提供了一套完整的用戶界面組件，包括窗口、對話框、表單、布局、菜單、工具欄、樹形控件、數(shù)據表格等。它同時支持Angular、Vue、jQuery等技術棧進行開發(fā)，并且提供了非常豐富的組件，通過由具體需求進行自由組合使用，構造出的頁面應用可以支持兼容多種瀏覽器。EasyUI的特點：簡單易用，提供了豐富的API，組件都是基于HTML、CSS和JavaScript實現(xiàn)的，可以很容易地嵌入任何Web頁面中，方便對組件進行定制和擴展；功能豐富，提供了一套完整的用戶界面組件，可以滿足大部分Web應用程序的需求；主題定制，EasyUI支持主題定制，可以輕松地更改應用程序的外觀和風格；支持國際化，可以根據用戶的語言偏好自動切換界面的顯示語言；兼容性好，兼容所有主流的Web瀏覽器，包括IE6+、Firefox3+、Safari3+、Chrome和Opera9+。

（二）后端技術

本系統(tǒng)后端采用Spring、Spring MVC和MyBatis三個開源框架的組合，即SSM框架。這三個框架分別在企業(yè)級Java應用開發(fā)中解決了表現(xiàn)層、業(yè)務層和持久層的問題。Spring是一個開源的企業(yè)級Java應用框架，提供了一種簡單的方式來開發(fā)可測試和可重用的代碼。Spring的核心思想是控制反轉（IoC）和面向切面編程（AOP），可以用于構建各種類型的Java應用，包括Web應用、桌面應用和企業(yè)級應用。Spring MVC是Spring框架的一部分，是一個用于構建Web應用的模型－視圖－控制器（MVC）框架。Spring MVC提供了一種分離的方式來開發(fā)Web應用，使得開發(fā)者可以更容易地關注業(yè)務邏輯，而不是細節(jié)實現(xiàn)。MyBatis是一個優(yōu)秀的持久層框架，它支持定制化SQL、存儲過程以及高級映射，消除了幾乎所有的JDBC代碼和參數(shù)的手動設置以及結果集的檢索。可以使用簡單的XML或注解進行配置和原始映射，將接口和Java的POJO（Plain Old Java Objects，普通Java對象）映射成數(shù)據庫中的記錄[4-5]。SSM框架的特點是：可以簡化Java Web開發(fā)，使開發(fā)者更專注于業(yè)務邏輯的實現(xiàn)；有強大的社區(qū)支持，有大量的文檔和教程，以及活躍的用戶和開發(fā)者社區(qū)；采用了MVC模式，有助于實現(xiàn)業(yè)務邏輯、數(shù)據和用戶界面的分離，提高了代碼的可維護性和重用性；提供了靈活的配置方式，可以根據項目的需要選擇適合的配置方式，例如XML配置或注解配置。

（三）數(shù)據庫技術

MySQL是世界上最流行的開源關系數(shù)據庫管理系統(tǒng)（RDBMS）。它是基于SQL（Structured Query Language，結構化查詢語言）的，SQL是用于管理和操縱數(shù)據庫的標準語言。MySQL的特點是：

1.開源

意味著任何人都可以使用和修改它的源代碼，使得技術得到了廣大開發(fā)者社區(qū)的強大支持，且在性能、穩(wěn)定性和功能上都得到了持續(xù)的優(yōu)化和改進。

2.在性能上進行了大量優(yōu)化

可以處理大量數(shù)據并支持大并發(fā)用戶。在許多基準測試中，都表現(xiàn)出了優(yōu)秀的性能。

3.易于安裝和使用

提供了大量的工具和庫，使得開發(fā)者可以很容易地創(chuàng)建和管理數(shù)據庫。此外，開發(fā)說明文檔非常完善，有大量的教程和示例可以幫助開發(fā)者快速上手。

4.提供了一套強大的安全機制

包括訪問控制、加密和SSL等，可以保護數(shù)據的安全。

5.跨平臺性能優(yōu)秀

可以在各種操作系統(tǒng)上運行，包括Windows、Linux和Mac OS等。

6.支持各種存儲引擎

每種存儲引擎都有其特定的用途和優(yōu)點，使得其可以應對各種不同的使用場景。

四、圖片信息管理系統(tǒng)設計

（一）整體技術路線

以實現(xiàn)圖片信息高效管理為目標，以采集的圖片資源數(shù)據為基礎，依據數(shù)據處理及使用流程邏輯進行資源構造與數(shù)據存儲，設計合理的圖片信息管理系統(tǒng)，最終實現(xiàn)圖片資源整合、資源共享、資源流轉追溯的閉合管理。整個圖片信息管理系統(tǒng)的技術路線如圖1所示。

（二）系統(tǒng)結構設計

根據系統(tǒng)需求分析設計了圖片信息管理系統(tǒng)整體業(yè)務邏輯，整個系統(tǒng)的功能模塊劃分如圖2所示，系統(tǒng)被劃分為系統(tǒng)用戶權限模塊、圖片信息采集模塊、圖片信息查詢模塊、圖片信息編輯模塊、圖片信息刪除模塊、圖片相冊管理模塊、圖片瀏覽下載模塊、圖片特征碼生成模塊、系統(tǒng)操作日志模塊共9個子模塊。

系統(tǒng)用戶權限模塊將登錄賬號的角色及對應的權限信息進行驗證，系統(tǒng)超級管理員會提前創(chuàng)建好用戶角色及配置好該角色訪問權限，系統(tǒng)進行驗證后將獲取的業(yè)務模塊渲染加載顯示。

圖片信息采集模塊由用戶自定義上傳采集與第三方接口采集組成。數(shù)據信息采集后按文件目錄保存并按預先定義好的數(shù)據結構將信息存入數(shù)據庫供系統(tǒng)其他模塊使用。

圖片信息查詢模塊、圖片信息編輯模塊、圖片信息刪除模塊由用戶根據使用需要對圖片進行相應的操作，目的是進一步優(yōu)化圖片信息做好精細化管理。

圖片相冊管理模塊主要是將圖片信息按分類進行管理，不同分類創(chuàng)建相應圖片數(shù)據集。圖片數(shù)據集由圖片構成，可以實時進行創(chuàng)建、添加、刪除操作。相冊管理中的操作不會影響圖片信息數(shù)據。

圖片瀏覽下載模塊主要是預覽或下載經過系統(tǒng)采集模塊預定方式處理后的圖片信息。用戶打開操作頁面點擊需要瀏覽的圖片，該圖片ID通過數(shù)據庫讀取的數(shù)據結構信息從文件目錄中打開圖片文件并將其轉碼為base64，由于圖片采集保存的資源目錄是當前系統(tǒng)部署所在的服務器，因此在前端頁面利用data url（本地數(shù)據）的特性直接讀取圖片信息而不是通過訪問系統(tǒng)資源路徑的方式訪問，此舉提高了系統(tǒng)資源利用率、節(jié)省了系統(tǒng)內部開銷及帶寬，解決了超高清圖片加載時間過長的問題，應用在高清、大分辨率的圖片查看時有非常好的魯棒性。用戶在預覽圖片時有裁剪、尺寸修改等操作無需通過傳統(tǒng)的方式去訪問服務端提供的url獲取圖片，可以通過在頁面上使用data url的方式進行本地IO讀寫快速對圖片進行顯示，此方法極大地提升了用戶體驗。用戶還可以根據尺寸字典表中設定的參數(shù)進行不同分辨率的圖片下載，以滿足不同使用場景的需要。

圖片特征碼生成模塊主要是利用特定的算法生成具有特殊意義的編號或者是特定logo水印的圖文進行圖片信息內容的添加，最終合并生成含有全新信息的圖片供后續(xù)有關業(yè)務中使用。本模塊主要提供用戶自定義標識碼和隨機的水印信息，使圖片增強美觀性、實用性、安全性。在知識產權與隱私保護日益重視的當下，如果發(fā)生盜用、濫用等侵權情況可追蹤到圖片的來源，也用于保護數(shù)據傳播，真?zhèn)舞b別以及非法拷貝控制。

系統(tǒng)操作日志模塊主要提供系統(tǒng)使用者全流程的痕跡管理，根據操作時間、操作模塊、操作對象、操作具體內容等信息生成操作記錄進行數(shù)據庫存儲。

（三）系統(tǒng)架構設計

系統(tǒng)架構按結構邏輯自上往下為四個層級，如圖3所示。用戶層主要是系統(tǒng)的操作用戶為圖片數(shù)據采集員、圖片數(shù)據管理員、系統(tǒng)管理員。表現(xiàn)層也就是視圖層是進行人機交互的界面部分，包括系統(tǒng)中的基礎數(shù)據和業(yè)務數(shù)據。業(yè)務邏輯層主要是根據功能需求進行數(shù)據處理，主要負責業(yè)務流程的實現(xiàn)，按功能模塊劃分為兩個子系統(tǒng)，用戶信息權限子系統(tǒng)功能包括用戶信息、角色信息、部門信息、權限信息四個部分，圖片信息管理子系統(tǒng)功能包括數(shù)據采集、圖片管理、相冊管理、特征字典、瀏覽下載、外鏈分享、操作日志七個部分。數(shù)據庫層按數(shù)據類型分為用戶信息數(shù)據、 圖片信息數(shù)據、業(yè)務字典數(shù)據三部分。

（四）數(shù)據庫設計

系統(tǒng)的正常運行離不開數(shù)據庫系統(tǒng)，一個安全、穩(wěn)定、可靠的數(shù)據庫對信息系統(tǒng)的運行起到至關重要的作用。本系統(tǒng)的數(shù)據庫選擇免費開源的MySQL，根據系統(tǒng)概要需求按系統(tǒng)權限業(yè)務模塊、圖片業(yè)務模塊進行了數(shù)據表設計，圖片信息管理系統(tǒng)數(shù)據庫結構如表1所示。

本系統(tǒng)數(shù)據表按數(shù)據類型劃分為以下兩個模塊：

1.系統(tǒng)權限模塊

本模塊中的主體表有用戶表、部門表、角色表、權限表，包含用戶姓名、所在部門、登錄賬號、所屬角色、模塊菜單的信息。用戶表與部門表可以實現(xiàn)操作人員基礎信息的管理。角色表與權限表可以分配使用功能菜單的數(shù)量，生成角色—菜單的映射關系。用戶表與角色表相關聯(lián)可以實現(xiàn)不同角色在系統(tǒng)中擁有哪些操作功能及系統(tǒng)使用級別。

2.圖片業(yè)務模塊

本模塊中主體表有圖片信息表、相冊表、圖片類型表、相冊類型表、圖片關聯(lián)表、特征碼字典表、水印字典表、尺寸字典表、圖片外鏈表、日志表，包含圖片基礎信息、相冊基礎信息、圖片配置信息、圖片分享信息、數(shù)據操作記錄信息。圖片表與相冊表關聯(lián)可以將圖片數(shù)據應用于一對多的業(yè)務場景。特征碼字典與水印字典表可以保存不同用戶需要的、經常反復使用的基礎數(shù)據或者是不同業(yè)務流程中需要用到的專用數(shù)據。圖片外鏈表可以按需求生成不同尺寸的圖片訪問地址供其他用戶在公網上進行瀏覽。日志表可以記錄所有用戶的使用情況，進行系統(tǒng)操作安全審計及數(shù)據使用追蹤溯源。

五、圖片信息管理系統(tǒng)實現(xiàn)

（一）系統(tǒng)用戶權限模塊實現(xiàn)

用戶登錄系統(tǒng)前按步驟注冊賬號或者由系統(tǒng)管理員統(tǒng)一分配賬號，在登錄頁面輸入用戶名和密碼，前端頁面進行一些簡單的判空、特殊字符的驗證，前端頁面校驗合法的數(shù)據進入后端程序的登錄方法中訪問數(shù)據庫進行下一步的核驗。登錄方法中將比對數(shù)據庫中的用戶名與密碼和傳入的是否一致，通過一致性驗證后獲得用戶名對應的角色信息，再通過角色信息獲取與之分配的權限信息，此處的權限信息包括用戶所能訪問的菜單、模塊、按鈕等。到此，整個登錄流程后端程序部分已處理完畢，前端頁面則根據獲取的權限信息進行頁面渲染，用戶進入系統(tǒng)主界面。

（二）圖片信息采集模塊實現(xiàn)

采集方式主要通過用戶登錄系統(tǒng)后打開專門的圖片上傳頁面進行。例如，采集手機、平板、數(shù)碼相機、個人PC機等多媒體設備上產生的圖片數(shù)據。用戶進入頁面后選中需要上傳的圖片，填寫一些圖片相關信息后即可上傳至系統(tǒng)。采集模塊會將上傳者信息、上傳時間、備注信息等進行記錄，采集的圖片會自動根據字典表中的參數(shù)去生成數(shù)據。例如，不同類型格式的圖片、不同分辨率大小的圖片、不同水印logo的圖片、預覽縮略圖等。對采集到的每張圖片，系統(tǒng)會生成唯一編號。

（三）圖片信息管理模塊實現(xiàn)

用戶進入對應的圖片信息管理頁面后可以按條件進行圖片資源的檢索，單個或批量對圖片信息進行編輯操作或刪除操作。用戶可以查看圖片的來源、所屬分類、相冊關聯(lián)情況，可以對圖片進行裁剪、生成特定大小縮略圖、動態(tài)生成外鏈、圖片停用等操作。

（四）圖片相冊管理模塊實現(xiàn)

用戶進入圖片相冊管理界面后首先創(chuàng)建一個相冊集，進行名稱、關鍵信息的填寫，相冊集的屬性可以是專題、會議、團建等活動，創(chuàng)建好相冊后選擇系統(tǒng)中的圖片添加到相冊上，也可以將其他相冊中圖片復制到新的相冊。相冊中可以進行圖片的增刪改查、是否公開分享等操作。相冊默認為誰創(chuàng)建誰擁有管理權限。

（五）圖片瀏覽下載模塊實現(xiàn)

用戶進入頁面后默認顯示所有采集的圖片信息。圖片數(shù)據按采集上傳時間倒序排列，可以選擇相冊模式瀏覽，相冊模式只顯示相冊相關聯(lián)的圖片信息。瀏覽頁面可以輸入采集人、采集時間、分辨率、標簽、備注等條件進行模糊檢索，在瀏覽圖片的同時可以進行放大、縮小、旋轉、裁剪等操作，點擊圖片下方“下載”按鈕可以進行圖片的本地保存。

（六）圖片特征碼生成模塊實現(xiàn)

用戶點擊圖片特征碼生成模塊會出現(xiàn)水印管理和標識碼管理兩個子菜單。進入標識碼管理頁面或水印管理頁面會按最新上傳時間倒序顯示圖片數(shù)據信息，頁面可以輸入關鍵字進行數(shù)據檢索。水印管理頁面點擊“上傳”按鈕可以將制作好的水印圖片進行上傳，選中某一條數(shù)據可以進行水印圖片的預覽并且進行增刪改操作。標識碼管理頁面中點擊“創(chuàng)建”按鈕會彈出標識碼生成窗口頁面，可以選擇隨機模式或自增模式生成純數(shù)字、純字母、字母數(shù)字符號混合的標識碼。兩個子菜單上的“合并”按鈕可以將水印圖像或生成的標識碼合并到選中的圖片上，合并時可以設置特征碼的大小、放置的位置，最終生成含有特征碼的圖片。

（七）系統(tǒng)操作日志模塊實現(xiàn)

系統(tǒng)管理員可以查看所有用戶的操作記錄，其他用戶只能查看自己的操作記錄。用戶進入頁面可以查看當前最新的操作日志數(shù)據，輸入用戶名后點擊檢索按鈕可以查看該用戶使用系統(tǒng)以來的所有操作信息，輸入開始時間和結束時間可以查詢該時間段內用戶的操作記錄，輸入操作類型可以查看用戶何時進行過這類操作，最后可以使用導出功能生成報表文件。

六、結語

SSM框架是當前主流的企業(yè)級信息系統(tǒng)開發(fā)首選技術，可以減少開發(fā)成本，提高開發(fā)效率。本系統(tǒng)在諸多圖片管理的場景中得到了很好的應用，也取得了較好的效果，表明本系統(tǒng)達到了設計之初的要求。系統(tǒng)在使用中也發(fā)現(xiàn)需要優(yōu)化之處。例如，圖片進行預覽時缺乏各類風格濾鏡處理等，后期將進一步對系統(tǒng)進行更新迭代。

參考文獻

[1]張華一.基于B/S架構的圖片管理系統(tǒng)WEB前端關鍵技術的設計與實現(xiàn)[D].北京：北京郵電大學，2017.

[2]劉潤澤.圖片管理系統(tǒng)后臺設計與實現(xiàn)[D].北京：北京郵電大學，2017.

[3]劉偉，霍德尚，張效岳.植物圖像管理系統(tǒng)設計與實現(xiàn)[J].信息技術與信息化，2022（01）：12-15.

[4]唐軍，薛亞東，盧慧，等.基于GIS的自然保護區(qū)本底資源調查系統(tǒng)的設計與實現(xiàn)[J].計算機應用與軟件，2023，40（08）：1-6+12.

[5]潘顯民，歐戰(zhàn)祥，夏雅.仿生學下基于SSM的大學生學習資源共享系統(tǒng)設計[J].湘南學院學報，2023，44（05）：44-48.

基金項目：2023年湘潭市科技系統(tǒng)第二批大事要事保障項目“多媒體終端數(shù)字圖像處理技術研究與應用”（項目編號：GX-YB20231017）

作者單位：湘潭技師學院、湘潭科技職業(yè)學院

■ 責任編輯：王穎振、楊惠娟