基于SpringBoot與Vue的學院人員管理系統設計與實現

摘要：人員管理對于高校學院的信息維護至關重要。傳統的人員管理系統在設計上普遍側重于存儲文本信息，忽視了圖片信息的存儲和維護。為了解決這一問題，文章設計并實現了一種基于SpringBoot與Vue框架的學院人員管理系統。該系統采用前后端分離的設計模式，前端選用Vue框架，后端則依托SpringBoot和MyBatis框架，應用模型視圖控制器（Model View Controller， MVC）3層架構來實現系統前后端高效、安全的數據交互。同時，系統結合了阿里云對象存儲服務，實現了圖片的云端存儲與高效回顯。此外，系統還引入了切面編程技術，以記錄增刪改操作日志，從而增強了代碼的模塊化和可維護性。該系統滿足了學院對人員信息多樣化的需求并提升了對人員信息的維護和管理效率。

關鍵詞：人員管理系統；SpringBoot框架；Vue框架；MyBatis框架；面向切面編程技術；對象存儲

中圖分類號：TP311；G424" 文獻標志碼：A

0 引言

近年來，隨著教育信息化的不斷推進和高質量教育需求的普遍增長，學院的招生人數持續上升，教師隊伍也在不斷壯大。因此，對人員的有效管理變得尤為重要。然而，傳統的人員管理系統在設計上主要關注文本信息的存儲，而對圖片信息的處理不足，通常僅將圖片存儲在本地服務器的文件系統中。盡管這種存儲方式在初期看似方便，但隨著人員和圖片數量的急劇增加，系統將面臨存儲空間不足、管理復雜性增加、備份和恢復操作困難等多重問題。為解決這些問題，本文提出了一種新的解決方案，采用SpringBoot與Vue框架設計并實現了一個云端圖片存儲的學院人員管理系統。此外，通過應用面向切面編程（Aspect Oriented Programming， AOP）技術，系統能夠記錄每一次的增刪改操作并將這些操作日志存儲在數據庫中，從而大幅提升了學院對人員信息維護和管理的效率。

1 相關技術介紹

1.1 SpringBoot框架

SpringBoot是一個基于Spring框架的開源項目，旨在簡化Java應用程序的開發流程，具有提供簡化配置和快速啟動的特性，使得開發者能夠輕松地創建生產級別的應用程序。SpringBoot提供了默認的配置選項并支持嵌入式服務器（例如Tomcat和Jetty），從而允許開發者無須進行復雜的配置即可快速構建和測試應用程序。

1.2 Vue框架

Vue是一個漸進式的JavaScript框架，專門用于構建用戶界面。其核心庫專注于視圖層，因此與其他庫或現有項目的集成變得異常簡單。Vue框架提供了響應式的數據綁定和組件化的開發方式，極大地提高了單頁面應用的開發效率并簡化了維護過程。由于其簡單易用的特性，Vue框架在前端開發領域廣受青睞。

1.3 阿里云對象存儲技術

阿里云對象存儲服務（Object Storage Service，OSS）是一種海量、安全、高可靠的云存儲服務，適用于各種場景，包括備份、歸檔和數據共享。用戶可以將數據以對象的形式上傳到云端，OSS 提供了便捷的應用程序編程接口（Application Programming Interface， API）進行存儲和管理。該服務建立在阿里云強大的基礎設施之上，支持海量數據的存儲和高效的訪問，適合企業和個人用戶使用。OSS 還提供數據加密、權限管理和生命周期管理等功能，確保數據的安全性和可管理性。

1.4 AOP

AOP是一種編程技術，它專注于集中管理橫切關注點。通過將諸如日志、安全、事務等關注點從核心業務邏輯中分離出來，AOP 有助于增強代碼的可維護性和可讀性。AOP 的核心組件包括切面、切入點和通知，這些組件使得開發者能夠在程序執行的特定點插入額外的行為。開發者利用 AOP可以構建清晰且可重用的代碼，減少代碼冗余并提高系統的可擴展性。

2 需求分析

2.1 系統需求概述

校園人員管理系統的核心目標在于高效地管理校園內各類人員的信息，涵蓋教職工、學生及其他相關人員。在系統需求分析階段，研發人員必須明確系統所需的基本功能，包括但不限于信息錄入、查詢、修改、刪除以及數據的導入導出等。此外，鑒于系統的用戶群體，系統設計應提供良好的人機交互，使用者可以使用圖形化界面進行操作［1］。

2.2 功能需求

（1）信息錄入：系統應提供一個簡潔的界面供管理員錄入人員的基本信息，包括但不限于姓名、性別、圖像、職務、部門等。

（2）查詢功能：系統應支持按不同條件進行人員信息的檢索，如按姓名、職務或部門等。

（3）修改與刪除：對于已錄入的信息，管理員應能夠進行修改或刪除操作。對于相互關聯的數據，例如部門信息和員工信息，當刪除部門后，部門下的員工也應該刪除，確保數據的完整性和一致性。

（4）導入與導出：能夠將已有數據導入系統，也可以將系統中的數據導出。

2.3 性能需求

（1）響應時間：系統應保證在正常網絡環境下，用戶操作響應時間不超過1 s。

（2）數據處理：系統應能夠處理大量數據的存儲和查詢，保證數據的準確性和完整性。

（3）安全性：系統能夠對用戶身份進行驗證，只有成功登錄后才可以進入系統內部，直接訪問數據頁面將會被攔截［2］。

3 系統總體設計

3.1 整體架構設計

本研究構建的學院人員管理系統采用了前后端分離的設計理念。前端部分利用Vue框架構建并通過Vue Router實現頁面導航管理，同時借助Element UI等用戶界面組件庫來提升開發效率，優化用戶界面及交互體驗［3］。前端通過Axios庫發送HTTP異步請求，與后端進行數據交換，實現數據的動態展示與更新。后端則采用SpringBoot框架處理來自前端的請求并基于MVC3層架構處理業務邏輯。在這一過程中，服務層負責請求接收與響應，控制層負責數據處理，而調用數據層則通過MyBatis接口編程與MySQL數據庫交互，實現數據存儲。后端服務層采用基于接口的編程方式并借助控制反轉實現對象的注入。該層實現系統登錄、圖片上傳、數據回顯、令牌驗證以及數據的增加、刪除、修改和查詢等關鍵操作。這種方式顯著降低了模塊間的耦合性，增強了系統的靈活性和可維護性，同時為系統的進一步擴展提供了便利。系統整體架構如圖1所示。

3.2 數據庫設計

數據存儲采用MySQL數據庫，項目與數據庫之間的交互通過MyBatis實現。這種交互方式確保了數據的安全性和完整性，有效防止了SQL語句注入，同時提供了較高的擴展性和可靠性［4］。系統數據庫在MySQL上共建立了6張表，表中的具體字段和內容如下。

專業表（maj）：主要用于記錄學院包含專業的相關信息，包含主鍵專業ID（id）、專業名稱（name）、專業代碼（code）、創建時間（create_time）和最后一次修改時間（update_time）5個字段。

班級表（cls）：主要用于記錄班級的相關信息，包含主鍵班級ID（id）、班級名稱（name）、專業ID（maj_id）、輔導員（counselor）、創建時間（create_time）和最后一次修改時間（update_time）6個字段。其中班級表中的專業ID字段和專業表中的主鍵邏輯關聯。

學生表（stu）：主要用于記錄學生的相關信息，包含主鍵學號（id）、姓名（name）、圖像（image）、性別（gender）、所屬班級（cls_id）、電話號碼（tel）、入學年份（entrydate）、創建時間（create_time）和最后一次修改時間（update_time）9個字段。其中學生表中的所屬班級字段和班級表中的主鍵邏輯關聯。

部門表（dept）：主要用于記錄部門的相關信息，包含主鍵部門ID（id）、部門名稱（name）、創建時間（create_time）和最后一次修改時間（update_time）4個字段

員工表（emp）：主要記錄員工的相關信息，包含主鍵員工ID（id）、用戶名（username）、密碼（password）、姓名（name）、性別（gender）、圖像（image）、職位（job）、所屬部門（dept_id）、創建時間（create_time）和最后一次修改時間（update_time）11個字段。其中員工表中的所屬部門字段和部門表中的主鍵邏輯關聯。

操作日志表（operate_log）：用于記錄系統對信息增刪改的操作，包含主鍵順序ID（id）、操作人（operate_user）、操作時間（operate_time）、操作的類名（class_name）、操作的方法名（method_name）、方法參數（method_params）、返回值（return_value）和執行耗時（cost_time）8個字段。

在設計數據庫表關系時，本文傾向于使用邏輯外鍵而非物理外鍵來定義表間的關聯。邏輯外鍵的應用增強了數據模型的靈活性，使其能夠更好地適應需求的變化。此外，邏輯外鍵不依賴于數據庫的強制約束機制，因此在執行插入、更新和刪除操作時，不會產生額外的性能負擔，從而提升了系統效率。

4 系統詳細設計與實現

4.1 信息管理

4.1.1 模塊整體實現

在信息管理模塊中，采納了模塊化的設計理念，將信息錄入、查詢、修改、刪除等操作封裝成獨立的功能模塊。這種設計顯著提升了代碼的復用性，使得系統的維護和升級更為便捷。在具體實現方面，利用SpringBoot框架所提供的RESTful API接口，構建前后端分離的架構模式。通過HTTP請求，前端與后端實現了交互，從而支持信息的動態管理［5］。

4.1.2 信息錄入功能實現

信息錄入功能是系統核心功能之一。本文采用Element UI組件構建了一個簡潔直觀的表單界面，允許管理員輸入包括員工、學生在內的各類人員基本信息以及專業部門的相關數據。用戶點擊提交按鈕后，前端發起請求，將輸入數據以JSON格式保存至存儲體。后端控制層接收到請求后，通過@RequestBody注解自動將JSON數據封裝成對象并調用服務層接口填充對象的最后操作時間信息。隨后，調用數據層接口實現數據持久化存儲。由于添加數據的SQL語句較為簡單，直接使用MyBatis框架的@Insert注解來實現數據交互，將數據插入對應數據庫表。此外，還實現了數據校驗邏輯，確保錄入信息符合既定格式和規則。

4.1.3 查詢功能實現

查詢功能賦予管理員根據多種條件檢索人員信息的能力，支持包括模糊查詢、精確查詢、姓名查詢、性別查詢、入職時間在內的多種查詢方式。在后端，通過MyBatis的映射功能，在Resources文件夾中配置xml文件以實現動態SQL功能。利用if和where標簽，能夠構建多條件組合查詢，根據不同的查詢條件動態生成SQL語句，從而實現高效的數據檢索。查詢結果的總條數和對象容器被封裝在pageBean中并以JSON格式返回給前端。員工查詢的映射文件代碼如下。

lt;！--員工條件查詢 id必須和Mapper接口的方法名一致，類型也必須一致--gt;

lt;select id=\"list\" resultType=\"com.school.pojo.Emp\"gt;

select *

from emp

lt;wheregt;

lt;if test=\"name ！= 1 and name ！= '' \"gt;

name like concat（'%'， #{name}， '%'）

lt;/ifgt;

lt;if test=\"gender ！= 1\"gt;

and gender = #{gender}

lt;/ifgt;

lt;if test=\"begin ！= 1 and end ！= 1\"gt;

and entrydate between #{begin} and #{end}

lt;/ifgt;

lt;/wheregt;

order by update_time desc

lt;/selectgt;

4.1.4 修改功能實現

修改功能賦予管理員對已錄入信息的編輯權限。在前端數據列表中，點擊操作欄的“編輯”按鈕，前端將發起基于ID的數據查詢請求。后端接收到請求后，會將對應數據返回給前端，以便進行數據回顯。管理員可以在該界面查看到先前填寫的信息并進行必要的修改。提交修改請求時，前端會以JSON格式將更新后的數據發送至后端。后端的控制層接收到修改請求后，會調用數據訪問層的相關方法，根據傳入的數據更新數據庫中的記錄。為保證數據的一致性和準確性，系統增加了數據校驗邏輯功能，確保只有符合既定格式和規則的數據才能被更新。此外，系統還記錄了修改操作的日志，以便于后續的審計和追蹤。

4.1.5 刪除功能實現

此功能用于管理員移除不再需要的記錄。在前端界面，管理員可以通過點擊單條記錄旁的刪除按鈕來啟動刪除流程，或者通過選擇多個記錄后點擊批量刪除按鈕來執行刪除操作。點擊刪除或批量刪除按鈕后，前端將向后端發送一個刪除請求，該請求包含一個列表，記錄了所有待刪除記錄的唯一標識符（ID）。隨后，這個列表被返回給后端。后端的控制器層接收到刪除請求后，會調用數據訪問層的方法，根據提供的標識符從數據庫中移除相應的記錄。對于相互關聯的數據，例如部門信息和員工信息，當刪除部門后，部門下的員工也應該刪除。為確保數據的完整性和一致性，將刪除邏輯的代碼進行了try-catch包裹并使用了@Transactional注解，將刪除方法交給Spring事務管理，當刪除方法存在異常時，Spring事務管理會捕獲異常并自動回滾事務。此外，刪除操作會被記錄在操作日志中，以確保系統的安全性和可追溯性。

通過這些功能的實現，信息管理模塊能夠有效地支持學院人員管理系統的日常操作，確保信息的準確性和及時性。同時，模塊化的設計使得系統的擴展和維護變得更加容易，為未來可能的功能升級和優化提供了基礎。

4.2 圖片上傳云端與回顯實現

圖片上傳模塊的實現依托于阿里云OSS對象存儲技術，當管理員為學生或員工添加圖片信息時，前端會發起文件上傳請求。后端接收到請求后，會調用工具類aliOSSUtils將文件上傳至阿里云指定的緩存Bucket中并將圖片的統一資源定位（Uniform Resource Location， URL）返回給前端。在用戶點擊提交按鈕后，前端會發送包含填寫數據的請求，后端響應這些請求并將數據存儲在數據庫中。圖片以URL地址的形式存儲，使得前端能夠通過這些地址回顯圖片。上傳至阿里云和返回圖片URL的代碼如下。

// 獲取上傳文件的輸入流

InputStream inputStream = file.getInputStream（）;

// 使用UUID唯一表示圖片，避免文件覆蓋

String originalFilename = file.getOriginalFilename（）;

String fileName = UUID.randomUUID（）.toString（） +

originalFilename.substring（originalFilename.lastIndexOf（\".\"））;

//上傳文件到 OSS

OSS ossClient = new OSSClientBuilder（）.build（endpoint，accessKeyId， "accessKeySecret）;

ossClient.putObject（bucketName，fileName， inputStream）;

//文件訪問路徑

String url = endpoint.split（\"http://\"）［0］ + \"http://\" + bucketName + \".\" +

endpoint.split（\"http://\"）［1］ + fileName;

// 關閉ossClient

ossClient.shutdown（）;

return url;// 把上傳到OSS的路徑返回

4.3 操作日志記錄實現

日志記錄模塊的實現依托于SpringBoot框架中的面向切面編程技術。通過定義切面類，能夠在不更改業務邏輯代碼的前提下，對關鍵操作進行攔截并將操作信息記錄到日志文件中。首先，自定義了一個名為Log的注解并在切面類中使用@Around注解進行配置，將自定義注解Log與切面類綁定。隨后，在控制層方法上添加Log注解，這些方法涉及添加、修改、刪除學生和員工等操作，從而實現切面類與函數的綁定。每當管理員執行創建、修改、刪除操作時，系統會自動觸發切面類中的方法，詳細記錄操作信息。這些信息包括操作類型、操作時間、操作人員標識、具體操作內容以及操作結果等。借助這些記錄，系統管理員可以追蹤和審計系統內的操作歷史，確保操作的透明性和可追溯性。數據庫中的部分日志記錄如圖2所示。

5 結語

本文詳細探討了基于SpringBoot與Vue框架構建學院人員管理系統的設計與實現。該系統采用前后端分離的架構模式，有效提升了開發效率和系統的可維護性［6］。前端界面由Vue框架構成，提供了直觀的操作體驗，而服務端邏輯則利用SpringBoot框架搭建，確保了系統的穩定性和高效性。MyBatis框架的引入簡化了數據庫操作流程，使得數據處理更加高效。同時，本文采用阿里云對象存儲技術，為文件存儲提供了云服務支持。面向切面編程技術的運用，增強了系統的日志記錄功能，為系統的審計和問題追蹤提供了有力支持。通過實現信息管理、圖片上傳云端與回顯、操作日志記錄等功能，學院人員管理系統能夠滿足日常管理需求，同時確保了數據的準確性和操作的可追溯性。系統的模塊化設計不僅便于未來的功能擴展和維護，也為系統的長期穩定運行奠定了堅實基礎。隨著技術的不斷進步和需求的不斷變化，學院人員管理系統將不斷優化和升級，更好地服務于學院的管理工作。

參考文獻

［1］孫鋼燦，張寧寧，趙傳勇.智能井蓋鎖云端監測管理系統設計與實現［J］.計算機應用與軟件，2022（2）：16-20，25.

［2］楊晟.基于SpringBoot的火車票售票管理系統設計［J］.無線互聯科技，2024（5）：61-63.

［3］王玉魁，李峰，喬彥超，等.基于Springboot與Vue框架的倉儲管理系統設計與實現［J］.河南科技，2024（18）：29-33.

［4］曹浩，黎杰，謝彬.基于SpringBoot+Vue的桂林龍勝各族自治縣的旅游信息系統設計［J］.現代信息科技，2024（16）：102-106.

［5］羅光武，陳典燦，吳荷，等.應用Springboot+Vue框架的時間管理軟件的設計與實現［J］.工業控制計算機，2024（4）：64-66.

［6］劉鵬.基于SpringBoot的在線學習系統與用戶畫像構建［J］.無線互聯科技，2023（4）：136-138.

（編輯 王雪芬編輯）

Design and implementation of a college personnel management system

based on SpringBoot and Vue

YAO" Baiyun， ZHANG" Hao*， DU" Ruiqing

（School of Information and Electrical Engineering， Hebei University of Engineering， Handan 056038， China）

Abstract： Personnel management is crucial for the information maintenance of colleges. However， traditional personnel management systems generally focus on storing text information， neglecting the storage and maintenance of image data. To address this issue， the article designs and implements a college personnel management system based on the SpringBoot and Vue frameworks. The system adopts a front-end and back-end separation design pattern， utilizing the Vue framework for the front end and relying on SpringBoot and MyBatis for the back end， applying the model view controller three-tier architecture to achieve efficient and secure data interaction between the front and back ends. Additionally， the system integrates Alibaba Cloud OSS object storage technology to enable cloud storage of images and efficient retrieval. Furthermore， the system introduces aspect-oriented programming （AOP） technology to log add， delete， and modify operations， thereby enhancing the modularity and maintainability of the code. This system meets the diverse needs of the college for personnel information and improves the efficiency of personnel information maintenance and management.

Key words： personnel management system; SpringBoot framework; Vue framework; MyBatis framework; aspect-oriented programming technology; object storage