CN117667059A - 一种基于TypeScript实现Vue组件动态构建设计方法 - Google Patents
一种基于TypeScript实现Vue组件动态构建设计方法 Download PDFInfo
- Publication number
- CN117667059A CN117667059A CN202311736240.3A CN202311736240A CN117667059A CN 117667059 A CN117667059 A CN 117667059A CN 202311736240 A CN202311736240 A CN 202311736240A CN 117667059 A CN117667059 A CN 117667059A
- Authority
- CN
- China
- Prior art keywords
- component
- components
- setting
- page
- class
- Prior art date
- Legal status (The legal status 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 status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 112
- 238000013461 design Methods 0.000 title claims abstract description 24
- 238000010276 construction Methods 0.000 title claims abstract description 15
- 230000000007 visual effect Effects 0.000 claims abstract description 17
- 230000008676 import Effects 0.000 claims abstract description 7
- 238000009877 rendering Methods 0.000 claims description 21
- 230000003993 interaction Effects 0.000 claims description 15
- 238000012800 visualization Methods 0.000 claims description 6
- 230000008859 change Effects 0.000 claims description 4
- 230000008569 process Effects 0.000 claims description 4
- 230000006378 damage Effects 0.000 claims description 3
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- 230000000694 effects Effects 0.000 claims description 3
- 238000011423 initialization method Methods 0.000 claims description 3
- 238000012545 processing Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 7
- 230000009286 beneficial effect Effects 0.000 abstract description 3
- 238000007726 management method Methods 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种基于TypeScript实现Vue组件动态构建设计方法，包括如下步骤：S1：创建组件抽象类加载器：包含获取类型方法、设置类型方法和导入类型方法；S2：创建全局类管理器：包括继承抽象类加载器、设置基础类型对象和设置全局类管理器初始化事件；S3：创建类加载器管理器：包括设置类加载器管理启动事件、设置按顺序从类加载器获取类事件、设置增加类加载器事件、注册全局和获取类信息。本发明通过拖拉拽的方式并结合少量编码能力组合组件实现页面，同时不断沉淀高级组件以面对更多的需求迭代，从而有利于开发人员上手、非开发人员也可以配置自己想要的页面，将复杂的代码通过可视化的方式展现，让开发变得更加简单。
Description
技术领域
本发明涉及计算机技术领域，具体为一种基于TypeScript实现Vue组件动态构建设计方法。
背景技术
随着互联网行业的发展，前端的页面开发的需求量也越来越多，需求的变更也相对频繁，当企业需要开发一个系统时，可能存在开发人员不足、人员能力一般、交付时间短等情况，在开发时如何在短时间内快速地构建页面，减少大量代码的本发明涉及计算机技术领域，具体为一种基于TypeScript实现Vue组件动态构建设计方法。
改写操作，减少人力成本，提高工作效率已成为我们当前需要挑战的难题。
发明内容
本发明的目的在于提供一种基于TypeScript实现Vue组件动态构建设计方法，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种基于TypeScript实现Vue组件动态构建设计方法，包括如下步骤：
S1：创建组件抽象类加载器：包含获取类型方法、设置类型方法和导入类型方法；
S2：创建全局类管理器：包括继承抽象类加载器、设置基础类型对象和设置全局类管理器初始化事件；
S3：创建类加载器管理器：包括设置类加载器管理启动事件、设置按顺序从类加载器获取类事件、设置增加类加载器事件、注册全局和获取类信息；
S4：创建抽象插件：包括插件ID、插件变量名称、权限字段、插槽名称、中文别名、自定义事件方法字段、自定义属性方法字段、组件需要用到的导入列表字段、帮助文档说明字段、组件的子组件列表集合字段、获取/设置变量名称方法、获取/设置权限字段方法和渲染方法代码；
S5：创建抽象可视/不可视组件：包括抽象可视组件包含是否是可视组件字段、是否隐藏组件、组件样式字段、是否展示节点字段、属性数据字段和渲染方法；
S6：创建可视化容器组件抽象类：包括只允许接收组件类型字段、不接收其他组件字段和开启接收其他组件字段；
S7：创建组件抽象类：包括继承抽象可视组件或者抽象不可视组件、声明组件的类型、声明组件的生命周期、声明组件的自定义属性、设置组件自定义方法、设置组件的预设方法和设置预设方法函数体；
S8：创建组件实体类：包括继承组件抽象类、设置初始化方法、设置辅助事件、获取抽象类属性进行初始化、重写组件渲染的render方法和renderDesigner方法；
S9：创建组件属性设置面板文件：包括增加组件的各个属性设置功能、组件方法编辑功能、组件交互事件设置功能、调用全局监听器和在数据发生变化时周知组件；
S10：创建组件的注册信息文件：包括设置组件的类名、中文名、类型图标、组件是否展示和展示在第几个菜单信息；
S11：拖拽生成组件实例：在页面可视化配置中的组件菜单面板中看到新增的组件，并拖拽组件到设计面板中；
S12：组件渲染：根据步骤S8创建出来的组件实例的renderDesigner方法渲染到设计面板上，选中组件进行拖拽，改变组件在画板上的位置，并根据画布工具，对组件进行上移动、下移动、删除和复制行为；
S13：属性配置：选中设计器中的当前组件，打开属性面板，显示组件的属性配置面板，并自定义属性信息、自定义组件方法内容并同步渲染到设计器中；
S14：接口请求设置：拖拽一个数据源组件至画布中，根据需求配置数据源组件，配置后的数据源组件进行相应的接口请求，并设置请求拦截器，对接口请求进行拦截；
S15：组件组合：根据业务需求拖拽对应的组件到设计面板中，根据布局组件，将业务需求的组件拖拽到布局组件中，自定义组件摆放位置，并根据每个组件的交互事件关联组件之间的联动效果以及数据交互处理；
S16：页面全局类型设置：在画布上选择页面选项，配置页面全局样式、全局变量和全局自定义方法，并设置页面交互事件；
S17：生成页面：组件都配置好后点击页面保存，调用当前页面所有组件的实体类的render方法，返回运行时执行html字符串，并存储页面配置到数据库，下次打开页面则根据页面的配置渲染所有的组件。
优选的，所述步骤S5中的渲染方法默认返回空字符串。
优选的，所述步骤S7中的函数体为字符串类型。
优选的，所述步骤S8中的render方法返回组件执行的html文本为运行时使用，renderDesigner返回的组件执行的html文本为配置时使用，且renderDesigner包括一些拖拽标签，并执行html文本使用element UI组件库。
优选的，所述步骤S14中的数据源组件支持sql类型、事物流类型、微服务类型和通用api类型。
优选的，所述步骤S14中设置预设信息或者对data进行处理，包含请求前拦截器、请求后拦截器和超时拦截器。
优选的，所述步骤S16中的页面交互事件包括页面创建事件、页面加载事件和页面销毁事件。
与现有技术相比，本发明的有益效果如下：
本发明通过拖拉拽的方式并结合少量编码能力组合组件实现页面，同时不断沉淀高级组件以面对更多的需求迭代，从而有利于开发人员上手、非开发人员也可以配置自己想要的页面，将复杂的代码通过可视化的方式展现，让开发变得更加简单。
附图说明
图1为本发明流程示意图。
实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1，一种基于TypeScript实现Vue组件动态构建设计方法，包括如下步骤：
S1：创建组件抽象类加载器：包含获取类型方法、设置类型方法和导入类型方法；
S2：创建全局类管理器：包括继承抽象类加载器、设置基础类型对象和设置全局类管理器初始化事件；
S3：创建类加载器管理器：包括设置类加载器管理启动事件、设置按顺序从类加载器获取类事件、设置增加类加载器事件、注册全局和获取类信息；
S4：创建抽象插件：包括插件ID、插件变量名称、权限字段、插槽名称、中文别名、自定义事件方法字段、自定义属性方法字段、组件需要用到的导入列表字段、帮助文档说明字段、组件的子组件列表集合字段、获取/设置变量名称方法、获取/设置权限字段方法和渲染方法代码；
S5：创建抽象可视/不可视组件：包括抽象可视组件包含是否是可视组件字段、是否隐藏组件、组件样式字段、是否展示节点字段、属性数据字段和渲染方法；
S6：创建可视化容器组件抽象类：包括只允许接收组件类型字段、不接收其他组件字段和开启接收其他组件字段；
S7：创建组件抽象类：包括继承抽象可视组件或者抽象不可视组件、声明组件的类型、声明组件的生命周期、声明组件的自定义属性、设置组件自定义方法、设置组件的预设方法和设置预设方法函数体；
S8：创建组件实体类：包括继承组件抽象类、设置初始化方法、设置辅助事件、获取抽象类属性进行初始化、重写组件渲染的render方法和renderDesigner方法；
S9：创建组件属性设置面板文件：包括增加组件的各个属性设置功能、组件方法编辑功能、组件交互事件设置功能、调用全局监听器和在数据发生变化时周知组件；
S10：创建组件的注册信息文件：包括设置组件的类名、中文名、类型图标、组件是否展示和展示在第几个菜单信息；
S11：拖拽生成组件实例：在页面可视化配置中的组件菜单面板中看到新增的组件，并拖拽组件到设计面板中；
S12：组件渲染：根据步骤S8创建出来的组件实例的renderDesigner方法渲染到设计面板上，选中组件进行拖拽，改变组件在画板上的位置，并根据画布工具，对组件进行上移动、下移动、删除和复制行为；
S13：属性配置：选中设计器中的当前组件，打开属性面板，显示组件的属性配置面板，并自定义属性信息、自定义组件方法内容并同步渲染到设计器中；
S14：接口请求设置：拖拽一个数据源组件至画布中，根据需求配置数据源组件，配置后的数据源组件进行相应的接口请求，并设置请求拦截器，对接口请求进行拦截；
S15：组件组合：根据业务需求拖拽对应的组件到设计面板中，根据布局组件，将业务需求的组件拖拽到布局组件中，自定义组件摆放位置，并根据每个组件的交互事件关联组件之间的联动效果以及数据交互处理；
S16：页面全局类型设置：在画布上选择页面选项，配置页面全局样式、全局变量和全局自定义方法，并设置页面交互事件；
S17：生成页面：组件都配置好后点击页面保存，调用当前页面所有组件的实体类的render方法，返回运行时执行html字符串，并存储页面配置到数据库，下次打开页面则根据页面的配置渲染所有的组件。
步骤S5中的渲染方法默认返回空字符串。
步骤S7中的函数体为字符串类型。
步骤S8中的render方法返回组件执行的html文本为运行时使用，renderDesigner返回的组件执行的html文本为配置时使用，且renderDesigner包括一些拖拽标签，并执行html文本使用element UI组件库。
步骤S14中的数据源组件支持sql类型、事物流类型、微服务类型和通用api类型。
步骤S14中设置预设信息或者对data进行处理，包含请求前拦截器、请求后拦截器和超时拦截器。
步骤S16中的页面交互事件包括页面创建事件、页面加载事件和页面销毁事件。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (7)
1.一种基于TypeScript实现Vue组件动态构建设计方法，其特征在于：包括如下步骤：
S1：创建组件抽象类加载器：包含获取类型方法、设置类型方法和导入类型方法；
S2：创建全局类管理器：包括继承抽象类加载器、设置基础类型对象和设置全局类管理器初始化事件；
S3：创建类加载器管理器：包括设置类加载器管理启动事件、设置按顺序从类加载器获取类事件、设置增加类加载器事件、注册全局和获取类信息；
S4：创建抽象插件：包括插件ID、插件变量名称、权限字段、插槽名称、中文别名、自定义事件方法字段、自定义属性方法字段、组件需要用到的导入列表字段、帮助文档说明字段、组件的子组件列表集合字段、获取/设置变量名称方法、获取/设置权限字段方法和渲染方法代码；
S5：创建抽象可视/不可视组件：包括抽象可视组件包含是否是可视组件字段、是否隐藏组件、组件样式字段、是否展示节点字段、属性数据字段和渲染方法；
S6：创建可视化容器组件抽象类：包括只允许接收组件类型字段、不接收其他组件字段和开启接收其他组件字段；
S7：创建组件抽象类：包括继承抽象可视组件或者抽象不可视组件、声明组件的类型、声明组件的生命周期、声明组件的自定义属性、设置组件自定义方法、设置组件的预设方法和设置预设方法函数体；
S8：创建组件实体类：包括继承组件抽象类、设置初始化方法、设置辅助事件、获取抽象类属性进行初始化、重写组件渲染的render方法和renderDesigner方法；
S9：创建组件属性设置面板文件：包括增加组件的各个属性设置功能、组件方法编辑功能、组件交互事件设置功能、调用全局监听器和在数据发生变化时周知组件；
S10：创建组件的注册信息文件：包括设置组件的类名、中文名、类型图标、组件是否展示和展示在第几个菜单信息；
S11：拖拽生成组件实例：在页面可视化配置中的组件菜单面板中看到新增的组件，并拖拽组件到设计面板中；
S12：组件渲染：根据步骤S8创建出来的组件实例的renderDesigner方法渲染到设计面板上，选中组件进行拖拽，改变组件在画板上的位置，并根据画布工具，对组件进行上移动、下移动、删除和复制行为；
S13：属性配置：选中设计器中的当前组件，打开属性面板，显示组件的属性配置面板，并自定义属性信息、自定义组件方法内容并同步渲染到设计器中；
S14：接口请求设置：拖拽一个数据源组件至画布中，根据需求配置数据源组件，配置后的数据源组件进行相应的接口请求，并设置请求拦截器，对接口请求进行拦截；
S15：组件组合：根据业务需求拖拽对应的组件到设计面板中，根据布局组件，将业务需求的组件拖拽到布局组件中，自定义组件摆放位置，并根据每个组件的交互事件关联组件之间的联动效果以及数据交互处理；
S16：页面全局类型设置：在画布上选择页面选项，配置页面全局样式、全局变量和全局自定义方法，并设置页面交互事件；
S17：生成页面：组件都配置好后点击页面保存，调用当前页面所有组件的实体类的render方法，返回运行时执行html字符串，并存储页面配置到数据库，下次打开页面则根据页面的配置渲染所有的组件。
2.根据权利要求1所述的一种基于TypeScript实现Vue组件动态构建设计方法，其特征在于：所述步骤S5中的渲染方法默认返回空字符串。
3.根据权利要求1所述的一种基于TypeScript实现Vue组件动态构建设计方法，其特征在于：所述步骤S7中的函数体为字符串类型。
4.根据权利要求1所述的一种基于TypeScript实现Vue组件动态构建设计方法，其特征在于：所述步骤S8中的render方法返回组件执行的html文本为运行时使用，renderDesigner返回的组件执行的html文本为配置时使用，且renderDesigner包括一些拖拽标签，并执行html文本使用element UI组件库。
5.根据权利要求1所述的一种基于TypeScript实现Vue组件动态构建设计方法，其特征在于：所述步骤S14中的数据源组件支持sql类型、事物流类型、微服务类型和通用api类型。
6.根据权利要求1所述的一种基于TypeScript实现Vue组件动态构建设计方法，其特征在于：所述步骤S14中设置预设信息或者对data进行处理，包含请求前拦截器、请求后拦截器和超时拦截器。
7.根据权利要求1所述的一种基于TypeScript实现Vue组件动态构建设计方法，其特征在于：所述步骤S16中的页面交互事件包括页面创建事件、页面加载事件和页面销毁事件。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311736240.3A CN117667059A (zh) | 2023-12-18 | 2023-12-18 | 一种基于TypeScript实现Vue组件动态构建设计方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311736240.3A CN117667059A (zh) | 2023-12-18 | 2023-12-18 | 一种基于TypeScript实现Vue组件动态构建设计方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117667059A true CN117667059A (zh) | 2024-03-08 |
Family
ID=90069628
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311736240.3A Pending CN117667059A (zh) | 2023-12-18 | 2023-12-18 | 一种基于TypeScript实现Vue组件动态构建设计方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117667059A (zh) |
-
2023
- 2023-12-18 CN CN202311736240.3A patent/CN117667059A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11620117B2 (en) | Systems and methods for code clustering analysis and transformation | |
| US7577909B2 (en) | Flexible management user interface from management models | |
| US8170901B2 (en) | Extensible framework for designing workflows | |
| US7774745B2 (en) | Mapping of designtime to runtime in a visual modeling language environment | |
| EP1643435B1 (en) | An extensible framework for designing workflows | |
| JP3592944B2 (ja) | インターフェース方法、データ処理方法、プログラム作成方法、インターフェース装置、記憶媒体 | |
| US5379430A (en) | Object-oriented system locator system | |
| US7953767B2 (en) | Developing applications using configurable patterns | |
| US7913225B2 (en) | Error handling using declarative constraints in a graphical modeling tool | |
| US20070168932A1 (en) | Support of a platform-independent model including descriptions of modeling language entities | |
| EP3236352B1 (en) | Automated graphical user interface configuration | |
| US7624349B2 (en) | Declarative definition enabling graphical designer reuse | |
| US10635408B2 (en) | Method and apparatus for enabling agile development of services in cloud computing and traditional environments | |
| US8214797B2 (en) | Visual association creation for object relational class development | |
| US20100313182A1 (en) | Extensible user interface generation | |
| US20120331472A1 (en) | Ad hoc generation of work item entity for geospatial entity based on symbol manipulation language-based workflow item | |
| WO1995004966A1 (en) | Object-oriented locator system | |
| JP2002544589A (ja) | ビジネスオブジェクトインタフェースをビジュアルにカスタマイズするシステムおよび方法 | |
| JP6817253B2 (ja) | 表示制御装置、表示制御方法、および表示制御プログラム | |
| US20120060141A1 (en) | Integrated environment for software design and implementation | |
| Mitchell et al. | A framework for user-interfaces to databases | |
| EP2447830A1 (en) | System and method for decoupling business logic and user interface via a generic object access layer | |
| CN117667059A (zh) | 一种基于TypeScript实现Vue组件动态构建设计方法 | |
| CN109814864A (zh) | 一种数据可视化方法、可视化系统、网页浏览系统和设备 | |
| Bischofberger et al. | Object-Oriented Programming Environments: Requirements and Approaches |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |