CN109725901B - 前端代码的开发方法、装置、设备和计算机存储介质 - Google Patents

Abstract

本发明公开了一种前端代码的开发方法，包括以下步骤：接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息；接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件；建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码。本发明还公开了一种前端代码的开发装置、设备和计算机存储介质。本发明通过组件化开发的方法，提高了代码的复用率，减少了开发人员工作量，提高了开发效率。

Description

前端代码的开发方法、装置、设备和计算机存储介质

技术领域

本发明涉及信息技术领域，尤其涉及前端代码的开发方法、装置、设备和计算机存储介质。

背景技术

由于线上产品更新较快，在线上产品的开发过程中，需要开发人员编写对应的项目代码，项目代码分为前端代码和后端代码，由于前端代码用于渲染生成的对应的页面，后端代码用于处理对应的项目逻辑；这就导致了前端代码中会出现重复的代码信息，例如，前端页面中通常包含有表格、选框、或者其他图像元素，前端页面中各个图像元素对应的代码是相似的，前端开发人员需要重复的进行代码的编写，在产品项目确定的情况下，如何减少前端代码的重复编写，并进一步减少开发成本，提高开发效率，成了目前产品开发的亟待解决的技术问题。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

发明内容

本发明的主要目的在于提供一种前端代码的开发方法、装置、设备和计算机存储介质，旨在解决提高前端开发效率。

为实现上述目的，本发明提供一种前端代码的开发方法，所述前端代码的开发方法包括以下步骤：

接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息；

接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件；

建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；

将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码。

可选地，所述接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息的步骤之前，包括：

统计预设前端页面中各类型控件的出现频率，将所述出现频率高于预设值的控件作为常用控件；

设置所述常用控件对应的Json协议和配置文件，并将所述Json协议、所述配置文件和所述常用控件封装成对应的基础组件；

将各所述基础组件汇总得到所述预设组件集合。

可选地，所述接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件的步骤，包括：

接收组件添加请求，获取所述组件添加请求中包含的组件类型，将所述组件类型与所述预设组件集合中各组件标签的类型信息进行比对；

将所述组件标签中类型信息与所述组件类型匹配的基础组件作为开发基础组件。

可选地，所述建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中的步骤，包括：

建立所述待显示信息与所述开发基础组件之间的映射关系，并显示所述开发基础组件对应的组件编辑窗口，以供用户在所述组件编辑窗口中设置所述开发基础组件对应的显示规则；

获取所述编辑窗口中输入的显示规则，根据所述显示规则调整所述开发基础组件对应的目标配置文件，以根据所述目标配置文件和所述映射关系，将所述待显示信息对应显示在所述开发基础组件中。

可选地，所述将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码的步骤之后，包括：

接收页面开启请求，获取所述页面开启请求中包含的页面标识，并获取所述页面标识对应的前端代码；

获取所述前端代码中包含的目标前端框架，并获取所述目标前端框架中的映射关系，根据所述映射关系确定渲染基础组件；

将所述待显示信息对应显示在所述渲染基础组件中，以渲染生成包含组件的前端页面。

可选地，所述将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码的步骤之后，包括：

接收组件更新请求，获取所述组件更新请求中包含的组件标签和更新信息；

获取预设组件集合中所述组件标签对应的第一基础组件，并根据所述更新信息调整所述第一基础组件，得到第二基础组件；

将所述第二基础组件作为所述组件更新请求中的基础组件。

可选地，所述将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码的步骤之后，包括：

将所述前端代码保存至云端，以使用户从云端获取所述前端代码渲染生成前端页面。

此外，为实现上述目的，本发明还提供一种前端代码的开发装置；

所述前端代码的开发装置包括：

接收获取模块，用于接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息；

组件选取模块，用于接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件；

建立显示模块，用于建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；

显示生成模块，用于将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码。

此外，为实现上述目的，本发明还提供一种前端代码的开发设备；

所述前端代码的开发设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中：

所述计算机程序被所述处理器执行时实现如上所述的前端代码的开发方法的步骤。

此外，为实现上述目的，本发明还提供计算机存储介质；

所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述的前端代码的开发方法的步骤。

本发明实施例提出的一种前端代码的开发方法、装置、设备和计算机存储介质，前端开发者触发开发请求，服务器接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息；接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件；建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码，通过在前端框架上添加组件化，实现组件化的开发，提高了代码的复用率，减少了开发人员工作量，提高了开发效率。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的装置结构示意图；

图2为本发明前端代码的开发方法第一实施例的流程示意图；

图3为本发明前端代码的开发方法第一实施例中步骤S10之前的流程示意图；

图4为本发明前端代码的开发方法第二实施例的流程示意图；

图5为本发明前端代码的开发方法第三实施例的流程示意图；

图6为本发明前端代码的开发装置一实施例的功能模块示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，图1是本发明实施例方案涉及的硬件运行环境的服务器(又叫前端代码的开发设备，其中，前端代码的开发设备可以是由单独的前端代码的开发装置构成，也可以是由其他装置与前端代码的开发装置组合形成)结构示意图。

本发明实施例服务器指一个管理资源并为用户提供服务的计算机，通常分为文件服务器、数据库服务器和应用程序服务器。运行以上软件的计算机或计算机系统也被称为服务器。相对于普通PC(personal computer)个人计算机来说，服务器在稳定性、安全性、性能等方面都要求较高；如图1所示，该服务器可以包括：处理器1001，例如中央处理器Central Processing Unit，CPU)，网络接口1004，用户接口1003，存储器1005，通信总线1002、芯片组、磁盘系统、网络等硬件等。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真WIreless-FIdelity，WIFI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

可选地，服务器还可以包括摄像头、RF(Radio Frequency，射频)电路，传感器、音频电路、WiFi模块；输入单元，比显示屏，触摸屏；网络接口可选除无线接口中除WiFi外，蓝牙、探针、3G/4G/5G(前面的数字表示的是蜂窝移动通信网络的代数。就是表示是第几代的网络。英文字母G表示generation)联网基站设备等等。本领域技术人员可以理解，图1中示出的服务器结构并不构成对服务器的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，该计算机软件产品存储在一个存储介质(存储介质：又叫计算机存储介质、计算机介质、可读介质、可读存储介质、计算机可读存储介质或者直接叫介质等，如RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及计算机程序。

在图1所示的服务器中，网络接口1004主要用于连接后台数据库，与后台数据库进行数据通信；用户接口1003主要用于连接客户端(客户端，又叫用户端或终端，本发明实施例终端可以固定终端，也可以是移动终端，其中，固定终端如“物联网设备”、带联网功能的智能空调、智能电灯、智能电源等等；移动终端，如带联网功能的AR/VR设备，智能音箱、自动驾驶汽车、PC，智能手机、平板电脑、电子书阅读器、便携计算机等具有显示功能的终端设备，终端中包含传感器比如光传感器、运动传感器以及其他传感器，移动终端还可配置陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述)，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的计算机程序，并执行本发明以下实施例提供的前端代码的开发方法中的步骤。

参照图2，本发明前端代码的开发方法的第一实施例中，所述前端代码的开发方法包括：

接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息；

接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件；

建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；

将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码。

在本实施例的上述步骤执行之前，需要开发者根据前端页面的显示信息设置组件，并将各个类型组件组合形成的预设组件集合，服务器将生成的预设组件集合进行保存，在前端开发时可以选择预设组件集合中的组件，并根据项目详细信息编辑预设组件集合中的组件，形成符合页面需求的产品信息，这样的开发方式可以避免前端代码中的组件代码进行重复的开发。

具体的，参照图3，前端代码的开发方法中设置预设组件集合的步骤包括：

步骤S01，统计预设前端页面中各类型控件的出现频率，将所述出现频率高于预设值的控件作为常用控件。

服务器统计预设各前端页面(预设前端页面是指现有的产品前端页面，预设前端页面的页面数量和页面来源根据具体情况设置，例如，可以设置为一个应用软件的多个显示页面，或者一个系统中包含的多个显示网页)中各类型控件的出现频率。服务器将出现频率高于预设值(预设值可根据具体情况设置，预设值为3，即：统计的前端页面中有3个表格类型的控件)的控件作为常用控件，例如，一个应用软件的10个显示页面中出现通选框2次、复选框2次、折线图1次、表格2次、按钮5次、下拉式菜单4次，预设值为3次，则服务器将按钮和下拉式菜单作为常用控件。

其中，控件是指对数据和方法的封装；控件包含有对应的属性和方法，属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能；控件可以根据不同的划分标准划分为不同类型，例如，根据控件的中包含的显示信息将控件划分为：1、用户界面控件(用户界面控件是指用于开发构建用户界面(UI)的控件，帮助完成软件开发中视窗、文本框、按钮、下拉式菜单等界面元素的开发)；2、图表控件(图表控件用于开发图表的控件，帮助软件实现数据可视化，实现开发时较难独立完成的复杂图表)；3、报表控件(报表控件用于开发报表的控件，在软件中实现报表的浏览查看、设计、编辑、打印等功能)；4、表格控件(表格控件用于开发表格的控件，主要实现网格中数据处理和操作的功能)。

步骤S02，设置所述常用控件对应的Json协议和配置文件，并将所述Json协议、所述配置文件和所述常用控件封装成对应的基础组件。

服务器在显示屏上显示常用控件设置窗口，以供前端开发者在常用控件设置窗口设置所述常用控件对应的Json协议(Json协议又叫数据交换格式，或者传输协议)和配置文件，服务器将设置完成的Json协议、配置文件和常用控件封装成对应的基础组件，具体地，前端开发人员采用前端框架(Angularjs BootStrap)以及Java描述语言(JavaScript)将页面常用控件封装成各个组件，通过组件定义模块为各组件设置Json协议、配置文件(配置文件定义组件对应属性)及与各个组件之间的联通关系，并预先定义控件的事件、方法、属性、对应的后台业务流程定义，在定义完成后，服务器将定义的Json协议、配置文件和常用控件封装成对应的基础组件。

步骤S03，将所述各基础组件汇总得到预设组件集合。

服务器将定义完成的组件汇总，生成预设组件集合，并设置组件集合中各组件的组件标签，以供前端开发人员根据组件标签选择对应组件。

在本实施例中服务器根据页面的常用控件设置组件集合，以使前端开发人员在前端开发时，可以从组件集合中选择需要的组件，避免了前端开发人员反复进行代码的编写。

进一步地，在上述实施例的基础上提出了本发明的第一实施例，在前端开发过程中，前端开发用户将定义好的组件拖拽到界面编辑中，点击每个组件的组件编辑窗口设置对应的组件标签，并将组件按照业务逻辑定义的事件、方法、属性、对应的后台业务流程调整预先定义的信息，使得生成项目对应的组件。具体地，在前端页面的开发方法的第一实施例中，根据预设组件集合进行前端页面开发的步骤包括：

步骤S10，接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息。

前端开发人员在服务器上基于预设前端框架触发的开发请求，其中，预设前端框架是指包含前端页面的基础代码形成的代码框架；服务器接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息，待显示信息是前端界面需要进行显示的信息，待显示信息根据具体情况设置，例如，待显示信息为年度销售数据。

步骤S20，接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件。

在确定待显示信息之后，用户在服务器上触发组件添加请求，服务器接收组件添加请求中包含的组件类型；并根据组件类型从预设组件集合中选取与组件类型匹配的开发基础组件，具体地，服务器将所述组件类型与所述预设组件集合中各组件标签的类型信息进行比对；若所述各组件标签中的类型信息与所述组件类型匹配，则将所述组件标签对应的基础组件作为开发基础组件。例如，组件添加请求中包含的组件类型为001(表格标签)，则服务器将001(表格标签)与组件集合中的组件标签进行比对，确定表格类型的组件作为目标基础组件。

具体地，步骤S20，包括：

步骤a1，接收组件添加请求，获取所述组件添加请求中包含的组件类型，将所述组件类型与所述预设组件集合中各组件标签的类型信息进行比对。

步骤b1，将所述组件标签中类型信息与所述组件类型匹配的基础组件作为开发基础组件。

在本实施例中前端开发者可以根据组件类型选择对应的组件，使得前端开发者的效率更高。

步骤S30，建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中。

服务器建立所述待显示信息与所述目标基础组件之间的映射关系，即，在确定待显示信息和目标基础组件之后，将待显示信息和目标基础组件建立映射关系，以使所述待显示信息对应显示在所述开发基础组件中。

具体地，步骤S30，包括：

步骤a2，建立所述待显示信息与所述开发基础组件之间的映射关系，并显示所述开发基础组件对应的组件编辑窗口，以供用户在所述组件编辑窗口中设置所述开发基础组件对应的显示规则；

步骤b2，获取所述编辑窗口中输入的显示规则，根据所述显示规则调整所述开发基础组件对应的目标配置文件，以根据所述目标配置文件和所述映射关系，将所述待显示信息对应显示在所述开发基础组件中。

服务器建立所述待显示信息与所述目标基础组件之间的映射关系，并显示目标基础组件对应的组件编辑窗口，以提示用户设置显示规则，用户在组件编辑窗口中设置目标基础组件对应的显示规则(其中，显示规则包括显示形式，例如：三维阴影；目标基础组件对应控件尺寸信息、目标基础组件对应控件的组合信息等)；获取所述编辑窗口中输入的显示规则，根据所述显示规则调整所述目标基础组件对应的配置文件，以在用户开启页面时，根据所述配置文件和所述映射关系，将所述待显示信息对应显示在所述开发基础组件中。

步骤S40，将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码。

服务器将待显示信息与映射关系添加至所述预设前端框架中，即，服务器将待显示信息与所述映射关系添加至预设前端代码中，得到可以渲染生成完整页面的前端代码，使得用户在访问前端页面时，前端服务器可以根据前端代码中的信息进行前端页面的渲染。

在本实施例中通过组件化开发的方法，前端开发人员不需要进行重复的前端代码编写，在页面中包含控件时，前端开发人员可以选择预设组件集合控件对应的组件，并将组件进行简单的设置，使预设组件集合中的组件满足当前前端页面的需求，提高了代码的复用率，减少了开发人员工作量，从而提高了开发效率。

进一步地，在实施例步骤S40之后，包括：

将所述前端代码保存至云端，以使用户从云端获取所述前端代码渲染生成前端页面。

本实施例中将生成的前端代码保存在云端，前端开发人员可以实时地获取云端中的中的前端代码，防止前端代码丢失的情况。

进一步的，参照图4，在本发明第一实施例的基础上，提出了本发明前端代码的开发方法的第二实施例，本实施例中根据生成的前端代码渲染生成对应的前端页面，本实施例是第一实施例中步骤S40之后的步骤。

所述前端代码的开发方法包括：

步骤S50，接收页面开启请求，获取所述页面开启请求中包含的页面标识，并获取所述页面标识对应的前端代码。

用户在终端上触发页面开启请求，服务器接收页面开启请求，获取页面开启请求中包含的页面标识，其中，页面标识是指可以识别页面的标识信息。并获取所述页面标识对应的前端代码，即，服务器根据页面标识获取服务器中存储的前端页面对应的前端代码。

步骤S60，获取所述前端代码中包含的目标前端框架，并获取所述目标前端框架中的映射关系，根据所述映射关系确定渲染基础组件。

服务器获取前端代码中包含的目标前端框架，并获取目标前端框架中的映射关系，根据所述映射关系确定渲染基础组件，即，服务器根据前端代码中确定前端代码对应的待显示信息和渲染基础组件；需要说明的是：前端代码中可能包含多个渲染基础组件。

步骤S70，将所述待显示信息对应显示在所述渲染基础组件中，以渲染生成包含组件的前端页面。

服务器根据映射关系将待显示信息对应显示在目标基础组件中，即，服务器根据目标基础组件对应的配置文件和Json协议，对目标基础组件进行调整，生成包含待显示信息的组件，并渲染生成包含组件的前端页面。

在本实施例中根据设置的组件信息渲染生成包含组件的前端页面，实现了组件的快速生成。

进一步的，参照图5，本发明前端代码的开发方法的第三实施例中，前端开发者可以更新预设组件集合中的组件信息；本实施例可以与其他实施例进行结合。

所述前端代码的开发方法包括：

步骤S80，接收组件更新请求，获取所述组件更新请求中包含的组件标签和更新信息。

前端开发者可以更新预设组件集合中的组件，即，前端开发者在服务器上触发组件更新请求，服务器接收组件更新请求，获取所述组件更新请求中包含的组件标签和更新信息，其中，更新信息是组件的属性、事件和方法，还可以是组件对应的显示信息。

步骤S90，获取预设组件集合中所述组件标签对应的第一基础组件，并根据所述更新信息调整所述第一基础组件，得到第二基础组件。

服务器获取预设组件集合中所述组件标签对应的第一基础组件，即，服务器将组件更新请求中组件标签对应的基础组件作为第一基础组件，并根据更新信息调整所述第一基础组件，得到第二基础组件。

步骤S100，将所述第二基础组件作为所述组件更新请求中的基础组件。

服务器将所述第二基础组件作为所述组件更新请求中的基础组件，在服务器接收页面开启请求时，服务器可以获取更新的基础组件，作为目标基础组件，即，前端开发者只需要更新预设组件集合中的基础组件，在进行页面渲染时，服务器就可以对应获取预设组件集合中的基础组件进行界面渲染，前端开发者不需要对每一个界面中的组件都进行重复的编辑。

此外，参照图6，本发明实施例还提出前端代码的开发装置，所述前端代码的开发装置包括：

接收获取模块10，用于接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息；

组件选取模块20，用于接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件；

建立显示模块30，用于建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；

显示生成模块40，用于将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码。

进一步地，所述前端代码的开发装置，包括：

频率统计模块，用于统计预设前端页面中各类型控件的出现频率，将所述出现频率高于预设值的控件作为常用控件；

组件设置模块，用于设置所述常用控件对应的Json协议和配置文件，并将所述Json协议、所述配置文件和所述常用控件封装成对应的基础组件；

集合确定模块，用于将所述各基础组件汇总得到预设组件集合。

进一步地，所述组件选取模块20，包括：

标签比对单元，用于将所述组件类型与所述预设组件集合中各组件标签的类型信息进行比对；

匹配确定单元，用于将所述组件标签中类型信息与所述组件类型匹配的基础组件作为开发基础组件。

进一步地，所述建立显示模块30，包括：

建立设置单元，用于建立所述待显示信息与所述开发基础组件之间的映射关系，并显示所述开发基础组件对应的组件编辑窗口，以供用户在所述组件编辑窗口中设置所述开发基础组件对应的显示规则；

获取调整单元，用于获取所述编辑窗口中输入的显示规则，根据所述显示规则调整所述开发基础组件对应的目标配置文件，以根据所述目标配置文件和所述映射关系，将所述待显示信息对应显示在所述开发基础组件中。

进一步地，所述前端代码的开发装置，包括：

页面开启模块，用于接收页面开启请求，获取所述页面开启请求中包含的页面标识，并获取所述页面标识对应的前端代码；

获取确定模块，用于获取所述前端代码中包含的目标前端框架，并获取所述目标前端框架中的映射关系，根据所述映射关系确定渲染基础组件；

显示渲染模块，用于将所述待显示信息对应显示在所述渲染基础组件中，以渲染生成包含组件的前端页面。

进一步地，所述前端代码的开发装置，包括：

组件更新模块，用于接收组件更新请求，获取所述组件更新请求中包含的组件标签和更新信息；

组件调整模块，用于获取预设组件集合中所述组件标签对应的第一基础组件，并根据所述更新信息调整所述第一基础组件，得到第二基础组件；

组件确定模块，用于将所述第二基础组件作为所述组件更新请求中的基础组件。

进一步地，所述前端代码的开发装置，包括：

代码保存模块，用于将所述前端代码保存至云端，以使用户从云端获取所述前端代码渲染生成前端页面。

其中，前端代码的开发装置的各个功能模块实现的步骤可参照本发明前端代码的开发方法的各个实施例，此处不再赘述。

此外，本发明实施例还提出一种计算机存储介质。

所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述实施例提供的前端代码的开发方法中的操作。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体/操作/对象与另一个实体/操作/对象区分开来，而不一定要求或者暗示这些实体/操作/对象之间存在任何这种实际的关系或者顺序；术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

对于装置实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的。可以根据实际的需要选择中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种前端代码的开发方法，其特征在于，所述前端代码的开发方法包括以下步骤：

接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息，所述待显示信息是目标前端界面需要进行显示的信息，所述待显示信息包括：用户界面元素、图表、报表、表格；

接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件，所述开发基础组件包括：Json协议、配置文件和常用控件；

建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；

将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码；

所述建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中的步骤，包括：

建立所述待显示信息与所述开发基础组件之间的映射关系，并显示所述开发基础组件对应的组件编辑窗口，以供用户在所述组件编辑窗口中设置所述开发基础组件对应的显示规则；

获取所述编辑窗口中输入的显示规则，根据所述显示规则调整所述开发基础组件对应的目标配置文件，以根据所述目标配置文件和所述映射关系，将所述待显示信息对应显示在所述开发基础组件中；

所述将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码的步骤之后，包括：

接收页面开启请求，获取所述页面开启请求中包含的页面标识，并获取所述页面标识对应的前端代码：

获取所述前端代码中包含的目标前端框架，并获取所述目标前端框架中的映射关系，根据所述映射关系确定渲染基础组件；

根据所述映射关系将所述待显示信息对应显示在所述渲染基础组件中，以根据所述渲染基础组件的对应的所述配置文件和/或对应的所述Json协议渲染生成包含渲染基础组件的前端页面。

2.如权利要求1所述的前端代码的开发方法，其特征在于，所述接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息的步骤之前，包括：

统计预设前端页面中各类型控件的出现频率，将所述出现频率高于预设值的控件作为常用控件；

设置所述常用控件对应的Json协议和配置文件，并将所述Json协议、所述配置文件和所述常用控件封装成对应的基础组件；

将各所述基础组件汇总得到所述预设组件集合。

3.如权利要求1所述的前端代码的开发方法，其特征在于，所述接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件的步骤，包括：

接收组件添加请求，获取所述组件添加请求中包含的组件类型，将所述组件类型与所述预设组件集合中各组件标签的类型信息进行比对；

将所述组件标签中类型信息与所述组件类型匹配的基础组件作为开发基础组件。

4.如权利要求1所述的前端代码的开发方法，其特征在于，所述将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码的步骤之后，包括：

接收组件更新请求，获取所述组件更新请求中包含的组件标签和更新信息；

获取预设组件集合中所述组件标签对应的第一基础组件，并根据所述更新信息调整所述第一基础组件，得到第二基础组件；

将所述第二基础组件作为所述组件更新请求中的基础组件。

5.如权利要求1所述的前端代码的开发方法，其特征在于，所述将所述待显示信息与所述映射关系添加至所述预设前端框架中，得到前端代码的步骤之后，包括：

将所述前端代码保存至云端，以使用户从云端获取所述前端代码渲染生成前端页面。

6.一种前端代码的开发装置，其特征在于，所述前端代码的开发装置包括：

接收获取模块，用于接收基于预设前端框架触发的开发请求，获取所述开发请求中包含的待显示信息，所述待显示信息是目标前端界面需要进行显示的信息，所述待显示信息包括：用户界面元素、图表、报表、表格；

组件选取模块，用于接收组件添加请求，获取所述组件添加请求中包含的组件类型，从预设组件集合中选取与所述组件类型匹配的开发基础组件，所述开发基础组件包括：Json协议、配置文件和常用控件；

建立显示模块，用于建立所述待显示信息与所述开发基础组件之间的映射关系，以将所述待显示信息对应显示在所述开发基础组件中；

显示生成模块，用于将所述待显示信息与所述映射关系添加至所述预设前端框架中得到前端代码；

所述建立显示模块，还用于建立所述待显示信息与所述开发基础组件之间的映射关系，并显示所述开发基础组件对应的组件编辑窗口，以供用户在所述组件编辑窗口中设置所述开发基础组件对应的显示规则；获取所述编辑窗口中输入的显示规则，根据所述显示规则调整所述开发基础组件对应的目标配置文件，以根据所述目标配置文件和所述映射关系，将所述待显示信息对应显示在所述开发基础组件中；

所述显示生成模块，还用于接收页面开启请求，获取所述页面开启请求中包含的页面标识，并获取所述页面标识对应的前端代码：获取所述前端代码中包含的目标前端框架，并获取所述目标前端框架中的映射关系，根据所述映射关系确定渲染基础组件；根据所述映射关系将所述待显示信息对应显示在所述渲染基础组件中，以根据所述渲染基础组件的对应的所述配置文件和/或对应的所述Json协议渲染生成包含渲染基础组件的前端页面。

7.一种前端代码的开发设备，其特征在于，所述前端代码的开发设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中：所述计算机程序被所述处理器执行时实现如权利要求1至5中任一项所述的前端代码的开发方法的步骤。

8.一种计算机存储介质，其特征在于，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5中任一项所述的前端代码的开发方法的步骤。