基于web的高校社团管理系统的设计与实现

本文旨在记录和总结个人学校毕业设计

该项目运用node.js搭建服务器接口，使用HTML5+CSS、JavaScript等脚本语言加上bootstrap框架搭建前端页面，结合Apache服务器，并采用MySQL数据库，最后用Promise技术与后端建立连接，以Windows系统作为程序运行环境，实现基于web的高校社团管理系统的设计与实现。在设计模式中，选择了MVC（Model-View-Controller）开发模式，将程序的逻辑和页面分离，方便系统的维护，数据库设计遵循数据库设计三范式。

系统开发工具：

1. 数据库和服务器软件phpStudy：phpStudy是一个PHP调试环境的程序集成包。该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer，一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序不仅包括PHP调试环境，还包括了开发工具、开发手册等。

2. 集成开发工具Visual Studio Code：Visual Studio Code是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器,可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

3. UML建模工具StarUML：StarUML是一款旨在支持敏捷和简洁建模的成熟的软件建模软件。主要目标用户：敏捷和小型开发团队、专业人员、教育机构。主要功能：多平台支持（MacOS、Windows 和 Linux）、UML 2.x 标准兼容、实体关系图 （ERD）、数据流图 （DFD）、流程图图、多个窗口、现代用户体验、黑暗和浅色主题、视网膜（高 DPI）显示支持、模型驱动型开发、打开 API、各种第三方扩展、异步模型验证、导出到 HTML 文档、自动更新。

系统理应实现功能：

image.png

功能细则：

image.png

image.png

image.png

根据系统功能需求和实现逻辑设计出ER关系图：

image.png

部分数据表设计：
学生student数据表

image.png

管理员admin数据表

image.png

image.png

社团club数据表

image.png

社团申请club_application数据表

image.png

活动club_event数据表

image.png

image.png

社团新闻club_news数据表

image.png

申请加入社团member_app数据表

image.png

系统实现：
整个系统可以分为五个模块，分别是首页模块、注册模块、登录模块和学生操作模块，以及一个管理员管理模块。

系统首页模块：

系统首页

image.png

社团页面，校内社团简介信息列表

image.png

新闻页面，社团所发布的新闻列表，点击详情可查看详细内容

image.png

注册模块：

image.png

登录模块：

登录我划分了学生登录和管理员登录，不同的身份登录实现不一样的功能

image.png

学生操作模块：

登录成功后页面

image.png

申请加入社团

image.png

社团内部操作：社团信息

image.png

社团内部操作：社团新闻

image.png

社团内部操作：社团财务

image.png

社团内部操作：修改公告和简介

image.png

社团内部操作：社团换届

image.png

管理员管理模块：

管理员登录成功页面

image.png

公告发布

image.png

学生管理

image.png

院系管理

image.png

社团管理：社团列表

image.png

社团管理：社团审批

image.png

image.png

社团管理：社团活动审批

image.png

社团管理：社团新闻

image.png

社团管理：社团财务

image.png

超级管理员：

image.png

整个项目的功能需求基本完成，不过由于自己的技术不够硬，加上花费时间比较短和经验不足、考虑不周等原因，本系统还存在着很多的缺陷和需要完善的地方。下面是总结出来的的问题和需要完善的地方：

1. 数据库数据问题：数据库问题我觉得还是有很多的，因为我只掌握基础的数据库知识，这方面的能力比较薄弱，所以我觉得这里有很多可以完善的地方。

一是数据量存储不够，这个会让系统的稳定性和安全性打个折扣，因为不知道当数据量比较大的时候，系统处理起来会不会出现一些目前没有出现的问题。

二是有些数据的实时性不符合要求，例如日期数据，数据与实际不相符时，会造成一些小的问题，比如不同数据表之间日期对比不合理（类似社团成立时间晚于学生加入社团的时间这样的情况，这个是我的问题，在存储数据的时候考虑不周，造成一些数据之间的互相矛盾，不过还好，这个不影响系统的运行，只要在重新设计合理数据表数据就好了）。

三是一些数据表还可以添加一些属性来使数据更加完整和合理，其实数据库用mongodb应该更好的，跟node比较搭配。

四是一些数据表可以加上一些索引表，以加快搜索速度，还有一些视图也要建立起来，方便数据的组合获取。上面这些都是我目前发现的血药完善的地方，应该还有一些我没有注意到的。

2. 代码逻辑问题：代码逻辑基本上是没有问题的，有缺陷的地方的是在有些使用Promise的地方我没有添加失败处理函数catch，应该加上的，这是我为了赶时间所以遗漏掉的，不过也是小问题，毕竟不是上线运行的项目，只是在本地服务器上处理，这个不影响。不过从严谨的角度和养成良好代码习惯方面来说，这个很有必要。还有就是在向数据库取数据的代码上，有些方法可以整理合并一下，从而缩减代码量，简化逻辑。路由文件可以在细分一下，分成首页路由，学生路由和管理员路由。

3. 系统功能缺陷：虽然整个系统的预期功能基本都实现了，但是其中的一些功能在实现时存在一些缺陷和可以完善的地方。

首页模块：社团页面中新建社团的简介会为空，这样不好看，这个应该在获取到数据后进行判断并处理；活动页面没有进行数据的限制，应该对获取到的活动数据进行过滤，筛选日期为大于等于今日的活动并依据日期进行排序；新闻页面也是要依据日期进行排序展示，点击详情查看详细内容返回后点击数应该加一，这个我之前忘了，不过还好，不难实现。规则页面其实规章制度可以再细化为总则，社团内部规则等等，只有总则感觉单调，简单了；

注册模块：注册页面缺少必要的信息填写提示，没有设置电话有效性的检测，可以设置一个发送验证码，填写验证码的过程，班级的选择我觉得有点欠妥，或许可以先选择院系，再出现专业的选择，然后是班级这样，密码的安全性没有做足够的限制，可以设置成必须包含两种字符这样，或许再加一个重置的按钮会好一点。

学生操作模块：登录成功页面的公告可以做一个日期限制；申请加入社团、申请参加活动和申请新社团没有处理重复申请的问题，要对这个进行检测和限制；个人设置可以细化为信息设置和密码修改，前者无需重新登录，后者则需要；成员列表界面缺少人员的管理操作，比如晋升和降级，或者清退；

管理员管理模块：也是登录成功页面的公告做一个日期的范围限制，或许不出现公告；规章制度可以加一个修改的功能，我只弄了添加功能；公告发布应该也要一个修改的功能；个人设置的问题和学生端一样；学生管理可以考虑在查询结果页面加一个所有学生的按钮，这里应该实现分页功能来应对庞大的数据量，还可以多一些筛选按钮，方便查询和操作，例如查找班级，操作直接返回原页面会更好，我目前弄的是操作完后会有一个信息提示页面，点击返回才能返回，可以做成弹窗提示；院系管理功能方面可以丰富一点，列出数量信息，像专业数、班级人数这些可以展示出来；社团管理功能方面，社团成员列表没必要有添加社团的按钮，应该去除。社团活动页面可以添加一个以日期为限制的搜索框，实现分页功能，社团新闻和社团财务也最好实现分页效果，包括审批记录的展示也是，分页效果可以更美观。

4. 系统页面问题：首先从页面的规划设计说起吧，页面的设计真的不够美观大气，页面采用了很多的表格展示，看起来不专业，太简陋了点，注册和登录页面背景换一换合适点的，功能列表有点奇怪，不够统一，还有就是很多页面没有做分页的效果，还有一个问题就是页面导航栏不是真正的导航栏，需要做一个自动的。这个其实我一开始想用vue来搭建前端页面框架的，这样可以很好地处理路由和方便页面的搭建，组件复用太好使了，可惜没有node+vue结合开发的经验，而且在处理webpack的时候卡死了，最后只好用bootstrap框架来搭建，但是又不够熟悉，很多组件不会用，导致页面搭建费时间多还设计得不好看，很多页面的重复部分没有复用起来，页面构成复杂化，难以管理。这些都是问题呀，页面要挑毛病的话其实应该很多很多的，这里就不赘述了。

以上就是目前自己发现系统存在的问题了，有些是我技术不够好造成的，有些是时间上比较紧，自己没来得及补充完善的，还有些是自己经验不足，考虑不周而形成的，剩下的则是自己目前能力限制了。不过在之后的学习生活工作中有时间都会逐一地解决问题，完善功能。

最后要感谢一下呆萌的小阿斗前辈的文章，对我的帮助很大，也帮我节省了很多的时间，我自己系统的构建，在功能的选择，数据库设计和页面设计方面都参照了此文章。当然还有很多人的文章都帮助了我很多，这里就不一一列举了。再次感谢，新手菜鸟需要更多像这样的好文，感谢前辈们！！！