作者主页:knit
作者简介:9年JAVA全栈开发经验,专注JAVA技术、系统定制、远程指导,致力于企业数字化转型,CSDN博客专家
摘 要
在如今的信息时代,医学科研信息化进程加快,医学科研数据不断累积,对医学科研数据管理的需求亟待解决 。据此,本文 通过对 SpringBoot、Vue 等技术及进行相关介绍,分析科研需求的基础上设计了轻量级的医学科研数据管理平台,为医学科研工作的 数据管理工作实现友好、便捷的服务。
关键词:SpringBoot;Vue;医学科研数据;数据管理;
0 引言
当今时代,正是互联网飞速跃进的时代,各学科领域 也都不断与时俱进,将计算机与之融合,形成更新的计算 机分支。而医学方面也在同计算机多项技术进行深入的融 汇,医疗信息化不断推进发展 。其中的医疗行业数据更是 迎来爆发式的增长,而往往这些医疗行业的数据通过妥善 的数据管理和有效的数据加工往往可以在辅助、科研和决 策方面发挥良好效能。国家卫健委 2018 年印发的《国家健 康医疗大数据标准、安全和服务管理办法(试行)的通知》, 敦促不断加强医疗数据服务管理,并且多地也相继发布医 疗数据的相关政策。所以医学科研数据的服务管理工作目 前不仅亟待解决,也是国家相关政策的重点问题。
而本项目旨在结合多项前后端框架,设计与开发一个 面向医学科研人员的、用户友好型的医学科研数据管理平 台,实现对医学科研数据的可视化共享、高效利用和存储 管理,为医学科研人员提供快速便捷的数据获取、实现个 性化功能和完成操作流畅、界面友好和轻量级的平台。
项目选用 B/S(Browser/Server:客户端/服务器)架构模 式实现,其中前端框架则是使用 Vue.js+Element Plus 实现 页面的动态渲染效果和页面相关操作及响应, 后端使用 SpringBoot+MyBatis 完成整体项目的逻辑实现和数据库连 接和映射部分,结合实际医学科研数据管理需求对平台功 能进行设计。
1 相关技术简介
架构模式:B/S 架构。相较于传统的 C/S(Client/Server) 架构模式 B/S 架构的开发更加简便、灵活,开发成本与维护成本都较为便宜 ,相对用户而言 B/S 访问更加轻便,操 作简易无需下载客户端 。其架构模式图如图 1 所示。
图 1 B/S 架构模式图
代码管理工具:Gitee 。它是基于 Git 的代码托管和协 作研发平台,除此之外还可用于历史代码管理和历史版本 追溯,相较于 Git 来说 Gitee 操作在创建中央仓库、查看代 码、代码管理等方面都做得更加友好。
项目管理工具:Maven 。通过小段代码或信息进行报 告、文档、项目的管理,在 java 开发中,还具备依赖的快捷 导入和管理功能,具有高可扩展性、代码可重构性的优点。
项目框架:SpringBoot + MyBatis。SpringBoot 是轻量级 的 Java 后端开发框架, 其核心是依赖注入(Dependency Injection)和面向切面编程(AOP)。SpringBoot 中定义了许 多 注 解 , 以 config 进 行 配 置 , 可 以 与 Tomcat、Maven、 MyBatis 等框架适配使用, 降低了代码的耦合性 。而且 SpringBoot 在 Spring 基础上,对 Spring 进行优化,它摒弃了Spring 繁琐的 xml 配置 Bean, 实现自动装配 , 使得对 Spring 基础功能的利用更加便捷。其体系结构图如图2 所 示。MyBatis 是持久层框架,使用简单的 xml 配置和注解完 成数据连接和映射来隐藏 JDBC 的底层代码 ,具有简单、 灵活、降低耦合性等多项优点。
Web 容器:Tomcat 。Tomcat 是一款经典的 Web 服务 器,并且也是免费开源的轻量级应用服务器,也是当下非 常流行的一款 Servlet/JSP 容器。
前端框架:Vue.js+Element Plus 。Vue.js 是如今非常流 行的前端框架,结合 Element Plus 进行前端页面的渲染也 是相得益彰 。其中 Vue.js 和 Angular.js、React.js 并称 Web 前端的三大框架,但对比起另外两种框架 Vue.js 更加轻便 灵活,也更易构建 。Vue.js 也有着轻量级、渐进式框架、使 用虚拟 DOM 的特点。同时 Vue.js 包含着多套技术栈,而本 次项目中主要使用了 npm、vue-cli、vue-router、webpack。其 中 npm 主要用于前端项目包、插件、工具、命令的管理, vue-cli 负责自动生成 vue 项目和相关文件,vue-router 实 现路由控制达到前后端分离的效果,而 webpack 则是对前 端项目文件进行打包操作便于发布。而在本次项目中使用 Vue3 渲染 Web 前端,而 Element Plus 便是基于 Vue3 的组 件库 。Element Plus 在 Element UI 基础上更加了更多的组 件和自定义功能,可将组件全局引入或按需引入。
数据库:MySQL 8.0.26。MySQL 是一个关系型数据库, 也是如今非常流行的是数据库软件,可良好适配多种框架 或环境。
2 医学科研数据管理平台的设计与实现
根据相应的科研数据需求,将平台大致设计为四个主要模块,分别是用户模块、数据模块、影像模块和系统模 块,在每个模块下各自实现相应基础功能,如图 3 所示。
2.1 用户模块
在该模块下主要涵盖四个基础功能,分为别:
登陆账号:在该功能中用户需输入正确的账号、密码 和验证码,前端对用户键入信息进行空值、无效值和验证 码判断,核实为正确有效信息后,将信息加密封装传输给 后台 。后端接收前端的封装信息,读取并查找数据库对应 信息并进行匹配,匹配结果封装在 Json 数据中返回前端。 前端读取 Json 数据并显示,若账号密码正确,跳转进入主 页面,将用户登陆账号进行登陆保护,并提示登陆成功消 息,反之则停留在当前页面不进行任何跳转,并提示登陆 失败消息。特别地,如果登陆用户为系统管理员,将跳转系 统管理页面。
注册账号:在该功能中用户需输入账号名、密码和一 些基本的用户信息,前端仍会对用户键入信息进行空值和 无效值判断,在判断为正确有效信息后,将信息加密封装 传输给后端。后端接受前端信息,读取信息,查找数据库有 无相同信息,若无相同信息,将用户信息存储到数据,返回 Json 数据,若有相同信息,则也封装在 Json 数据中返回。 前端再次接收 Json 数据,读取并显示相应信息。
注销账号:在用户点击注销按钮后执行,前端消除用 户登陆信息,取消用户登陆保护,记录用户注销时间并返 回给后端,退出账号。
基本信息查看:点击基本信息按钮后跳转到基本信息 页面,显示用户相关基本信息,用户可在此页面对用户信 息进行编辑操作。
图 2 SpringBoot 体系结构图
图 3 平台主要模块图
2.2 数据模块
在该模块下涵盖了下列功能:
数据概览:数据概览页面为主 页面,该页面主要记录用户的主要 数据和数据的规模等,将用户主要 数据进行可视化展示。
数据列表:数据列表为数据的 详情页面,在这里分页展示了用户 的多条数据及及数据的各条信息, 并包括了数据的操作按钮,以及与 影像文件的相应匹配。
数据筛选:在这里 ,可根据数 据库、数据名称、数据标签等多条 数据元素或自定义筛选条件对数 据进行模糊或者精确查找;前端接 收用户输入的相关信息,进行空值 和无效值判断无误后将数据传递 给后端,后端解析并查找数据库, 将结果封装在 Json 数据中返回,前 端得到数据后, 动态渲染到页面 中,从而完成数据筛选功能。
数据录入与下载:在数据录入 页面,用户根据对应的数据格式进 行数据录入,也可通过数据上传按 钮进行 Excel 文件上传 。在用户数据录入中,需进行空值和有效值检查,在用户文件上传后, 也需要进行格式检查,需与用于上传到数据库格式进行匹 配才可上传。前端在本功能中也是接收数据并传递给后端 数据,后端接收数据并解析,检查是否有重复数据,无误后 上传至数据库,最后返回Json 数据,前端根据 Json 进行对 应的页面提示。在本功能中,也可进行批量上传。用户可根 据个人选择上传至个人数据库或系统数据库。在数据下载 页面,用户可批量选择数据,在核实用户的下载权后可对 数据进行下载操作,在下载时,可选择下载的数据类型。
编辑数据:当用户进行数据编辑功能时,首先进行权 限判断,前端封装发送所选数据标识符和用户标识符,后 端接收数据并解析,查找数据库判断用户是否有权限对数 据进行编辑操作,并将结果封装返回。前端接收结果,若用 户可对数据编辑,当用户编辑修改后,将用户修改部分上 传到后端,后端进行相关逻辑判断无误后上传至数据库。 其大致流程图如图4 所示。
图 4 编辑操作流程图
删除数据:当用户进行删除数据时,同样也会进行删 除权限判断,若用户具备删除权限,将重复询问用户是否 确定删除数据,确保用户不会因误触删除数据,同时将数 据备份到删除数据库中,在一定时间内可对数据进行恢复。
2.3 影像模块
影像录入: 平台支持 jpg、png 和 dcm 文件的上传,可 对 dcm 文件进行文件解析存储 。同时支持文件批量上传, 也可将影像文件与信息数据进行自定义匹配。
影像解析:平台接收 dcm 类型的数据文件,上传至后 端,后端使用 dcm4che3.jar 包对其进行格式解析,若用户 选择格式信息存储,则将解析的信息也一并存储,若没有 选择则将 dcm 影像直接存储。
影像查看:对 jpg 和 png 格式文件,可直接进行显示 查看 。对 dcm 文件平台后端对其进行解析 ,并传递给前 端,前端可对 dcm 文件动态展示。
影像删除:类似的,对影像数据的删除同样也会先进 行权限审查,在审查正确后可进行删除操作 。并且也会对 删除操作进行二次确认和一定期限的保留备份。
2.4 系统模块
平台模式:可对平台的语言、皮肤、字体等进行设置使用。
数据格式:在数据格式页面中,可自主创建自定义数 据库,对数据库的数据格式进行自定义设置 。前端接收数 据库,并进行格式审查,核实后传输给后端,后端首先在数 据进行重复检查,若无重复数据库,则增加数据库和对应 设置,并返回Json 数据到前端 。前端接收数据,对结构进 行消息提示和页面跳转。
平台反馈:在本页面中,用户输入反馈信息或建议(包 括文字信息和图像信息),上传至后端并进行保存,系统管 理员可对用户的反馈进行查看。
2.5 数据库设计
可整合为相 应的 E-R 图,如图 5 所示。
将 E—R 图进行分解分析,可将数据库展开设计 。其 中主要包括表:user、user_database、sys_database、data_img、 img 表等。
3 总结
本文主要从计算机技术层面阐述了医学科研数据管 理平台的实现,它同时也是满足医学科研需求的产物 。该 平台设计目的是服务于医学科研人员,实现数据的管理存 储,在重庆医科大学生物医学国家重点实验室投入一定的 使用,并取得了良好的反映 。而对于计算机飞速发展的当 今,医学科研数据管理平台也将不断迭代更新,推出更加 便捷、友善的服务。而这样的平台也会焕发出更大的活力, 为科研做出更多的贡献,同时也会医学数据管理平台开辟 更多的途径、提供更广的思路。
参考文献:
[1]李成武,夏同云.基于 ASP.NET Core 和 Vue 的地质资料共 享系统的设计与实现[J].价值工程,2022,41(5):156-159.
[2]李静,杨敏,金新建.大数据背景下医学高校图书馆科研数 据管理探究[J].电脑知识与技术,2020,16( 18):15-18.
[3]刘亚茹,张军.Vue.js 框架在网站前端开发中的研究[J].电 脑编程技巧与维护,2022( 1):18-19,39.
[4]喻佳,吴丹新.基于 SpringBoot 的 Web 快速开发框架[J].电 脑编程技巧与维护,2021(9):31-33.