截图收集管理系统的设计方案研究

龙坡

摘要：基于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.