基于node.js技术的报表信息管理平台设计与实现
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<servlet-name>LoginServlet</servlet-name> <servlet-class>rmation.servlet. LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginServlet</servlet-name> <url-pattern>/LoginServlet</url-pattern> </servlet-mapping> 3.4 前端获取API接口 在 Vu e 项目中使 用a x i o s库来调用A PI 接口，它是 基于 promise的http库，可运行在浏览器端和Node.js中。在接口中 数据以JSON的格式进行传输，获取用户是否成功登录的代
系统的数据库设计主要实体包括用户、部门、权限、 科 研 报 表、技 能 报 表 5 个。考虑到 科 研和技 能的差 异性， 需要设计两张表来进行数据存储。数据库设计ER架构如 图1所示。
图1 数据库设计ER架构
3 系统设计实现 3.1 系统整体架构
系统 前 端采用Vu e - cl i构建前 端工程项目，E l e m e n t 组 件设计页面；后端采用Java语言，数据库采用MySQL数据 库；系统采用MVVM架构模式，在双向数据绑定中View和 Model不再需要手动的绑定输入监听和手动的将数据展示
第24期 2019年12月
无线互联科技 Wireless Internet Technology
N o .2 4 D e c e m b e r，2 019
基于Node.js技术的报表信息管理平台设计与实现
刘 娴，刘泽骁，荀丽丹
（南京机电职业技术学院，江苏 南京 210000）
摘 要：文章利用Node.js框架进行报表信息管理平台的开发，实现对不同类型报表信息的填写、查询、导出等操作。系统前 端采用Vue-cli构建前端工程项目，Element组件设计页面；后端采用Java语言，数据库采用MySQL数据库。利用其高效、实 时响应的特点，提高办公效率。 关键词：Node.js；vue；报表管理
在View上，提高了View和Model之间转换的开发效率。 系统部署在内网服务器中，内网服务器需安装MySQL组
件、Tomcat服务器，将前后端代码打包放入Tomcat服务器 中，启动Tomcat服务后可以访问系统。 3.2 数据库的实现
在MySQL命令界面中，输入数据表的相关SQL语句即可
作者简介：刘娴（1983— ），女，江苏南京人，讲师，学士；研究方向：软件技术。
1 报表信息管理平台简介 信息技术的发展是为了改变人们的工作与生活，使生活
变得更快捷，本文提出的报表信息管理平台，是为了方便教 师对不同类型的报表信息进行填写、查询、导出，为日常工作 带来便利。
目前，Web前端技术正处于高峰发展时期，系统开发更注 重用户的体验 为近年来Web前端技术发展的重要框架，通过本项目的研 究，开发人员从理论上对该框架的运行机制与原理能有一个 深入的了解；将该技术在教科研成果报表信息平台上加以应 用，有助于掌握Express框架的应用，利用其高效、实时响应 的特点提高办公效率[1]。
- 51 -
第24期 2019年12月
无 线 互 联 科 技·设 计分析
N o .2 4 D e c e m b e r，2 019
创建，以用户信息表为例的创建语句核心代码如下：
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_f k` FOREIGN KEY (`departmentId`) REFERENCES `department` (`id`) ) ENGI N E=In noDB AUTO_I NCR EMENT= 62 DEFAULT CHARSET=utf8; 3.3 后端API接口的实现 创建类实现Servlet接口，实现service方法在web.xml进 行servlet的配置。用户登录接口配置的代码如下： <servlet><!-- 登陆-->
er.workNum); this.$message({ message: ‘登录成功！’, type: ‘success’ }); setTimeout(() => { this.$router.push({path: ‘/index’}); }, 500);
2 系统总体设计 前端主流框vue，Node.js作为中间层负责数据的处理和
模板的控制，后端编程语言Java。采用前后端分离的架构模 式，前端负责展现和交互逻辑，Node.js作为中间层负责数据 的处理和模板的控制，后端负责业务逻辑[2]。
系统的主要用户包括普通用户、系部管理员、超级管理 员3个模块，主要功能包括报表信息的管理、用户信息的管 理、数据信息的导入导出。
码如下： let params = { workNum: er.workNum, upassword: er.upassword, }; this.$axios.post(‘/api/LoginServlet’,params) .then((res) => { if(res.data.code === 0){ sessionStorage.setItem(‘accessToken’ ,
系统的数据库设计主要实体包括用户、部门、权限、 科 研 报 表、技 能 报 表 5 个。考虑到 科 研和技 能的差 异性， 需要设计两张表来进行数据存储。数据库设计ER架构如 图1所示。
图1 数据库设计ER架构
3 系统设计实现 3.1 系统整体架构
系统 前 端采用Vu e - cl i构建前 端工程项目，E l e m e n t 组 件设计页面；后端采用Java语言，数据库采用MySQL数据 库；系统采用MVVM架构模式，在双向数据绑定中View和 Model不再需要手动的绑定输入监听和手动的将数据展示
第24期 2019年12月
无线互联科技 Wireless Internet Technology
N o .2 4 D e c e m b e r，2 019
基于Node.js技术的报表信息管理平台设计与实现
刘 娴，刘泽骁，荀丽丹
（南京机电职业技术学院，江苏 南京 210000）
摘 要：文章利用Node.js框架进行报表信息管理平台的开发，实现对不同类型报表信息的填写、查询、导出等操作。系统前 端采用Vue-cli构建前端工程项目，Element组件设计页面；后端采用Java语言，数据库采用MySQL数据库。利用其高效、实 时响应的特点，提高办公效率。 关键词：Node.js；vue；报表管理
在View上，提高了View和Model之间转换的开发效率。 系统部署在内网服务器中，内网服务器需安装MySQL组
件、Tomcat服务器，将前后端代码打包放入Tomcat服务器 中，启动Tomcat服务后可以访问系统。 3.2 数据库的实现
在MySQL命令界面中，输入数据表的相关SQL语句即可
作者简介：刘娴（1983— ），女，江苏南京人，讲师，学士；研究方向：软件技术。
1 报表信息管理平台简介 信息技术的发展是为了改变人们的工作与生活，使生活
变得更快捷，本文提出的报表信息管理平台，是为了方便教 师对不同类型的报表信息进行填写、查询、导出，为日常工作 带来便利。
目前，Web前端技术正处于高峰发展时期，系统开发更注 重用户的体验 为近年来Web前端技术发展的重要框架，通过本项目的研 究，开发人员从理论上对该框架的运行机制与原理能有一个 深入的了解；将该技术在教科研成果报表信息平台上加以应 用，有助于掌握Express框架的应用，利用其高效、实时响应 的特点提高办公效率[1]。
- 51 -
第24期 2019年12月
无 线 互 联 科 技·设 计分析
N o .2 4 D e c e m b e r，2 019
创建，以用户信息表为例的创建语句核心代码如下：
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_f k` FOREIGN KEY (`departmentId`) REFERENCES `department` (`id`) ) ENGI N E=In noDB AUTO_I NCR EMENT= 62 DEFAULT CHARSET=utf8; 3.3 后端API接口的实现 创建类实现Servlet接口，实现service方法在web.xml进 行servlet的配置。用户登录接口配置的代码如下： <servlet><!-- 登陆-->
er.workNum); this.$message({ message: ‘登录成功！’, type: ‘success’ }); setTimeout(() => { this.$router.push({path: ‘/index’}); }, 500);
2 系统总体设计 前端主流框vue，Node.js作为中间层负责数据的处理和
模板的控制，后端编程语言Java。采用前后端分离的架构模 式，前端负责展现和交互逻辑，Node.js作为中间层负责数据 的处理和模板的控制，后端负责业务逻辑[2]。
系统的主要用户包括普通用户、系部管理员、超级管理 员3个模块，主要功能包括报表信息的管理、用户信息的管 理、数据信息的导入导出。
码如下： let params = { workNum: er.workNum, upassword: er.upassword, }; this.$axios.post(‘/api/LoginServlet’,params) .then((res) => { if(res.data.code === 0){ sessionStorage.setItem(‘accessToken’ ,