WO2022141724A1 - 基于 Vue 组件化的可视化配置渲染方法、系统、终端 - Google Patents

基于 Vue 组件化的可视化配置渲染方法、系统、终端 Download PDF

Info

Publication number
WO2022141724A1
WO2022141724A1 PCT/CN2021/074290 CN2021074290W WO2022141724A1 WO 2022141724 A1 WO2022141724 A1 WO 2022141724A1 CN 2021074290 W CN2021074290 W CN 2021074290W WO 2022141724 A1 WO2022141724 A1 WO 2022141724A1
Authority
WO
WIPO (PCT)
Prior art keywords
component
configuration
vue
area
rendering
Prior art date
Application number
PCT/CN2021/074290
Other languages
English (en)
French (fr)
Inventor
吴志雄
蒋亮亮
Original Assignee
南威软件股份有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 南威软件股份有限公司 filed Critical 南威软件股份有限公司
Publication of WO2022141724A1 publication Critical patent/WO2022141724A1/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons

Definitions

  • the invention belongs to the technical field of data analysis and processing, and in particular relates to a visual configuration rendering method, system and terminal based on Vue componentization.
  • the difficulty of solving the above problems and defects is as follows: (1) Under the infrastructure of MVVM mode, combined with the componentized development method, the visualization and attribute configuration area should be developed by combining templates, styles and behaviors into one component in a single-file component mode. .
  • the present invention provides a visual configuration rendering method, system and terminal based on Vue componentization.
  • a visual configuration rendering method based on Vue componentization includes the following steps: Step 1. Create a JS file for configuring the component mapping relationship, export a json object, and configure the mapping relationship of component names, map the name of the component to be developed in the form of the JS object Key Value to its visual area and attribute configuration area corresponding to the single-file component to be rendered.
  • the unified JS entry module name of the réelle file (that is, its constructor method name); Step 2, parse the configuration, provide unified rendering initialization of all components and filter module files, when dragging to the visualization area, get the corresponding name of the component, combined with the configuration of step 1 , get the name of its entry JS module, if the corresponding component name cannot get the entry module, or the placement position is not suitable (such as page exclusive component, top, bottom component), it will prompt the reason why the component is under construction or cannot be rendered. If the above conditions are met, the module name is instantiated, and the component parameters are passed; Step 3, when the module name exists or the rendering conditions are met, instantiate the externally provided constructor of the component.
  • the entry class of this component will introduce the module through require, introduce the component in the visual area and the corresponding .vue component in the property configuration area, and create a "child" in combination with Vue's global method extend base constructor. class"; Step 4.
  • the development of the single-file component corresponding to the visualization area and the property configuration area is mainly the development of the visual area of the component, including the development of operations such as view display, sorting, and deletion, and Develop the component attribute configuration area, including the development of view display and attribute configuration operations; step 5, by instantiating the entry class, calling its externally provided constructor, and introducing the two .vue single-file components introduced in step 3 in the constructor
  • the Vue subclass generated by the extend basic constructor is instantiated, mainly for the initialization of component data, the business interaction between the visualization area and the property configuration area, and the dynamic mounting of the component, that is, the rendering of the view; in step 5
  • a step, ie, step 6 can be added to realize the whole process of rendering and interaction of the visual configuration area and the attribute configuration area.
  • Step 6 By instantiating the entry class of the currently rendered component, after the two Vue instances corresponding to the visual configuration area and the property configuration area obtained in step 5, respectively pass the instance parameters required by the business into the constructor. It is used to realize the two-way binding between the data and the view of the components corresponding to the two areas, and the interaction between the two areas, and then empty mount through the $mount method of the current two component instances, and then use the $el property to get Go to the view that has bound data, and append it to the corresponding container; finally, the method of obtaining the configuration data object of the component is provided externally through the prototype method, which realizes the most important logic in visual configuration rendering, including data initialization and backfilling, Binding, interaction between the two areas, and finally the provision of configuration data for the component.
  • the visual configuration rendering system based on Vue componentization includes: a mapping relationship configuration module for configuring the mapping relationship of component names; a parsing module, The mapping relationship used to parse the configuration; the constructor module, which is used to instantiate the constructor of the component when the module name exists or meets the rendering conditions; the view rendering module, which is used to instantiate the constructor of the entry file, which will be introduced
  • the two réelle single-file components are instantiated through the Vue subclass generated by the extend basic constructor, initialize data, perform business interaction in the visualization area and property configuration area, and render the view of the component; the display module is used in the By instantiating the constructor of the entry file, the visual area of the corresponding component and the component corresponding to the property configuration area are dynamically mounted on the view for display, data initialization backfill, binding, interaction between the two areas, and external access through prototypes. This component configures the data object.
  • Another object of the present invention is to provide a computer device, the computer device includes a memory and a processor, the memory stores a computer program, and when the computer program is executed by the processor, the processor causes the processor to execute the program. Describe the visual configuration rendering method based on Vue componentization.
  • Another object of the present invention is to provide a computer-readable storage medium storing a computer program, which, when executed by a processor, causes the processor to execute the Vue componentization-based visual configuration rendering method.
  • Another object of the present invention is to provide an information data processing terminal, which is used for implementing the Vue component-based visual configuration rendering method.
  • the present invention not only solves the problem of poor code readability in traditional template engines or splicing HTML string rendering methods and affects the whole body at one stroke, but also can be very useful. It solves the problem of high coupling and improves the readability of the code; for developers, this method not only makes responsibilities clearer and facilitates collaboration, but also greatly improves development efficiency; for users, this method This way greatly improves the user experience.
  • the present invention utilizes the idea of single-file componentized development and dynamically mounts the Vue component instance to package the components that can be configured by dragging and dropping on the Web visual configuration page with the idea of componentization.
  • Each component includes the entry class file, the single-file component in the visual configuration area, and the single-file component in the property configuration area.
  • the entry class file is the core of the entire method, which implements the most important logic in visual configuration rendering, including data initialization backfill, binding, interaction between two areas, and finally the provision of configuration data for the component, a single file for two configuration areas
  • the main function of the component is the development of view display, sorting and deletion, and property configuration operations.
  • FIG. 1 is a flowchart of a visual configuration rendering method based on Vue componentization provided by an embodiment of the present invention.
  • FIG. 2 is a schematic diagram of a rendering process of visual configuration based on Vue componentization provided by an embodiment of the present invention.
  • the present invention provides a visual configuration rendering method based on Vue componentization.
  • the technical solutions of the present invention are described in detail below with reference to the accompanying drawings.
  • the visual configuration rendering method based on Vue componentization includes the following steps: S101, configure the mapping relationship of component names, map the name of the component to be developed in the form of JS object Key Value into Its visualization area and attribute configuration area correspond to the unified JS entry module name of the single-file component réelle file to be rendered; S102, parse the configuration, and when dragging it to the visualization area, obtain the name corresponding to the component, and combine with the configuration of step S101, Get the name of its entry JS module, if the corresponding component name or the entry module cannot be obtained or cannot meet the rendering requirements, it will prompt the reason why the component is under construction or cannot be rendered; if the above conditions are met, the module name will be instantiated , pass the component parameters; S103, instantiate the constructor of the component when the module name exists or meet the rendering conditions, firstly, the entry file will introduce the module through require, and the component will be placed in the visual area and attributes The matters components corresponding to the
  • the two Vue single-file components are instantiated through the Vue subclass generated by the extend basic constructor, mainly for data initialization, business interaction in the visualization area and property configuration area, and dynamic mounting of components, that is, the view.
  • the method provides a method to obtain the configuration data object of this component to the outside world.
  • FIG. 2 is a schematic diagram of a rendering process of visual configuration based on Vue componentization provided by an embodiment of the present invention.
  • the present invention provides a visual configuration rendering system based on Vue componentization.
  • the visual configuration rendering system based on Vue componentization includes: a mapping relationship configuration module for configuring the mapping relationship of component names; a parsing module for parsing the configuration Mapping relationship; constructor module, which is used to instantiate the constructor of the component when the module name exists or meets the rendering conditions; view rendering module, which is used to instantiate the constructor of the entry file, which will introduce two réelle singles.
  • the file component is instantiated through the Vue subclass generated by the extend basic constructor, initializes data, performs business interaction in the visualization area and property configuration area, and renders the view of the component; the display module is used to instantiate the entry file.
  • the constructor dynamically mounts the visual area of the corresponding component and the component corresponding to the attribute configuration area to the view for display, data initialization backfill, binding, interaction between the two areas, and provides access to the component configuration data object through the prototype method. .
  • the visual area of the corresponding component and the component corresponding to the property configuration area will be dynamically mounted on the view through the constructor of the instantiated entry file, and the data will be initialized, backfilled, and bound.
  • the interaction between the two areas, and the configuration data object of the component is provided externally through the prototype method, so that the visual area component and the property configuration area component have their own styles, elements and behaviors, and are decoupled from each other.
  • the developer needs to modify the style or The layout only needs to target the specified components, which standardizes the entire development process and greatly improves the development efficiency.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)
  • Processing Or Creating Images (AREA)

Abstract

一种基于Vue组件化的可视化配置渲染方法、系统、终端，属于数据分析处理技术领域。配置组件名的映射关系；解析配置；在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；可视化区域和属性配置区域对应的单文件组件的开发；进行数据的初始化，可视化区域和属性配置区域的业务交互以及将进行组件的动态挂载；数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。不仅解决了传统模板引擎或者拼接html字符串渲染方式代码可读性差，牵一发而动全身的问题，也解决了耦合度高的问题，提高了代码的可读性；还使开发人员职责更加清晰，大大提高了开发效率，提高了用户体验。

Description

基于Vue组件化的可视化配置渲染方法、系统、终端 技术领域
本发明属于数据分析处理技术领域，尤其涉及一种基于Vue组件化的可视化配置渲染方法、系统、终端。
 背景技术
目前，随着移动互联网的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对移动端的需求进行开发。在为了保证用户体验的同时，也需要提升开发效率，需要快速对项目做出相应，可视化构建的需求越来越被重视，只需要在页面进行拖拽需要的组件进行页面组装，即可在线构建APP。那么要实现，首先得提供配置所见即所得的Web页面功能。
但是，现在大家一直惯用的可视化配置，渲染对应组件的可视化区域以及属性配置区域的实现方法，就是通过纯模板引擎或者使用字符串直接拼接Html元素，然后将所有配置参数或者初始化数据拼接到字符串内，并追加到容器内，最后进行针对该DOM结构，进行事件的绑定。
从某种意义上来说，通过纯模板引擎或者使用字符串直接拼接Html元素，的确可以实现可视化配置的动态渲染，但这种方式存在三个问题：（1）目前前端组件化、工程化已是业界前端发展趋势，在前端组件化的架构下，使用传统模板引擎或者字符串直接拼接Html元素并针对最终生成的结果绑定事件的方式，并不符合其开发模式；（2）通过传统模板引擎或者拼接html字符串来进行可视化以及属性配置区域的渲染方式的代码可读性差，如果需要在可视化配置区域加该组件的展示样式，或者在属性配置区域添加配置，工作量比较大容易出问题；（3）通过传统模板引擎或者拼接html字符串来进行可视化以及属性配置区域的渲染方式每个组件代码间的耦合度大，并不能满足开发者自定义开发或者维护组件的需求，需要重新阅读整体代码。
通过上述分析，现有技术存在的问题及缺陷为：（1）使用传统模板引擎或者字符串直接拼接Html元素并针对最终生成的结果绑定事件的方式，并不符合其开发模式。
（2）通过传统模板引擎或者拼接html字符串来进行可视化以及属性配置区域的渲染方式的代码可读性差，如果需要在可视化配置区域加该组件的展示样式，或者在属性配置区域添加配置，工作量比较大容易出问题；每个组件代码间的耦合度大，并不能满足开发者自定义开发或者维护组件的需求，需要重新阅读整体代码。
解决以上问题及缺陷的难度为：（1）需在MVVM模式的基础架构下，结合组件化开发方式，将可视化以及属性配置区域以单文件组件方式将模板、样式以及行为结合到一个组件进行开发。
（1）需深入掌握组件的动态挂载方式，实现可视化区域组件以及属性配置组件的交互，并进行组件数据回填渲染。
解决以上问题及缺陷的意义为：解决传统模板引擎或者拼接html字符串渲染方式代码可读性差，牵一发而动全身的问题，也可以很好地解决耦合度高的问题，提高了代码的可读性。对开发人员来说，这种方式不仅使职责更加清晰，方便协作，而且也大大提高了开发效率。对于用户来说，这种方式大大地提高了用户体验。
 技术问题
针对现有技术存在的问题，本发明提供了一种基于Vue组件化的可视化配置渲染方法、系统、终端。
 技术解决方案
本发明是这样实现的，一种基于Vue组件化的可视化配置渲染方法，所述基于Vue组件化的可视化配置渲染方法包括以下步骤：步骤1、创建用来配置组件映射关系的JS文件，export一个json对象，并配置组件名的映射关系，通过JS对象Key Value的形式将要开发的组件的名称，映射成其可视化区域和属性配置区域对应要渲染的单文件组件.vue文件的统一JS入口模块名（也就是其构造函数方法名）；步骤2、解析配置，提供所有组件的统一渲染初始化以及过滤器模块文件，在拖拽到可视化区域的时候，取得该组件对应的名称，结合步骤1的配置，取到其入口JS模块名，如果对应的组件名称取不到入口模块、或者放置位置不合适（比如页面独占组件、置顶、置底组件），则提示该组件建设中或者渲染不了的原因。如果以上满足条件，则对该模块名进行实例化，将组件参数进行传递；步骤3、在模块名存在或者满足渲染条件的情况下，实例化该组件对外提供的构造函数。首先，在此组件的入口类会通过require引入模块的方式，将该组件在可视化区域和属性配置区域对应的.vue组件分别引入，并结合Vue的全局方法extend基础构造器，分别创建一个“子类”；步骤4、以Vue组件开发的方式，针对可视化区域和属性配置区域对应的单文件组件的开发，主要是对该组件可视化区域开发，包括视图展示、排序以及删除等操作的开发，和对组件属性配置区域开发，包括视图展示、属性配置操作的开发；步骤5、通过实例化入口类，调用其对外提供的构造函数，在构造函数内将步骤3引入的两个.vue单文件组件通过extend基础构造器生成的Vue子类，进行实例化，主要进行组件数据的初始化，可视化区域和属性配置区域的业务交互以及将进行组件的动态挂载，也就是进行视图的渲染；在步骤5的基础上还可以增加一步骤，即步骤6，以实现可视化配置区域和属性配置区域的渲染和交互全过程。
步骤6、通过实例化当前讲渲染的组件的入口类，在步骤5拿到的可视化配置区域和属性配置区域对应的两个Vue实例后，分别将业务需要的实例参数传入构造函数内，主要用来实现两个区域对应组件的数据与视图的双向绑定，和两个区域间的交互，然后通过当前两个组件实例的$mount方法分别进行空挂载，紧接着通过其$el属性拿到已经绑定了数据的视图，进行追加到对应容器内；最后通过原型方式向外提供获取该组件配置数据对象的方法，这样就实现了可视化配置渲染中最重要的逻辑，包括数据初始化回填、绑定、两个区域间的交互以及最后该组件配置数据的提供。
本发明的另一目的在于提供一种基于Vue组件化的可视化配置渲染系统，所述基于Vue组件化的可视化配置渲染系统包括：映射关系配置模块，用于配置组件名的映射关系；解析模块，用于解析配置的映射关系；构造函数模块，用于在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；视图渲染模块，用于通过实例化入口文件的构造函数，将引入的两个vue单文件组件通过extend基础构造器生成的Vue子类，进行实例化，进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染；展示模块，用于在通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。
本发明的另一目的在于提供一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行所述基于Vue组件化的可视化配置渲染方法。
本发明的另一目的在于提供一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行所述基于Vue组件化的可视化配置渲染方法。
本发明的另一目的在于提供一种信息数据处理终端，所述信息数据处理终端用于实现所述基于Vue组件化的可视化配置渲染方法。
 有益效果
结合上述的所有技术方案，本发明所具备的优点及积极效果为：本发明不仅解决了传统模板引擎或者拼接html字符串渲染方式代码可读性差，牵一发而动全身的问题，也可以很好地解决耦合度高的问题，提高了代码的可读性；对开发人员来说，这种方式不仅使职责更加清晰，方便协作，而且也大大提高了开发效率；对于用户来说，这种方式大大地提高了用户体验。
本发明在组件化开发的架构下，利用单文件组件化开发的思路，以Vue组件实例动态挂载的方式，将Web可视化配置页面上面可以拖拽配置的组件，以组件化思想进行包装，每个组件包括入口类文件、可视化配置区域的单文件组件、属性配置区域的单文件组件三个部分。入口类文件是整个方法的核心，实现了可视化配置渲染中最重要的逻辑，包括数据初始化回填、绑定、两个区域间的交互以及最后该组件配置数据的提供，两个配置区域的单文件组件主要功能是视图展示、排序以及删除、和属性配置操作的开发。
 附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图做简单的介绍，显而易见地，下面所描述的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的基于Vue组件化的可视化配置渲染方法流程图。
图2是本发明实施例提供的基于Vue组件化的可视化配置渲染流程示意图。
 本发明的实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
针对现有技术存在的问题，本发明提供了一种基于Vue组件化的可视化配置渲染方法，下面结合附图对本发明技术方案作详细的描述。
如图1所示，本发明实施例提供的基于Vue组件化的可视化配置渲染方法包括以下步骤：S101，配置组件名的映射关系，通过JS对象Key Value的形式将要开发的组件的名称，映射成其可视化区域和属性配置区域对应要渲染的单文件组件vue文件的统一JS入口模块名；S102，解析配置，在拖拽到可视化区域的时候，取得该组件对应的名称，结合步骤S101的配置，取到其入口JS模块名，如果对应的组件名称或者取不到入口模块或者满足不了渲染要求，则提示该组件建设中或者渲染不了的原因；如果以上满足条件，则对该模块名进行实例化，将组件参数进行传递；S103，在模块名存在或者满足渲染条件的情况下实例化了该组件的构造函数，首先在此入口文件会通过require引入模块的方式，将该组件在可视化区域和属性配置区域对应的vue组件分别引入，并结合Vue的全局方法extend基础构造器，创建一个“子类”；S104，以Vue组件开发的方式，针对可视化区域和属性配置区域对应的单文件组件的开发，主要是对该组件可视化区域视图展示、排序以及删除等操作的开发，和对组件属性配置区域视图展示、属性配置操作的开发；S105，通过实例化入口文件的构造函数，将步骤S103引入的两个vue单文件组件通过extend基础构造器生成的Vue子类，进行实例化，主要进行数据的初始化，可视化区域和属性配置区域的业务交互以及将进行组件的动态挂载，也就是进行视图的渲染；S106：在通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象的方法。
图2是本发明实施例提供的基于Vue组件化的可视化配置渲染流程示意图。
本发明提供一种基于Vue组件化的可视化配置渲染系统，所述基于Vue组件化的可视化配置渲染系统包括：映射关系配置模块，用于配置组件名的映射关系；解析模块，用于解析配置的映射关系；构造函数模块，用于在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；视图渲染模块，用于通过实例化入口文件的构造函数，将引入的两个vue单文件组件通过extend基础构造器生成的Vue子类，进行实例化，进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染；展示模块，用于在通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。
目前通过实例化Vue单文件组件构造函数，并通过动态挂载的方式渲染到指定视图的方式，在组件化开发中得到的广泛的应用，包括弹框提示，吐司提示等需要动态生成结构的需求中，在可视化配置中，结合组件动态挂载，将通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象，这样可视化区域组件和属性配置区域组件都有所属的样式、元素以及行为，互相解耦，开发者需要修改样式或者布局只需针对指定组件，规范了整个开发流程，大大提高了开发效率。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，都应涵盖在本发明的保护范围之内。

Claims (10)

  1. 一种基于Vue组件化的可视化配置渲染方法，其特征在于,所述基于Vue组件化的可视化配置渲染方法包括：
    配置组件名的映射关系；
    解析配置的映射关系；
    在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；
    通过实例化入口文件的构造函数，将引入的两个vue单文件组件通过extend基础构造器生成的Vue子类，进行实例化，进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染。
  2. 如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述配置组件名的映射关系具体包括：
    通过JS对象Key Value的形式将要开发的组件的名称，映射成其可视化区域和属性配置区域对应要渲染的单文件组件vue文件的统一JS入口模块名。
  3. 如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述解析配置的映射关系包括：
    在拖拽到可视化区域的时，取得该组件对应的名称，结合配置的映射关系，取到其入口JS模块名，如果对应的组件名称或者取不到入口模块或者满足不了渲染要求，则提示该组件建设中或者渲染不了的原因；如果以上满足条件，则对该模块名进行实例化，将组件参数进行传递。
  4. 如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数包括：
    在入口文件通过require引入模块的方式，将该组件在可视化区域和属性配置区域对应的vue组件分别引入，并结合Vue的全局方法extend基础构造器，创建 “子类”。
  5. 如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述通过实例化入口文件的构造函数前，需进行：
    对Vue组件可视化区域视图展示、排序以及删除操作，和对组件属性配置区域视图展示、属性配置操作。
  6. 如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染后，还需进行：
    在通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。
  7. 一种基于Vue组件化的可视化配置渲染系统，其特征在于，所述基于Vue组件化的可视化配置渲染系统包括：
    映射关系配置模块，用于配置组件名的映射关系；
    解析模块，用于解析配置的映射关系；
    构造函数模块，用于在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；
    视图渲染模块，用于通过实例化入口文件的构造函数，将引入的两个vue单文件组件通过extend基础构造器生成的Vue子类，进行实例化，进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染；
    展示模块，用于在通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。
  8. 一种计算机设备，其特征在于，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行权利要求1~6任意一项所述基于Vue组件化的可视化配置渲染方法。
  9. 一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行权利要求1~6任意一项所述基于Vue组件化的可视化配置渲染方法。
  10. 一种信息数据处理终端，其特征在于，所述信息数据处理终端用于实现权利要求1~6任意一项所述基于Vue组件化的可视化配置渲染方法。
PCT/CN2021/074290 2020-12-31 2021-01-29 基于 Vue 组件化的可视化配置渲染方法、系统、终端 WO2022141724A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011634110.5 2020-12-31
CN202011634110.5A CN112711408A (zh) 2020-12-31 2020-12-31 基于Vue组件化的可视化配置渲染方法、系统、终端

Publications (1)

Publication Number Publication Date
WO2022141724A1 true WO2022141724A1 (zh) 2022-07-07

Family

ID=75547808

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/074290 WO2022141724A1 (zh) 2020-12-31 2021-01-29 基于 Vue 组件化的可视化配置渲染方法、系统、终端

Country Status (2)

Country Link
CN (1) CN112711408A (zh)
WO (1) WO2022141724A1 (zh)

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114995817A (zh) * 2022-08-03 2022-09-02 杭州乾冠数字物联技术有限公司 基于Vuex的web页面大屏数据处理方法
CN115344243A (zh) * 2022-10-17 2022-11-15 中邮消费金融有限公司 一种x6流程图的组件封装方法及系统
CN115586896A (zh) * 2022-09-29 2023-01-10 通号智慧城市研究设计院有限公司 基于模板引擎的页面项目开发方法、设备及存储介质
CN117193766A (zh) * 2023-08-22 2023-12-08 西安博达软件股份有限公司 基于配置项动态加载融媒体表单页面的方法及系统
CN117453776A (zh) * 2023-10-26 2024-01-26 中国电子科技集团公司第十五研究所 海量数据的可视化显示方法、装置、计算机设备和介质
CN117573121A (zh) * 2023-11-20 2024-02-20 中国人寿保险股份有限公司上海数据中心 一种图形化自定义的保险单证模板生成方法
CN117591117A (zh) * 2024-01-19 2024-02-23 中建三局信息科技有限公司 页面生成方法、系统、设备及存储介质
CN117931164A (zh) * 2023-12-27 2024-04-26 北京鸿鹄元数科技有限公司 基于低代码的表单应用设计方法及系统
CN118363578A (zh) * 2024-06-19 2024-07-19 杭州全速网络技术有限公司 基于Vue的动态表单渲染系统及方法

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113190776B (zh) * 2021-05-11 2022-11-01 上海哔哩哔哩科技有限公司 弹窗展示方法与系统
CN113590110A (zh) * 2021-07-16 2021-11-02 山东派盟网络科技有限公司 一种框架搭建方法、装置以及设备
CN113835701B (zh) * 2021-09-22 2024-04-02 上海妙一生物科技有限公司 一种基于组件化的代码生成方法和装置
CN116009863B (zh) * 2022-12-30 2024-01-19 中电金信软件有限公司 前端页面渲染方法、设备及存储介质
CN115809060B (zh) * 2023-01-28 2023-05-23 北京蓝色星际科技股份有限公司 一种Openlayers地图构建方法、装置及电子设备

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200053091A1 (en) * 2018-08-13 2020-02-13 Capital One Services, Llc Systems and methods for dynamic granular access permissions
US20200133645A1 (en) * 2018-10-30 2020-04-30 Jpmorgan Chase Bank, N.A. User interface and front end application automatic generation
CN111240659A (zh) * 2019-12-23 2020-06-05 福建亿能达信息技术股份有限公司 一种基于Vue的页面设计方法
CN111813403A (zh) * 2020-07-09 2020-10-23 北京亚鸿世纪科技发展有限公司 大屏数据可视化开发中拖拽组件数据管理的方法和装置
CN111966336A (zh) * 2020-07-24 2020-11-20 苏州浪潮智能科技有限公司 一种基于vue与可视化图形操作的页面生成方法及装置
CN112130856A (zh) * 2020-09-29 2020-12-25 重庆紫光华山智安科技有限公司 强扩展性的前端可视化界面生成方法、系统、介质及终端

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109271149B (zh) * 2018-09-29 2021-04-27 四川长虹电器股份有限公司 一种架构单页应用程序的方法
CN109522075A (zh) * 2018-11-09 2019-03-26 医渡云（北京）技术有限公司 数据可视化展示方法、装置、电子设备及计算机可读介质
CN111258675A (zh) * 2020-01-15 2020-06-09 平安银行股份有限公司 共享前端组件的渲染方法、装置、设备及存储介质
CN112083966B (zh) * 2020-08-14 2024-02-27 杭州当虹科技股份有限公司 一种加载远程vue组件的方法

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200053091A1 (en) * 2018-08-13 2020-02-13 Capital One Services, Llc Systems and methods for dynamic granular access permissions
US20200133645A1 (en) * 2018-10-30 2020-04-30 Jpmorgan Chase Bank, N.A. User interface and front end application automatic generation
CN111240659A (zh) * 2019-12-23 2020-06-05 福建亿能达信息技术股份有限公司 一种基于Vue的页面设计方法
CN111813403A (zh) * 2020-07-09 2020-10-23 北京亚鸿世纪科技发展有限公司 大屏数据可视化开发中拖拽组件数据管理的方法和装置
CN111966336A (zh) * 2020-07-24 2020-11-20 苏州浪潮智能科技有限公司 一种基于vue与可视化图形操作的页面生成方法及装置
CN112130856A (zh) * 2020-09-29 2020-12-25 重庆紫光华山智安科技有限公司 强扩展性的前端可视化界面生成方法、系统、介质及终端

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114995817A (zh) * 2022-08-03 2022-09-02 杭州乾冠数字物联技术有限公司 基于Vuex的web页面大屏数据处理方法
CN115586896A (zh) * 2022-09-29 2023-01-10 通号智慧城市研究设计院有限公司 基于模板引擎的页面项目开发方法、设备及存储介质
CN115586896B (zh) * 2022-09-29 2023-08-04 通号智慧城市研究设计院有限公司 基于模板引擎的页面项目开发方法、设备及存储介质
CN115344243A (zh) * 2022-10-17 2022-11-15 中邮消费金融有限公司 一种x6流程图的组件封装方法及系统
CN117193766A (zh) * 2023-08-22 2023-12-08 西安博达软件股份有限公司 基于配置项动态加载融媒体表单页面的方法及系统
CN117453776A (zh) * 2023-10-26 2024-01-26 中国电子科技集团公司第十五研究所 海量数据的可视化显示方法、装置、计算机设备和介质
CN117573121A (zh) * 2023-11-20 2024-02-20 中国人寿保险股份有限公司上海数据中心 一种图形化自定义的保险单证模板生成方法
CN117573121B (zh) * 2023-11-20 2024-05-17 中国人寿保险股份有限公司上海数据中心 一种图形化自定义的保险单证模板生成方法
CN117931164A (zh) * 2023-12-27 2024-04-26 北京鸿鹄元数科技有限公司 基于低代码的表单应用设计方法及系统
CN117591117A (zh) * 2024-01-19 2024-02-23 中建三局信息科技有限公司 页面生成方法、系统、设备及存储介质
CN117591117B (zh) * 2024-01-19 2024-04-23 中建三局信息科技有限公司 页面生成方法、系统、设备及存储介质
CN118363578A (zh) * 2024-06-19 2024-07-19 杭州全速网络技术有限公司 基于Vue的动态表单渲染系统及方法

Also Published As

Publication number Publication date
CN112711408A (zh) 2021-04-27

Similar Documents

Publication Publication Date Title
WO2022141724A1 (zh) 基于 Vue 组件化的可视化配置渲染方法、系统、终端
CN110825362B (zh) 低代码应用软件开发系统及方法
CN110020307B (zh) 一种客户端视图的绘制方法和装置
KR101120815B1 (ko) 완전한 유연성을 가진 자동화에 기초하여 사용자인터페이스를 생성하는 방법 및 장치
JP4812337B2 (ja) フォームタイプを使用してフォームを生成する方法および装置
US8966456B2 (en) System and method for providing and using meta-data in a dynamically typed array-based language
US20070276689A1 (en) Workflow data binding
WO2010091623A1 (zh) 应用程序界面动态生成装置及方法
CN103383645A (zh) 代码生成方法及系统
CN113064593A (zh) 移动app动态化的方法、装置、计算机设备及存储介质
Barua et al. Mobile Applications Development: With Python in Kivy Framework
US7984416B2 (en) System and method for providing class definitions in a dynamically typed array-based language
Bokowski Coffeestrainer: Statically-checked constraints on the definition and use of types in java
Hölscher et al. On translating UML models into graph transformation systems
WO2023160367A1 (zh) 一种数据流转方法和系统
CN109597611B (zh) 前端数据流控制组件开发系统、方法、设备及存储介质
Palumbo The Flutter framework: Analysis in a mobile enterprise environment
US8949774B2 (en) Generated object model for test automation
Trivedi User interface implementation of environmental data integration system with React
Sterkin State-oriented programming
Selonen et al. Towards the unification of patterns and profiles in UML
Monteiro et al. GUI GENERATION BASED ON LANGUAGE EXTENSIONS-A Model to Generate GUI, based on Source Code with Custom Attributes
Zhai et al. MobiMVL: A Model-Driven Mobile Application Development Approach for End-Users
CN116893817A (zh) 一种组件库构建方法、装置、设备及可读存储介质
CN114371842A (zh) 基于mvvm框架的应用快速搭建方法及计算机设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21912504

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 21912504

Country of ref document: EP

Kind code of ref document: A1