基于Node.js的创新团队管理系统的设计与实现

罗 文，刘 星，兰全祥

（攀枝花学院 数学与计算机学院，四川 攀枝花 617000）

目前，各大高校都在积极鼓励并推行导师制、团队制的学生培养模式，由此产生了很多的创新团队[1].这些团队一般都会定期举办各种交流会和活动，并逐步形成众多的学习成果或科研成果.为了加深团队成员之间的了解，增强团队荣誉感和成果意识，提高团队凝聚力和人才培养成效，一个用于成员管理、活动管理、成果管理、技术交流等一体的在线管理系统显得尤为重要，特别是对于一些技术型创新团队，技术的沟通和交流更显重要.

1 技术选型

创新团队管理系统以Node为开发平台，以BootStrap为前端框架，以Vue和Koa为核心开发框架，以MySQL作为系统数据库.

Node.js使用了事件驱动、非阻塞I/O模型等技术，非常适合在分布式设备上运行数据密集型的实时应用，并且V8引擎执行JavaScript的速度非常快，性能也非常好[2].BootStrap能够自动根据可视窗口的大小调整页面布局，从而带给用户更好的视觉体验[3].Vue.js是一套构建用户界面的渐进式MVVM框架[4]，用自底向上增量开发的设计，使其非常容易与其他库或已有项目整合.Koa可以通过组合不同的generator，免除重复繁琐的回调函数嵌套，并极大地提升常用错误处理效率.

2 系统分析

2.1 需求分析

创新团队管理系统主要是为了团队宣传、技术交流、成果管理等，其面向的主要用户群体为访客、团队成员以及系统管理员.经过对创新团队运行模式以及需求进行调研和分析，将系统功能分为前端展示模块、个人管理模块以及后台管理模块.

2.1.1 前端展示模块

前端展示要求具有响应式布局功能，能适应PC端、移动端等不同分辨率的显示器.另外，前端展示模块可以为游客提供登录注册、查看动态以及技术文章、查看团队成员以及团队成果等功能.

2.1.2 个人管理模块

个人管理模块主要为团队成员提供个人信息管理、文章管理、资源管理、成果管理等功能.团队成员可以在此模块中维护个人信息、发布动态、分享技术、上传成果以及下载团队资源等.

2.1.3 后台管理模块

后台管理模块主要为系统管理员提供公告管理、文章管理、文章分类管理、成员管理、成果管理、资源管理以及首页信息维护等功能.系统管理员可以在此模块中发布公告、成员审核、信息维护以及资源维护等.

2.2 系统功能设计

根据系统需求分析，确定系统功能结构图如图1所示.

图1 创新团队管理系统功能结构图

2.3 数据库设计

创新团队管理系统采用MySQL作为系统数据持久化工具.通过对系统的功能进行分析，确定管理系统包含以下实体：用户、用户详细信息、学院信息、专业信息、研究方向、文件、文章类别、文章、文章标记、成果、成果类别、公告、轮播图等，系统E-R图如图2所示.

图2 管理系统E-R图

3 系统实现

创新团队管理系统在实现上主要特点在于响应式布局以及前后端分离开发，对于不同的信息管理和维护上大同小异，因此笔者主要介绍系统的响应式布局、登录注册、信息发布、首页管理以及公告管理等模块.

3.1 响应式布局

响应式布局是Ethan Marcotte在2010年提出，响应式布局能让网站兼容多个不同的终端，自适应不同终端设备的屏幕尺寸.创新团队管理系统的前端界面设计采用当前最流行的响应式布局理念，使用的主要技术是CSS的@media属性和BootStrap的栅格系统.

@media screen and(max-width:600px){}@media screen and(min-width:960px){}

@media screen and (min-width:600px)and(max-width:960px){}

3.2 登录注册

创新团队管理系统允许所有游客进行注册，但是只有当系统管理员审核通过后才能进行登录操作.注册模块采用JavaScript正则表达式对用户输入数据进行验证，同时登录注册界面采用随机函数动态生成验证码以及MD5密码加密来提高系统安全性[5].当用户输入数据不合法或验证码输入错误时，将会给出友好提示.

const postData=ctx.request.body;

const studentNum=postData['studentNum']

const username=postData['username'];

const password=

common.md5 (postData['password']+common.MD5_SUFFIX);

const sql="INSERT INTO user_table(student_num,username,PASSWORD)VALUES(?,?,?)";

constvalues= [studentNum,username,password];

const data= await query(sql,values);

登录模块与注册模块处理方法类似，其实现效果图如图3所示.

图3 登录界面效果图

3.3 信息发布

团队成员在登录管理系统之后可以在个人管理模块中发布信息，所发布的信息包括动态、技术文章、成果以及资源文件等.另外，设计了图片剪切功能，实现了图片大小的控制和规范.

const sql=`INSERT INTO article_table

(student_num,title,body,img,post_time,type_num,label_num,description)VALUES(?,?,?,?,?,?,?,?)`;

图4 个人管理模块效果图

Const values=[userNum,postData['title'],postData['body'],postData['img'],post_time,postData['type_num'],postData['label_num'],postData['description']];

const res=await query(sql,values);

个人管理模块实现效果图如图4所示.

3.4 首页管理

首页管理主要是对轮播图进行管理.首页轮播图是团队风采展示的重要模块，轮播的图片需及时更新.系统管理员可以删除旧的图片，也可以上传最近、最新的图片.

const token=ctx.header.authorization;

if(token&&token!==null){

const postData=ctx.request.body;

const imgList=postData['imgList'];

const arr=[];

imgList.forEach(element=＞{

arr.push([element])

})}

3.5 公告管理

公告管理模块主要用于公告的发布、编辑和删除，该功能独属于系统管理员.公告编辑插件选用了行业类比较流行的markdown[6].另外，系统对公告信息进行了数据校验，如若不符合规范，系统将会给出友好的提示.

const postData=ctx.request.body;

const title=postData['title'];

const body=postData['body'];

const time=parseInt(Date.now()/1000);

const sql= `INSERT INTO tb_news(title,body,time)VALUES(?,?,?)`;

const values=[title,body,time];

3.6 系统信息管理

系统管理员可以对系统的所有数据进行管理，包括成员信息、文章信息、分类信息、成果信息以及资源信息等.以成员管理为例，管理员可以对信息成员进行删除等操作.

const requestData=ctx.request.query;

const stuno=requestData['stuno'];

const sql="delete from tb_user where stuno=?";

const values=[stuno];

const del_status=await query(sql,values);

系统后台管理界面效果图如图5所示.

图5 系统后台管理界面效果图

4 总结

基于Node.js的创新团队管理系统为创新团队成员提供了一个相互学习和交流的平台，能够较为全面地展示团队的成果和风采.系统采用前后端完全分离模式进行开发，实现了对团队成员信息、技术动态以及团队成果的有序管理，有效地解决了技术分享、团队展示、成员管理等方面的问题，能够进一步提高团队凝聚力和人才培养成效.