[发明专利]独立前端页面搭建方法及系统

说明书

本申请涉及一种独立前端页面搭建方法、系统、计算机设备和计算机可读存储介质，其中，该独立前端页面搭建方法包括：模块搭建步骤，用于设置待开发模块的基本信息并通过分开独立的模块DOM搭建、模块样式及模块交互进行代码开发后通过WebPack工具组合成独立的模块；页面搭建步骤，用于获取至少一所述模块并以拼接模块的形式进行页面搭建。通过上述步骤，解决了临时页面各模块重复利用率低的问题，可快速通过对模块进行拼装搭建页面，提高临时页面开发效率，减小开发成本，以便于开发人员开发模块、运营人员拼装页面。

技术领域

本申请涉及互联网技术领域，特别是涉及独立前端页面搭建方法、系统、计算机设备和计算机可读存储介质。

背景技术

前端即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。在公司运作中，有时候公司需要紧急开发一些活动、宣传等临时专用的页面，用于展示、推销公司的业务亮点，此时就需要快速生成这些前端页面。

现有的一些临时前端页面快速生产主要通过开发人员临时开发搭建，或根据原型图生成页面的工具或者开发比较复杂的可视化搭建系统。但是，由于这类页面的需求变更频繁，导致需要消耗大量的人力去开发活动页面；很多页面结构相似，可重用性极高，但现有大部分技术都缺少这样重用的机制，开发、上线、部署流程重复且不灵活，上述可视化搭建系统对于需求不是特别高，但又需要有一套快速搭建页面系统的公司，开发投入成本又过高。

发明内容

本申请实施例提供了一种独立前端页面搭建方法、系统、计算机设备和计算机可读存储介质，以模块形式进行页面搭建，提高临时页面开发效率，减小开发成本。

第一方面，本申请实施例提供了一种独立前端页面搭建方法，包括：

模块搭建步骤，用于设置待开发模块的基本信息并通过分开独立的模块DOM搭建、模块样式及模块交互进行代码开发后通过WebPack工具组合成独立的模块；

页面搭建步骤，用于获取至少一所述模块并以拼接模块的形式进行页面搭建。

通过上述步骤，解决了临时页面各模块重复利用率低的问题，可快速通过对模块进行拼装搭建页面，提高临时页面开发效率，减小开发成本，以便于开发人员开发模块、运营人员拼装页面。

在其中一些实施例中，所述模块搭建步骤进一步包括：

模块编辑步骤，用于编辑待开发模块的基本信息，所述基本信息至少包括模块名、模块ID及模块依赖关系其一或其任意组合；

模块开发步骤，用于通过一模块开发系统搭建模块DOM、编辑模块样式及定义模块交互后，预设模块的配置项，并通过WebPack工具打包得到所述模块，举例而非限制，所述配置数据至少包括标题、描述；其中，文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展置标语言的标准编程接口，WebPack是一个模块打包器。WebPack的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。

模块校验渲染步骤，用于调用所述模块开发系统的服务端进行数据校验，数据校验成功后调用Render函数渲染生成所述模块的预览页面；

模块发布步骤，用于将所述模块保存至一模块仓库；

通过上述步骤，可直接在模块开发系统的界面编辑模块，并能随时渲染查看模块效果，通过服务端进行渲染前数据校验，规避生成页面的数据不规范问题，确保模块安全可用。

在其中一些实施例中，所述页面搭建步骤进一步包括：

页面编辑步骤，用于编辑待开发页面的基本信息，所述基本信息至少包括：页面名称、页面用途其一或其组合；