基于Node.js技术的报表信息管理平台设计与实现
2019-02-12刘娴,刘泽骁,荀丽丹
刘娴,刘泽骁,荀丽丹
摘 要:文章利用Node.js框架進行报表信息管理平台的开发,实现对不同类型报表信息的填写、查询、导出等操作。系统前端采用Vue-cli构建前端工程项目,Element组件设计页面;后端采用Java语言,数据库采用MySQL数据库。利用其高效、实时响应的特点,提高办公效率。
关键词:Node.js;vue;报表管理
1 报表信息管理平台简介
信息技术的发展是为了改变人们的工作与生活,使生活变得更快捷,本文提出的报表信息管理平台,是为了方便教师对不同类型的报表信息进行填写、查询、导出,为日常工作带来便利。
目前,Web前端技术正处于高峰发展时期,系统开发更注重用户的体验,因此,本系统采用了Node.js技术。Node.js作为近年来Web前端技术发展的重要框架,通过本项目的研究,开发人员从理论上对该框架的运行机制与原理能有一个深入的了解;将该技术在教科研成果报表信息平台上加以应用,有助于掌握Express框架的应用,利用其高效、实时响应的特点提高办公效率[1]。
2 系统总体设计
前端主流框vue,Node.js作为中间层负责数据的处理和模板的控制,后端编程语言Java。采用前后端分离的架构模式,前端负责展现和交互逻辑,Node.js作为中间层负责数据的处理和模板的控制,后端负责业务逻辑[2]。
系统的主要用户包括普通用户、系部管理员、超级管理员3个模块,主要功能包括报表信息的管理、用户信息的管理、数据信息的导入导出。
系统的数据库设计主要实体包括用户、部门、权限、科研报表、技能报表5个。考虑到科研和技能的差异性,需要设计两张表来进行数据存储。数据库设计ER架构如图1所示。
3 系统设计实现
3.1 系统整体架构
系统前端采用Vue-cli构建前端工程项目,Element组件设计页面;后端采用Java语言,数据库采用MySQL数据库;系统采用MVVM架构模式,在双向数据绑定中View和Model不再需要手动的绑定输入监听和手动的将数据展示在View上,提高了View和Model之间转换的开发效率。
系统部署在内网服务器中,内网服务器需安装MySQL组件、Tomcat服务器,将前后端代码打包放入Tomcat服务器中,启动Tomcat服务后可以访问系统。
3.2 数据库的实现
在MySQL命令界面中,输入数据表的相关SQL语句即可创建,以用户信息表为例的创建语句核心代码如下:
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接口的实现
创建类实现Servlet接口,实现service方法在web.xml进行servlet的配置。用户登录接口配置的代码如下:
3.4 前端获取API接口
在Vue项目中使用axios库来调用API接口,它是基于promise的http库,可运行在浏览器端和Node.js中。在接口中数据以JSON的格式进行传输,获取用户是否成功登录的代码如下:
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(‘accessToken , this.user.workNum);
this.$message({
message: ‘登錄成功!,
type: ‘success
});
setTimeout(() => {
this.$router.push({path: ‘/index});
}, 500);
}else{
this.$message.error(“账号或密码错误”);
}
}).catch((res) => {
this.message.error(“服务器请求错误”)
})
4 结语
选择Node.js作为本系统的开发框架,考虑其自带HTTP模块,使用Node.js可以很容易地实现HTTP服务器。同时Node.js还提供了文件操作等系统级API,可以用来开发本地应用。结合这两点(服务器+本地应用)可以实现基于Node.js的带本地中间层的B/S结构,能够更快速、更便捷地架构一个简洁、精美、易操作且高效的系统。
作者简介:刘娴(1983— ),女,江苏南京人,讲师,学士;研究方向:软件技术。
图1 数据库设计ER架构
[参考文献]
[1]吴春玲,刘广伟,程淑伟.基于Node.js的河道排污监测管理平台的设计与实现[J].工业控制计算机,2018(10):121-122.
[2]朱晓阳,刘苑如,范仲言.基于Node.js的学习平台后端系统设计与实现[J].电脑知识与技术,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