[发明专利]一种页面生成方法、系统、终端及介质

说明书

本发明提供的页面生成方法、系统、终端及介质，方法包括以下步骤：在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；在可视化界面的第二区域显示画布；接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。该方法在前端页面的开发过程中，不需要一个个书写前端代码，且通过直接在可视化界面操作组件生成前端页面的方式，相比于通过书写前端代码生成前端页面的方式，开发速度更快，开发效率更高。

技术领域

本发明属于前端框架技术领域，具体涉及一种页面生成方法、系统、终端及介质。

背景技术

目前，前端页面基本上都是基于开源的ui组件库以及自研的公共组件库搭建的静态页面，一个新页面的开发需求通常包含很多前端页面的开发工作，比如：对页面进行布局、引入组件、样式书写等。但是现有方法在开发新页面的过程中，还是需要一个个书写前端代码，开发效率低下。

发明内容

针对现有技术中的缺陷，本发明提供一种页面生成方法、系统、终端及介质，提高前端页面的开发效率。

第一方面，一种页面生成方法，包括以下步骤：

在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；

在可视化界面的第二区域显示画布；

接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；

当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。

优选地，在可视化界面的第一区域显示预设组件库，包括：

在可视化界面的第一区域构建组件列表；

在组件列表中添加组件，以得到预设组件库。

优选地，方法还包括：

将预设组件库中每个组件的配置信息记录至config.json文件中；

建立预设组件库中每个组件与其对应的配置信息之间的关联。

优选地，在可视化界面的第二区域显示画布，包括：

在可视化界面的第二区域中设置DIV块级元素，以将DIV块级元素配置为画布。

优选地，方法还包括：

当监听到第三区域中配置信息中任一配置项的值发生变化时，根据变化后的数更新画布的配置信息。

优选地，方法还包括：

当接收到生成代码指令时，下载画布中所有组件的配置信息；

基于配置信息生成前端开发代码。

第二方面，一种页面生成系统，包括：

组件库配置单元：用于在可视化界面的第一区域显示预设组件库，预设组件库包括至少一个组件，每个组件具有与其对应的配置信息；

画布配置单元：用于在可视化界面的第二区域显示画布；

操作单元：用于接收在画布中对组件的操作，并在可视化界面的第三区域显示组件对应的配置信息；

生成单元：用于当接收到预览指令时，对画布上所有组件以及对应的配置信息进行渲染，得到前端页面。

优选地，所述系统还包括：

代码下载单元：用于当接收到生成代码指令时，下载画布中所有组件的配置信息，基于配置信息生成前端开发代码。