劉嫻，劉澤驍，荀麗丹

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

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

1 報(bào)表信息管理平臺(tái)簡(jiǎn)介

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

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

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

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

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

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

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

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

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

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

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

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

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)建類(lèi)實(shí)現(xiàn)Servlet接口，實(shí)現(xiàn)service方法在web.xml進(jìn)行servlet的配置。用戶(hù)登錄接口配置的代碼如下：

<！-- 登陸-->

LoginServlet

com.information.servlet.LoginServlet

LoginServlet

/LoginServlet

3.4 前端獲取API接口

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

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（“賬號(hào)或密碼錯(cuò)誤”）;

}

}）.catch（（res） => {

this.message.error（“服務(wù)器請(qǐng)求錯(cuò)誤”）

}）

4 結(jié)語(yǔ)

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

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

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

[參考文獻(xiàn)]

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

[2]朱曉陽(yáng)，劉苑如，范仲言.基于Node.js的學(xué)習(xí)平臺(tái)后端系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(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