前端页面模板医院药房管理系统前端工程化设计与实现
作者：李思睿　郑大翔　李志芳
来源：《软件工程》2022年第09期
        摘 要：医院药品类别繁多且数量大，合理利用信息化手段，有助于科学地规范、优化药品业务流程，提高医院药品管理工作效率。系统采用前后端分离的开发架构，在Electron平台下使用MVVM（Model-View-ViewModel）模式对其进行详细的技术设计和实现。前端采用Vue.js负责视图渲染，实现数据驱动视图;后端采用Node.js负责业务处理，并提供数据接口。数据库采用MongoDB结合Redis进行缓存和性能优化。系统以组件化、模块化为基准，充分复用开发资源，避免多重操作DOM，实现药房管理系统客户端与后台端细化协作，解决了目前传统药房系统开发效率低下、系统性能差、维护难的问题。
        关键词：药品管理;前后端分离;前端工程化;MVVM;Electron
        中图分类号：TP399 文献标识码：A
        Design and Implementation of Front-end Engineering for
        Hospital Pharmacy Management System
        LI Sirui， ZHENG Daxiang， LI Zhifang
        （Hainan Medical University， Haikou 571199， China）
        ****************; *****************; ***************
        Abstract： In view of a great variety and large quantities of drugs in hospitals， rational use of information technology will be helpful in scientifically regulating and optimizing the drug business process， and improving the efficiency of hospital drug management. The proposed system adopts a development architecture with front and back ends separated， and uses the MVVM （Model-View-ViewModel） pattern to carry
out detailed technical design and implementation under the Electron platform. Vue.js is applied in the front-end for rendering the view and realizing data-driven views; Node.js is used in the back-end for processing the business and providing data interfaces. The application of MongoDB and Redis has contributed to database caching and performance optimization. Based on component and modularization， the development resources are reused fully， which avoids multiple operations of DOM， and realizes the refined collaboration between the client-end and the back-end of the pharmacy management system. The proposed system solves the problems of low development efficiency， poor system performance and difficult maintenance of the existing pharmacy system.
        Keywords： drug management; front-end and back-end separation; front-end engineering; MVVM; Electron
        1 引言（Introduction）
        當前绝大多数的医院信息系统都采用三层架构的开发方式，将整个应用程序划分为界面层、业务逻辑层、数据访问层。在界面层，通常结合DevExpress控件库进行开发，其内
容虽然丰富，但加载速度较慢，且样式较为单一。处理业务逻辑时，因为分层需要使用中间层方式（数据访问层）访问数据库，需要对数据进行各种转换和计算，降低了系统性能[1]。当用户访问量增大，处于高并发时，会导致系统响应慢，经常出现未响应状态，甚至崩溃。三层架构实际上不只是三层，随着业务复杂度的提升，少则划分四五层，多至八九层。层级之间缺乏统一的标准，不同的开发者对各个层级的理解不一致，当有新功能需求时，需要开发者在各个层级进行相应开发，同时接口方面也存在衔接不一致的问题。
        随着互联网技术的快速发展，架构技术数不胜数。国内外IT公司在业务层次追求强大功能的同时，更加注重用户体验和系统性能。在开发层次，采用团队协作方式，利用工程化思想，采取前后端分离的开发模式，前端负责对数据的渲染，关注与用户的交互;后端处理业务逻辑，为前端提供数据接口。前端工程化是当今主流的项目开发方案[2]。本文通过对现有医院信息系统的研究，采用解耦的编程思想，设计并实现了药房药库管理系统。系统以药品管理规范化、科学化为目标，提高了医院药房药库整体的工作效率，促进了医院信息化发展[3]。系统主要包括药房管理、药库管理、门诊药房、数据统计、后台管理功能模块。
        2 系统架构原理及技术框架（System architecture principle and technical framework）
        2.1 系统架构概述
        系统采用前后端分离的架构模式，前端主要运用HTML、CSS制作静态页面，结合JavaScript实现页面动态化并对数据进行渲染展示，让页面运行更加流畅，追求更高的用户体验;后端处理业务逻辑，提供数据接口，实现服务的高性能和高并发。前端通过Axios调用后端的Api接口，对后端返回数据进行处理并渲染。这种开发方式降低了前后端代码之间的耦合性，架构体系清晰，便于代码的上线部署和后续维护。
        2.2 Electron平台
        系统的桌面应用程序基于Electron，它是由GitHub开发的一款跨平台桌面应用开发框架。Electron将Google的Chromium和Node.js合并到一个运行环境中，所以能使用Node.js中几乎所有的模块[4]，通过JavaScript操作系统原生的Api。Electron有且仅只有一个主进程（Main Process），Main Process通过BrowserWindow实例创建页面并通过Chromium
展示，每个独立的Web页面都运行在它自身的渲染进程（Render Process）中[5]，能够完美地使用Vue.js，在各个渲染进程中独立开发Web页面。Electron原理如图1所示。
        2.3 MVVM
        在传统开发中，页面都是静态渲染的，页面的更新必须要直接操作DOM，大量DOM操作不仅消耗性能且十分烦琐。Vue.js通过MVVM模式实现数据驱动视图，实际上是从数据劫持到发布订阅的一种模式[6]。通过Object.defineProperty这个Api在对象上定义一个新属性或者修改现有的属性，使用该Api下的get方法读取属性获取data，使用set方法写入属性监听data的变化。组件中data一旦發生变化，就会根据修改后的data重新渲染视图，由MVVM去自动更新DOM，开发者就无须直接操作DOM，节约了开发成本，提高了程序的性能。
        2.4 Virtual Dom
        虽然MVVM能帮助开发者自动更新视图，减少了对DOM的直接操作，但实际上也是要对DOM进行操作的，依然非常耗时。但Virtual Dom先用执行速度更快的JS来模拟DOM结
构，在多次的DOM操作中计算出最小的变更，避免了一些毫无意义的操作，最后操作DOM，其本质上是DOM和JS之间的一个缓存[7]。
        Virtual Dom通过diff算法比较DOM操作前后的差别，计算出最小变更。对于操作前后的DOM树，diff算法只对它们之间同级比较，若两棵树的tag不相同，删除重建，不再进行下一层级的对比[8]。若一棵树的tag和key都相同，则认为是相同的节点，同样不再进行下一层级的对比。此算法的时间复杂度为O（n），执行算法时的工作量是十分理想的。
        在修改model中的data时，重新编译渲染。在编译过程中会将template模板转变成一个render函数，通过render函数生成Virtual Dom，调用vm._render方法生成一个新的虚拟节点（Vnode）。对原来的Vnode和新生成的Vnode进行diff算法计算出最小变更。这个过程中会实例化一个Watcher，Watcher是Dep实例中的一个对象，Watcher会调用Dep下的Notify方法遍历Dep的Watcher实例数组，通过对应的update方法来更新视图。Vue.js使用了Virtual Dom，避免了回流和重绘的DOM操作，提高了性能。Virtual Dom流程相关的模板渲染过程如图2所示。
        3 系统设计（Systematic design）
        3.1 组件化
        组件化设计的优势如下：（1）组件标准化。每个组件都有统一的标准，有了标准和规范，各个组件才能更好地结合在一起使用。（2）功能分治。将系统的各个功能都封装到不同的组件中，目的是让每个组件可以独立进行开发，达到解耦[9]。（3）组件复用。当系统中因为某个功能的改变导致组件不可以使用时，对组件进行回收，更换一个新的组件，或者对原先组件进行优化。（4）组件组合。组件之间通过组合的方式，构成一个功能或者一类功能模块。组件化设计最终的目的是达到高效、协作以及复用。
        3.2 模块化
        模块是指在系统开发中，用自执行函数将多个函数包裹起来形成闭包，自执行函数通过return将内部函数暴露，这种方式也称单例设计模式。模块化就是把一个或多个函数封装到一个JS中，各个JS之间互不影响，提供方通过export的方式进行暴露，使用方通过import的方式进行导入。模块化最终的目的是解决开发中的命名冲突，避免因各个JS文件中存在同名变量导致的变量同名覆盖问题;同时解决了各个JS之间的依赖问题，并达到代码的复用，提高函数的可维护性，从而提高整体项目的开发效率，降低维护成本。
        3.3 组件通信与状态管理
        一般情况下，组件只需要操作自己的私有数据就能够满足某一功能的需求，但有些功能比较复杂，需要多个组件共同完成。父组件可以通过属性传递的方式向子组件传递状态（数据），子组件使用props接收父组件传递的数据，通过this.$emit调用父组件的事件。父组件通过event.$on绑定自定义事件，子组件使用event.$emit调用自定义事件。但是，在组件之间不是父子或兄弟这种简单关系，而是相隔多层的祖孙关系或者没有任何关系，甚至多个组件之间共用一个状态的情况下，使用上述组件通信方式就显得特别笨拙。
        2 系统架构原理及技术框架（System architecture principle and technical framework）
        2.1 系统架构概述
        系统采用前后端分离的架构模式，前端主要运用HTML、CSS制作静态页面，结合JavaScript实现页面动态化并对数据进行渲染展示，让页面运行更加流畅，追求更高的用户体验;后端处理业务逻辑，提供数据接口，实现服务的高性能和高并发。前端通过Axios调
用后端的Api接口，对后端返回数据进行处理并渲染。这种开发方式降低了前后端代码之间的耦合性，架构体系清晰，便于代码的上线部署和后续维护。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。