CN114968242A - 一种前端代码生成方法及装置 - Google Patents

Abstract

本申请实施例公开了一种前端代码生成方法及装置，包括：响应于用户在目标页面的模板选择操作，在目标页面显示用户选择的目标模板对应的前端页面和前端页面的配置项，响应于用户在目标页面对配置项的编辑操作，根据编辑操作确定的配置信息和目标模板生成前端页面的目标代码。可以在确定前端页面的模板，即前端页面的显示效果之后，对模板中的配置项进行编辑，得到前端页面的目标代码，执行该目标代码可以显示该前端页面。由此可见，本申请实施例可以根据前端页面的显示效果，确定相应地配置项，生成前端页面的目标代码，无需多次修改和执行前端代码，加快了前端页面代码的生成效率，并且利用模板和配置项使得用户生成前端代码更为简单方便。

Description

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

技术领域

本申请涉及计算机领域，尤其涉及一种前端代码生成方法及装置。

背景技术

随着计算机技术的发展，为用户提供显示的前端页面的需求也越来越多。目前，前端页面可以执行前端代码得到，前端代码可以利用前端代码生成工具编写。

但是当前的前端代码生成工具，只能在执行前端代码时，才能得到前端页面的显示效果，若显示效果不符合要求，则可能需要多次修改前端代码，并且多次执行修改后的前端代码，最终导致前端代码的生成较为繁琐，不能满足用户的需求。

发明内容

本申请提供了一种前端代码生成方法，使得用户生成前端代码更为简单方便。

本申请实施例提供一种前端代码生成方法，所述方法包括：

响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项；

响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

可选地，所述目标页面包括依次毗邻的第一区域、第二区域和第三区域；

所述响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项包括：

响应于用户在第一区域的模板选择操作，在所述第二区域显示所述用户选择的模板对应的前端页面以及在所述第三区域显示所述前端页面的配置项。

可选地，所述响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码包括：

响应于所述用户在所述目标页面对所述配置项的修改或输入操作，根据所述修改或输入操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

可选地，所述响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码包括：

响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述目标模板的名称，调用所述目标模板对应的代码转换命令，利用所述编辑操作确定的配置信息生成所述前端页面的目标代码。

可选地，所述方法还包括：

预先根据所述前端页面的显示效果编写所述前端页面的Vue框架文件；

根据所述Vue框架文件确定所述配置项；

编写根据所述配置项中编辑的配置信息确定所述前端页面的显示效果的配置条件，以便根据所述配置信息和所述配置条件修改所述前端页面的显示效果。

可选地，所述方法还包括：

预先建立所述前端页面的显示效果和所述目标模板的对应关系。

本申请实施例提供一种前端代码生成装置，所述装置包括：

显示单元，用于响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项；

生成单元，用于响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

可选地，所述目标页面包括依次毗邻的第一区域、第二区域和第三区域；

所述显示单元，具体用于：

响应于用户在第一区域的模板选择操作，在所述第二区域显示所述用户选择的模板对应的前端页面以及在所述第三区域显示所述前端页面的配置项。

可选地，所述生成单元，具体用于：

响应于所述用户在所述目标页面对所述配置项的修改或输入操作，根据所述修改或输入操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

可选地，所述生成单元，具体用于：

响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述目标模板的名称，调用所述目标模板对应的代码转换命令，利用所述编辑操作确定的配置信息生成所述前端页面的目标代码。

本申请实施例提供了一种前端代码生成方法，所述方法包括：响应于用户在目标页面的模板选择操作，在目标页面显示用户选择的目标模板对应的前端页面和前端页面的配置项，响应于用户在目标页面对配置项的编辑操作，根据编辑操作确定的配置信息和目标模板生成前端页面的目标代码。也就是说，可以在确定前端页面的模板，即前端页面的显示效果之后，对模板中的配置项进行编辑，得到前端页面的目标代码，执行该目标代码可以显示该前端页面。由此可见，本申请实施例可以根据前端页面的显示效果，确定相应地配置项，生成前端页面的目标代码，无需多次修改和执行前端代码，加快了前端页面代码的生成效率，并且利用模板和配置项使得用户生成前端代码更为简单方便。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1为本申请实施例提供的一种前端代码生成方法的流程图；

图2为本申请实施例提供的一种目标页面的示意图；

图3为本申请实施例提供的一种常用计算扩展示意图；

图4为本申请实施例提供的一种常用类型判断扩展示意图；

图5为本申请实施例提供的一种前端代码生成装置的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

随着科技的发展与相关业务的迅速扩张，一个公司所需的相关管理系统分类也越来越多。且在计算机(personal computer，PC)端，大多的操作是对于数据的增删改查，这也使得前端页面的样式十分相似。即便是不同的业务，它们页面的相似度也很大。因此，如何做到一次开发多次使用成为各大公司研究的方向。

一开始，均以组建化为目标，即：将页面常用功能抽取成一个个组件进而供开发者选择“组装”成一个页面。该种方式仍然需要开发者编写额外的页面样式，且对于两个相似度较大的页面，开发者采用的方式均是复制粘贴完代码后进行修改。但这种方式会带有上一个页面的相关业务处理代码，一旦不够注意，可能会引入其他的错误。而后，研究方向集中在了前端代码自动生成上。但目前均是以简单的静态模板为主：为开发者提供一个开发工具，让开发者通过命令行的方式生成相关页面的代码。该种方式需要开发者在随后的开发工作中根据自身的需要改变页面代码，并不能做到配置生成后只编写相关逻辑代码即可。并且开发者不能实时地看到页面的显示效果。

现目前，各种前端代码生成工具层出不穷，有基于UI绘图软件Sketch平台的，有利用Node.js的。前者更适用于页面样式变化万千的移动端，而后者则大多适用于PC端项目。而采用Node.js开发的代码生成工具，很多都缺少友好的人机交互页面，需要使用者记录下可使用的命令及其相关参数。此外，这些工具只提供了相关预设参数的替换，并没有实现真正意义上的动态可配。而且也没有办法让使用者在代码生成之前就看到其配置的页面在前端的显示效果。

基于此，本申请实施例提供了一种前端代码生成方法，所述方法包括：响应于用户在目标页面的模板选择操作，在目标页面显示用户选择的目标模板对应的前端页面和前端页面的配置项，响应于用户在目标页面对配置项的编辑操作，根据编辑操作确定的配置信息和目标模板生成前端页面的目标代码。也就是说，可以在确定前端页面的模板，即前端页面的显示效果之后，对模板中的配置项进行编辑，得到前端页面的目标代码，执行该目标代码可以显示该前端页面。由此可见，本申请实施例可以根据前端页面的显示效果，确定相应地配置项，生成前端页面的目标代码，无需多次修改和执行前端代码，加快了前端页面代码的生成效率，并且利用模板和配置项使得用户生成前端代码更为简单方便。

参见图1，该图为本申请实施例提供的一种前端代码生成方法的流程图。

本实施例提供的前端代码生成方法包括如下步骤：

S101，响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项。

在本申请的实施例中，目标页面可以包括依次毗邻的第一区域、第二区域和第三区域，第一区域为模板选择区域，第二区域为前端页面显示区域，第三区域为配置区域，参考图2所示。

作为一种示例，参考图2所示，第一区域包括导出模板、表单模板和信息维护模板等，第二区域为查询模板的前端页面的显示效果，第三区域为前端页面的多个配置项，例如搜索区标题、标签名和列宽占比等。

在本申请的实施例中，模板、前端页面和配置项是一一对应的关系，即需要预先建立前端页面的显示效果、配置项和目标模板的对应关系。因此当用户在目标页面触发模板选择操作，在目标页面显示用户选择的目标模板对应的前端页面和前端页面的配置项。

具体的，响应于用户在第一区域的模板选择操作，在第二区域显示用户选择的模板对应的前端页面以及在第三区域显示前端页面的配置项。

S102，响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

在本申请的实施例中，在用户选定目标模板之后，响应于用户在目标页面对目标模板对应的配置项的编辑操作，根据编辑操作确定的配置信息和目标模板生成前端页面的目标代码。

对配置项的编辑操作可以包括对配置项的修改或输入操作，即修改配置项的配置信息或在配置项的输入框中输入配置信息。

具体地，响应于用户在目标页面的第三区域对配置项的修改或输入操作，根据修改或输入操作确定的配置信息和目标模板生成前端页面的目标代码。

在本申请的实施例中，为实现用户选择目标模板后在目标页面的第二区域显示前端代码的显示效果和第三区域显示前端页面的配置项，需要预先根据前端页面的显示效果编写前端页面的Vue框架文件，根据Vue框架文件确定配置项，编写根据配置项中编辑的配置信息确定前端页面的显示效果的配置条件，以便根据配置信息和配置条件修改前端页面的显示效果。

其中，Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue只关注视图层，采用自底向上增量开发的设计，方便与第三方库或既有项目进行整合。且Vue实现了数据的双向绑定，即：当页面数据变化时会自动根据数据的变化更新页面显示效果，使得开发者不用再使用脚本语言来控制页面元素的显示和变化。用Vue编写的文件就叫做Vue文件。

具体的，需要预先对前端页面进行编写，形成一个Vue文件。然后抽取可配置的信息，再根据约定的规则或条件编写对应页面的配置规则或配置条件。配置规则大致上遵循以下四个规则：

1、指明配置项的数据类型，如：数组、对象、字符串等，然后配置区在渲染配置项时会根据该类型进行不同的样式渲染。如：数组项会增加加减号来实现响应元素的动态增减，数值型采用只允许用户输入数字的输入控件。

2、当配置项的数据类型为数组时，需要给出添加项的默认值，便于用户点击加号按钮后看到页面的变化情况从而避免歧义性。例如：某些元素的显示与值有关，值为空时不显示，如果用户恰巧添加该种类型的元素时会使页面看起来毫无变化从而导致用户的疑惑。

3、当数据项的值出现嵌套情况时，如：对象类型中某个值的取值是数组类型或者对象类型、数组中的值是对象类型，为了表明层级关系，对于嵌套信息的标识书写以“A.B”的形式为准。其中A代表父级的标识，B代表子级的标识。对于数组而言，如果其中的值是对象，那么“A.B”表示的只是数组A中的每个对象值中存在属性B。

4、指明配置项所填值需满足的规则以及错误提示信息，如：字数限制、大小限制、必填项等等。然后在生成代码的时候根据开发人员设置的规则对用户所填信息进行检查并在页面相应位置显示错误提示信息。

完成页面的配置规则抽取之后，将其与模板相关联，如：增加一个name字段表明是哪个模板。这样，在用户选择某一模板的时候，可以在页面切换的同时获取其对应的配置规则，并根据约定的规则对该配置信息进行解析，然后将渲染结果放置在页面对应的配置项设置区域。

对于页面配置效果的实时可视化效果则利用了Vue框架数据双向绑定的特点。会将配置信息转换为一个对象，并将该对象的信息以页面参数的形式传入该配置页面，此时Vue文件对应的页面在创建时便会对该传入的数据对象进行“劫持”，保证能监听到该对象中每一个属性值的变化。然后当用户对配置信息进行改变的时候，Vue会发现这些值进行了变化并根据这些值的变化来动态改变当前页面的显示效果，进而实现了配置规则改变的可视化效果。

本申请实施例选用Handlebars语言作为的模板开发语言。Handlebars语言是JavaScript的一种语义化模板语言，通过对view和data的分离来快速构建Web模板，其中data即为用户的输入数据，view则为抽离的页面模板。该模板语言将视图和数据相互分离，因此可以在适合的时机触发模板转换的功能，可以在用户需要的时候生成前端代码。

由于选用了该模板语言而该语言只能运行在node环境，即一个基于谷歌浏览器V8引擎的Javascript运行环境，而非浏览器的环境中，因此需要加入后端部署环境，将代码转换模板及相关转换逻辑放置在后端进行部署。

该模板语言对于变量的解析与Vue是一致的：均利用双花括号，但涉及到计算公式的时候，需要进行相应的扩展。常用计算扩展如图3所示。其余HTML片段中的命令均需要做转换，如v-for对应{{#each}}，v-if对应{{～#if}}。对于原Vue文件中script标签内的内容，则需要根据模板指定的配置规则和模板中可选的组件进行初始逻辑代码的注入与格式化。

根据配置规则中的内容，预先根据开放给用户选择的组件范围预判不同组件所需的方法代码，如：表单创建过程中提交时都会触发校验机制，然后根据校验结果进行后续的流程。那么就可以在用户选用表单创建时在代码部分预先注入校验函数并将基本判定逻辑注入该函数中，那么在后期开发过程中就只需要关注校验通过后的逻辑部分。

注入代码格式化主要是指代码间隔数、各项功能排列顺序等。为了将动态加入的变量以特定的格式输出到页面就需要开发者对该语言提供的处理函数进行扩展，进而提供按照变量的不同类型进行不同渲染的功能。本申请实施例中常用的三个类型判断扩展如图4所示。

在本申请的实施例中，在接收用户对目标页面对所述配置项的编辑操作之后，接收用户在目标页面触发的目标代码生成操作，而后根据目标模板的名称，调用目标模板对应的代码转换命令，利用编辑操作确定的配置信息生成前端页面的目标代码。

具体的，当用户点击代码生成按钮的时候，会将用户使用的代码转换模板的名称以及相关用户的配置信息以接口调用的方式传给相关后端处理逻辑，然后后端处理逻辑调用Handlebars语言提供的模板转换命令使用用户的配置信息完成相关代码转换功能并将转换后的代码以流的形式返回给前端。前端接到后端返回的流信息之后，按照返回中设置的文件类型，将相关内容转换成一个Vue文件并将该文件放置在浏览器设置的默认下载地址中。

本申请实施例提供的前端代码生成方法具有以下优点：

1、自定义的转换规则。当前依赖第三方规则进行代码转换会影响转换工具的稳定性。本申请实施例中采用自定义的配置规则对配置信息进行配置，然后利用代码模板对用户配置数据进行转换，生成对应的页面代码。而选用的模板语言作为一个开发语言，语法上基本不会出现大改的可能。且和其他开发语言一样，基本大版本的升级都会兼容低版本的语言。因此，不必担心其更版会带来大量改动。

2、可以与组件库相结合。由于模板代码是由开发者进行开发的，所以可以自由决定页面元素的来源。又因转换规则是由开发者设定的，所以可以根据特定的规则使用自身开发的组件库。而与组件库的友好结合不仅可以缩短开发人员的开发时间，还可以实现代码最大限度的复用。

3、实现了丰富的可视化配置。所有符合规则的配置规则都可以在页面的配置区被渲染出来。而要实现用户动态增减配置项只需要将某个配置项设置为数组，然后将对应元素的增减映射到数组的变化中。且由于数组中每个对象的类型也不固定，因此当数组中的元素是对象信息甚至是嵌套数组的时候，可配置项就会更加复杂，进而支持用户对某个选项进行更为复杂的配置。

4、友好的错误提示。配置的复杂性对用户输入的值必然有所要求。通过配置规则中的简单设置完成对于用户输入值的检测，确保页面代码能友好且无误的生成。

由此可见，本申请实施例实现实时地让用户看到其所配置的页面在前端的实际展示效果，PC端页面代码按照用户的配置结果进行页面的代码生成，不仅支持简单的文案更改还支持用户动态地增减页面元素并将该元素对应的属性添加至Vue文件所需的部分，真正做到开发人员无需二次修改页面内容。

本申请实施例提供了一种前端代码生成方法，所述方法包括：响应于用户在目标页面的模板选择操作，在目标页面显示用户选择的目标模板对应的前端页面和前端页面的配置项，响应于用户在目标页面对配置项的编辑操作，根据编辑操作确定的配置信息和目标模板生成前端页面的目标代码。也就是说，可以在确定前端页面的模板，即前端页面的显示效果之后，对模板中的配置项进行编辑，得到前端页面的目标代码，执行该目标代码可以显示该前端页面。由此可见，本申请实施例可以根据前端页面的显示效果，确定相应地配置项，生成前端页面的目标代码，无需多次修改和执行前端代码，加快了前端页面代码的生成效率，并且利用模板和配置项使得用户生成前端代码更为简单方便。

基于以上实施例提供的一种前端代码生成方法，本申请实施例还提供了一种前端代码生成装置，下面结合附图来详细说明其工作原理。

参见图5，该图为本申请实施例提供的一种前端代码生成装置的结构框图。

本实施例提供的前端代码生成装置500包括：

显示单元510，用于响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项；

生成单元520，用于响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

可选地，所述目标页面包括依次毗邻的第一区域、第二区域和第三区域；

所述显示单元，具体用于：

响应于用户在第一区域的模板选择操作，在所述第二区域显示所述用户选择的模板对应的前端页面以及在所述第三区域显示所述前端页面的配置项。

可选地，所述生成单元，具体用于：

响应于所述用户在所述目标页面对所述配置项的修改或输入操作，根据所述修改或输入操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

可选地，所述生成单元，具体用于：

响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述目标模板的名称，调用所述目标模板对应的代码转换命令，利用所述编辑操作确定的配置信息生成所述前端页面的目标代码。

可选地，所述装置还包括编写单元；

所述编写单元用于：

预先根据所述前端页面的显示效果编写所述前端页面的Vue框架文件；

根据所述Vue框架文件确定所述配置项；

编写根据所述配置项中编辑的配置信息确定所述前端页面的显示效果的配置条件，以便根据所述配置信息和所述配置条件修改所述前端页面的显示效果。

可选地，所述装置还包括：

建立单元，用于预先建立所述前端页面的显示效果和所述目标模板的对应关系。

当介绍本申请的各种实施例的元件时，冠词“一”、“一个”、“这个”和“所述”都意图表示有一个或多个元件。词语“包括”、“包含”和“具有”都是包括性的并意味着除了列出的元件之外，还可以有其它元件。

需要说明的是，本领域普通技术人员可以理解实现上述方法实施例中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)或随机存储记忆体(RandomAccess Memory,RAM)等。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元及模块可以是或者也可以不是物理上分开的。另外，还可以根据实际的需要选择其中的部分或者全部单元和模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上所述仅是本申请的具体实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种前端代码生成方法，其特征在于，所述方法包括：

响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项；

响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

2.根据权利要求1所述的方法，其特征在于，所述目标页面包括依次毗邻的第一区域、第二区域和第三区域；

所述响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项包括：

响应于用户在第一区域的模板选择操作，在所述第二区域显示所述用户选择的模板对应的前端页面以及在所述第三区域显示所述前端页面的配置项。

3.根据权利要求1所述的方法，其特征在于，所述响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码包括：

响应于所述用户在所述目标页面对所述配置项的修改或输入操作，根据所述修改或输入操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

4.根据权利要求1所述的方法，其特征在于，所述响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码包括：

响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述目标模板的名称，调用所述目标模板对应的代码转换命令，利用所述编辑操作确定的配置信息生成所述前端页面的目标代码。

5.根据权利要求1-4任意一项所述的方法，其特征在于，所述方法还包括：

预先根据所述前端页面的显示效果编写所述前端页面的Vue框架文件；

根据所述Vue框架文件确定所述配置项；

编写根据所述配置项中编辑的配置信息确定所述前端页面的显示效果的配置条件，以便根据所述配置信息和所述配置条件修改所述前端页面的显示效果。

6.根据权利要求1-4任意一项所述的方法，其特征在于，所述方法还包括：

预先建立所述前端页面的显示效果和所述目标模板的对应关系。

7.一种前端代码生成装置，其特征在于，所述装置包括：

显示单元，用于响应于用户在目标页面的模板选择操作，在所述目标页面显示所述用户选择的目标模板对应的前端页面和所述前端页面的配置项；

生成单元，用于响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述编辑操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

8.根据权利要求7所述的装置，其特征在于，所述目标页面包括依次毗邻的第一区域、第二区域和第三区域；

所述显示单元，具体用于：

响应于用户在第一区域的模板选择操作，在所述第二区域显示所述用户选择的模板对应的前端页面以及在所述第三区域显示所述前端页面的配置项。

9.根据权利要求7所述的装置，其特征在于，所述生成单元，具体用于：

响应于所述用户在所述目标页面对所述配置项的修改或输入操作，根据所述修改或输入操作确定的配置信息和所述目标模板生成所述前端页面的目标代码。

10.根据权利要求7所述的装置，其特征在于，所述生成单元，具体用于：

响应于所述用户在所述目标页面对所述配置项的编辑操作，根据所述目标模板的名称，调用所述目标模板对应的代码转换命令，利用所述编辑操作确定的配置信息生成所述前端页面的目标代码。

Images