基于Node.js技術(shù)的報表信息管理平臺設(shè)計與實(shí)現(xiàn)

劉嫻，劉澤驍，荀麗丹

摘 要：文章利用Node.js框架進(jìn)行報表信息管理平臺的開發(fā)，實(shí)現(xiàn)對不同類型報表信息的填寫、查詢、導(dǎo)出等操作。系統(tǒng)前端采用Vue-cli構(gòu)建前端工程項目，Element組件設(shè)計頁面;后端采用Java語言，數(shù)據(jù)庫采用MySQL數(shù)據(jù)庫。利用其高效、實(shí)時響應(yīng)的特點(diǎn)，提高辦公效率。

關(guān)鍵詞：Node.js;vue;報表管理

1 報表信息管理平臺簡介

信息技術(shù)的發(fā)展是為了改變?nèi)藗兊墓ぷ髋c生活，使生活變得更快捷，本文提出的報表信息管理平臺，是為了方便教師對不同類型的報表信息進(jìn)行填寫、查詢、導(dǎo)出，為日常工作帶來便利。

目前，Web前端技術(shù)正處于高峰發(fā)展時期，系統(tǒng)開發(fā)更注重用戶的體驗，因此，本系統(tǒng)采用了Node.js技術(shù)。Node.js作為近年來Web前端技術(shù)發(fā)展的重要框架，通過本項目的研究，開發(fā)人員從理論上對該框架的運(yùn)行機(jī)制與原理能有一個深入的了解;將該技術(shù)在教科研成果報表信息平臺上加以應(yīng)用，有助于掌握Express框架的應(yīng)用，利用其高效、實(shí)時響應(yīng)的特點(diǎn)提高辦公效率[1]。

2 系統(tǒng)總體設(shè)計

前端主流框vue，Node.js作為中間層負(fù)責(zé)數(shù)據(jù)的處理和模板的控制，后端編程語言Java。采用前后端分離的架構(gòu)模式，前端負(fù)責(zé)展現(xiàn)和交互邏輯，Node.js作為中間層負(fù)責(zé)數(shù)據(jù)的處理和模板的控制，后端負(fù)責(zé)業(yè)務(wù)邏輯[2]。

系統(tǒng)的主要用戶包括普通用戶、系部管理員、超級管理員3個模塊，主要功能包括報表信息的管理、用戶信息的管理、數(shù)據(jù)信息的導(dǎo)入導(dǎo)出。

系統(tǒng)的數(shù)據(jù)庫設(shè)計主要實(shí)體包括用戶、部門、權(quán)限、科研報表、技能報表5個。考慮到科研和技能的差異性，需要設(shè)計兩張表來進(jìn)行數(shù)據(jù)存儲。數(shù)據(jù)庫設(shè)計ER架構(gòu)如圖1所示。

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

3.1 系統(tǒng)整體架構(gòu)

系統(tǒng)前端采用Vue-cli構(gòu)建前端工程項目，Element組件設(shè)計頁面;后端采用Java語言，數(shù)據(jù)庫采用MySQL數(shù)據(jù)庫;系統(tǒng)采用MVVM架構(gòu)模式，在雙向數(shù)據(jù)綁定中View和Model不再需要手動的綁定輸入監(jiān)聽和手動的將數(shù)據(jù)展示在View上，提高了View和Model之間轉(zhuǎn)換的開發(fā)效率。

系統(tǒng)部署在內(nèi)網(wǎng)服務(wù)器中，內(nèi)網(wǎng)服務(wù)器需安裝MySQL組件、Tomcat服務(wù)器，將前后端代碼打包放入Tomcat服務(wù)器中，啟動Tomcat服務(wù)后可以訪問系統(tǒng)。

3.2 數(shù)據(jù)庫的實(shí)現(xiàn)

在MySQL命令界面中，輸入數(shù)據(jù)表的相關(guān)SQL語句即可創(chuàng)建，以用戶信息表為例的創(chuàng)建語句核心代碼如下：

CREATE TABLE `userinfo` （

`id` int（11） NOT NULL AUTO_INCREMENT，

`workNum` varchar（20） NOT NULL，

`uName` varchar（10） NOT NULL，

`uPassword` varchar（20） NOT NULL，

`departmentId` int（11） NOT NULL，

`roleId` varchar（11） NOT NULL，

PRIMARY KEY （`id`），

UNIQUE KEY `workNum_Un` （`workNum`），

KEY `department_fk` （`departmentId`），

KEY `role_fk` （`roleId`），

CONSTRAINT `department_fk` FOREIGN KEY （`departmentId`） REFERENCES `department` （`id`）

） ENGINE=InnoDB AUTO_INCREMENT=62 DEFAULT CHARSET=utf8;

3.3 后端API接口的實(shí)現(xiàn)

創(chuàng)建類實(shí)現(xiàn)Servlet接口，實(shí)現(xiàn)service方法在web.xml進(jìn)行servlet的配置。用戶登錄接口配置的代碼如下：

<！-- 登陸-->

LoginServlet

com.information.servlet.LoginServlet

LoginServlet

/LoginServlet

3.4 前端獲取API接口

在Vue項目中使用axios庫來調(diào)用API接口，它是基于promise的http庫，可運(yùn)行在瀏覽器端和Node.js中。在接口中數(shù)據(jù)以JSON的格式進(jìn)行傳輸，獲取用戶是否成功登錄的代碼如下：

let params = {

workNum： this.user.workNum，

upassword： this.user.upassword，

};

this.$axios.post（‘/api/LoginServlet，params）

.then（（res） => {

if（res.data.code === 0）{

sessionStorage.setItem（‘a(chǎn)ccessToken ， this.user.workNum）;

this.$message（{

message： ‘登錄成功！，

type： ‘success

}）;

setTimeout（（） => {

this.$router.push（{path： ‘/index}）;

}， 500）;

}else{

this.$message.error（“賬號或密碼錯誤”）;

}

}）.catch（（res） => {

this.message.error（“服務(wù)器請求錯誤”）

}）

4 結(jié)語

選擇Node.js作為本系統(tǒng)的開發(fā)框架，考慮其自帶HTTP模塊，使用Node.js可以很容易地實(shí)現(xiàn)HTTP服務(wù)器。同時Node.js還提供了文件操作等系統(tǒng)級API，可以用來開發(fā)本地應(yīng)用。結(jié)合這兩點(diǎn)（服務(wù)器+本地應(yīng)用）可以實(shí)現(xiàn)基于Node.js的帶本地中間層的B/S結(jié)構(gòu)，能夠更快速、更便捷地架構(gòu)一個簡潔、精美、易操作且高效的系統(tǒng)。

作者簡介：劉嫻（1983— ），女，江蘇南京人，講師，學(xué)士;研究方向：軟件技術(shù)。

圖1 數(shù)據(jù)庫設(shè)計ER架構(gòu)

[參考文獻(xiàn)]

[1]吳春玲，劉廣偉，程淑偉.基于Node.js的河道排污監(jiān)測管理平臺的設(shè)計與實(shí)現(xiàn)[J].工業(yè)控制計算機(jī)，2018（10）：121-122.

[2]朱曉陽，劉苑如，范仲言.基于Node.js的學(xué)習(xí)平臺后端系統(tǒng)設(shè)計與實(shí)現(xiàn)[J].電腦知識與技術(shù)，2019（13）：116-118.

Design and implementation of report information management?platform based on Node.js technology

Liu Xian， Liu Zexiao， Xun Lidan

（Nanjing Institute of Mechanical and Technology， Nanjing 210000， China）

Abstract：This paper uses the Node.js framework to develop the report information management platform， which can complete， query and export different types of report information. The system front-end uses Vue cli to build the front-end project， and the element component design page. The back end uses Java language， and the database uses MySQL database. Using the characteristics of Node.jss high efficiency and real-time response to improve office efficiency.

Key words：Node.js; vue; information management