基于HTML5技术的高校社团管理软件及网站的实现

刘曼玉　李康文　张石　庞旭东　彭德民　曹卫东

摘要：高校社团活动日益丰富，越来越多的同学希望加入社团，鉴于移动终端的广泛使用，设计并实现了一种高校社团管理软件，目的是为了进行便捷的社团管理，有效的活动宣传以及方便的学生加入。项目基于HTML5技术跨平台开发，将手机APP与传统网页制作相结合，实现IOS系统和Android系统均能兼容的APP，同时建立一个具有稳定性和安全性的宣传加功能类的网站；社团管理的权限分级清晰并向学生精简集聚了各社团的信息，集管理、阅读、报名、互动与一身。

关键词：HTML5；跨平台；社团管理；APP；网站

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）18-0060-03

目前，智能手机在大学生中的使用率已几乎达到100%，同时高校的社团活动也日益丰富，而其宣传方式除了线下的展台外一般都采用微信公众号推出的形式，学生一般需要关注多个公众号才能获取几个不同社团的活动信息，并且不能仅通过搜索找到校内自己想要的类型的活动，只能从大量的活动信息中手动去筛选排除，同时高校社团的管理工作也较为繁琐，线下社团管理不同职位的办公室往往相隔较远，而社团管理工作常常需要多级负责人管理，这使得每次的审批等相关工作十分耗时费力。

面对这些现存的问题，市場上也涌现出了大量的高校社团相关软件，比如“奇集APP”[1]，“找社团APP”[2]，但是将社团活动宣传和社团管理结合的确比较少；项目基于HTML5技术，对高校社团管理流程及网站进行设计实现，旨在打造一款既能精简显示活动信息及报名互动，又能实现权限分级的清晰化管理的应用软件。

1 开发工具及技术

1.1 HTML5

HTML5技术是建立在HTML4.01技术基础之上的互联网应用技术，它的应用，能够有效丰富Web网页的呈现方式[3]，因而与传统网页的制作以及原生APP相比，采用HTML5技术，可用性和用户体验都较好。

1.2 Myeclipse及Eclipse

MyEclipse是对EclipseIDE的扩展，完整支持HTML，CSS，Javascript，SQL，同时支持快速添加技术功能到Web项目中，使用可视化编辑器以便编码和配置，并且还可以在多种应用服务器上测试任务[4]。

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境，它给程序员提供了一个一流的集成开发环境[5]。

1.3 MySQL

MySQL是一个关系型数据库管理系统，体积小、速度快并且开放源码，一般中小型网站的开发都选择 MySQL，而且它可以工作在不同的平台上，支持C，C++，JAVA等多种开发语言[6]

1.4 Tomcat

Tomcat是一个提供支持Servlet和JSP运行的容器，总能体现最新的Servlet 和JSP 规范，因而它根据Servlet和JSP所指定的来实时产生动态网页的内容，并且其为动态和静态网页都能提供支持[7]。

2 系统设计

2.1 系统设计目标

1） 基于HTML5技术实现跨平台开发，实现软件在IOS和安卓系统上的兼容；

2） 社团活动消息要求精简集聚，将校内所有社团发布的活动信息分类显示，用户只需要选择需要查看的活动分类即可；

3） 实现学校、社团、学生之间的三级权限清晰化管理，学校用户负责审批等，社团用户负责申请活动举办权及其他相关所需物、发布已审批活动消息、上下级及同级之间的联系等，学生用户活动报名、加入社团申请、关注收藏评论等；

4） 用户能够浏览一般信息，也可选择登录身份以及正确的登录用户名及密码信息进入该级用户的个人独有界面。

2.2 系统总体框架设计

根据高校社团管理的实际情况，系统总体框架图如图1所示，包括学校管理、社团管理、学生管理三部分，系统为不同用户如行政管理处、学校信息管理员、团委、社团的指导老师、会长、部长、学生等分别设置不同的用户组，分配不同权限，拥有不同的功能，用户首先选择登录身份并以相应的账号和密码进行安全性验证登录进入相应的显示界面。

系统实行三级权限分级管理，共分为三种用户，分别是学校用户、社团用户和学生用户；学校用户包括行政管理处、学校信息管理员以及团委用户，分别负责教室多媒体使用审核、学校信息编辑和社团成立或解散相关、活动举办审核；

社团用户包括指导老师、会长以及部长用户，依次为上下级关系，主要事务有人员及活动审核、上下级交流等；

学生用户有普通学生和社团干事两种，共有的事务是活动消息搜索、浏览、点赞、评论、收藏、报名等，干事所特有的事务是可以选择自己所加入的社团，对社团工作进行处理以及与上级进行交流。

2.3 系统功能模块设计

系统共分为6个模块，登录模块、审核模块、交流模块、编辑模块、显示模块、报名模块，如图2所示：

登录模块，根据用户选择的登录身份及输入的账号判断该用户的具体身份，验证后进入不同的工作界面，确定用户的权限；

审核模块，由下级对上级提出活动或人员审核申请，上级根据申请信息进行审核并向下级反馈，通过则提交给再上一级；

交流模块，即实现各级成员之间的相互交流讨论；

编辑模块包括用户对自己主页上简介等信息的编辑以及社团干事对社团活动信息的编辑与提交、发布；

显示模块即信息的显示，主要是分类显示活动信息以及对活动的评论、收藏、点赞；

报名模块即学生登录之后选择社团活动网上报名参加该活动，保存学生报名信息并同时将学生的部分信息交由负责该活动的社团管理人员。

2.4 数据库设计

选用MySql作为数据库；系统数据库中主要有信息管理员用户表、指导老师用户表、学生用户表、社团信息表、活动消息表、评论信息表、各级用户接收信息表等。数据库搭建过程中所涉及的部分E-R图如图3所示。

3 系统实现

3.1网站的实现

在网站首页选择用户登录身份，输入登录账号及密码，系统进行密码验证并根据所选的不同身份进入不同的界面；一共有三级用户：学校用户、社团用户、学生用户，在登录时系统会对账号进行分析，判断该级用户下的具体身份比如社团用户下有指导老师用户、会长用户及部长用户，然后进入不同的工作界面，分配不同的权限；若是初次登录，则除学校用户外都首先需要提交相关信息向上一级申请，通过后才能获得账号。

指导老师用户登录成功后进入到其管理主页，选择交流互动功能进入信息交流区；指导老师与会长交流页面的加载及交流信息的显示流程图如图4所示，交流页面的信息加载结果如图5所示：

3.2移动终端

移动终端所开发的并非为原生态APP[8]而是能跨平台运行的Web APP[9]，即无需重新建立一个基于安卓（JAVA）和基于IOS（Object-C）的两个工程，而是利用原有的HTML5代码（网站）实现在APP端能浏览到网页的内容，不论是基于安卓还是基于IOS的APP。

具体实现操作为在已建立的APP外壳下对网页进行打包，借助浏览器核心组件Web View对远程Web服务器的网页进行加载，其中在APP外壳下还得设置网络权限和在不毁灭当前窗口下横竖屏切换的效果，实现APP本地与远程JS交互、APP页面内容加载可回溯以及APP加载的页面自适应屏幕和缩放，APP实现效果如图6所示。

4 结束语

基于HTML5技术的高校社团管理软件及网站的设计与实现，将传统网页与手机APP的制作相配合，实现了跨平台开发，精简的活动信息以及学校、社团和学生之间权限分级的清晰化管理，提高了社团活动的易选性并清晰知道活动来源等信息，同时简化社团管理工作，使其清晰明了易實现；功能测试表明，系统的使用效果良好，基本实现预期目标。

参考文献：

[1] 百度百科.奇集 [EB/OL].[2018-04-02].https：//baike.baidu.com/item/奇集 /19694206？fr=aladdin.

[2] 历趣APP下载.APP介绍.[EB/OL].[2018-04-02].http：//www.liqucn.com/rj/423597.shtml.

[3] 温苑花.基于HTML5技术在移动互联网中的应用研究[J].中国新通信，2017（23）.

[4] 肖海. 基于Android的教学管理系统的设计与实现[D].成都：西华大学，2015.

[5] 周莹莹. 基于Eclipse的图书管理系统设计与实现[D]. 成都：电子科技大学，2013.

[6] 陈锦伟. 基于MySQL的空间数据库关键技术研究[D]. 南京：南京邮电大学，2013.

[7] 周毅. 基于J2EE的网上商城的设计与实现[D]. 西安：西安电子科技大学，2014.

[8] 汤恺.原生APP和HTML5的混合开发模式 在“浙江新闻”客户端中的实践[J].传媒评论，2015（3）：65-68.

[9] 黄悦深.基于HTML5的移动Web App开发[J].图书馆杂志，2014，33（7）：72-77.