一种前端代码生成方法及装置与流程

1.本发明实施例涉及互联网技术领域，尤其涉及一种前端代码生成方法及装置。


背景技术：

2.代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支，某种意义上来说，源代码相当于代码。
3.相关技术中，一般采用拖拽组件库配置的方式生成部分代码，然后开发人员在此基础上进行业务开发，由于业务代码的混入导致很难再次二次生成配置和部分复用，若需要修改或页面布局变化就需要重写编译打包，并且代码数据缺少更抽象的数据封装，使得业务组件无法通用。
4.因此，有必要改善上述相关技术方案中存在的一个或者多个问题。
5.需要注意的是，本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。


技术实现要素：

6.本发明实施例的目的在于提供一种前端代码生成方法及装置，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。
7.根据本发明实施例的第一方面，提供一种前端代码生成方法，包括：
8.配置前端展示页面对应的多个业务组件，所述业务组件为组件和/或业务模块构成，其中，所述业务模块为多个组件构成；
9.配置所述业务组件中所述组件的展示逻辑；
10.配置所述展示页面针对不同访问用户的权限逻辑；
11.配置完成后生成json格式结构代码并存储，所述json格式结构代码包括组件属性代码、组件组合逻辑代码、组件展示逻辑代码和权限逻辑代码；
12.对所述json格式结构代码进行校验，对校验失败的所述json格式结构代码根据所述组合逻辑、展示逻辑和权限逻辑进行自动修改；
13.抽象所述业务组件的json格式结构代码，根据所述业务组件结构规范所述json格式结构代码数据结构，使前端和后端的代码数据结构一致后开发所述业务组件对应的业务接口；
14.接收所述访问用户的访问操作后生成对应展示页面。
15.本发明的一实施例中，还包括，配置多语言业务组件，存储对应多语言的数据字典并进行动态维护。
16.本发明的一实施例中，所述业务组件通过从组件集和/或业务模块集中拖拽组件和/或业务模块配置生成；
17.所述配置生成的业务组件通过开发人员的操作指令可存储至业务模块集中。
18.本发明的一实施例中，所述组件属性包括字段属性、页面属性、表单属性。
19.本发明的一实施例中，所述组件是通过将预设元素拖拽至布局组件构成的。
20.本发明的一实施例中，所述预设元素是从元素集中进行拖拽的，所述元素集包括常用元素集和高级元素集；
21.所述常用元素集至少包括：文本、选择、下拉、日期、图标、按钮；
22.所述高级元素集至少包括：表格、树、导出、编辑器、子表单、自定义区域；
23.所述布局元素集至少包括：模块、栅格、标签、弹出框。
24.本发明的一实施例中，所述元素集还包括自定义元素集，所述自定义元素集用于存储开发人员自行编写的元素。
25.根据本发明实施例的第二方面，提供一种前端代码生成装置，包括：前端编辑器和后端服务器；
26.所述前端编辑器包括：
27.功能页面单元，用于通过配置前端展示页面对应的多个业务组件并配置所述业务组件中所述组件的展示逻辑；
28.权限管理单元，用于配置所述展示页面针对不同访问用户的权限逻辑；
29.所述功能页面单元还用于在配置完成后生成json格式结构代码，所述json格式结构代码包括组件属性代码、组件组合逻辑代码、组件展示逻辑代码和权限逻辑代码；
30.结构校验单元，用于对所述json格式结构代码进行校验，对校验失败的所述json格式结构代码根据所述组合逻辑、展示逻辑和权限逻辑进行自动修改；
31.数据管理单元，用于抽象所述业务组件的json格式结构代码，根据所述业务组件结构规范所述json格式结构代码数据结构，使前端和后端的代码数据结构一致后开发所述业务组件对应的业务接口；
32.所述功能页面单元还用于在接收所述访问用户的访问操作后生成对应展示页面；
33.所述后端服务器用于存储所述前端编辑器生成的所述json格式结构代码。
34.本发明的一实施例中，所述前端编辑器还包括多语言管理模块，用于配置多语言业务组件；所述后端服务器还用于存储对应多语言的数据字典并进行动态维护。
35.本发明的一实施例中，所述前端编辑器还包括组件单元和业务模块单元；
36.所述组件单元用于存储组件集，所述业务模块单元用于存储业务模块集。
37.本发明的实施例提供的技术方案可以包括以下有益效果：
38.本发明的实施例中，通过上述前端代码生成方法及装置，一方面，通过将从元组件中提升出业务组件，使得业务组件可进行二次配置和部分复用，并且对用户权限进行了统一的动态管理，过程简单且方便快捷；另一方面，规范了数据结构，进行了更抽象的数据封装，使得业务组件可以通用。
附图说明
39.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据
这些附图获得其他的附图。
40.图1示出本发明示例性实施例中前端代码生成方法流程图；
41.图2示出本发明示例性实施例中常用元素集示意图；
42.图3示出本发明示例性实施例中高级元素集示意图；
43.图4示出本发明示例性实施例中布局元素集示意图；
44.图5示出本发明示例性实施例中业务组件示意图；
45.图6示出本发明示例性实施例中编辑器结构示意图。
具体实施方式
46.现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本发明将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。
47.此外，附图仅为本发明实施例的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。
48.本示例实施方式中首先提供了一种前端代码生成方法。参考图1中所示，该前端代码生成方法可以包括：
49.步骤s101：配置前端展示页面对应的多个业务组件，所述业务组件为组件和/或业务模块构成，其中，所述业务模块为多个组件构成；
50.步骤s102：配置所述业务组件中所述组件的展示逻辑；
51.步骤s103：配置所述展示页面针对不同访问用户的权限逻辑；
52.步骤s104：配置完成后生成json格式结构代码并存储，所述json格式结构代码包括组件属性代码、组件组合逻辑代码、组件展示逻辑代码和权限逻辑代码；
53.步骤s105：对所述json格式结构代码进行校验，对校验失败的所述json格式结构代码根据所述组合逻辑、展示逻辑和权限逻辑进行自动修改；
54.步骤s106：抽象所述业务组件的json格式结构代码，根据所述业务组件结构规范所述json格式结构代码数据结构，使前端和后端的代码数据结构一致后开发所述业务组件对应的业务接口；
55.步骤s107：接收所述访问用户的访问操作后生成对应展示页面。
56.具体的，配置业务组件时，业务组件可以是通过至少一个组件和/或至少一个业务模块构成的，业务模块为实现通过多个组件配置成的，可直接进行复用；由于针对不同的访问用户需要展示不同的页面，因此需要对不同的用户划分不同的权限，并且根据不同权限来配置对应的权限逻辑，从而达到不同权限不同展示页面的效果；当业务组件、展示逻辑和权限逻辑配置完成后会生成json格式结构代码，json格式结构代码会被进行存储，一边后续根据该代码进行页面展示；json格式结构代码可能会出现无法解析的情况，因此需要对json格式结构代码进行解析校验，校验成功则不进行其他处理，校验失败则根据所述组合逻辑、展示逻辑和权限逻辑进行自动修改。
57.通过上述前端代码生成方法及装置，一方面，通过将从元组件中提升出业务组件，
使得业务组件可进行二次配置和部分复用，并且对用户权限进行了统一的动态管理，过程简单且方便快捷；另一方面，规范了数据结构，进行了更抽象的数据封装，使得业务组件可以通用。
58.下面，将参考图1至图5对本示例实施方式中的上述前端代码生成方法的各个部分进行更详细的说明。
59.在一个实施例中，还包括，配置多语言业务组件，存储对应多语言的数据字典并进行动态维护。具体的，在前端配置多语言组件，并且在后端服务器进行多语言对应的数据字典的存储和维护，使得实现多语言功能时无需发布配置文件即无需进行代码的编写便可以实时更新。
60.在一个实施例中，所述业务组件通过从组件集和/或业务模块集中拖拽组件和/或业务模块配置生成；
61.所述配置生成的业务组件通过开发人员的操作指令可存储至业务模块集中。具体的，业务组件是通过从组件集和/或业务模块集中拖拽组件和/或业务模块配置生成的，对于生成后的业务组件开发人员可能在后续开发中会经常使用到，因此开发人员可通过拖拽的方式将业务组件拖拽至业务模块集中进行保存以便于后续开发中直接复用，减少了开发人员的工作量提高了开发效率。
62.在一个实施例中，所述组件属性可以包括字段属性、页面属性、表单属性。具体的，所述字段属性、页面属性、表单属性可以用于处理组件对应的展示逻辑、数据复制逻辑和业务事件逻辑等，所述组件属性还可以包括其他的属性在此不做具体的限定。
63.在一个实施例中，所述组件是通过将预设元素拖拽至布局元素中构成的。具体的，所述组件可以是开发人员根据一般常用组件类型事先进行拖拽配置并存储好的，也可以是开发人员在当前开发时实时来进行拖拽配置的。
64.在一个实施例中，所述预设元素是从元素集中进行拖拽的，所述元素集包括常用元素集和高级元素集；
65.所述常用元素集至少包括：文本、选择、下拉、日期、图标、按钮；
66.所述高级元素集至少包括：表格、树、导出、编辑器、子表单、自定义区域；
67.所述布局元素集至少包括：模块、栅格、标签、弹出框。具体的，所述常用元素集和高级元素集还可以包括其他的元素，在此不做具体限定。
68.在一个实施例中，所述元素集还可以包括自定义元素集，所述自定义元素集用于存储开发人员自行编写的元素。具体的，元素集还可以包括自定义元素集，当常用元素及和高级元素集中没有开发人员配置组件需要的元素时，开发人员可以进行自行编写代码形成需要的自定义元素，并且将编写的自定义元素放置到自定义元素集中可以在后续组件配置中进行重复复用，提高了开发人员的开发效率。
69.本示例实施方式中其次提供了一种前端代码生成装置，参照图6所示，可以包括：前端编辑器和后端服务器；
70.所述前端编辑器可以包括：
71.功能页面单元，用于通过配置前端展示页面对应的多个业务组件并配置所述业务组件中所述组件的展示逻辑；
72.权限管理单元，用于配置所述展示页面针对不同访问用户的权限逻辑；
73.所述功能页面单元还用于在配置完成后生成json格式结构代码，所述json格式结构代码包括组件属性代码、组件组合逻辑代码、组件展示逻辑代码和权限逻辑代码；
74.结构校验单元，用于对所述json格式结构代码进行校验，对校验失败的所述json格式结构代码根据所述组合逻辑、展示逻辑和权限逻辑进行自动修改；
75.数据管理单元，用于抽象所述业务组件的json格式结构代码，根据所述业务组件结构规范所述json格式结构代码数据结构，使前端和后端的代码数据结构一致后开发所述业务组件对应的业务接口；
76.所述功能页面单元还用于在接收所述访问用户的访问操作后生成对应展示页面；
77.所述后端服务器用于存储所述前端编辑器生成的所述json格式结构代码。
78.在一个实施例中，所述前端编辑器还包括多语言管理模块，用于配置多语言业务组件；所述后端服务器还用于存储对应多语言的数据字典并进行动态维护。具体的，在前端配置多语言组件，并且在后端服务器进行多语言对应的数据字典的存储和维护，使得实现多语言功能时无需发布配置文件即无需进行代码的编写便可以实时更新。
79.在一个实施例中，所述前端编辑器还包括组件单元和业务模块单元；
80.所述组件单元用于存储组件集，所述业务模块单元用于存储业务模块集。具体的，组件单元可以通过拖拽元素来配置组件，业务模块单元可以通过拖拽组件来配置业务模块；业务模块单元还可以用来存储开发人员配置好的业务组件，用于对业务模块单元中的业务模块种类进行拓展，便于后期复用。
81.通过上述前端代码生成装置，一方面，通过将从元组件中提升出业务组件，使得业务组件可进行二次配置和部分复用，并且对用户权限进行了统一的动态管理，过程简单且方便快捷；另一方面，规范了数据结构，进行了更抽象的数据封装，使得业务组件可以通用。
82.需要理解的是，上述描述中的术语“中心”、“纵向”、“横向”、“长度”、“宽度”、“厚度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”“内”、“外”、“顺时针”、“逆时针”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明实施例和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明实施例的限制。
83.此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明实施例的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
84.在本发明实施例中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或成一体；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通或两个元件的相互作用关系。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
85.在本发明实施例中，除非另有明确的规定和限定，第一特征在第二特征之“上”或之“下”可以包括第一和第二特征直接接触，也可以包括第一和第二特征不是直接接触而是通过它们之间的另外的特征接触。而且，第一特征在第二特征“之上”、“上方”和“上面”包括第一特征在第二特征正上方和斜上方，或仅仅表示第一特征水平高度高于第二特征。第一
特征在第二特征“之下”、“下方”和“下面”包括第一特征在第二特征正下方和斜下方，或仅仅表示第一特征水平高度小于第二特征。
86.在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。此外，本领域的技术人员可以将本说明书中描述的不同实施例或示例进行接合和组合。
87.本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本技术旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由所附的权利要求指出。