编码文件的生成方法、装置、电子设备及计算机存储介质与流程

1.本技术涉及计算机技术领域，特别涉及一种编码文件的生成方法、装置、电子设备及计算机存储介质。


背景技术：

2.传统的前端展示层开发在结构化开发方法中，首先需要业务与专业设计人员对展示页面结构、样式、相互关联等内容进行明确。在此期间需要设计人员使用简易图、静态页面等形式作为交付成果，开发人员根据设计成果进行开发。但是开发人员仍需要对页面的结构、样式等内容进行编码工作。如果采用原型快速开发方法，虽然可以通过构建原型的方式确认需求并以此作为后续编码的部分成果，但是这需要开发人员在分析阶段就要投入大量精力。


技术实现要素：

3.有鉴于此，本技术提供一种编码文件的生成方法、装置、电子设备及计算机存储介质，需求与设计人员产出的设计成果可自动生成对应编码文件，从而后续开发人员将精力直接专注于前后端数据交换、处理的业务编码工作上，无需再花大量时间在页面结构、样式的编码工作上。
4.本技术第一方面提供了一种编码文件的生成方法，包括：
5.获取需求与设计人员的页面结构设计信息；其中，所述页面结构设计信息包括：至少一个功能模块；同一个功能模块下的页面存放在同一个目录中；所述页面按照结构特性进行分类；每一个所述页面分为至少一个内容块；可以按照需求在页面中将不同的内容块进行组合；
6.根据所述页面结构设计信息生成开发编码文件；其中，所述开发编码文件包括：页面结构编码文件以及页面联动事件接口编码文件；所述页面结构编码文件包括：页面内容、布局的html、jsp文件，不包含前端js方法；所述页面联动事件接口编码文件包括数据处理、触发事件、提交、调用的js文件，但不包含实际的处理逻辑代码，仅留出一个需要实现逻辑的接口方法。
7.可选的，所述编码文件的生成方法，还包括：
8.接收需求与设计人员的预览请求；其中，所述浏览请求包括本次要浏览的目标页面结构设计；其中，页面结构设计为根据页面结构设计信息生成的；
9.向需求与设计人员展示根据所述目标页面结构设计。
10.可选的，所述编码文件的生成方法，还包括：
11.接收需求与设计人员的调整请求；其中，所述调整请求包括本次调整的目标位置和调整信息；
12.响应所述调整请求，根据所述调整信息对所述目标位置进行调整。
13.可选的，所述编码文件的生成方法，还包括：
14.将所述页面结构设计信息进行保存。
15.本技术第二方面提供了一种编码文件的生成装置，包括：
16.获取单元，用于获取需求与设计人员的页面结构设计信息；其中，所述页面结构设计信息包括：至少一个功能模块；同一个功能模块下的页面存放在同一个目录中；所述页面按照结构特性进行分类；每一个所述页面分为至少一个内容块；可以按照需求在页面中将不同的内容块进行组合；
17.生成单元，用于根据所述页面结构设计信息生成开发编码文件；其中，所述开发编码文件包括：页面结构编码文件以及页面联动事件接口编码文件；所述页面结构编码文件包括：页面内容、布局的html、jsp文件，不包含前端js方法；所述页面联动事件接口编码文件包括数据处理、触发事件、提交、调用的js文件，但不包含实际的处理逻辑代码，仅留出一个需要实现逻辑的接口方法。
18.可选的，所述编码文件的生成装置，还包括：
19.第一接收单元，用于接收需求与设计人员的预览请求；其中，所述浏览请求包括本次要浏览的目标页面结构设计；其中，页面结构设计为根据页面结构设计信息生成的；
20.展示单元，用于向需求与设计人员展示根据所述目标页面结构设计。
21.可选的，所述编码文件的生成装置，还包括：
22.第二接收单元，用于接收需求与设计人员的调整请求；其中，所述调整请求包括本次调整的目标位置和调整信息；
23.调整单元，用于响应所述调整请求，根据所述调整信息对所述目标位置进行调整。
24.可选的，所述编码文件的生成装置，还包括：
25.保存单元，用于将所述页面结构设计信息进行保存。
26.本技术第三方面提供了一种电子设备，包括：
27.一个或多个处理器；
28.存储装置，其上存储有一个或多个程序；
29.当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如第一方面任意一项所述的编码文件的生成方法。
30.本技术第四方面提供了一种计算机存储介质，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现如第一方面任意一项所述的编码文件的生成方法。
31.由以上方案可知，本技术提供一种编码文件的生成方法、装置、电子设备及计算机存储介质，所述编码文件的生成方法包括：获取需求与设计人员的页面结构设计信息；其中，所述页面结构设计信息包括：至少一个功能模块；同一个功能模块下的页面存放在同一个目录中；所述页面按照结构特性进行分类；每一个所述页面分为至少一个内容块；可以按照需求在页面中将不同的内容块进行组合；根据所述页面结构设计信息生成开发编码文件；其中，所述开发编码文件包括：页面结构编码文件以及页面联动事件接口编码文件；所述页面结构编码文件包括：页面内容、布局的html、jsp文件，不包含前端js方法；所述页面联动事件接口编码文件包括数据处理、触发事件、提交、调用的js文件，但不包含实际的处理逻辑代码，仅留出一个需要实现逻辑的接口方法。从而需求与设计人员产出的设计成果可自动生成对应编码文件，从而后续开发人员将精力直接专注于前后端数据交换、处理的业务编码工作上，无需再花大量时间在页面结构、样式的编码工作上。
附图说明
32.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
33.图1为本技术实施例提供的一种编码文件的生成方法的具体流程图；
34.图2为本技术另一实施例提供的一个功能模块的示意图；
35.图3为本技术另一实施例提供的一种编码文件的生成方法的流程图；
36.图4为本技术另一实施例提供的一种编码文件的生成方法的流程图；
37.图5为本技术另一实施例提供的一种编码文件的生成装置的示意图；
38.图6为本技术另一实施例提供的一种实现编码文件的生成方法的电子设备的示意图。
具体实施方式
39.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
40.需要注意，本技术中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系，而术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
41.本技术实施例提供了一种编码文件的生成方法，如图1所示，具体包括以下步骤：
42.s101、获取需求与设计人员的页面结构设计信息。
43.其中，页面结构设计信息包括：至少一个功能模块；同一个功能模块下的页面存放在同一个目录中；页面按照结构特性进行分类；每一个页面分为至少一个内容块；可以按照需求在页面中将不同的内容块进行组合。
44.需要说明的是，每一个功能模块为一个相对独立的功能点。
45.页面的结构特性分为菜单页面、新打开页面、面板子页面、弹出框子页面、被引用公共子页面等类型，并且根据页面使用场景，选定页面类型，并定义其他属性，比如页面id、名称、所属模块、是否引用公共子页面等。
46.内容块分为面板、表单、列表、只读表格、按钮区等类型，可以按照需求在页面中将不同的内容块进行组合。
47.如图2所示，为一个功能模块的示意图，其包含三个页面(两个菜单页面和一个新打开页面)，第一个菜单页面中包含列表内容块，第二个菜单页面包含面板内容块、表单内容块和被引用的公共页面；面板内容块又包含了面板子页面；新打开页面包含被引用的公
共页面和只读表格内容块。
48.在本技术的实际应用过程中，需求与设计人员可以通过预先准备的工具进行设计页面结构，首先定义页面信息，在定义页面信息的界面中包含了(即需求与设计人员可以进行定义的内容)页面类型、模块id、页面id、页面名称、是否使用系统日期、是否使用操作员编号、页面js、弹出窗口、自定义变量等；
49.在定义页面信息后，可以定义页面中包含的内容块列表，在定义页面中包含的内容块列表的界面中包含了内容类型、内容key、内容标题等，同时可以对内容块进行新增、修改、删除、变换顺序等操作。在定义页面中包含的内容块列表后，还可以进行导入数据、生产代码、页面预览等操作；
50.需求与设计人员可以对内容块中的内容进行设计，如：内容类型、是否配置标题、是否配置分割线、表单布局、内容key、内容标题、按钮布局、是否编辑表单等；
51.需求与设计人员还可以对内容块中的具体字段信息进行定义，以页面元素定义-文本输入框为例，需求与设计人员还可以对空间类型、页面元素id、添加辅助按钮、标准数据字典、label名称、文本框类型、文本框宽度、是否只读、是否禁用、是否必填、验证规则、验证规则提示、内容改变事件、获取焦点事件、失去焦点事件等进行定义。
52.s102、根据页面结构设计信息生成开发编码文件。
53.其中，开发编码文件包括：页面结构编码文件以及页面联动事件接口编码文件；页面结构编码文件包括：页面内容、布局的html、jsp文件，不包含前端js方法；页面联动事件接口编码文件包括数据处理、触发事件、提交、调用的js文件，但不包含实际的处理逻辑代码，仅留出一个需要实现逻辑的接口方法。
54.需要说明的是，后续需要开发人员针对这个需要实现逻辑的接口方法在另外一个页面联动事件接口实现编码文件中补全处理逻辑代码。这样设计的目的主要就是将设计阶段的编码文件与开发阶段的编码文件解耦。二者相互不影响，也没有绝对的先后顺序。设计人员可以随时维护页面设计，却不必考虑是否会影响开发工作；开发人员也可随时补充调整自己的代码，却不必考虑是否会影响设计工作。
55.具体的，页面联动事件接口实现编码由开发人员根据页面预览效果以及页面联动事件接口编码文件，对接口所要完成的数据处理、逻辑判断、外部功能调用的功能进行实现。开发人员不能修改上一步骤工具自动产生的编码文件，而是自己新建一个新的文件，二者是相互解耦的。
56.需要说明的是，页面联动事件接口编码文件将需要开发人员实现的方法都预留出来，如果开发人员在页面联动事件接口实现编码文件中实现了这个预留方法，则方法会按照实际处理逻辑执行；如果开发人员尚未实现，页面也会报错，仅弹出一个“xx方法等待后续实现”的提示。
57.在本技术的实际应用过程中，会读取页面设计表单中的数据，如页面类型(菜单页面、子页面等)、页面布局(一行二列、一行三列等)、页面内容以及每个内容块中的元素，根据这些信息输出html编码内容和js编码内容，并将这些内容生成文件放到规定目录下，下次再有更改就会覆盖更新。
58.现对页面结构编码文件、页面联动事件接口编码文件以及页面联动事件接口实现编码文件进行举例说明：
59.页面结构编码文件可以如下所示：
[0060][0061]
[0062][0063]
页面联动事件接口编码文件可以如下所示：
[0064]
[0065][0066]
页面联动事件接口实现编码文件可以如下所示：
[0067]
[0068][0069]
可选的，在本技术的另一实施例中，编码文件的生成方法的一种实施方式，如图3所示，还包括：
[0070]
s301、接收需求与设计人员的预览请求。
[0071]
其中，浏览请求包括本次要浏览的目标页面结构设计；其中，页面结构设计为根据页面结构设计信息生成的。
[0072]
需要说明的是，需求与设计人员要预览的目标页面结构设计可以是内容块，也可以是页面维度，此处不做限定。
[0073]
s302、向需求与设计人员展示根据目标页面结构设计。
[0074]
达到随时设计、随时预览、随时修改的效果。预览功能的原理就是根据设计数据，有系统自动生成前端程序编码并静态展示，即实现了“所见即所得”的理念。
[0075]
可选的，在本技术的另一实施例中，编码文件的生成方法的一种实施方式，如图4所示，还包括：
[0076]
s401、接收需求与设计人员的调整请求。
[0077]
其中，调整请求包括本次调整的目标位置和调整信息。
[0078]
s402、响应调整请求，根据调整信息对目标位置进行调整。
[0079]
可选的，在本技术的另一实施例中，编码文件的生成方法的一种实施方式，还包括：
[0080]
将页面结构设计信息进行保存。
[0081]
需求与设计人员可随时将设计数据进行保存、版本保留、传递。
[0082]
由以上方案可知，本技术提供一种编码文件的生成方法：获取需求与设计人员的页面结构设计信息；其中，页面结构设计信息包括：至少一个功能模块；同一个功能模块下的页面存放在同一个目录中；页面按照结构特性进行分类；每一个页面分为至少一个内容块；可以按照需求在页面中将不同的内容块进行组合；根据页面结构设计信息生成开发编码文件；其中，开发编码文件包括：页面结构编码文件以及页面联动事件接口编码文件；页面结构编码文件包括：页面内容、布局的html、jsp文件，不包含前端js方法；页面联动事件接口编码文件包括数据处理、触发事件、提交、调用的js文件，但不包含实际的处理逻辑代码，仅留出一个需要实现逻辑的接口方法。从而需求与设计人员产出的设计成果可自动生成对应编码文件，从而后续开发人员将精力直接专注于前后端数据交换、处理的业务编码工作上，无需再花大量时间在页面结构、样式的编码工作上。
[0083]
本技术另一实施例提供了一种编码文件的生成装置，如图5所示，具体包括：
[0084]
获取单元501，用于获取需求与设计人员的页面结构设计信息。
[0085]
其中，页面结构设计信息包括：至少一个功能模块；同一个功能模块下的页面存放在同一个目录中；页面按照结构特性进行分类；每一个页面分为至少一个内容块；可以按照需求在页面中将不同的内容块进行组合。
[0086]
生成单元502，用于根据页面结构设计信息生成开发编码文件。
[0087]
其中，开发编码文件包括：页面结构编码文件以及页面联动事件接口编码文件；页面结构编码文件包括：页面内容、布局的html、jsp文件，不包含前端js方法；页面联动事件接口编码文件包括数据处理、触发事件、提交、调用的js文件，但不包含实际的处理逻辑代码，仅留出一个需要实现逻辑的接口方法。
[0088]
本技术上述实施例公开的单元的具体工作过程，可参见对应的方法实施例内容，如图1所示，此处不再赘述。
[0089]
可选的，在本技术的另一实施例中，编码文件的生成装置的一种实施方式，还包括：
[0090]
第一接收单元，用于接收需求与设计人员的预览请求。
[0091]
其中，浏览请求包括本次要浏览的目标页面结构设计。其中，页面结构设计为根据页面结构设计信息生成的。
[0092]
展示单元，用于向需求与设计人员展示根据目标页面结构设计。
[0093]
本技术上述实施例公开的单元的具体工作过程，可参见对应的方法实施例内容，如图3所示，此处不再赘述。
[0094]
可选的，在本技术的另一实施例中，编码文件的生成装置的一种实施方式，还包括：
[0095]
第二接收单元，用于接收需求与设计人员的调整请求。
[0096]
其中，调整请求包括本次调整的目标位置和调整信息。
[0097]
调整单元，用于响应调整请求，根据调整信息对目标位置进行调整。
[0098]
本技术上述实施例公开的单元的具体工作过程，可参见对应的方法实施例内容，如图4所示，此处不再赘述。
[0099]
可选的，在本技术的另一实施例中，编码文件的生成装置的一种实施方式，还包
括：
[0100]
保存单元，用于将页面结构设计信息进行保存。
[0101]
本技术上述实施例公开的单元的具体工作过程，可参见对应的方法实施例内容，此处不再赘述。
[0102]
由以上方案可知，本技术提供一种编码文件的生成装置：获取单元501获取需求与设计人员的页面结构设计信息；其中，页面结构设计信息包括：至少一个功能模块；同一个功能模块下的页面存放在同一个目录中；页面按照结构特性进行分类；每一个页面分为至少一个内容块；可以按照需求在页面中将不同的内容块进行组合；生成单元502根据页面结构设计信息生成开发编码文件；其中，开发编码文件包括：页面结构编码文件以及页面联动事件接口编码文件；页面结构编码文件包括：页面内容、布局的html、jsp文件，不包含前端js方法；页面联动事件接口编码文件包括数据处理、触发事件、提交、调用的js文件，但不包含实际的处理逻辑代码，仅留出一个需要实现逻辑的接口方法。从而需求与设计人员产出的设计成果可自动生成对应编码文件，从而后续开发人员将精力直接专注于前后端数据交换、处理的业务编码工作上，无需再花大量时间在页面结构、样式的编码工作上。
[0103]
本技术另一实施例提供了一种电子设备，如图6所示，包括：
[0104]
一个或多个处理器601。
[0105]
存储装置602，其上存储有一个或多个程序。
[0106]
当所述一个或多个程序被所述一个或多个处理器601执行时，使得所述一个或多个处理器601实现如上述实施例中任意一项所述的编码文件的生成方法。
[0107]
本技术另一实施例提供了一种计算机存储介质，其上存储有计算机程序，其中，计算机程序被处理器执行时实现如上述实施例中任意一项所述的编码文件的生成方法。
[0108]
在本技术公开的上述实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本公开的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
[0109]
另外，在本公开各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，直播设备，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，
random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
[0110]
专业技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。