代码信息的生成方法、装置、设备及存储介质与流程

1.本技术涉及可视化设计技术领域，尤其涉及一种代码信息的生成方法、装置、设备及存储介质。


背景技术：

2.vue是一套用于构建用户界面的渐进式框架，具有灵活、易用、高效的特点，是目前最主流的前端开发框架之一。在通过vue构建用户界面时，需要生成用户界面对应的代码信息。
3.在现有技术中，用户界面内包括多个组件。首先，获取组件模型数据和组件资源文件；然后，根据组件模型数据和组件资源文件，生成多个可视化组件；最后，确定多个可视化组件对应的代码信息，根据多个可视化组件对应的代码信息，生成用户界面对应的代码信息。
4.然而，发明人发现现有技术至少存在如下技术问题：当用户界面内包括的多个组件的数量较多时，确定多个可视化组件对应的代码信息所花费的时间较长，进而导致编写用户界面对应的代码信息的效率较低。


技术实现要素：

5.本技术提供一种代码信息的生成方法、装置、设备及存储介质，用以提高编写用户界面对应的代码信息的效率。
6.第一方面，本技术提供一种代码信息的生成方法，包括：
7.展示前端的用户操作界面，所述用户操作界面内包括资源选择区和组件布局区，所述资源选择区内包括组件列表按钮、区块列表按钮和页面列表按钮；
8.基于所述组件列表按钮、所述区块列表按钮和所述页面列表按钮上的预设操作，在所述组件布局区展示目标用户界面；
9.基于所述目标用户界面的展示内容，生成所述目标用户界面对应的代码信息，所述目标用户界面的展示内容包括页面模板和至少一个组件区块。
10.在一种可能的设计中，所述基于所述组件列表按钮、所述区块列表按钮和所述页面列表按钮上的预设操作，在所述组件布局区展示目标界面，包括：
11.基于所述页面列表按钮上的点击操作，展示页面模板菜单栏，所述页面模板菜单栏内包括多个页面模板图标，基于任一页面模板图标上的点击操作，在所述组件布局区展示所述任一页面模板图标对应的页面模板，所述页面模板内包括多个第一组件；
12.基于所述区块列表按钮上的点击操作，展示组件区块菜单栏，所述组件区块菜单栏内包括多个组件区块图标，基于任一组件区块图标上的拖拽操作，在所述页面模板内展示所述任一区块模板图标对应的组件区块，所述组件区块内包括多个第二组件。
13.在另一种可能的设计中，所述目标用户界面的展示内容包括页面模板、至少一个组件区块和至少一个组件；
14.所述基于任一页面模板图标上的点击操作，在所述组件布局区展示所述任一页面模板图标对应的页面模板之后，还包括：
15.基于所述组件列表按钮上的点击操作，展示组件列表菜单栏，所述组件列表菜单栏内包括多个组件图标；
16.基于任一组件图标上的拖拽操作，在所述页面模板内展示所述任一组件图标对应的第三组件。
17.在另一种可能的设计中，该方法还包括：
18.基于所述页面模板内任一第一组件上的拖拽操作，调整所述任一第一组件在所述页面模板内的位置；和/或，
19.基于所述组件区块内任一第二组件上的拖拽操作，调整所述任一第二组件在所述组件区块内的位置。
20.在另一种可能的设计中，所述基于所述目标用户界面的展示内容，生成所述目标用户界面对应的代码信息，包括：
21.基于所述目标用户界面的展示内容，确定所述展示内容包括的多个组件的组件树信息，所述组件树信息用于表示父组件和子组件之间的嵌套关系；
22.基于所述多个组件的组件树信息，生成所述目标用户界面对应的代码信息。
23.在另一种可能的设计中，所述基于所述目标用户界面的展示内容，确定所述展示内容包括的多个组件的组件树信息，包括：
24.确定所述目标用户界面内的页面模板包括的多个第一组件、所述至少一个组件区块包括的多个第二组件和所述目标用户界面内的至少一个第三组件；
25.获取所述多个第一组件、所述多个第二组件和所述至少一个第三组件的基本属性信息、事件属性信息、函数属性信息和子组件信息，得到所述展示内容包括的多个组件的组件树信息。
26.在另一种可能的设计中，所述基于所述多个组件的组件树信息，生成所述目标用户界面对应的代码信息，包括：
27.遍历所述多个组件的组件树信息，生成所述多个组件的页面模板代码、页面脚本代码和层叠样式代码；
28.将所述多个组件的页面模板代码、所述多个组件的页面脚本代码和所述多个组件的层叠样式代码分别进行组合，得到所述目标用户界面对应的代码信息。
29.在另一种可能的设计中，所述遍历所述多个组件的组件树信息，生成所述多个组件的页面模板代码、页面脚本代码和层叠样式代码，包括：
30.遍历所述多个组件的组件树信息，确定每个组件的数据类型；
31.根据所述每个组件的数据类型对应的代码生成算法，生成所述每个组件的页面模板代码、页面脚本代码和层叠样式代码。
32.在另一种可能的设计中，所述用户操作界面内还包括资源编辑区，所述资源编辑区内包括预览按钮、导出代码按钮和代码编辑按钮；所述方法还包括：
33.基于所述预览按钮、所述导出代码按钮和所述代码编辑按钮，对所述目标用户界面内的展示内容进行调整，得到新目标用户界面；
34.基于所述新目标用户界面的展示内容，生成所述新目标用户界面对应的新代码信
息。
35.在另一种可能的设计中，所述代码编辑按钮包括撤销组件按钮、恢复组件按钮和删除组件按钮；
36.所述基于所述代码编辑按钮，对所述目标用户界面内的展示内容进行调整，包括：基于所述撤销组件按钮上的点击操作，撤销所述目标用户界面内已添加的组件，和/或，基于所述恢复组件按钮的点击操作，恢复所述目标用户界面内已删除的组件，和/或，基于所述删除组件按钮的点击操作，删除所述目标用户界面内选中的组件。
37.在另一种可能的设计中，所述基于所述预览按钮，展示所述目标用户界面对应的代码信息之后，还包括：对所述代码信息进行调整，得到新代码信息；基于所述新代码信息，调整所述目标用户界面。
38.第二方面，本技术提供一种代码信息的生成装置，包括：
39.第一展示模块，用于展示前端的用户操作界面，所述用户操作界面内包括资源选择区和组件布局区，所述资源选择区内包括组件列表按钮、区块列表按钮和页面列表按钮；
40.第二展示模块，用于基于所述组件列表按钮、所述区块列表按钮和所述页面列表按钮上的预设操作，在所述组件布局区展示目标用户界面；
41.生成模块，用于基于所述目标用户界面的展示内容，生成所述目标用户界面对应的代码信息，所述目标用户界面的展示内容包括页面模板和至少一个组件区块。
42.第三方面，本发明实施例提供一种电子设备，包括：至少一个处理器和存储器；
43.所述存储器存储计算机执行指令；
44.所述至少一个处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行如上第一方面以及第一方面各种可能的设计所述的代码信息的生成方法。
45.第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上第一方面以及第一方面各种可能的设计所述的代码信息的生成方法。
46.第五方面，本技术实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时，实现如上第一方面以及第一方面各种可能的设计所述的代码信息的生成方法。
47.本技术提供的代码信息的生成方法、装置、设备及存储介质，由于用户操作界面内的资源选择区内包括组件列表按钮、区块列表按钮和页面列表按钮，因此便于用户通过在组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区直接展示用户打算生成的目标用户界面，进而生成目标用户界面对应的代码信息，而组件区块和页面模板内包括多个组件，这样通过区块列表按钮和页面列表按钮能够一次性生成多个组件的代码信息，所以提高了生成用户界面对应的代码信息的效率。
附图说明
48.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。
49.图1为本技术实施例的代码信息的生成方法的应用场景图；
50.图2为本技术实施例提供的代码信息的生成方法的流程图一；
51.图3为本技术实施例提供的用户操作界面的示意图一；
52.图4为本技术实施例提供的代码信息的生成方法的流程图二；
53.图5为本技术实施例提供的代码信息的生成方法的流程图三；
54.图6为本技术实施例提供的页面模板代码的生成方法的示意图一；
55.图7为本技术实施例提供的页面脚本代码的生成方法的示意图一；
56.图8为本技术实施例提供的代码信息的生成装置的结构示意图；
57.图9为本技术实施例提供的电子设备的结构示意图。
58.通过上述附图，已示出本技术明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本技术构思的范围，而是通过参考特定实施例为本领域技术人员说明本技术的概念。
具体实施方式
59.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本技术相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本技术的一些方面相一致的装置和方法的例子。
60.目前，用户界面内一般包括多个可视化组件。通过vue构建用户界面时，需要确定用户界面对应的代码信息。其中，生成用户界面对应的代码信息的具体步骤可以为：首先，从数据库内获取组件模型数据和组件资源文件；然后，根据组件模型数据和组件资源文件，生成多个可视化组件；最后，确定多个可视化组件对应的代码信息，根据多个可视化组件对应的代码信息，生成用户界面对应的代码信息。
61.然而，发明人发现现有技术至少存在如下技术问题：用户界面内包括的多个可视化组件对应的代码信息是一一生成的，这样当用户界面内包括的多个组件的数量较多时，确定多个可视化组件对应的代码信息所花费的时间较长，进而导致生成用户界面对应的代码信息的效率较低。
62.针对上述技术问题，本技术提出如下技术构思：在用户操作界面内的资源选择区内，直接展示组件列表按钮、区块列表按钮和页面列表按钮，通过区块列表按钮，可以直接添加组件区块，通过页面列表按钮，可以直接添加页面模板，而组件区块和页面模板内包括多个组件，这样通过区块列表按钮和页面列表按钮能够一次性生成多个组件的代码信息，所以提高了生成用户界面对应的代码信息的效率。
63.图1为适用于本技术实施例的代码信息的生成方法的应用场景图。如图1所示，该应用场景包括：终端101和服务器102。终端101和服务器102之间可以通过无线方式连接。
64.服务器102内存储有多个网页模板对应的代码信息、多个区块对应的代码信息和多个组件对应的代码信息。例如，用户点击页面模板a对应的页面模板图标，终端101向服务器102发送获取请求，该获取请求包括页面模板标识(页面模板a)。服务器102根据页面模板a，从存储的页面模板标识与网页模板对应的代码信息的关联关系中，确定页面模板a对应的代码信息。服务器102将页面模板a对应的代码信息反馈至终端101。
65.再如，用户点击区块a对应的区块图标，终端101向服务器102发送获取请求，该获取请求包括区块标识(区块a)。服务器102根据区块a，从存储的区块标识与区块对应的代码
信息的关联关系中，确定该区块a对应的代码信息。服务器102将区块a对应的代码信息反馈至终端101。
66.需要说明的是，本技术的技术方案中，所涉及的金融数据或用户数据等信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。
67.本技术实施例提供一种代码信息的生成方法。本技术实施例的方法的执行主体可以是图1中所示的终端。图2为本技术实施例提供的代码信息的生成方法的流程图一。如图2所示，该代码信息的生成方法包括：
68.s201、展示前端的用户操作界面，用户操作界面内包括资源选择区和组件布局区，资源选择区内包括组件列表按钮、区块列表按钮和页面列表按钮。
69.在本技术实施例中，在开发目标用户界面时，用户可以从资源选择区选取网页模板、组件区块和组件。组件布局区，可以展示用户选取的网页模板、组件区块和组件。网页模板包括多个第一组件，且多个第一组件的类型和位置与该网页模板相对应。组件区块包括多个第二组件，且多个第二组件的类型和位置与该组件区块相对应。
70.示例性的，如图3所示，用户操作界面内包括资源选择区2和组件布局区5等。资源选择区2内包括组件列表、区块列表和页面列表。
71.s202、基于组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区展示目标用户界面。
72.在本技术实施例中，预设操作可以为点击操作。基于页面列表按钮上的预设操作，在组件布局区内添加页面模板。基于页面列表按钮上的预设操作，在组件布局区内添加页面模板。基于区块列表按钮上的预设操作，在组件布局区内组件区块。基于组件列表按钮上的预设操作，在组件布局区内添加组件。
73.可选的，页面模板包括多个组件，组件区块包括多个组件。在组件布局区内只能添加一个页面模板。组件布局区内的组件区块和组件可以是一个或多个。
74.s203、基于目标用户界面的展示内容，生成目标用户界面对应的代码信息，目标用户界面的展示内容包括页面模板和至少一个组件区块。
75.在本技术实施例中，目标用户界面对应的代码信息包括页面模板对应的代码信息以及至少一个组件区块对应的代码信息。可选的，终端生成页面模板包括的多个组件对应的代码信息，对页面模板内包括的多个组件对应的代码信息进行合并，得到页面模板对应的代码信息。终端对于目标用户界面内的每个组件区域，生成每个组件区块包括的多个组件对应的代码信息，对组件区块内包括的多个组件对应的代码信息，得到组件区块对应的代码信息。
76.可选的，目标用户界面的展示内容还包括至少一个组件。目标用户界面对应的代码信息包括页面模板对应的代码信息、至少一个组件区块对应的代码信息和至少一个组件对应的代码信息。
77.本技术提供的代码信息的生成方法，由于用户操作界面内的资源选择区内包括组件列表按钮、区块列表按钮和页面列表按钮，因此便于用户通过在组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区直接展示用户打算生成的目标用户界面，进而生成目标用户界面对应的代码信息，而组件区块和页面模板内包括多个组件，这样
通过区块列表按钮和页面列表按钮能够一次性生成多个组件的代码信息，所以提高了生成用户界面对应的代码信息的效率。
78.图4为本技术实施例提供的代码信息的生成方法的流程图二。在本发明实施例中，在图2提供的实施例的基础上，s202中基于组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区展示目标用户界面的具体实现方法进行了详细说明。
79.在一种可选的实施方式中，目标用户界面的展示内容包括页面模板和至少一个组件区块。基于组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区展示目标用户界面，包括以下步骤s401至s402：
80.s401、基于页面列表按钮上的点击操作，展示页面模板菜单栏，页面模板菜单栏内包括多个页面模板图标，基于任一页面模板图标上的点击操作，在组件布局区展示任一页面模板图标对应的页面模板，页面模板内包括多个第一组件。
81.页面模板内包括多个第一组件与该页面模板相关。可选的，页面模板为表格模板，则多个第一组件与表格模板相关。其中，页面模板图标内可以包括页面模板名称。例如，表格。
82.s402、基于区块列表按钮上的点击操作，展示组件区块菜单栏，组件区块菜单栏内包括多个组件区块图标，基于任一组件区块图标上的拖拽操作，在页面模板内展示任一区块模板图标对应的组件区块，组件区块内包括多个第二组件。
83.组件区块内包括多个第二组件与该组件区块相关。例如，组件区块为文字格式区块，则多个第二组件与文字格式均相关。其中，组件区块图标内可以包括组件区块名称。例如，字体。
84.在本发明实施例中，由于通过区块列表按钮，可以直接添加组件区块，通过页面列表按钮，可以直接添加页面模板，而组件区块和页面模板内包括多个组件，这样通过区块列表按钮和页面列表按钮能够一次性添加多个组件，提高了添加组件的效率，进而提高了生成用户界面对应的代码信息的效率。
85.需要说明的是，用户在添加页面模板和区块列表之后，还可以对多个第一组件和多个第二组件的位置进行调整。相应的，调整的具体步骤为：基于页面模板内任一第一组件上的拖拽操作，调整任一第一组件在页面模板内的位置；和/或，基于组件区块内任一第二组件上的拖拽操作，调整任一第二组件在组件区块内的位置。
86.在本发明实施例中，由于在添加页面模板和区块列表之后，还可以对多个第一组件和多个第二组件的位置进行调整，因此，提高了目标用户界面的灵活性，进而能够满足用户的各种业务需求。
87.在另一种可选的实施方式中，目标用户界面的展示内容包括页面模板、至少一个组件区块和至少一个组件。基于组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区展示目标用户界面，还包括步骤s403至s404：
88.s403、基于组件列表按钮上的点击操作，展示组件列表菜单栏，组件列表菜单栏内包括多个组件图标。
89.多个组件图标可以包括基础组件图标和数据组件图标等。基础组件图标可以包括按钮、图片、标签页等。数据组件图标可以包括文本、标签、表格等。
90.s404、基于任一组件图标上的拖拽操作，在页面模板内展示任一组件图标对应的
第三组件。
91.可选的，拖拽操作包括鼠标点击事件、鼠标移动事件和鼠标抬起事件。其中，鼠标点击事件用于确定待添加的目标组件，鼠标移动事件用于移动目标组件，鼠标抬起事件用于确定目标组件的展示位置。
92.在本发明实施例中，通过组件列表按钮上的点击操作，可以在目标用户界面内的任一位置添加目标组件，提高了目标用户界面的灵活性，从而能够满足用户的各种业务需求。
93.图5为本技术实施例提供的代码信息的生成方法的流程图三。在本发明实施例中，在图2提供的实施例的基础上，s203中基于目标用户界面的展示内容，生成目标用户界面对应的代码信息的具体实现方法进行了详细说明。
94.如图5所示，该方法包括：
95.s501、基于目标用户界面的展示内容，确定展示内容包括的多个组件的组件树信息，组件树信息用于表示父组件和子组件之间的嵌套关系。
96.可选的，组件树信息包括单个组件中的嵌套关系。一个组件对应一个组件树信息，父组件和子组件的层级不同。例如，组件包括父组件：一级1、一级2和一级3。父组件“一级1”包括子组件“二级1-1”，父组件“一级2”包括子组件“二级2-1”，父组件“一级3”包括子组件“二级3-1”。
97.在一种可选的实施方式中，组件树信息还包括页面模板、组件区块和组件的详细属性信息。相应的，本步骤为：终端确定目标用户界面内的页面模板包括的多个第一组件、目标用户界面内的至少一个组件区块包括的多个第二组件和目标用户界面内的至少一个第三组件；获取多个第一组件、多个第二组件和至少一个第三组件的基本属性信息、事件属性信息、函数属性信息和子组件信息，得到展示内容包括的多个组件的组件树信息。
98.示例性的，基本属性信息包括common(common，通用)属性。事件属性信息包括ui(user interface，用户界面)属性。函数属性信息包括custom(custom，自定义)属性。子组件信息包括slots(slots，插槽)属性。
99.例如，组件a的基本属性信息、事件属性信息、函数属性信息和子组件信息为：
100.[0101][0102][0103]
其中，common属性描述了组件的通用属性。可选的，label用于表示组件中文名。
tag用于表示组件通用标识。tagicon用于表示组件的图标名。span用于表示组件栅格所占列数。offset用于表示组件左侧间隔格数。layout用于表示组件的布局类型，不同布局类型对应的组件渲染方法和代码生成方法不同。document用于表示组件文档地址。topmargin用于表示组件上方外边距。bottommargin用于表示组件下方外边距。tooltip用于表示组件文字提示信息。
[0104]
其中，ui属性描述了组件属性和事件内容。可选的，组件事件fn用于表示组件绑定的事件，配置中需要指明事件类型和绑定的函数名。以表格组件为例进行说明。组件属性包括：defaultvalue用于表示属性值。proptype用于表示属性值的数据类型。isvariable则用于表示该属性是否需要当作变量处理。datamodel用于表示变量名。setter用于表示属性的属性设置器。name属性用于表示设置器种类。data则定义了部分属性设置器所需的数据模板。label用于表示属性设置器的标题名。
[0105]
其中，custom属性为组件自定义对象，主要存放了辅助组件正常渲染、生成代码和设置属性的值，此外有部分组件可以当作容器嵌套子组件，子组件的物料协议会保存在子数组内。
[0106]
其中，slots属性内包含了组件的插槽配置。
[0107]
s502、基于多个组件的组件树信息，生成目标用户界面对应的代码信息。
[0108]
在一种可选的实施方式中，生成目标用户界面对应的代码信息的具体步骤为：遍历多个组件的组件树信息，生成多个组件的页面模板代码、页面脚本代码和层叠样式代码；将多个组件的页面模板代码、多个组件的页面脚本代码和多个组件的层叠样式代码分别进行组合，得到目标用户界面对应的代码信息。示例性的，页面模板代码为html(hyper text markup language，超文本标记语言)代码；页面脚本代码为js(javascript，脚本)代码；层叠样式代码为css(cascading style sheet，层叠样式表单)代码。
[0109]
可选的，遍历多个组件的组件树信息，生成多个组件的页面模板代码、页面脚本代码和层叠样式代码，包括：遍历多个组件的组件树信息，确定每个组件的数据类型；根据每个组件的数据类型对应的代码生成算法，生成每个组件的页面模板代码、页面脚本代码和层叠样式代码。
[0110]
示例性的，终端通过html代码生成器遍历多个组件的组件树信息，根据组件树信息中json格式的数据，通过预设算法生成组件的页面模板代码。例如，参见图6，终端通过调用属性拼接算法处理ui属性，生成组件的页面模板代码的具体步骤为：
[0111]
步骤a1、确定ui属性信息中是否存在fn事件。
[0112]
步骤a2、若存在，则在fn事件前加“@”后直接与fnname用“＝”拼接起来；若不存在，则继续确定ui属性中是否存在style内联样式属性和v-model属性。
[0113]
步骤a3、若存在style内联样式属性和v-model属性，通过预设算法分别处理style内联样式属性和v-model属性；若不存在，则继续确定ui属性中是否存在变量。
[0114]
步骤a4、若存在变量，则在属性名前加“：”与变量名(datamodel)拼接；若不存在，则将属性名与defaultvalue直接进行拼接。
[0115]
步骤a5、调用自定义组件html代码生成函数，在组件配置文件的对象中添加自定义事件、属性、html代码。
[0116]
步骤a6、组件生成算法内部拼接处理，得到html代码字符串。
[0117]
示例性的，终端通过js代码生成器，对组件树信息进行解析，通过数据(data)代码生成算法、方法(method)代码生成算法、注释代码生成算法和生命周期代码生成算法，生成页面脚本代码。
[0118]
例如，参见图7，终端生成组件的页面脚本代码包括步骤b1至步骤b3：
[0119]
步骤b1、遍历ui属性信息，若ui属性信息中的isvariable为true(存在变量信息)或者存在v-model类型，则根据默认值(defaultvalue)的数据类型(也即，proptype.type)处理默认值，并拼接对应的变量名(datamodel)与默认值(defaultvalue)键值对。
[0120]
步骤b2、确定ui属性信息中是否存在表单组件。若存在，则通过表单组件的rule和model，将表单组件存储到表单映射表内。若不存在，则继续确定表单组件内的属性名是否为
‘
v-model’。
[0121]
步骤b3、若表单组件内的属性名是
‘
v-model’，则将表单组件存到缓存数据组内，之后进行合并处理。若表单组件内的属性名不是
‘
v-model’，则直接存到data数组内，然后调用组件自定义data代码生成函数，拼接data代码。
[0122]
继续参见图7，终端生成组件的页面脚本代码包括步骤c1至步骤c2：
[0123]
步骤c1、遍历ui属性信息，若ui属性信息中是否存在fn属性；若存在，则根据拼接方法算法，生成组件的页面脚本代码。
[0124]
步骤c2、遍历fn对象内的键值对，确定是否属于网页模板和组件区块。若是，则直接拼写定制逻辑。若不是，则解析fn对象，拼接方法名(fnname)、方法体(fncontent)，调用组件子自定义methods代码生成函数，生成methods代码，然后存到methods数组内。
[0125]
需要说明的是，用户还可以自定义生成js代码。具体步骤为：在组件配置文件的generator对象中，按照工具约定的函数参数和返回值规范，添加自定义data、methods函数等，组件生成算法内部调用自定义函数，拼接处理得到js代码。
[0126]
在本发明实施例中，在生成代码信息之后，可以通过用户操作界面预览和编辑代码信息。示例性的，继续参见图3，用户操作界面内还包括资源编辑区3，资源编辑区内包括预览按钮、导出代码按钮和代码编辑按钮。
[0127]
相应的，在步骤s203基于目标用户界面的展示内容，生成目标用户界面对应的代码信息之后，该方法还包括：基于预览按钮，展示目标用户界面对应的代码信息；或者，基于导出代码按钮，导出目标用户界面对应的代码信息；或者，基于代码编辑按钮，对目标用户界面内的展示内容进行调整，得到新目标用户界面，基于新目标用户界面的展示内容，生成新目标用户界面对应的新代码信息。
[0128]
可选的，代码编辑按钮包括撤销组件按钮、恢复组件按钮和删除组件按钮。相应的，终端基于代码编辑按钮，对目标用户界面内的展示内容进行调整的具体步骤为：基于撤销组件按钮上的点击操作，撤销目标用户界面内已添加的组件，和/或，基于恢复组件按钮的点击操作，恢复目标用户界面内已删除的组件，和/或，基于删除组件按钮的点击操作，删除目标用户界面内选中的组件。
[0129]
在本发明实施例中，通过代码编辑按钮，可以撤销、恢复或删除目标用户界面内的目标组件，提高了目标用户界面的灵活性，从而能够满足用户的各种业务需求。同时，通过代码编辑按钮，便于修改目标用户界面，所以也提高了目标用户界面的开发效率。
[0130]
需要说明的是，终端在基于预览按钮，展示目标用户界面对应的代码信息之后，还
可以包括：对代码信息进行调整，得到新代码信息；基于新代码信息，调整目标用户界面。
[0131]
在本发明实施例中，用户可以直接对代码信息进行调整，便于代码信息的修改，进而提高了生成代码信息的效率。
[0132]
图8为本技术实施例提供的代码信息的生成装置的结构示意图。如图8所示，该代码信息的生成装置，包括：第一展示模块801、第二展示模块802和生成模块803。
[0133]
其中，第一展示模块801，用于展示前端的用户操作界面，用户操作界面内包括资源选择区和组件布局区，资源选择区内包括组件列表按钮、区块列表按钮和页面列表按钮；
[0134]
第二展示模块802，用于基于组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区展示目标用户界面；
[0135]
生成模块803，用于基于目标用户界面的展示内容，生成目标用户界面对应的代码信息，目标用户界面的展示内容包括页面模板和至少一个组件区块。
[0136]
在一种可能的设计中，第二展示模块802基于组件列表按钮、区块列表按钮和页面列表按钮上的预设操作，在组件布局区展示目标界面，具体包括：基于页面列表按钮上的点击操作，展示页面模板菜单栏，页面模板菜单栏内包括多个页面模板图标，基于任一页面模板图标上的点击操作，在组件布局区展示任一页面模板图标对应的页面模板，页面模板内包括多个第一组件；基于区块列表按钮上的点击操作，展示组件区块菜单栏，组件区块菜单栏内包括多个组件区块图标，基于任一组件区块图标上的拖拽操作，在页面模板内展示任一区块模板图标对应的组件区块，组件区块内包括多个第二组件。
[0137]
在另一种可能的设计中，目标用户界面的展示内容包括页面模板、至少一个组件区块和至少一个组件；第二展示模块802在基于任一页面模板图标上的点击操作，在组件布局区展示任一页面模板图标对应的页面模板之后，具体还包括：基于组件列表按钮上的点击操作，展示组件列表菜单栏，组件列表菜单栏内包括多个组件图标；基于任一组件图标上的拖拽操作，在页面模板内展示任一组件图标对应的第三组件。
[0138]
在另一种可能的设计中，该装置还包括：第一调整模块804。
[0139]
第一调整模块804，用于基于页面模板内任一第一组件上的拖拽操作，调整任一第一组件在页面模板内的位置；和/或，第一调整模块804，用于基于组件区块内任一第二组件上的拖拽操作，调整任一第二组件在组件区块内的位置。
[0140]
在另一种可能的设计中，生成模块803基于目标用户界面的展示内容，生成目标用户界面对应的代码信息，具体包括：基于目标用户界面的展示内容，确定展示内容包括的多个组件的组件树信息，组件树信息用于表示父组件和子组件之间的嵌套关系；基于多个组件的组件树信息，生成目标用户界面对应的代码信息。
[0141]
在另一种可能的设计中，生成模块803基于目标用户界面的展示内容，确定展示内容包括的多个组件的组件树信息，具体包括：确定目标用户界面内的页面模板包括的多个第一组件、组件区块包括的多个第二组件和目标用户界面内的至少一个第三组件；获取多个第一组件、多个第二组件和至少一个第三组件的基本属性信息、事件属性信息、函数属性信息和子组件信息，得到展示内容包括的多个组件的组件树信息。
[0142]
在另一种可能的设计中，生成模块803基于多个组件的组件树信息，生成目标用户界面对应的代码信息，具体包括：遍历多个组件的组件树信息，生成多个组件的页面模板代码、页面脚本代码和层叠样式代码；将多个组件的页面模板代码、多个组件的页面脚本代码
和多个组件的层叠样式代码分别进行组合，得到目标用户界面对应的代码信息。
[0143]
在另一种可能的设计中，生成模块803遍历多个组件的组件树信息，生成多个组件的页面模板代码、页面脚本代码和层叠样式代码，具体包括：遍历多个组件的组件树信息，确定每个组件的数据类型；根据每个组件的数据类型对应的代码生成算法，生成每个组件的页面模板代码、页面脚本代码和层叠样式代码。
[0144]
在另一种可能的设计中，用户操作界面内还包括资源编辑区，资源编辑区内包括预览按钮、导出代码按钮和代码编辑按钮；装置还包括：第二调整模块805。
[0145]
第二调整模块805，用于基于预览按钮、导出代码按钮和代码编辑按钮，对目标用户界面内的展示内容进行调整，得到新目标用户界面；基于新目标用户界面的展示内容，生成新目标用户界面对应的新代码信息。
[0146]
在另一种可能的设计中，代码编辑按钮包括撤销组件按钮、恢复组件按钮和删除组件按钮；第二调整模块805基于代码编辑按钮，对目标用户界面内的展示内容进行调整，具体包括：基于撤销组件按钮上的点击操作，撤销目标用户界面内已添加的组件，和/或，基于恢复组件按钮的点击操作，恢复目标用户界面内已删除的组件，和/或，基于删除组件按钮的点击操作，删除目标用户界面内选中的组件。
[0147]
在另一种可能的设计中，第二调整模块805基于预览按钮，展示目标用户界面对应的代码信息之后，还包括：对代码信息进行调整，得到新代码信息；基于新代码信息，调整目标用户界面。
[0148]
需要说明的是，应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。例如，生成模块803可以为单独设立的处理元件，也可以集成在上述装置的某一个芯片中实现，此外，也可以以程序代码的形式存储于上述装置的存储器中，由上述装置的某一个处理元件调用并执行以上生成模块803的功能。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。
[0149]
图9为本技术实施例提供的电子设备的结构示意图。如图9所示，该电子设备可以包括：收发器901、处理器902、存储器903。
[0150]
处理器902执行存储器存储的计算机执行指令，使得处理器902执行上述实施例中的方案。处理器902可以是通用处理器，包括中央处理器cpu、网络处理器(network processor，np)等；还可以是数字信号处理器dsp、专用集成电路asic、现场可编程门阵列fpga或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
[0151]
存储器903通过系统总线与处理器902连接并完成相互间的通信，存储器903用于存储计算机程序指令。
[0152]
收发器901可以用于获取待运行任务和待运行任务的配置信息。
[0153]
系统总线可以是外设部件互连标准(peripheral component interconnect，pci)总线或扩展工业标准结构(extended industry standard architecture，eisa)总线等。系
统总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。收发器用于实现数据库访问装置与其他计算机(例如客户端、读写库和只读库)之间的通信。存储器可能包含随机存取存储器(random access memory，ram)，也可能还包括非易失性存储器(non-volatile memory)。
[0154]
本技术实施例提供的电子设备，可以是上述实施例的终端。
[0155]
本技术实施例还提供一种运行指令的芯片，该芯片用于执行上述实施例中代码信息的生成方法的技术方案。
[0156]
本技术实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在计算机上运行时，使得计算机执行上述实施例代码信息的生成方法的技术方案。
[0157]
本技术实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，其存储在计算机可读存储介质中，至少一个处理器可以从计算机可读存储介质读取计算机程序，至少一个处理器执行计算机程序时可实现上述实施例中代码信息的生成方法的技术方案。
[0158]
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本技术的其它实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本技术的真正范围和精神由下面的权利要求书指出。
[0159]
应当理解的是，本技术并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本技术的范围仅由所附的权利要求书来限制。