基于SSM和VUE框架的图书商城系统开发外文翻译资料

本科生毕业设计（论文）外文资料译文

（ 2020届）

外文资料译文规范说明

一、外文资料译文：

基于Vue.js的智能门诊Web应用前端开发

Minghang Li, Jianghai Hu, and Xianwu Lin

关键词：智能门诊，前端，Vue.js

摘要：我国医疗系统存在诸多问题，智能自动化和计算机网络的快速发展为解决这些难题提供了强有力的途径。由于大型医院通过分级诊疗分散病人数量，诊所的数量不断增加。目前，提高基层诊所的治疗能力已迫在眉睫，为此，我们开发了功能齐全、使用方便的工作软件，供临床管理人员和医生使用。本文讨论了web前端开发的经验，针对系统的功能需求，我们选择了轻量级框架Vue.js。本文重点介绍了MVVM模式、组件化和单页支持的特点，并举例说明了实现方法，给出了系统功能测试结果。在智能医学的发展史上，这是初步的有益尝试。

1 简介

我国医疗体制存在着效率低、质量差、高消费、医生数量增长慢等问题。而造成这些问题的根本原因是：医疗资源的短缺和发展不平衡；现代医疗手段和分级医疗制度缺乏，医疗效率低下；信息和知识孤立。智能自动化和计算机网络的迅速发展为解决这些难题提供了强有力的途径。2017年，国务院发布的新一代人工智能发展规划提出：发展智能医学，建设安全便捷的智能社会。近年来，福州总医院[1]和内蒙古自治区人民医院[2]等大型医院纷纷启动以电子病历为核心的智能数字化医院建设。目前，一流医院的信息化建设非常普遍，但我国是一个人口大国，如果每个病人都去大医院看病，就会出现“三长一短”的困境，即挂号等待时间长，就医等待时间长，取药排队时间长，医生询问时间短。此困境长期以来受到社会的广泛批评。为此，国家政策鼓励更多基层诊所实现分级诊疗，分散病人。然而，90%的基层诊所在基础信息化方面仍然毫无经验。基层诊所存在环境拥挤、病案制度落后、专业水平低、医生队伍不均衡等问题。因此，我们引进了国际先进的理念和技术，包括开发CHAVE-TECH智能门诊软件，借鉴临床工作和在线教育的经验和建议。本文仅对前端开发做了初步探讨，分别介绍了系统需求、Vue.js框架特点、系统实现及部分效果。

2 系统需求

如图1所示，CHAVE-TECH智能门诊软件是为大量注册门诊用户设计的提供智能信息的web服务。门诊用户的属性包括：临床从业人员（全科医生、护士、药剂师）；行政从业人员（库存管理员、财务管理员、行政专员）；管理监督员（门诊经营者、门诊业主）。工作平台的智能信息处理需要四个功能模块：系统管理、电子病历、库存管理和财务管理。

图1基本功能示意图

系统管理功能模块由具有门诊管理员权限的用户操作，支持“新增用户”、“新增门诊角色”、“设置权限”等功能。系统管理员是附属门诊与智能软件技术服务中心之间的桥梁，负责门诊各类用户注册申请的审核、权限和档案管理。

电子病历功能模块由已授权的临床医生操作，支持“病历”、“基本身体情况数据”、“新病历”、“既往病历”等功能。它充分体现了SOAP病案处理的先进理念。

库存管理功能模块由用户根据授权的操作权限进行操作，支持“药品库”、“采购记录”、“本地药房”、“库存项目”、“门诊处方”等功能。

财务管理功能模块由用户根据授权的操作权限进行操作，支持“定价”、“收入”、“支出”、“汇总”等功能。

除了四个基本功能模块外，系统还提供了两项增值服务：包含一些全科医生在线课程的在线继续教育服务，以及用户无需注册即可搜索获取医学知识的智能辅助查询服务。

3 Vue.js 的特性

根据系统需求，采用了轻量且高效的前端组件化方案Vue.js框架[3，4]进行前端开发。因此，后端采用了基于JavaScript语言的Express框架，实现了前后端的分离开发。本文特别强调了Vue.js[5–8]的以下三个特点。

3.1 MVVM 模式

MVVM（Model-View-ViewModel）是一种软件架构模式，有助于将用户界面开发与后端逻辑开发分离开来。Model是后端传输的数据；View是指页面上显示的内容；ViewModel是连接模型和视图的桥梁。通过数据绑定将Model与View连接起来，将数据的变化自动引起视图的更新，减少DOM操作，提高视图层与数据层之间的通信效率。

3.2 组件化

在使用Vue.js进行前端开发时，页面由组件组成。每个组件由模板、脚本和样式组成。Template使用HTML5声明数据和DOM之间的映射关系。在脚本中，使用JavaScript来定义所需的数据初始值、数据的计算属性和逻辑关系。在样式中，我们使用CSS3来修改元素的样式。在不同的页面中，如果我们需要使用相同的组件，我们可以很轻松地导入它。组件特性在很大程度上减少了开发中的代码和文件，使文件结构更加清晰，便于代码的重用和维护。

3.3 单页

在过去，大多数传统应用程序都是多页应用程序。每个页面跳转都需要一个HTTP请求。当网络运行缓慢时，很容易陷入困境。单页应用程序在切换页面时不会创建新的HTML请求。它的原则是当JS注意到URL的变化时，它会动态地切换页面。在Vue.js中，我们使用官方插件vue-router在路径之间切换。

4 系统实现与部分成果

4.1 项目结构

项目最初需要安装vue-cli脚手架，它提供了vue所需的大多数配置环境。图2显示了src文件夹，其中存储了项目源代码和一些资源文件，其中assets文件夹下存储了本地使用的图像、JSON数据文件，components文件夹下存储了页面中使用的组件,mixins文件夹下存储了多个组件共享的函数、page文件夹下存储了所有显示页面，router文件夹下存储了vue-router逻辑，store文件夹下是vuex逻辑，style文件夹下是组件共享的一些CSS文件，App.vue是页面入口文件，main.js是程序入口文件，它用于初始化vue实例并使用所需的插件加载各种常见组件。

图2 文件结构

图3 病人信息存储在Vuex中

4.2 实施实例

本节以电子病历中的病人信息组件为例，说明如何应用vuex来同步和高效地更新多个组件中的同一状态变量。Vuex是Vue.js应用程序的状态管理模式。它使用集中存储来管理应用程序所有组件的状态，确保状态的更改可预测[9]。vuex存储有四个部分：state、getters、mutations和actions。本例使用了state和getters。驱动应用程序的数据是在state中定义的。每当state中的变量发生更改时，计算属性将重新计算，并触发关联的DOM进行更新。getters可以看作是计算属性，对数据状态进行过滤和计数。例如，在图3中，在state中的PatientBasicInfo数组，在PatientBasicInfo组件中定义数据状态，在getters中定义getPatient方法以过滤和计算该状态。

如图4和5，在Vuex中，组件需要使用的状态及其计算属性 可以通过MapGetters方法从存储中的getter中得到。通过v-modal，数据状态和用户输入值是双向绑定的。

图4 HER中的PatientBasicInfo组件

图5 vital中的PatientBasicInfo组件

界面的效果如图6和7所示。当用户在EHR中输入患者信息时，vital中的患者信息将相应地更新。

图6 health文件中的患者信息

图7 vital中的患者信息

4.3 部分功能测试结果

本系统正式发布后，任何人都可以通过url访问，点击页面顶部的“家庭医生在线继续教育”，进入在线继续教育功能界面（图8）。我们计划提供包括心血管疾病、儿科医学、女性健康、男性健康、老年健康在内的临床课程教材；非临床课程包括如何成为家庭医生、医疗实践咨询、患者健康管理和护理质量，如何建立家庭医生与患者之间的信任关系等。点击页面顶部上的“智能辅助问诊”，任何人都可以搜索标准的临床路径、疾病信息、药物信息（图9）。

图8在线继续教育界面

图9 智能辅助问诊界面

点击页面顶部的“家庭医生工作平台”，可以进入智能门诊工作平台界面。软件后端服务器可以为多家诊所提供智能信息处理技术服务。

图10 工作平台首页

用户注册完成后，可以根据自己的角色分别进入“电子病历”、“库存管理”、“财务管理”、“系统管理”四个功能模块（图10）。

图11显示了“电子病历”功能模块中“新病历”操作的部分测试界面。系统严格采用美国临床药师协会推荐的SOAP病历书写格式。它以规范有序的方式记录患者的所有必要信息。这方便了医务人员收集患者相关信息，推断患者存在的问题。S（Subjective即主观）：主观资料，包括病人的投诉、病史、药物过敏史、药物不良反应史、既往病史等；O（Objective即客观）：客观资料，包括病人的生命体征、临床生化检测值、影像学结果、血、尿、粪培养结果等，血药浓度监测值；A（Assessment即评价）：临床诊断、药物治疗过程分析与评价；P（Plan即计划）：治疗计划，包括具体药物名称、剂量、给药途径、时间间隔、疗程的选择及药物指导的相关建议。

图11 电子病历接口

图12显示了“库存管理”功能中药品、消耗品或其他物料采购记录的部分测试界面。

图12 库存管理界面

图13 财务管理界面

图13显示了“财务管理”功能中“划价信息”和“查询结果”操作的部分测试接口。

通过运行智能信息处理算法，系统实现了不同功能模块之间相关信息的有序传输，如临床医生开药时，库存中相关药物的信息可以自动弹出；当库存管理人员进行定价和药品配送操作时，相关患者的临床处方信息会自动弹出；财务管理操作的结果与电子病历和库存管理密切相关。

5 总结

本文介绍了CHAVE-TECH智能门诊软件2.0版前端开发过程中的一些经验和成果。由于采用了轻量级的Vue.js框架，充分利用了MVVM模式、组件化和单页支持的特点，大大节省了开发成本，提高了开发效率。目前，CHAVE-TECH智能门诊软件2.0版已经由线下团队Slip Family Doctor (SLP)和国内多家诊所试用，效果良好。

IBM认为，智能医学的特点应包括互联性、协作性、预防性、普及性、创新性、可靠性、可控性、安全性和稳定性。今后将根据试验情况进一步优化，更充分体现智能医疗的特点。

致谢。这项工作得到了中国国家自然科学基金No.61733017的支持。感谢合作伙伴王小悦参与了前端渲染的某些功能。 肖恩·刘（Sean Liu）领导项目团队，负责后端开发，前端和后端交互以及测试。

参考文献

1. Wang H, Chen J, Xi

   剩余内容已隐藏，支付完成后下载完整资料

   ---

   资料编号：[273183]，资料为PDF文档或Word文档，PDF文档可免费转换为Word