CN116069330A - 中后台模板构建方法、装置和存储介质 - Google Patents
中后台模板构建方法、装置和存储介质 Download PDFInfo
- Publication number
- CN116069330A CN116069330A CN202310162882.0A CN202310162882A CN116069330A CN 116069330 A CN116069330 A CN 116069330A CN 202310162882 A CN202310162882 A CN 202310162882A CN 116069330 A CN116069330 A CN 116069330A
- Authority
- CN
- China
- Prior art keywords
- component
- components
- rendering
- background
- json
- 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
Images
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/38—Creation or generation of source code for implementing user interfaces
-
- 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/36—Software reuse
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)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了中后台模板构建方法、装置和存储介质。本发明提供的中后台模板构建方法，用于表单页面生成，所述方法包括：获取高复用的组件，所述组件包含表单对象；通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。该中后台模板构建方法，通过JSON表达式制定组件的动态渲染和交互协议，可以生成表单页面，从而可以将相同的表单配置在多个表单页面中，实现了组件复用，减轻了页面开发的工作量。
Description
技术领域
本发明涉及互联网应用技术领域，尤其涉及中后台模板构建方法、装置和存储介质。
背景技术
目前中后台管理系统的实现方案大致有三种：1.所有功能基于源码实现；2.通用功能封装成组件，非通用功能用源码实现。3.基于form-generator这样的表单引擎实现表单搭建功能。
目前这三种方案在行业内都有应用，但效率依然不高，原因如下：
1.第一种方案是目前行业主流，因为它开发足够灵活，但效率比较低，重复劳动工作较多。
2.第二种方案是第一种的升级版，实现了组件复用，但不管是可复用还是不可复用都同样需要大量的底层源代码实现，同时对于全局配置能力较弱，维护成本也相对较高。
3.第三种方案基于低代码搭建，但主要限于表单部分，对于复杂的表格能力、或者整个页面的配置能力几乎没有，所以以上三种都存在一些问题。
发明内容
本发明基于上述技术问题，提供中后台模板构建方法、系统和存储介质。
为解决上述技术问题，本发明采用的一个技术方案是：中后台模板构建方法，所述方法包括：中后台模板构建方法，用于表单页面生成，所述方法包括：
获取高复用的组件，所述组件包含表单对象；
通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。
其中，所述方法还包括；
预留自定义插槽，用于特殊场景下无法实现配置化时，保留自定义功能。
其中，所述获取高复用的组件具体包括：
调研中后台高频业务，统计业务场景特点，通过调用数量得到高复用的组件。
其中，所述高复用的组件包括SearchForm组件、RocketForm组件、RocketTable组件和RocketDesc组件。
其中，所述方法还包括：
通过所述JSON表达式编写对应渲染函数，所述渲染函数需要枚举解析每一种类型，并生成对应的原子组件。
其中，所述渲染函数同时还具备处理事件、实现显隐和联动能力及内置场景化功能。
其中，所述方法还包括：
基于Element界面组件的高度封装，实现所有属性和事件的透传，保留所有原生属性和事件。
其中，所述方法还包括：
列举Element界面组件库中所有基础组件，进行类型定义，所述基础组件包括：文本框、文本域、数字框、下拉框、时间选择器、日期选择、日期范围选择、单选框、开关组件、复选框、级联组件、穿梭组件、上传组件、文字链接、按钮组件，tips组件和文本组件。
为解决上述技术问题，本发明采用的另一个技术方案是：中后台模板构建装置，用于表单页面生成，所述装置包括：
获取模块，用于获取高复用的组件，所述组件包含表单对象；
制定模块，用于通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。
为解决上述技术问题，本发明采用的另一个技术方案是：计算机可读存储介质，所述计算机可读存储介质中存储有程序数据，所述程序数据在被处理器执行时，用于执行所述程序数据以实现上述的方法。
本发明实施例的有益效果是：区别于现有技术，本发明提供的中后台模板构建方法，用于表单页面生成，所述方法包括：获取高复用的组件，所述组件包含表单对象；通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。该中后台模板构建方法，通过JSON表达式制定组件的动态渲染和交互协议，可以生成表单页面，从而可以将相同的表单配置在多个表单页面中，实现了组件复用，减轻了页面开发的工作量。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。其中：
图1是本发明提供的中后台模板构建方法一实施例的流程图；
图2是本发明提供的中后台模板构建方法另一实施例的架构图；
图3a是本发明提供的中后台模板构建方法一实施例的SearchForm组件的效果图；
图3b是本发明提供的中后台模板构建方法一实施例的RocketForm组件的效果图；
图3c是本发明提供的中后台模板构建方法一实施例的RocketTable组件的效果图；
图4是本发明提供的中后台模板构建方法一实施例的生成文本框的效果图；
图5是本发明提供的中后台模板构建装置一实施例的结构框图；
图6是本发明提供的计算机可读存储介质一实施例的结构框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。可以理解的是，此处所描述的具体实施例仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
JSON(JavaScr i ptObjectNotat i on)表达式，JSON是一种轻量级的数据交换格式。
本发明提供的中后台模板构建方法，如图1所示，所述方法包括：
步骤1、获取高复用的组件，所述组件包含表单对象；
步骤2、通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。
本发明实施例的有益效果是：本发明提供的中后台模板构建方法，通过JSON表达式制定组件的动态渲染和交互协议，可以生成表单页面，从而可以将相同的表单配置在多个表单页面中，实现了组件复用，减轻了页面开发的工作量。
在另一些实施例中，所述获取高复用的组件具体包括：
调研中后台高频业务，统计业务场景特点，通过调用数量得到高复用的组件。
具体地，如图2所示，为本发明另一实施例的中后台模板构建方法的架构图。所述高复用的组件包括SearchForm、RocketForm、RocketTab l e和RocketDesc。
抽象高复用通用U I组件是为了更加符合业务场景需要，本发明实施例基于JSON配置化形式抽象出了几个高复用的组件，通过这些高复用组件，可以更加高效的实现功能开发。比如：SearchForm、RocketForm、RocketTab l e、RocketDesc等。
例如，SearchForm组件主要用于页面条件搜索，内置搜索和重置功能，可以让搜索功能更加简单。效果图如图3a所示。
代码配置如下：
通过以上简单的JSON配置即可实现高级功能。
其次，RocketForm组件主要用于常规的表单处理，比如新增表单、修改表单等。效果图如图3b所示。
以上功能均通过JSON配置生成，支持动态数据加载。
再次，RocketTab l e组件主要用于实现列表功能，通过源码实现相当复杂，通过json配置结合分页组件和操作栏，可以实现更丰富的配置化功能。效果图如图3c所示。
可选地，所述方法还包括：
通过所述JSON表达式编写对应渲染函数，所述渲染函数需要枚举解析每一种类型，并生成对应的原子组件。
具体地，所述渲染函数同时还具备处理事件、实现显隐和联动能力及内置场景化功能。
本发明实施例的中后台模板构建方法，本质上是基于JSON-Schema的配置化开发方式来快速搭建可复用、可扩展、易维护的中后台模板引擎。具体地，基于JSON-Schema的目标对象为熟悉JSON规范格式的人员，可以直接通过维护JSON的方式完成对页面的快速配置。可以最大限度的保证页面质量以及优化后续修改部署流程，节省开发资源，缩短项目周期。
在此，需要编写Render(渲染函数)。模板引擎的核心就是Render功能，通过上面定义的JSON-Schema来编写对应渲染函数，Render需要枚举解析每一种类型，并生成对应的原子组件。同时需要处理像事件、显隐、内置场景化功能等。
通过$attrs和$l i steners透传E l ementUI的文本框对应的所有属性和事件。属性和事件透传；保留所有原生属性和事件，减少开发成本。实现显隐和联动能力、链式字符串赋值(va l ue:’user.i nfo.name’)、快捷格式化(日期、金额、时间)、事件回调。还支持事件回调、显隐能力、过滤器能力(日期、金额)、内置常用快捷功能。
本发明实施例，实现一套Render，通过简单的JSON配置即可完成页面动态渲染，复杂的工作全部由Render完成，开发者只关注JSON-Schema的配置规则即可。
比如实现I nput组件渲染：
例如：现有技术的源码实现一个输入框代码如下：
当表单页面更多时，收益更加明显。
本发明实施例的中后台模板构建方法，绑定sty l e、c l ass以及默认属性。
在一些实施例中，所述方法还包括；
预留自定义插槽，用于特殊场景下无法实现配置化时，保留自定义功能。基于s lot实现自定义能力，实现prepend和append等插槽功能。
现有技术中的三种方式，相比本发明上述实施例，本发明人实施例的中后台模板构建方法在同等功能下，基于源码实现代码量较小，维护成本较低；且可支持全局配置，可内置常用功能。
进一步地，基于E l ement界面(E l ementUI)组件的高度封装，实现所有属性和事件的透传，保留所有原生属性和事件。
具体地，先定义JSON-Schema(JSON表达式)结构：
a.枚举E l ementUI组件库中所有常用的组件，通过type进行类型定义，如：文本框(text)、文本域(textarea)、数字框(number)、下拉框(se l ect)、时间选择器(t ime-sel ect)、日期选择(date)、日期范围选择(daterange)、单选框(rad io)、开关组件(switch)、复选框(checkbox)、级联组件(cascader)、穿梭组件(transfer)、上传组件(up load)、文字链接(l i nk)、按钮组件(button)，t ips组件(t ips)，文本组件(l abe l)。
通过type枚举识别输入框；根据type生成常用组件。
基于E l ementUI组件做高度封装，实现所有属性和事件的透传，最大化减少因JSON-Schema的设计带来的理解和开发成本。
比如我们要生成一个文本框，可以使用如下json进行定义：
效果图如如图4所示。
b.每个组件都支持事件，通过change事件处理回调。例如：
c.支持表格配置，支持所有E l ementU I表格能力。例如：
d.支持自定义功能。当一个组件无法通过json配置实现时，可通过插槽实现自定义功能。
e.组件显隐功能。例如：当状态status＝＝1时，显示组件。
以上是基于json配置实现的组件常用功能，还有更多细节暂省略。
如图5所示，本发明实施例的还提供中后台模板构建装置100，用于表单页面生成，其特征在于，所述装置包括：
获取模块10，用于获取高复用的组件，所述组件包含表单对象；
制定模块20，用于通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。
需要说明的是，本发明方法实施例与方法实施例具有相同的发明构思，具体的技术特征在此不再一一阐述，均可引入本实施例中。
本发明实施例提供的中后台模板构建装置100，通过JSON表达式制定组件的动态渲染和交互协议，可以生成表单页面，从而可以将相同的表单配置在多个表单页面中，实现了组件复用，减轻了页面开发的工作量。
参阅图6，图6是本发明提供的计算机存储介质一实施例的结构示意图，该计算机可读存储介质700中存储有程序数据701，程序数据701在被处理器执行时，用于执行如下方法：
获取高复用的组件，所述组件包含表单对象；
通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。
本发明实施例提供中后台模板构建方法，通过JSON表达式制定组件的动态渲染和交互协议，可以生成表单页面，从而可以将相同的表单配置在多个表单页面中，实现了组件复用，减轻了页面开发的工作量。
在本发明所提供的几个实施方式中，应该理解到，所揭露的方法、设备以及系统，可以通过其它的方式实现。例如，以上所描述的系统实施方式仅仅是示意性的，例如，所述模块或单元的划分，仅仅为逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施方式方案的目的。
另外，在本发明各个实施方式中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
以上所述仅为本发明的实施方式，并非因此限制本发明的专利范围，凡是根据本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.中后台模板构建方法，用于表单页面生成，其特征在于，所述方法包括：
获取高复用的组件，所述组件包含表单对象；
通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括；
预留自定义插槽，用于特殊场景下无法实现配置化时，保留自定义功能。
3.根据权利要求1所述的方法，其特征在于，所述获取高复用的组件具体包括：
调研中后台高频业务，统计业务场景特点，通过调用数量得到高复用的组件。
4.根据权利要求1所述的方法，其特征在于，所述高复用的组件包括SearchForm组件、RocketForm组件、RocketTable组件和RocketDesc组件。
5.根据权利要求1-4任一项所述的方法，其特征在于，所述方法还包括：
通过所述JSON表达式编写对应渲染函数，所述渲染函数需要枚举解析每一种类型，并生成对应的原子组件。
6.根据权利要求5所述的方法，其特征在于，所述渲染函数同时还具备处理事件、实现显隐和联动能力及内置场景化功能。
7.根据权利要求6所述的方法，其特征在于，所述方法还包括：
基于Element界面组件的高度封装，实现所有属性和事件的透传，保留所有原生属性和事件。
8.根据权利要求7所述的方法，其特征在于，所述方法还包括：
列举Element界面组件库中所有基础组件，进行类型定义，所述基础组件包括：文本框、文本域、数字框、下拉框、时间选择器、日期选择、日期范围选择、单选框、开关组件、复选框、级联组件、穿梭组件、上传组件、文字链接、按钮组件，tips组件和文本组件。
9.中后台模板构建装置，用于表单页面生成，其特征在于，所述装置包括：
获取模块，用于获取高复用的组件，所述组件包含表单对象；
制定模块，用于通过JSON表达式制定组件的动态渲染和交互协议；其中，所述动态渲染用于前端页面展示各个表单对象，所述交互协议包括所述表单对象与后台对象的关联关系。
10.计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有程序数据，所述程序数据在被处理器执行时，用于执行所述程序数据以实现权利要求1-8任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310162882.0A CN116069330A (zh) | 2023-02-17 | 2023-02-17 | 中后台模板构建方法、装置和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310162882.0A CN116069330A (zh) | 2023-02-17 | 2023-02-17 | 中后台模板构建方法、装置和存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116069330A true CN116069330A (zh) | 2023-05-05 |
Family
ID=86181911
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310162882.0A Pending CN116069330A (zh) | 2023-02-17 | 2023-02-17 | 中后台模板构建方法、装置和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116069330A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116610889A (zh) * | 2023-07-17 | 2023-08-18 | 合肥青谷信息科技有限公司 | 一种web页面创建方法及可视化的软件设计器 |
-
2023
- 2023-02-17 CN CN202310162882.0A patent/CN116069330A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116610889A (zh) * | 2023-07-17 | 2023-08-18 | 合肥青谷信息科技有限公司 | 一种web页面创建方法及可视化的软件设计器 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111241454B (zh) | 一种生成网页代码的方法、系统和装置 | |
| JP4104565B2 (ja) | スキーマベースの階層データ構造をフラットデータ構造に変換するための方法およびシステム | |
| CN111104635B (zh) | 一种表格网页的生成方法和装置 | |
| CN105138312B (zh) | 一种表格生成方法及装置 | |
| CN112368685A (zh) | 可定制的企业自动化测试框架 | |
| KR20040047657A (ko) | 계층적 구조 데이터를 임포트/익스포트하는 방법 및컴퓨터-판독가능 매체 | |
| CN103646049B (zh) | 自动生成数据报表的方法及系统 | |
| CN114461200A (zh) | 一种基于云SaaS平台的低代码开发应用及方法 | |
| CN110502212A (zh) | 一种面向多语言的高并发在线开发支撑方法 | |
| CN100511140C (zh) | 构件化软件系统实现脚本语言调用多输出参数接口的方法 | |
| CN110377892A (zh) | 一种政务智能表单模板设计系统 | |
| CN112507273A (zh) | 网页页面的生成方法、装置和电子设备 | |
| CN116069330A (zh) | 中后台模板构建方法、装置和存储介质 | |
| CN111078276B (zh) | 应用程序的冗余资源处理方法、装置、设备及存储介质 | |
| CN102253986A (zh) | 提高多终端网页显示效果的方法和装置 | |
| CN111159040A (zh) | 一种测试数据生成方法、装置、设备及存储介质 | |
| CN104461893A (zh) | 数据处理方法与数据处理装置 | |
| CN114637499B (zh) | 可视化组件处理方法、装置、设备及介质 | |
| CN109614084A (zh) | web程序及其快速开发框架、开发方法与相关设备 | |
| CN106991144B (zh) | 一种定制数据爬取工作流的方法及系统 | |
| CN115510361A (zh) | 一种基于可视化配置的数据图表页面生成方法及相关设备 | |
| CN112463141B (zh) | 一种基于bpmn的微服务工作流部署方法 | |
| CN114371848A (zh) | 页面联调方法、装置、设备及存储介质 | |
| CN108427664A (zh) | 一种文档解析方法和装置 | |
| CN115904382A (zh) | 代码开发方法、系统、客户端、服务端、设备和存储介质 |
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 |