CN113835701A

CN113835701A - 一种基于组件化的代码生成方法和装置

Info

Publication number: CN113835701A
Application number: CN202111105196.7A
Authority: CN
Inventors: 沈亿
Original assignee: Shanghai Miaoyi Biotechnology Co Ltd
Current assignee: Shanghai Miaoyi Biotechnology Co Ltd
Priority date: 2021-09-22
Filing date: 2021-09-22
Publication date: 2021-12-24
Anticipated expiration: 2041-09-22
Also published as: CN113835701B

Abstract

本发明涉及一种基于组件化的代码生成方法和装置，其中，该方法包括：在前端页面显示组件列表、目标区域，其中，组件列表中包括至少一个组件；接收将所述至少一个组件中的目标组件移动至目标区域触发生成的目标信号；响应目标信号在前端页面中显示所述页面对应的组件列表树结构；通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中。通过本申请，解决了PMCP项目管理协作平台整体开发效率较低的问题，实现了降低重复开发具有相同或者类似功能的组件，提高开发效率以及加强组件的复用、将已开发组件可以更快的引入到不同临床研究数字化产品中，加速整个临床研究行业数字化应用蜕变。

Description

一种基于组件化的代码生成方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于组件化的代码生成方法、装置、计算机设备和计算机可读存储介质。

背景技术

本发明主要应用于临床研究行业数字化应用软件开发，现有PMCP项目管理协作平台开发过程中，随着项目复杂度增加、体积变大、功能模块增加、开发节奏加快，交互及页面一致性要求提高，多条开发业务线并行导致的组件功能冗余、项目中重复代码及类似功能重写了一次又一次，严重影响了整体开发效率。

现有PMCP项目管理协作平台，面临的主要问题是整个临床研究行业数字化应用整体业务流程复杂度较高，多种业务流程不一致，业务复杂度较高，不同流程需要由大量不同任务并行或串行完成，不同的任务所需要达到的目标不同、执行方式、执行内容、完成条件也各不相同。

目前，针对相关技术中存在的PMCP项目管理协作平台整体开发效率较低的问题，尚未提出有效的解决方案。

发明内容

本申请的目的是针对现有技术中的不足，提供一种基于组件化的代码生成方法、装置、计算机设备和计算机可读存储介质，以至少解决相关技术中PMCP项目管理协作平台整体开发效率较低的问题。

为实现上述目的，本申请采取的技术方案是：

第一方面，本申请实施例提供了一种基于组件化的代码生成方法，包括：

在前端页面显示组件列表、目标区域，其中，所述组件列表中包括至少一个组件；

接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号；

响应所述目标信号在所述前端页面中显示所述页面对应的组件列表树结构；

通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中。

在其中一些实施例中，在在前端页面显示组件列表、目标区域之前，所述方法还包括：

通过Vue.component注册不同类型的组件，并使用打包工具将所述不同类型的组件进行打包，生成基础组件库、功能组件库以及业务组件库；

将所述不同类型的组件安装进入目标项目中；

通过Vue.use引入所述基础组件库、所述功能组件库以及所述业务组件库中的所述至少一个组件。

在其中一些实施例中，在接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号之后，所述方法还包括：

对所述目标组件进行参数设置，其中，所述参数设置至少包括：组件样式设置、组件页面排版设置、组件事件设置、组件函数设置。

在其中一些实施例中，在通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中之后，所述方法还包括：

在对所述页面进行渲染时，从所述后端服务器中获取所述组件字符串；

将所述组件字符串反序列化至JSON对象；

从所述JSON对象中解析出所有的组件对象；

通过Vue的动态组件在所述前端页面渲染出所有组件以及所有组件的布局。

在其中一些实施例中，通过Vue的动态组件在所述前端页面渲染出所有组件以及所有组件的布局包括：

初始化所述页面；

Vue初始化私有方法，进行过程、数据、方法的合并处理，执行初始化程序；

将所述组件对象挂载到对应的DOM元素上；

将所述组件对象编译成render函数的字符串形式；

所述render函数通过组件唯一类型字段识别到注册组件，执行Vue的createElement函数，使所述组件对象实例化后变为虚拟VNode对象；

Vue的_createElement私有方法通过diff算法找出虚拟DOM的变更内容后，调用Vue.prototype._update私有方法进行虚拟DOM更新；

vm.__patch__方法最终会调用DOM API的createElement方法，将VNode对象中的html内容转化为DOM后进行替换；

将需要替换的DOM生成并替换，完成组件的改变及展示。

第二方面，本申请实施例提供了一种基于组件化的代码生成装置，包括：

显示单元，用于在前端页面显示组件列表、目标区域，其中，所述组件列表中包括至少一个组件；

接收单元，用于接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号；

响应单元，用于响应所述目标信号在所述前端页面中显示所述页面对应的组件列表树结构；

生成单元，用于通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中。

在其中一些实施例中，所述装置还包括：

注册单元，用于在在前端页面显示组件列表、目标区域之前，通过Vue.component注册不同类型的组件，并使用打包工具将所述不同类型的组件进行打包，生成基础组件库、功能组件库以及业务组件库；

安装单元，用于将所述不同类型的组件安装进入目标项目中；

引入单元，用于通过Vue.use引入所述基础组件库、所述功能组件库以及所述业务组件库中的所述至少一个组件。

在其中一些实施例中，所述装置还包括：

设置单元，用于在接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号之后，对所述目标组件进行参数设置，其中，所述参数设置至少包括：组件样式设置、组件页面排版设置、组件事件设置、组件函数设置。

第三方面，本申请实施例提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面所述的基于组件化的代码生成方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述第一方面所述的基于组件化的代码生成方法。

本申请采用以上技术方案，与现有技术相比，本申请实施例提供的基于组件化的代码生成方法，通过在前端页面显示组件列表、目标区域，其中，所述组件列表中包括至少一个组件；接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号；响应所述目标信号在所述前端页面中显示所述页面对应的组件列表树结构；通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中，解决了PMCP项目管理协作平台整体开发效率较低的问题。本申请实施例的基于组件化的代码生成方法通过提供前端可视化代码生成器能更加有效的提供可视界面，让已经开发过的零散组件更加有序的，直观的展示给包括开发、产品、测试、以及UI/UE等相关工作人员，使多方对整个项目中的功能组件的定义达到相对一致。从而降低重复开发具有相同或者类似功能的组件，提高开发效率以及加强组件的复用、将已开发组件可以更快的引入到不同临床研究数字化产品中，加速整个临床研究行业数字化应用蜕变。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的移动终端的结构框图；

图2是根据本申请实施例的基于组件化的代码生成方法的流程图；

图3是根据本申请优选实施例的前端页面组件生成JSON Schema的示意图；

图4是根据本申请优选实施例的基于组件化的前端可视化代码生成器的数据处理流程的示意图；

图5是根据本申请实施例的基于组件化的代码生成装置的结构框图；

图6为根据本申请实施例的计算机设备的硬件结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。

本实施例提供了一种移动终端。图1是根据本申请实施例的移动终端的结构框图。如图1所示，该移动终端包括：射频(Radio Frequency，简称为RF)电路110、存储器120、输入单元130、显示单元140、传感器150、音频电路160、无线保真(wireless fidelity，简称为WiFi)模块170、处理器180、以及电源190等部件。本领域技术人员可以理解，图1中示出的移动终端结构并不构成对移动终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图1对移动终端的各个构成部件进行具体的介绍：

RF电路110可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器180处理；另外，将设计上行的数据发送给基站。通常，RF电路包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(Low NoiseAmplifier，简称为LNA)、双工器等。此外，RF电路110还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(Global System of Mobile communication，简称为GSM)、通用分组无线服务(GeneralPacket Radio Service，简称为GPRS)、码分多址(Code Division Multiple Access，简称为CDMA)、宽带码分多址(Wideband Code Division Multiple Access，简称为WCDMA)、长期演进(Long Term Evolution，简称为LTE)、电子邮件、短消息服务(Short MessagingService，简称为SMS)等。

存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行移动终端的各种功能应用以及数据处理。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据移动终端的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元130可用于接收输入的数字或字符信息，以及产生与移动终端的用户设置以及功能控制有关的键信号输入。具体地，输入单元130可包括触控面板131以及其他输入设备132。触控面板131，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板131上或在触控面板131附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板131。除了触控面板131，输入单元130还可以包括其他输入设备132。具体地，其他输入设备132可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及移动终端的各种菜单。显示单元140可包括显示面板141，可选的，可以采用液晶显示器(LiquidCrystal Display，简称为LCD)、有机发光二极管(Organic Light-Emitting Diode，简称为OLED)等形式来配置显示面板141。进一步的，触控面板131可覆盖显示面板141，当触控面板131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图1中，触控面板131与显示面板141是作为两个独立的部件来实现移动终端的输入和输入功能，但是在某些实施例中，可以将触控面板131与显示面板141集成而实现移动终端的输入和输出功能。

移动终端还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在移动终端移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别移动终端姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于移动终端还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160中的扬声器161，传声器162可提供用户与移动终端之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一移动终端，或者将音频数据输出至存储器120以便进一步处理。

WiFi属于短距离无线传输技术，移动终端通过WiFi模块170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图1示出了WiFi模块170，但是可以理解的是，其并不属于移动终端的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略，或者替换为其他的短距离无线传输模块，例如Zigbee模块、或者WAPI模块等。

处理器180是移动终端的控制中心，利用各种接口和线路连接整个移动终端的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行移动终端的各种功能和处理数据，从而对移动终端进行整体监控。可选的，处理器180可包括一个或多个处理单元；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

移动终端还包括给各个部件供电的电源190(比如电池)，优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，移动终端还可以包括摄像头、蓝牙模块等，在此不再赘述。

在本实施例中，处理器180被配置为：

在其中一些实施例中，处理器180还被配置为：

在在前端页面显示组件列表、目标区域之前，通过Vue.component注册不同类型的组件，并使用打包工具将所述不同类型的组件进行打包，生成基础组件库、功能组件库以及业务组件库；

将所述不同类型的组件安装进入目标项目中；

在其中一些实施例中，处理器180还被配置为：

在接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号之后，对所述目标组件进行参数设置，其中，所述参数设置至少包括：组件样式设置、组件页面排版设置、组件事件设置、组件函数设置。

在其中一些实施例中，处理器180还被配置为：

在通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中之后，在对所述页面进行渲染时，从所述后端服务器中获取所述组件字符串；

将所述组件字符串反序列化至JSON对象；

从所述JSON对象中解析出所有的组件对象；

在其中一些实施例中，处理器180还被配置为：

初始化所述页面；

将所述组件对象挂载到对应的DOM元素上；

将所述组件对象编译成render函数的字符串形式；

将需要替换的DOM生成并替换，完成组件的改变及展示。

本实施例提供了一种基于组件化的代码生成方法。图2是根据本申请实施例的基于组件化的代码生成方法的流程图，如图2所示，该流程包括如下步骤：

步骤S201，在前端页面显示组件列表、目标区域，其中，所述组件列表中包括至少一个组件；

步骤S202，接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号；

步骤S203，响应所述目标信号在所述前端页面中显示所述页面对应的组件列表树结构；

步骤S204，通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中。

通过上述步骤，解决了PMCP项目管理协作平台整体开发效率较低的问题，可以直接有效的避免了反复重复的开发新组件、编写新样式、费时费力的不停造轮子，使得新老系统更新迭代更加高效、快速、有序的。最终使得各生态系统/平台终端可以建立更加高效的、易扩展的、安全性较高、易用易集成、降低整体维护成本。并且在一定条件下，可以使组件的开发及使用解耦，降低使用者对代码的硬性能力要求，逐渐让行业内业务开发向低代码、无代码编程模式迈进。

将所述不同类型的组件安装进入目标项目中；

将所述组件字符串反序列化至JSON对象；

从所述JSON对象中解析出所有的组件对象；

初始化所述页面；

将所述组件对象挂载到对应的DOM元素上；

将所述组件对象编译成render函数的字符串形式；

将需要替换的DOM生成并替换，完成组件的改变及展示。

本申请实施例的基于组件化的代码生成方法可以提供一个基于组件化的前端可视化代码生成器，想要完成整个可视化代码生成器需要完成以下几个主要能力：

1.组件库(基础、功能、业务)

2.编辑器(组件属性配置、页面属性配置、拖拽组件、组件样式设置等)

3.JSON Schema

4.服务端保存及处理前端产生的JSON Schema

5.前端通过JSON Schema重新渲染结构化的组件及页面

(1)组件库搭建

组件库是整个设计的基础，将整个UI/UE的设计正确转化为可被复用的组件是一切的基础。组件库的设计又可以分为基础组件库、功能组件库、业务组件库。

a.基础组件库

基础组件库包含一些最为基础的组件，包含各种最为常用的组件，比如输入框类型组件、单选组件、多选组件、日期组件、时间组件、文件上传组件、日历组件、图片组件等。

b.功能组件库

功能组件库包含表单组件、表格组件、甘特图组件、地图组件、各种图表组件、树状图组件、级联选择器组件、段落组件、栅格布局组件等。

c.业务组件库

选择研究者组件、选择项目组件、选择中心组件、发起配人组件、SAE上报组件、任务组件等

最终通过打包工具如webpack、rollup、lerna等将组件打包成可被npm安装的依赖包。

(2)编辑器

编辑器的最主要的作用就是将已经制作好的组件进行集成展示，通过拖拽以及设置的方式进行样式、配置、动作、排版、引用对象、事件、触发条件、逻辑判断等。而最终可以通过编辑器生成对应的设置好的组件及页面的JSON Schema，并将JSON数据通过接口保存至后端数据库中。

本技术方案的结构包括组件库模型化、组件库结构抽象化、页面元素抽象化、页面结构数据化、后台数据持久化、数据反向读取后将组件重新实例化等一连串数据流变化，通过对基础组件的高度抽象、功能组件的功能完善、业务组件的业务逻辑丰富，并将组件通过可视化的方式控制所有组件在页面中的布局及样式，最终生成一个可以双向解析(即通过组件组合生成特定的JSON Schema以及通过对JSON Schema的反向解析生成对应页面组件)的能力进行页面渲染。

本技术采用Vue的前端框架的组件化思维，将组件对应的基础属性抽离为可配置化组件属性，例如id，componentKey，props，styles等，通过拖拽形式配置出页面或模板布局界面，将组件配置及其对应的数据存入后端，并最终在客户端上通过Vue框架中提供的动态component组件进行可视化渲染。

图3是根据本申请优选实施例的前端页面组件生成JSON Schema的示意图，如图3所示，本申请优选实施例可以根据不同功能，通过Vue.component注册不同的组件，并使用rollup打包工具将不同类型的组件打包；通过npm依赖，将不同类型的组件安装进入项目中；通过Vue.use(components)引入组件库中包含的组件；然后在页面的工具区展示组件列表；每个组件具有组件名(组件渲染所使用的唯一标识)、数据、属性、方法等，对应的组件名会生成同一种组件，组件通过传入不同的参数props，达到组件的数据传递、通过传入不同的styles，改变组件对应的样式、通过传入methods，绑定组件对应的方法，通过events绑定组件对应的事件。通过HTML draggable能力将组件拖拽进布局区域，形成组件的列表树结构；而整个页面可以通过树结构数据进行序列化(Serialization)转换成字符串，并通过http/https协议接口向后台将序列化后的组件字符串保存如后端。

图4是根据本申请优选实施例的基于组件化的前端可视化代码生成器的数据处理流程的示意图，如图4所示，通过拖拽选取组件，对组件进行组件布局、组件配置以及组件设置之后，生成组件JSON Schema，通过后端接口将其存储在后端服务器的数据库中。当页面渲染时，通过http/https协议接口从后台获取储存的页面序列化字符串，并反序列化至JSON对象；通过反序列化出的JSON对象，将解析后的JSON中的所有组件对象，通过循环遍历以及Vue的<component/>动态组件，渲染出布局以及对应的组件。

需要说明的是，本申请优选实施例使用前端框架：Vue2。

DOM是文档对象模型(Document Object Model)的简写，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

虚拟DOM并不是真正意义上的DOM，由于在浏览器中通过js来操作DOM的操作性能很差，为此虚拟DOM应运而生。

它作为一个轻量级的JavaScript对象，在状态发生变化时，会通过Diff运算，来更新发生变化的DOM，对于未发生变化的DOM节点，不予操作，而发生变化的DOM进行局部替换和更新。

由于不是全部重绘整个DOM树节点，大大提高更新渲染性能。在Vue2中，虚拟DOM就是通过一种VNode类表达，每个DOM元素或组件都对应一个VNode对象。

VNode包含以下节点:

componentOptions 创建组件实例时会用到的选项信息

content 编译作用域

children 子节点，VNode数组

child 当前节点对应的组件实例

elm 当前虚拟节点对应的真实的DOM节点

functionalContext 函数化组件的作用域

key 节点的key属性，用于作为节点的标识，有利于patch的优化

ns 节点的namespace空间域

text 节点的文本，通常出现在TextVNode对象中

parent 父节点

raw 原html内容

isStatic 静态节点的标识

isRootInset 是否作为根节点插入，被<transition>包裹的节点，该属性的值为false

isConment 当前节点是否是注释节点

isCloned 当前节点是否为克隆节点

isOnce 当前节点是否有v-once指令

每个组件的type是通过Vue.component方法，将对应组件进行全局注册

通过实例化每个组件，实例化组件的过程中会得到对应的

Vue整个渲染过程步骤如下：

1.new Vue()//初始化页面

2._init//Vue初始化私有方法，进行props,data,methods合并处理，执行相关初始化程序以等

3.$mount//挂在到对应的DOM元素上

4.compile//将组件模板编译成render函数的字符串形式

5.render通过组件唯一type识别到注册组件，会执行Vue的createElement函数，使组件实例化后变为VNode对象

6.Vue的_createElement私有方法会通过diff算法找出虚拟DOM的变更内容后，调用Vue.prototype._update私有方法进行虚拟DOM更新

7.vm.__patch__方法最终会调用DOM API的createElement方法，将vnode中的html内容转化为DOM后进行替换

8.最终将需要替换的DOM生成并替换，完成组件的改变及展示。

本申请根据不同端上的业务需要，引入不同类型组件，可直接拖拽或通过组件引用在实际项目中引入对应类型(基础、功能、业务)组件。最终组成一组、或树节点类型数据结构，保存每个引入组件的JSON Schema数据、最终获取正确配置以及层级化的页面及组件结构。以此来达到前端的整体可视化界面效果并辅助开发者降低在组件组合布局及页面制作中带来的重复开发消耗，并解决类似组件跨端、跨服务、跨平台的通用及复用能力，从而降低开发成本、降低复杂功能组件的重复开发和不一致。

本申请能够提高前端可视化开发方式，使得数字化临床研究应用开发的整体效率、可复用性、一致性、通用性提高，用于相对统一的流程化及模板化提供必要的基础技术支持，可支持任业务组件化配置、流程模板及配置、任务模板及配置、任务相关表单模板及配置等，直接有效的避免了不停的重复开发相同功能需求的代码、减轻了开发在多平台、多端的复杂团队合作开发下开发的组件及功能保持一致，并对后台数据对象的模型维护也会带来好处，各处使用的相同组件的相同数据模型。

需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本实施例提供了一种基于组件化的代码生成装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图5是根据本申请实施例的基于组件化的代码生成装置的结构框图，如图5所示，该装置包括：

显示单元51，用于在前端页面显示组件列表、目标区域，其中，所述组件列表中包括至少一个组件；

接收单元52，用于接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号；

响应单元53，用于响应所述目标信号在所述前端页面中显示所述页面对应的组件列表树结构；

生成单元54，用于通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中。

在其中一些实施例中，所述装置还包括：

获取单元，用于在通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中之后，在对所述页面进行渲染时，从所述后端服务器中获取所述组件字符串；

反序列化单元，用于将所述组件字符串反序列化至JSON对象；

解析单元，用于从所述JSON对象中解析出所有的组件对象；

渲染单元，用于通过Vue的动态组件在所述前端页面渲染出所有组件以及所有组件的布局。

在其中一些实施例中，所述渲染单元包括：

第一初始化模块，用于初始化所述页面；

第二初始化模块，用于Vue初始化私有方法，进行过程、数据、方法的合并处理，执行初始化程序；

挂载模块，用于将所述组件对象挂载到对应的DOM元素上；

编译模块，用于将所述组件对象编译成render函数的字符串形式；

识别模块，用于所述render函数通过组件唯一类型字段识别到注册组件，执行Vue的createElement函数，使所述组件对象实例化后变为虚拟VNode对象；

更新模块，用于Vue的_createElement私有方法通过diff算法找出虚拟DOM的变更内容后，调用Vue.prototype._update私有方法进行虚拟DOM更新；

替换模块，用于vm.__patch__方法最终会调用DOM API的createElement方法，将VNode对象中的html内容转化为DOM后进行替换；

展示模块，用于将需要替换的DOM生成并替换，完成组件的改变及展示。

需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。

实施例提供了一种计算机设备。结合本申请实施例基于组件化的代码生成方法可以由计算机设备来实现。图6为根据本申请实施例的计算机设备的硬件结构示意图。

计算机设备可以包括处理器61以及存储有计算机程序指令的存储器62。

具体地，上述处理器61可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器62可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器62可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器62可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器62可在数据处理装置的内部或外部。在特定实施例中，存储器62是非易失性(Non-Volatile)存储器。在特定实施例中，存储器62包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器62可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器61所执行的可能的计算机程序指令。

处理器61通过读取并执行存储器62中存储的计算机程序指令，以实现上述实施例中的任意一种基于组件化的代码生成方法。

在其中一些实施例中，计算机设备还可包括通信接口63和总线60。其中，如图6所示，处理器61、存储器62、通信接口63通过总线60连接并完成相互间的通信。

通信接口63用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。通信接口63还可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。

总线60包括硬件、软件或两者，将计算机设备的部件彼此耦接在一起。总线60包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(Control Bus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线60可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(Front Side Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线60可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

另外，结合上述实施例中的基于组件化的代码生成方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种基于组件化的代码生成方法。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims

1.一种基于组件化的代码生成方法，其特征在于，包括：

2.根据权利要求1所述的基于组件化的代码生成方法，其特征在于，在在前端页面显示组件列表、目标区域之前，所述方法还包括：

将所述不同类型的组件安装进入目标项目中；

3.根据权利要求1所述的基于组件化的代码生成方法，其特征在于，在接收将所述至少一个组件中的目标组件移动至所述目标区域触发生成的目标信号之后，所述方法还包括：

4.根据权利要求1至3中任一项所述的基于组件化的代码生成方法，其特征在于，在通过所述组件列表树结构进行序列化生成所述页面对应的组件字符串，并将所述组件字符串保存在后端服务器中之后，所述方法还包括：

将所述组件字符串反序列化至JSON对象；

从所述JSON对象中解析出所有的组件对象；

5.根据权利要求4所述的基于组件化的代码生成方法，其特征在于，通过Vue的动态组件在所述前端页面渲染出所有组件以及所有组件的布局包括：

初始化所述页面；

将所述组件对象挂载到对应的DOM元素上；

将所述组件对象编译成render函数的字符串形式；

将需要替换的DOM生成并替换，完成组件的改变及展示。

6.一种基于组件化的代码生成装置，其特征在于，包括：

7.根据权利要求6所述的基于组件化的代码生成装置，其特征在于，所述装置还包括：

8.根据权利要求6所述的基于组件化的代码生成装置，其特征在于，所述装置还包括：

9.一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5中任一项所述的基于组件化的代码生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至5中任一项所述的基于组件化的代码生成方法。