截圖收集管理系統的設計方案研究

龍坡

摘要：基于SSM（Spring+Spring?MVC+My?Batis）框架構建一個移動端截圖收集系統，解決教師在收集學生反饋截圖時所面臨的繁瑣問題，以簡化流程，減少時間和人力消耗。利用互聯網的高效率和開放性，借助移動端實現即用即走的模式，系統基于SSM框架開發一款運行于移動端的Web應用程序。采用在線收集和云端托管的方式，有效減輕教師在截圖收集和管理方面的壓力。

關鍵詞：截圖收集系統??移動端?云端托管?在線收集

中圖分類號：TP315

Research?on?the?Design?Scheme?of?the?Screenshot?Collection?Management?System

LONG?Po

（Changsha?Social?Work?College，?Changsha，?Hunan?Province，??410004?China）

Abstract：Based?on?the?SSM?（Spring+Spring?MVC+My?Batis）?framework，?a?screenshot?collection?system?of?the?mobile?terminal?is?built?to?solve?the?cumbersome?problems?faced?by?teachers?when?collecting?the?screenshots?of?students'?feedback，?so?as?to?simplify?the?process?and?reduce?time?and?manpower?consumption.?Taking?advantage?of?the?high?efficiency?and?openness?of?the?Internet，?the?ready-to-go?mode?is?realized?with?the?help?of?the?mobile?terminal，?and?the?system?develops?a?web?application?program?which?is?run?on?the?mobile?terminal?based?on?the?SSM?framework.?The?use?of?the?methods?of?online?collection?and?cloud?hosting?effectively?reduces?teachers?pressure?in?the?collection?and?management?of?screenshots.

Key?Words：Screenshot?collection?system;?Mobile?terminal;?Cloud?hosting;?Online?collection

在當前的高校教育背景下，為及時了解和掌握學生的情況，有針對性地開展學生工作，高校教師在工作中常常需要收集某些與學生有關的信息和數據[1]。教師通過截圖的形式收集大學生的日常學習和生活的反饋，對于了解和掌握學生基本情況，做好學生的思想引導和教育工作十分重要[2]。原始的截圖收集方式，需要教師與學生通過QQ群、微信群等方式進行一對一圖片傳輸，教師再復制或保存收集到本地電腦進中的文件進行打包，并最終以名單形式進行統計。然而，這種方式存在較大的痛點，即截圖的收集和統計過程繁瑣，且不易進行有效統計，統計錯誤率高[3]。為簡化工作流程，提升工作效率，讓教師和學生都能夠擺脫這種繁瑣的截圖收集方式。本系統實現將截圖任務及數據放到云服務器托管，采用二維碼形式進行在線收集、預設名單自動統計和截圖數據一鍵打包下載。同時，系統界面設計友好，操作簡化，從而實現便捷、高效的在線截圖收集管理系統，為教師和學生提供更好的反饋收集體驗。

1?系統設計

• 技術路線的確定
  • 流程設計

使用思維導圖（Mind?Master）繪制用例圖，同時創建流程圖、結構圖和功能模塊圖，以清晰地定義系統流程和業務邏輯。

• 數據庫設計

使用Mind?Master設計實體-聯系圖（Entity?Relationship?Diagram，E-R），以確定數據庫表、表之間的關系，并明確定義表字段。通過這種方式，可以確保數據庫結構與業務需求相匹配，并優化數據存儲和處理效率。

• 架構設計

本項目采用前后端分離的架構，后端采用SSM框架的MVC模式，數據庫選用MySQL。后端控制層使用小服務程序（Servlet），客戶端通過HTTP協議訪問指定的URL，并獲取相應的JSON數據包。前端采用VUE框架，以及ElementUI、VantUI等UI框架使用Axios進行數據交互，基于移動端UI設計規范進行開發。前后端項目部署在Tomcat容器內，通過瀏覽器進行訪問[4]。

• 功能模塊設計

該在線截圖收集管理系統主要分為4個模塊，分別為：注冊登錄模塊、任務創建者管理模塊、學生提交模塊、超級管理員模塊。

• 注冊登錄模塊

注冊登錄模塊是平臺正常使用的基石，包括賬號注冊、登錄和密碼修改等功能。該模塊允許用戶新建、新增或修改賬號密碼。通過實現注冊登錄模塊，平臺能夠提供用戶管理、安全驗證和個性化服務等功能。

• 任務創建者管理模塊

任務創建者管理模塊的主要功能包括個人信息的修改和查詢、截圖任務的新增和分享、截圖數據的刪除和查詢以及截圖打包。該模塊允許用戶修改和查詢自身賬號的個人信息。在完善基礎信息后，用戶可以創建和查詢截圖任務，同時分享該任務所生成的二維碼以收集截圖。在收集過程中，用戶可以查詢和刪除截圖數據信息。當所有截圖收集完畢后，該模塊提供一鍵在線打包功能，將所有已提交的截圖進行Zip打包并下載。

• 學生提交模塊

學生提交模塊允許用戶通過掃描分享收集的二維碼提交截圖，每次最多可以選擇五張截圖，并在輸入姓名后與預設名單進行匹配。如果名單中不存在該姓名，則會有提示，但用戶可以選擇強制提交。提交成功后，系統會給出反饋提示。當提交人數達到總人數的85%時，系統會發送一條短信消息，提醒任務創建者截圖收集任務即將完成。此外，該模塊還具有預設名單統計功能，展示所有預設名單中的姓名，已提交的姓名會自動標注為綠色，方便統計。

• 超級管理員模塊

超級管理員模塊負責統籌管理整個平臺的運行。該模塊的主要功能包括個人信息的修改和查詢、截圖任務的增加、刪除和查詢、截圖分享、截圖數據的增加。當用戶ID為1時，該賬號為超級管理員賬號。該賬號內會新增平臺內所有截圖任務列表管理模塊，并擁有任務詳情查看、截圖刪除、截圖提交、任務刪除、截圖打包、個人信息修改和查詢的權限。

2?數據庫設計

該系統數據庫設計共有4張表，分別為：用戶表（User）、截圖任務表（Misson）、截圖數據表（Screen）、輪播圖表（Hdp_info），其中用戶表與截圖任務表進行了關聯，截圖任務表與截圖數據表進行了關聯。

2.1用戶表

用戶表用于存放用戶的用戶名、密碼、昵稱、學校、學院、班級、姓名、學號、名單等信息要素，利用一張表直接記錄用戶的詳細信息。ID作為主鍵，last_login_time記錄最后一次登錄時間，用于檢測用戶是否活躍。在設計之初考慮到預設名單可能內容過長，所以三個預設名單字段roster1、roster2、roster3均采用長文本（long?text）數據類型，避免內容過長而保存失敗。

2.2截圖任務表

截圖任務表用于存放截圖任務的驗證碼、標題、備注、提交密碼、截至時間、創建時間、創建人用戶ID、創建人QQ號、創建人班級、預設名單、刪除狀態、短信發送狀態、創建人手機號碼、是否隱私保護等信息要素。創建人QQ號、手機號碼和班級等相關信息均重新被寫入數據庫。因為后續可能會收集非本班的信息，所以創建者信息變更后，截圖任務的數據也會一同變更。

2.3?截圖數據表

截圖數據表用于存放截圖數據的任務ID、提交人班級、姓名、QQ號、提交密碼、用戶ID、截圖列表、提交時間和刪除狀態等信息要素。

2.4輪播圖表

輪播圖表用于存放輪播圖的圖片地址、發布人、備注等信息要素。該表用于首頁及學生用戶截圖提交頁，為了視覺效果展示精美的海報，不用對該表進行單獨模塊及功能設計。

3?功能實現

在線截圖收集管理系統是一個前后端分離的項目，前端采用Vue框架，后端采用SSM框架。SSM框架用于提供數據庫的一系列增、刪、改、查的JSON數據，前端Vue通過跨域的Ajax來獲取數據[5]。此外，該項目還采用了Element?UI框架和Vant?UI框架，以節省項目開發時間。注冊登錄模塊用于用戶登錄及正常的系統使用。任務創建者管理模塊，允許對截圖任務進行增、刪、查和二維碼分享等操作，同時對收集的截圖數據進行更系統的操作。一鍵打包下載截圖內容壓縮包的功能也展現了該項目的高效性。學生提交者模塊允許通過掃碼提交截圖數據，對圖片進行文件上傳處理，并存儲在云端[6]。同時，該模塊具有短信提醒任務創建者的功能，以及預設名單統計的功能。超級管理員模塊擁有更高的權限，可以管控所有的平臺數據，對截圖任務和截圖數據進行增、刪、查等功能。

3.1?注冊登錄模塊

在用戶注冊時，需要進行手機號碼驗證。系統將發送一條短信驗證碼到用戶手機號碼（通過短信平臺發送）。用戶需要設置密碼，通過驗證后，系統將在用戶表中插入一條數據，表示賬號注冊成功。如果查詢用戶表時發現該手機號碼已經存在，則表示該手機號已注冊，頁面會進行回顯提示。如果用戶忘記密碼，需要進行密碼修改，那么系統也會發送一條驗證碼到該手機號碼，用于驗證手機號的準確性。用戶登錄時，需要輸入手機號碼和密碼。系統將根據這兩個字段的數據在用戶表中查詢對應的數據。如果查詢成功，則返回對應的用戶ID，并進入系統。

3.2?任務創建者管理模塊

任務創建者管理模塊需要在用戶注冊登錄系統后使用。首次登錄系統時，需要完成個人信息的補全，包括填寫班級、姓名、預設名單等必要信息。如果未填寫完整，系統將在頁面上回顯對應的提示，以便用戶隨時進行修改。

在完成個人信息補全后，用戶才能進行截圖任務的創建。在創建截圖任務時，需要填寫班級、任務標題、備注和選擇預設名單等必要信息。班級信息將自動從當前賬號的個人信息中獲取，并默認填入班級輸入框，用戶也可自行修改。預設名單最多提供三個選擇，用戶可以從已填寫的預設名單中選擇，系統自動將Excel表格中的姓名列進行格式化[7]。填寫完畢后，點擊“創建”按鈕，即可完成截圖任務，并跳轉到個人中心頁面的查詢展示任務列表。

任務創建完成后，用戶可以點擊“分享二維碼”按鈕，生成二維碼（通過使用QR-Code插件生成），之后可以開始收集截圖。在截圖收集過程中，用戶可以隨時對截圖數據進行查詢、刪除等操作。收集完畢后，用戶可以進行截圖的一鍵打包操作。進入截圖打包頁面，點擊“一鍵打包”按鈕，即可下載壓縮包。壓縮包的命名將以創建者的班級和任務標題組合而成，而壓縮包內的截圖將以提交人的姓名和班級命名。界面效果圖如圖1和圖2所示。

3.3?學生提交者模塊

學生提交者模塊建立在任務創建者模塊分享的收集二維碼基礎上，學生用戶通過掃碼進入該模塊，無需登錄即可直接提交截圖數據。在提交時，用戶需要填寫姓名、班級和提交密碼，并上傳截圖。當提交總數達到預設名單總人數的85?%時，系統將發送一條僅有一次的短信消息提醒。短信消息將發送至任務創建者注冊平臺的手機號，提示截圖收集即將完成。

預設名單功能將自動進行提交情況統計，如果已提交則標記為綠色，未提交則以灰色顯示。預設名單效果圖如圖3所示，多次提交會被記錄提交次數。

3.4?超級管理員模塊

超級管理員模塊與任務創建者模塊功能基本類似，負責統籌管理整個平臺的運行。當用戶ID為1時，該賬號被視為超級管理員賬號（通過Vue的v-if屬性進行控制）。該賬號內擁有平臺內所有截圖任務列表管理模塊（平臺ALL），并具有任務詳情查看、截圖刪除、截圖提交、任務刪除、截圖打包以及個人信息修改和查詢的權限。

4?結語

在線截圖收集管理系統是一款基于SSM的移動端Web應用程序，具有多項令人矚目的特點。首先，截圖數據被云端托管，確保了數據的安全性和可靠性，同時大大減輕了本地存儲的負擔。其次，系統具備預設名單自動統計功能，有效簡化了繁瑣的名單整理過程，提高了工作效率。

此外，該系統提供了在線一鍵打包下載功能，使截圖的管理變得更高效和便捷。用戶可以輕松地將所需的截圖一次性打包下載，節省了大量時間和操作步驟。同時，該系統引入了二維碼收集和分享機制，學生可以通過掃碼即時提交截圖，避免了傳統收集方式中可能出現的傳輸延遲和繁瑣的提交流程。這一平臺創新提高了整個收集流程的實時性和便利性。

除了功能上的優勢，該系統還針對移動端進行了優化，具有界面友好和操作簡單的特點。用戶體驗被充分考慮，系統使用方便，即使對不太擅長技術操作的用戶，也能快速掌握并輕松上手。目前，該系統已經在本院的輔導員和教師中得到廣泛使用，并取得了顯著的反饋成果。良好的用戶反饋證明了該系統的高效性和實用性，使它成為截圖收集領域的一項重要工具，助力教育工作更高效便捷。

參考文獻

• 賀莎.基于大數據下的高校輔導員學生管理工作創新研究[J].辦公自動化，2023，28（14）：31-33.
• 劉珮琦.算法視域下高校學生事務治理效能提升研究[D].中國礦業大學，2023.
• 徐文昭.運用騰訊文檔與VBA實現圖片信息的收集整理[J].內蒙古科技與經濟，2022（3）：91-92.
• 張浩.SSM框架在Web應用開發中的設計與實現研究[J].電腦知識與技術，2023，19（8）：52-54.
• 徐小輝，劉江濤，高涵等.基于SpringBoot+Vue框架的采氣方案系統開發[J].計算機仿真，2021，38（6）：248-250.
• 馬鄆，劉譞哲，梅宏.面向移動Web應用的瀏覽器緩存性能度量與優化[J].軟件學報，?2020，?31（7）：17.
• 丁俊，鄭輝.大數據時代下的動態可配置數據采集系統的研究與設計[J].計算機應用與軟件，?2018，?35（3）：75-79.