前端代码自动生成方法与流程

1.本发明涉及前端代码生成技术领域，具体涉及一种前端代码自动生成方法。


背景技术：

2.目前，前端开发人员编写前端代码时，主要使用超文本标记语言(hypertext markup language，html)和vue6 xstream(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.图1是本发明实施例一提供的一种前端代码自动生成方法的流程示意图。
29.图2是本发明实施例二提供的一种前端代码自动生成方法的流程示意图。
30.图3是本发明实施例三提供的一种前端代码自动生成方法的流程示意图。
具体实施方式
31.为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。
32.实施例一
33.图1是本发明实施例一提供的一种前端代码自动生成方法的流程示意图。该实施例以前端代码生成平台的执行过程为例。如图1所示，本实施例的前端代码自动生成方法，包括：
34.s101、获取前端设计样式图片。
35.具体的，前端设计样式图片可以是根据用户手绘的前端样式草图生成的图片，也可以是其他包含前端样式的图片。在一个具体的例子中，用户在画图软件上手动画出前端样式，然后将其保存为jpg格式或png格式的图片，该图片即为前端设计样式图片。
36.s102、向服务器发送代码生成请求；所述代码生成请求包括所述前端设计样式图片。
37.详细的，前端代码生成平台获取到前端设计样式图片后，根据前端设计样式图片生成代码生成请求，代码生成请求包括所述前端设计样式图片。然后，前端代码生成平台将代码生成请求发生给服务器，以使服务器根据代码生成请求生成前端设计样式图片对应的前端代码。
38.s103、接收服务器反馈的前端代码。
39.本实施例采用以上技术方案，一种前端代码自动生成方法，应用于前端代码生成平台，包括：获取前端设计样式图片；向服务器发送代码生成请求；代码生成请求包括前端设计样式图片；接收服务器反馈的前端代码。基于此，本技术能够根据前端设计样式图片自
动获取对应的前端代码，减少了开发人员的开发时间，使得前端代码的编写速度和调试速度加快，降低了开发人员的工作量，提高了前端代码的开发效率。
40.优选的，本实施例中，获取前端设计样式图片之后，还包括：
41.根据用户的选择操作选择模板参数；代码生成请求还包括模板参数。
42.详细的，为了满足用户要求生成特定模板的前端代码的需求，前端代码生成平台在获取前端设计样式图片之后，还根据用户的选择操作选择模板参数。用户可以选择的模板参数包括但不限于超文本标记语言(hypertext markup language，html)、angela、vue6 xstream(vue)和bootstrap。
43.优选的，本实施例中，接收服务器反馈的前端代码之后，还包括：
44.显示前端代码。
45.具体的，前端代码生成平台接收服务器反馈的前端代码之后，显示前端代码，以方便用户查看前端代码。
46.优选的，本实施例中，显示前端代码之后，还包括：
47.根据用户的修改操作修改前端代码。
48.详细的，前端代码生成平台显示前端代码供用户查看，用户查看后，可能需要修改前端代码，为了满足用户这一需求，前端代码生成平台还可以根据用户的修改操作修改前端代码。
49.实施例二
50.图2是本发明实施例二提供的一种前端代码自动生成方法的流程示意图。该实施例以服务器执行过程为例。如图2所示，本实施例的前端代码自动生成方法，包括：
51.s201、接收前端代码生成平台发送的代码生成请求；代码生成请求包括前端设计样式图片和前端代码生成平台标识。
52.s202、判断代码生成请求中是否包含模板参数，若是，执行步骤s204，否则，执行步骤s203。
53.具体的，由于用户在通过前端代码生成平台向服务器发送代码生成请求时，可以选择要生成的代码模板的模板参数，也可以不选择，因此，代码生成请求中可能包含模板参数，也可能不包含模板参数。
54.s203、将预设模板参数定义为目标模板参数。
55.具体的，本领域的技术人员可根据实际需要设置预设模板参数。例如，预设模板参数可以是html。
56.s204、将代码生成请求中的模板参数定义为目标模板参数。
57.s205、根据目标模板参数和前端设计样式图片生成前端代码。
58.具体的，服务器预先训练有代码生成模型，代码生成模型包含多个代码块，代码块包括按钮代码块和表格代码块等。服务器解析前端设计样式图片后，得到与代码块对应的图片模块，然后根据各图片模块分别对应的代码块，生成前端设计样式图片对应的前端代码。
59.需要说明的是，前端代码的排板格式可以是预设格式，服务器将前端代码返回至前端代码生成平台后，技术人员可根据实际需要修改前端代码。
60.s206、将前端代码反馈给前端代码生成平台。
61.详细的，服务器根据前端代码生成平台标识将前端代码反馈给前端代码生成平台。
62.优选的，根据目标模板参数和前端设计样式图片生成前端代码，包括：
63.根据目标模板参数调用目标代码生成服务；然后，根据目标代码生成服务和前端设计样式图片生成前端代码。
64.具体的，代码生成模型中包括多个代码生成服务，代码生成服务包括但不限于html、angela、vue和bootstrap。服务器根据模板参数调用对应的代码生成服务。例如，当模板参数为vue时，服务器调用vue代码生成服务。
65.需要说明的是，本实施例和实施例一基于一个总的发明构思，具备相同或相应的有益效果，在此不再赘述。
66.实施例三
67.图3是本发明实施例三提供的一种前端代码自动生成方法的流程示意图。本实施例以前端代码生成平台和服务器的交互执行为例。如图3所示，本实施例的前端代码自动生成方法包括：
68.s301、前端代码生成平台获取前端设计样式图片。
69.s302、前端代码生成平台向服务器发送代码生成请求；代码生成请求包括前端设计样式图片。
70.s303、服务器接收前端代码生成平台发送的代码生成请求；代码生成请求包括前端设计样式图片。
71.s304、服务器判断代码生成请求中是否包含模板参数；若是，将代码生成请求中的模板参数定义为目标模板参数；否则，将预设模板参数定义为目标模板参数。
72.s305、服务器根据目标模板参数和前端设计样式图片生成前端代码。
73.s306、服务器将前端代码反馈给前端代码生成平台。
74.s307、前端代码生成平台接收服务器反馈的前端代码。
75.需要说明的是，本实施例基于实施例一和实施例二，具备相应的执行过程和有益效果，在此不再赘述。
76.可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。
77.需要说明的是，在本发明的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是指至少两个。
78.流程示意图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。
79.应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下
列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(pga)，现场可编程门阵列(fpga)等。
80.本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
81.此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
82.上述提到的存储介质可以是只读存储器，磁盘或光盘等。
83.在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
84.尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。