基于Node.js的創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

羅 文，劉 星，蘭全祥

（攀枝花學(xué)院 數(shù)學(xué)與計(jì)算機(jī)學(xué)院，四川 攀枝花 617000）

目前，各大高校都在積極鼓勵(lì)并推行導(dǎo)師制、團(tuán)隊(duì)制的學(xué)生培養(yǎng)模式，由此產(chǎn)生了很多的創(chuàng)新團(tuán)隊(duì)[1].這些團(tuán)隊(duì)一般都會(huì)定期舉辦各種交流會(huì)和活動(dòng)，并逐步形成眾多的學(xué)習(xí)成果或科研成果.為了加深團(tuán)隊(duì)成員之間的了解，增強(qiáng)團(tuán)隊(duì)榮譽(yù)感和成果意識，提高團(tuán)隊(duì)凝聚力和人才培養(yǎng)成效，一個(gè)用于成員管理、活動(dòng)管理、成果管理、技術(shù)交流等一體的在線管理系統(tǒng)顯得尤為重要，特別是對于一些技術(shù)型創(chuàng)新團(tuán)隊(duì)，技術(shù)的溝通和交流更顯重要.

1 技術(shù)選型

創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)以Node為開發(fā)平臺，以BootStrap為前端框架，以Vue和Koa為核心開發(fā)框架，以MySQL作為系統(tǒng)數(shù)據(jù)庫.

Node.js使用了事件驅(qū)動(dòng)、非阻塞I/O模型等技術(shù)，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用，并且V8引擎執(zhí)行JavaScript的速度非常快，性能也非常好[2].BootStrap能夠自動(dòng)根據(jù)可視窗口的大小調(diào)整頁面布局，從而帶給用戶更好的視覺體驗(yàn)[3].Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式MVVM框架[4]，用自底向上增量開發(fā)的設(shè)計(jì)，使其非常容易與其他庫或已有項(xiàng)目整合.Koa可以通過組合不同的generator，免除重復(fù)繁瑣的回調(diào)函數(shù)嵌套，并極大地提升常用錯(cuò)誤處理效率.

2 系統(tǒng)分析

2.1 需求分析

創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)主要是為了團(tuán)隊(duì)宣傳、技術(shù)交流、成果管理等，其面向的主要用戶群體為訪客、團(tuán)隊(duì)成員以及系統(tǒng)管理員.經(jīng)過對創(chuàng)新團(tuán)隊(duì)運(yùn)行模式以及需求進(jìn)行調(diào)研和分析，將系統(tǒng)功能分為前端展示模塊、個(gè)人管理模塊以及后臺管理模塊.

2.1.1 前端展示模塊

前端展示要求具有響應(yīng)式布局功能，能適應(yīng)PC端、移動(dòng)端等不同分辨率的顯示器.另外，前端展示模塊可以為游客提供登錄注冊、查看動(dòng)態(tài)以及技術(shù)文章、查看團(tuán)隊(duì)成員以及團(tuán)隊(duì)成果等功能.

2.1.2 個(gè)人管理模塊

個(gè)人管理模塊主要為團(tuán)隊(duì)成員提供個(gè)人信息管理、文章管理、資源管理、成果管理等功能.團(tuán)隊(duì)成員可以在此模塊中維護(hù)個(gè)人信息、發(fā)布動(dòng)態(tài)、分享技術(shù)、上傳成果以及下載團(tuán)隊(duì)資源等.

2.1.3 后臺管理模塊

后臺管理模塊主要為系統(tǒng)管理員提供公告管理、文章管理、文章分類管理、成員管理、成果管理、資源管理以及首頁信息維護(hù)等功能.系統(tǒng)管理員可以在此模塊中發(fā)布公告、成員審核、信息維護(hù)以及資源維護(hù)等.

2.2 系統(tǒng)功能設(shè)計(jì)

根據(jù)系統(tǒng)需求分析，確定系統(tǒng)功能結(jié)構(gòu)圖如圖1所示.

圖1 創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)功能結(jié)構(gòu)圖

2.3 數(shù)據(jù)庫設(shè)計(jì)

創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)采用MySQL作為系統(tǒng)數(shù)據(jù)持久化工具.通過對系統(tǒng)的功能進(jìn)行分析，確定管理系統(tǒng)包含以下實(shí)體：用戶、用戶詳細(xì)信息、學(xué)院信息、專業(yè)信息、研究方向、文件、文章類別、文章、文章標(biāo)記、成果、成果類別、公告、輪播圖等，系統(tǒng)E-R圖如圖2所示.

圖2 管理系統(tǒng)E-R圖

3 系統(tǒng)實(shí)現(xiàn)

創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)在實(shí)現(xiàn)上主要特點(diǎn)在于響應(yīng)式布局以及前后端分離開發(fā)，對于不同的信息管理和維護(hù)上大同小異，因此筆者主要介紹系統(tǒng)的響應(yīng)式布局、登錄注冊、信息發(fā)布、首頁管理以及公告管理等模塊.

3.1 響應(yīng)式布局

響應(yīng)式布局是Ethan Marcotte在2010年提出，響應(yīng)式布局能讓網(wǎng)站兼容多個(gè)不同的終端，自適應(yīng)不同終端設(shè)備的屏幕尺寸.創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)的前端界面設(shè)計(jì)采用當(dāng)前最流行的響應(yīng)式布局理念，使用的主要技術(shù)是CSS的@media屬性和BootStrap的柵格系統(tǒng).

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

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

3.2 登錄注冊

創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)允許所有游客進(jìn)行注冊，但是只有當(dāng)系統(tǒng)管理員審核通過后才能進(jìn)行登錄操作.注冊模塊采用JavaScript正則表達(dá)式對用戶輸入數(shù)據(jù)進(jìn)行驗(yàn)證，同時(shí)登錄注冊界面采用隨機(jī)函數(shù)動(dòng)態(tài)生成驗(yàn)證碼以及MD5密碼加密來提高系統(tǒng)安全性[5].當(dāng)用戶輸入數(shù)據(jù)不合法或驗(yàn)證碼輸入錯(cuò)誤時(shí)，將會(huì)給出友好提示.

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);

登錄模塊與注冊模塊處理方法類似，其實(shí)現(xiàn)效果圖如圖3所示.

圖3 登錄界面效果圖

3.3 信息發(fā)布

團(tuán)隊(duì)成員在登錄管理系統(tǒng)之后可以在個(gè)人管理模塊中發(fā)布信息，所發(fā)布的信息包括動(dòng)態(tài)、技術(shù)文章、成果以及資源文件等.另外，設(shè)計(jì)了圖片剪切功能，實(shí)現(xiàn)了圖片大小的控制和規(guī)范.

const sql=`INSERT INTO article_table

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

圖4 個(gè)人管理模塊效果圖

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);

個(gè)人管理模塊實(shí)現(xiàn)效果圖如圖4所示.

3.4 首頁管理

首頁管理主要是對輪播圖進(jìn)行管理.首頁輪播圖是團(tuán)隊(duì)風(fēng)采展示的重要模塊，輪播的圖片需及時(shí)更新.系統(tǒng)管理員可以刪除舊的圖片，也可以上傳最近、最新的圖片.

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 公告管理

公告管理模塊主要用于公告的發(fā)布、編輯和刪除，該功能獨(dú)屬于系統(tǒng)管理員.公告編輯插件選用了行業(yè)類比較流行的markdown[6].另外，系統(tǒng)對公告信息進(jìn)行了數(shù)據(jù)校驗(yàn)，如若不符合規(guī)范，系統(tǒng)將會(huì)給出友好的提示.

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 系統(tǒng)信息管理

系統(tǒng)管理員可以對系統(tǒng)的所有數(shù)據(jù)進(jìn)行管理，包括成員信息、文章信息、分類信息、成果信息以及資源信息等.以成員管理為例，管理員可以對信息成員進(jìn)行刪除等操作.

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);

系統(tǒng)后臺管理界面效果圖如圖5所示.

圖5 系統(tǒng)后臺管理界面效果圖

4 總結(jié)

基于Node.js的創(chuàng)新團(tuán)隊(duì)管理系統(tǒng)為創(chuàng)新團(tuán)隊(duì)成員提供了一個(gè)相互學(xué)習(xí)和交流的平臺，能夠較為全面地展示團(tuán)隊(duì)的成果和風(fēng)采.系統(tǒng)采用前后端完全分離模式進(jìn)行開發(fā)，實(shí)現(xiàn)了對團(tuán)隊(duì)成員信息、技術(shù)動(dòng)態(tài)以及團(tuán)隊(duì)成果的有序管理，有效地解決了技術(shù)分享、團(tuán)隊(duì)展示、成員管理等方面的問題，能夠進(jìn)一步提高團(tuán)隊(duì)凝聚力和人才培養(yǎng)成效.