基于 Vue 的学生社团线上管理平台开发与设计

0　 引言

近年来， 各高校为丰富学生的校园生活、 培养学生的个性， 社团与社团人数增加迅速， 需要处理的各类信息也层出不穷， 传统的管理方式已经不利于快捷地处理这些问题。 因此管理不便、 信息错综复杂限制了大学生社团的发展

[1] 。 如

何突破传统管理模式的瓶颈， 快捷地处理各类信息， 成为各高校社团非常迫切的需求。 因此本文设计并构建了一个线上社团管理平台——Envision， 为的是解决学生社团组织事务办理与活动开展的不便性， 同时也是为了将学生科技社团和组织建立与发展过程中的许多“经验之谈” 规则化、 书面化、经验化。

1　 系统关键技术研究

本平台采用前后端分离的开发模式将系统分为前端（用户界面、 管理人员界面） 和后端服务器两部分同时进行开发。

前端中， 用户 界面开发使用 Visual Studio Code 集成开发工具 vue.js 框架， 管理人员界面使用 Visual Studio Code 集成开发工具 Vue+element-ui 框架。 浏览器通过 Axios 和 Cors 技术与服务器进行跨域请求交互。 后端开发使用 Ubuntn Server16.04 操作系统、 Eclipse 集成开发工具、 Maven 包管理工具、Spring Boot 后 台 开 发 框 架（ 包 括 Spring、 Spring MVC、Spring Data） 和 Mybatis 逆向生成工具。 数据库和连接池使用 MySQL5.6+Druid， 对象模型设计使用 Navicat 10 软件，保存在数据库中的用户 密码使用两次 MD5 进行加密， 提高了用户账户的安全性。

2　 系统功能需求分析

2.1　 学习

在高校现有社团管理模式下， 学习功能欠缺， 线上社团管理平台可以为社团提供一个线上学习平台， 与市场上现有的学习平台相比， 学习环境更为简洁， 提供与社团相关的学习内容， 能够丰富社团活动内容， 使社团成员的满足感得到提升。

2.2　 论坛

现有高校社团发布通知公告的方式都很单一， 局限于社团 QQ 群内， 而论坛板块解决了通知公告发布的问题， 同时也为社团成员提供一个相对于现有的技术交流平台而言操作更简单的技术交流平台， 问答对象更直接。

2.3　 探索

现有的社团管理平台存在一个问题， 即社团官方没有板块发布社团活动期间的动态， 以此宣传社团底蕴和文化； 用户没有可以直观浏览社团风采、 社团发布的学习文章以及发

布问题的板块。 为此本文建立了一个探索模块， 分为动态、文章、 直答 3 个部分， 能够为用户提供更好的平台体验。

2.4　 群组

相对于社团发布通知公告的形式， 目 前来看局限于 QQ群内， 但是进入大学校园后， 加入的 QQ 群众多， 如班级群、专业群、 学院群、 班委干部群、 课程群等， 这样会导致社团发布活动时容易被忽略。 学生社团线上管理系统搭建了一个群组板块， 用来发布社团活动信息、 学习资料、 学习任务以及社团成员等信息。 这样让社团内部消息得到有效传播， 大大提高了社团活动的参与率。

2.5　 礼品店

考虑到用户的成就感， 系统增添了一个礼品店板块。 当用户在学习、 论坛、 探索、 群组以及社团事务板块内完成相应的任务时， 就会积累一定的积分， 而积分则可以通过礼品

店板块来换取学习书籍、 文具以及虚拟会员等礼品。 礼品的开销则通过商家赞助招募中的部分款项予以支持。 这将极大程度上满足用户使用本系统的成就感以及满意度。

2.6　 社团事务

高校现有的社团种类繁多， 组织的活动也五花八门， 当然涉及的资料、 器材以及款项也很多。 社团事务板块能够让社团事务管理更高效， 方便社团管理各项事务。

2.7　 登录注册及实名认证

为了统计用户数量以及方便管理系统， 每个用户首次访问本系统时都需要进行注册， 为了保证发帖以及社团交流的质量， 每个用户都会进行实名认证。 这样系统的网络环境以及用户体验感将会大幅度提高， 有利于系统的后期发展。

3　 系统模块分析

3.1　 管理员模块

此模块的主要功能： ①展示系统平台的每个注册用户信息， 系统管理员可以删除用户操作， 也可以对用户进行锁定或解除锁定； ②添加新的管理员和发布社团新闻； ③社团管理员拥有新增、 删除、 信息修改以及接收线上报名登记表等功能。

3.2　 用户模块

用户模块包括首页、 学习、 论坛、 搜索、 个人中心、 群组、礼品店、 社团事务、 管理后台 9 大板块。 该平台将提供 3 种不同类型的管理员登录方式， 实现上对下的管理， 针对不同用户页面展现也会有所改变。 会员可以浏览社团资源， 进入“我的社团” 后可以看到自 己所在社团的文化风采、 社团管理分布以及社团活动的开展情况。 商家可以注册商家管理员模式， 在平台上发布赞助信息， 与各高校社团建立合作关系。系统还将实现院系社团管理、 社团简介、 社团信息处理、 各高校同类社团友情链接、 个人信息配置、 用户注册、 社团注册、社团招新活动以及交流互动等功能。

4　 系统数据库设计

系统的运行性能很大程度上会受数据库结构的影响， 同时数据信息的安全性与异常处理也是重要的影响因素[2] 。 因此，数据库设计应该遵循以下原则。

第一， 数据库设计应方便管理。数据库设计应参考实际应用背景和需求分析进行模型设计， 并结合信息自身、 信息间的异同和数据信息之间的不同特点进行分类， 从而便于日后的系统管理维护。

第二， 数据库系统应遵循 3 大范式。

第三， 数据库设计要便于恢复数据。为了保护系统数据数据库要定期进行数据备份， 便于应对突发的系统错误和系统故障。 在面对上述问题时， 只需要查看数据库日 志文件， 就可以使数据尽快得到回复， 保证系统能够正常运行。

5　 网站设计及实现

5.1　 界面设计

整体颜色以橙色和灰色为基调。 橙色是欢快活泼的色彩，是一种积极、 快乐而幸福的颜色， 橙色中混入灰色， 能够给用户一种稳重、 含蓄而又明快体验。 用户主要是在校大学生，因而按钮多用圆角， 突出各按钮的位置， 引导视觉点击。

5.2　 界面设计与实现

（1） 首页。 系统登录成功后， 进入 Envision 系统的首页界面， 如图 1 所示。 界面框架分为 3 部分： 上方的“消息栏”、左边的“导航栏” 和右下方的“新闻推送” 。

（2） 登录注册。 首次登录本网站， 出现注册界面。

（3） 学习。 在用户 登录后， 在功能栏选择学习 板块，

在学习页面内选择具体的任务项， 并点击进行操作。 学习页面内的用户可以列出自 己的学习清单， 督促自 我学习并提高学习效率。

1. 论坛。 点击对应的按钮即可浏览相关的消息， 而当前页面又分为上下两部分。 上部分为“公告 / 新闻” 消息，用户可浏览自 己所在社团发布的公告、 社团活动通知以及可浏览社团活动的相关新闻。 下部分为“技术交流” ， 也可以看到各部门发布的技术贴进行学习。

（5） 探索。 可在页面搜索框里输入想搜索的内 容进行探索， 可探索的内容分为 3 部分： 动态、 文章和直达。 用户可探索其他用户发布的动态和在本网站发布过的文章， 在“直

答” 模块可提出问题， 并就此问题邀请另外的 Envision 用户进行回答。

（6） 个人中心。 当前页面分为上下两大部分： 上部分为个人信息显示， 包括头像、 用户名、 当前积分等； 下部分为个人中心功能模块， 包括“我的文章” “我的帖子” “我

的直达” “我的关注” “我的学习” 5 大模块。

（7） 群组。 在此页面内 点击相应按钮即可看到关于本群的基本信息， 如群组性质、 创建时间、 管理员、 活跃度、当前期数、 成员数量以及群组介绍等。 当前页面可显示用户已加入的群组， 并可查看群组的以下信息： 群组概览、 群组成员、 活动与公告、 学习资料和学习任务。

（8） 礼品店。 用户 可以通过论坛、 群组、 探索等板块获取积分， 所获得的积分可以在礼品店兑换相应的学习用品，如文具、 书籍、 虚拟会员等。

（9） 社团事务。 此版块可以供用户查看社团拥有的器材、资源等物品， 用户可查看社团已有的所有器材及自 己的借还记录。 借出需要填写借用人员、 联系方式、 物品名称、 借用数量及归还时间， 最后点击“申请借用” 即可。

（10） 管理后台。 本页面的网站开发人员可对本网站的所有用户进行管理以及发布社团新闻。

6　 结　 语

基于 Vue 的学生社团线上管理平台， 不仅便于社团实时发布活动和展示活动成果， 而且方便同学们及时了解并且参与特色活动， 使得社团管理工作更加合理化、 科学化、 规范

化和高效化， 极大地丰富了同学们的课余生活， 有利于学校和学生的共同发展。 在校内活动步入正轨之后， 后期还可以和一些提供赞助的商家合作， 开发商家版块， 为学生营造更便捷的生活环境。