CN114706579A - 页面开发方法、装置、服务器及存储介质 - Google Patents

Abstract

本发明实施例公开了一种页面开发方法、装置、服务器及存储介质。该方法包括：根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；发布所述目标页面。上述技术方案通过根据页面需求灵活采用不同的开发工具，可利用富文本编辑器导入丰富的模板物料，也可以利用在线集成开发环境供开发者线上便捷编辑代码，满足了页面功能开发的多样性需求，提高了开发效率。

Description

页面开发方法、装置、服务器及存储介质

技术领域

本发明实施例涉及网页开发技术领域，尤其涉及一种页面开发方法、装置、服务器及存储介质。

背景技术

富文本平台是网页开发过程中使用的一种提供给产品和运营的网页制作工具，可用于简单制作例如产品介绍、协议文档、***更新日志等页面。随着网络技术的不断发展，前端团队对接的业务场景有着千差万别的规则和样式，尤其是在遇到节日、地理位置改变、不定期活动等情况下，页面也需要不断变化和更新，产品经理需要对开发需求进行梳理，再对研发人员提需求和沟通，研发人员通过开发和测试等繁琐的流程才能最终实现页面的发布上线。

在实现本发明的过程中，发现现有技术中至少存在如下技术问题：富文本平台仅支持简单的页面开发，无法支撑灵活多变的业务场景，需要持续投入沟通成本以及大量占用研发、测试等资源，并且也不支持页面内容的二次编码和已有元素的复用，开发效率低。

发明内容

本发明提供了一种页面开发方法、装置、服务器及存储介质，以实现对不同页面需求的灵活开发，提高页面开发效率。

第一方面，本发明实施例提供了一种页面开发方法，包括：

根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；

通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；

发布所述目标页面。

可选的，所述页面需求包括与所述模板物料相关的第一类需求；所述开发工具包括所述富文本编辑器；

所述根据所述页面需求通过相应的开发工具处理所述待开发页面，得到目标页面，包括：根据所述第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于所述模板物料编辑所述待开发页面，得到所述目标页面。

可选的，所述页面需求包括与所述代码相关的第二类需求；所述开发工具包括所述在线集成开发环境；

所述根据所述页面需求通过相应的开发工具处理所述待开发页面，得到目标页面，包括：根据所述第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于所述脚手架工具和所述代码编译所述待开发页面，得到所述目标页面。

可选的，所述页面需求包括与所述模板物料相关的第一类需求和与所述代码相关的第二类需求；所述开发工具包括所述富文本编辑器和所述在线集成开发环境；

所述根据所述页面需求通过相应的开发工具处理所述待开发页面，得到目标页面，包括：根据所述第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于所述模板物料编辑所述待开发页面；根据所述第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于所述脚手架工具和所述代码编译编辑后的所述待开发页面，得到所述目标页面。

可选的，该方法还包括：

通过管理服务监控并实时记录所述目标页面的生命周期、操作权限、开发统计数据、版本信息以及操作日志中的至少一个。

可选的，该方法还包括：

通过数据服务对所述目标页面进行数据埋点，并对埋点的统计结果进行可视化展示。

可选的，在所述发布所述目标页面之前，还包括：通过客户端软件开发工具包服务构建开放平台；

所述发布所述目标页面，包括：

通过微前端服务将所述目标页面中的应用拆分为多个子应用；

基于所述开放平台的接口将各所述子应用打包后发布至调用方。

可选的，该方法还包括：

对调用方进行注册、鉴权并通过开放平台的接口与所述调用方建立连接；

接收所述调用方对所述目标页面的调用请求；

根据所述调用请求将所述目标页面传输至所述调用方，以使所述调用方对所述目标页面进行审核；

其中，所述调用请求采用超文本传输协议(Hyper Text Transfer Protocol，HTTP)和/或远程过程调用(Remote Procedure Call，RPC)框架协议。

可选的，在接收所述调用方对所述目标页面的调用请求之前，还包括：

获取所述开放平台的接口对应的接口描述文件，并基于远程过程调用框架协议将所述接口描述文件转换为远程过程调用文件；

解析所述远程过程调用文件，以根据所述接口启动并监听接口服务；

通过服务治理代理服务在路由注册中心注册所述接口服务，得到供所述调用方发送调用请求的路由，所述路由的目的接口为所述开放平台的接口。

可选的，该方法还包括：通过富文本协议将所述目标页面转换为设定语言文件；

其中，所述设定语言文件包括超文本标记语言文件、层叠样式表文件以及Javascript语言文件中的至少一个。

可选的，该方法还包括：

通过状态管理库分别从基础配置层、组装层和生成层的维度存储并实时更新所述目标页面的组件状态；

其中，所述基础配置层包括所述富文本编辑器和所述在线集成开发环境；

所述组装层包括所述模板库和脚手架工具；

所述生成层包括所述目标页面对应的设定语言文件。

可选的，所述模板物料包括组件模板和页面模板

第二方面，本发明实施例还提供了一种页面开发装置，包括：

创建模块，用于根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；

处理模块，用于通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；

发布模块，用于发布所述目标页面。

第三方面，本发明实施例还提供了一种服务器，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例提供的页面开发方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明实施例提供的页面开发方法。

本发明实施例提供了一种页面开发方法、装置、服务器及存储介质，首先根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；然后通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；最后发布所述目标页面。本实施例通过根据页面需求灵活采用不同的开发工具，可利用富文本编辑器导入丰富的模板物料，也可以利用在线集成开发环境供开发者线上快速编写代码，满足了页面功能开发的多样性需求，也提高了开发效率。

附图说明

图1为一实施例提供的一种页面开发方法的流程示意图；

图2为一实施例提供的一种页面开发过程的流程图；

图3为一实施例提供的一种基于富文本平台实现页面开发的示意图；

图4为一实施例提供的一种页面开发架构的示意图；

图5为一实施例提供的一种远程过程调用框架的示意图；

图6为一实施例提供的一种通过状态管理库进行全局状态管理的示意图；

图7为本发明实施例提供的一种页面开发装置的结构示意图；

图8为本发明实施例提供的一种服务器的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。此外，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

本发明使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”。

需要注意，本发明中提及的“第一”、“第二”等概念仅用于对相应内容进行区分，并非用于限定顺序或者相互依存关系。

需要注意，本发明中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。

图1为一实施例提供的一种页面开发方法的流程示意图。该方法可适用于开发页面的情况，例如，为指定的网站开发相关页面或者为应用软件开发相关页面等。该方法可以由页面开发装置来执行，其中该装置可由软件和/或硬件实现，并一般集成在服务器上，服务器作为页面的开发方和服务端发布所开发的页面，页面使用者(如客户端或者第三方等)可以访问页面并使用页面的功能。

如图1所示，本实施例提供的一种页面开发方法，该方法包括如下步骤：

S110、根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求。

本实施例中，目标页面即为所开发的页面，可以是网页页面(如网站首页、目录页、搜索页或正文页等)、软件页面(如登录页面、聊天页面或游戏页面等)或浏览器页面(如浏览器的设置页面、下载页面或收藏夹页面)等，目标页面可以是静态页面，也可以是动态页面。目标页面具有一定的功能以满足使用方的需求，例如新闻内容展示、音乐播放控制、账户登录、从当前页面跳转至指定链接等功能，不同功能意味着页面使用者有不同的页面需求。

页面需求可以包括一个或多个需求。示例性的，对于购物类平台的应用程序，页面需求可以包括：支持用户使用账号和密码登录应用程序；查看或者通过关键字搜索服务商；通过列表展示可合作的或者搜索到的服务商；在每个服务商的详情页中显示服务商的介绍信息和联系方式；提供与服务商会话的窗口；支持用户向服务商支付并生成订单等。页面需求可以以文字、图示、图表和/或编码等形式存储在描述文档中。对于多个需求，可能开发一个目标页面即可满足，也可能需要开发多个目标页面来满足所有需求。为便于描述，以下实施例以一个页面的开发为例进行说明。

在页面开发过程中，首先根据页面需求创建待开发页面，待开发页面可以是空白页面，也可以是具有指定布局的页面，例如待开发页面中可以包括页眉、页脚、标题栏和/或工具栏等，这些布局在后续的开发过程中可以保留也可以更改。创建可以指新建一个页面，也可以指打开一个已有的页面。

S120、通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境。

本实施例中，针对多样的页面需求提供了不同的开发工具，其中，富文本编辑器是一种可内嵌于浏览器的用于制作页面的工具，例如TinyMC、Ckeditor或UEditor等；在线集成开发环境(Integrated Development Environment，IDE)是在线提供程序开发环境的应用程序，可以理解为一种基于云的智能代码编辑器，例如Eclipse Che或WebIDE编辑器等，可以直接运行在浏览器中，一般预置代码编辑器、编译器、调试器和图形用户界面等工具，支持多种编程语言，提供多种开发插件，如智能提示、代码补全、质量检测等，集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。此外，对于富文本编辑器可构建模板库，模板库中包括模板物料，模板物料指页面中可能用到的各种组件或元素，例如文本框、图片、具有特定功能(例如跳转、播放、弹窗等)的控件等，也可以是这些组件或元素的组合，模板物料也可以是整个页面。在此基础上，可以利用富文本编辑器可将模板物料导入至待开发页面中，也可以通过在线集成开发环境获得研发人员编辑后的代码，实现目标页面的开发。

示例性的，对于一些较为简单的页面需求，利用模板库中已有的模板物料进行组合即可提供相应功能，而对于一些较为复杂的页面需求，如动画复杂、交互繁多的页面，则通常需要研发人员通过编程提供新的算法、模块或接口等才可提供相应功能。本实施例中，可将文本框、图片、控件和/或页面等作为模板物料存储在模板库中，如果使用这些模板物料即可满足页面需求，则可以使用富文本编辑器将这些模板物料导入至待开发页面中，实现目标页面的开发；否则，可以使用在线集成开发环境供研发人员编辑代码以实现目标页面的开发。

需要说明的是，在一个目标页面的开发过程中也可以采用两种开发工具，即，对于一部分页面需求，使用富文本编辑器将这些模板物料导入至待开发页面中，而对于另一部分页面需求，使用在线集成开发环境供研发人员编辑代码以实现目标页面的开发。此外，通过在线集成开发环境也可以对导入的模板物料进行二次编辑。

S130、发布所述目标页面。

具体的，待开发页面经过开发工具处理后得到的目标页面具有相应的功能，能够满足页面需求，可以通过网络或开放平台移交给使用方使用。例如，对于网页页面的开发，可以将目标页面上传至注册的服务器空间或域名下；对于应用程序页面的开发，可以将目标页面打包在应用程序中通过应用商店等平台发布。此外，目标页面还可以交由调用者进行联合开发或公关审核等。

本实施例的页面开发方法，根据页面需求灵活采用不同的开发工具，可利用可视化的富文本编辑器导入丰富的模板物料，使开发者可以以所见即所得的方式高效便捷地自主完成页面的制作、发布和管理；也可以利用在线集成开发环境提供线上编码、云端存储代码以及二次编辑的能力，使开发者能够线上快速编写代码，实现更复杂的开发；开发工具可独立使用也可配合使用，配合使用时，富文本编辑器编辑的结果也可以转化为代码，并自动生成代码仓库，开发者直接远程拉取该仓库代码，在此基础上实现进一步的开发。该方法优化了页面开发流程，可极大的减少沟通成本和需求交付时间，提高开发效率。

在一实施例中，页面需求包括与模板物料相关的第一类需求；开发工具包括富文本编辑器；根据页面需求通过相应的开发工具处理待开发页面，得到目标页面，包括：根据第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于模板物料编辑待开发页面，得到目标页面。

具体的，第一类需求与模板物料相关，对于第一类需求，利用模板库中已有的模板物料进行组合可以提供相应功能，第一类需求对应的开发工具为富文本编辑器。

物料服务，可以理解为一种将页面开发可能使用的元素收藏或转换为模板物料以构建模板库，并提供导出功能的服务，富文本编辑器可以将模板物料从模板库导出并导入至待开发页面。一个页面通常由多个组件组成(如图片热区、视频、页头和页尾等)，模板库中的模板物料可以包括页面模板和组件模板，通过富文本编辑器可以复制页面模板直接得到一个完整的待开发页面，也可以在创建的待开发页面中导入一个或多个组件模板，并对这些模板物料进行排列组合或调整(例如修改模板物料的颜色、大小、对指定字符进行替换等)，得到目标页面。

在一实施例中，页面需求包括与代码相关的第二类需求；开发工具包括在线集成开发环境；根据页面需求通过相应的开发工具处理待开发页面，得到目标页面，包括：根据第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于脚手架工具和代码编译待开发页面，得到目标页面。

具体的，第二类需求与代码相关，对于第二类需求，利用模板库中已有的模板物料进行组合难以提供相应功能，通常需要研发人员通过编程提供新的算法、模块或接口等，第二类需求对应的开发工具为在线集成开发环境，例如WebIDE。

编译服务，可以理解为一种为开发者提供研发脚手架工具、自动化生成项目并内置基础实用工具(Utils)、交互式图表和可视化浏览器库(Echart)、模块打包器(Webpack)、网关信息等的服务，在利用脚手架工具将项目的基础架构和代码初始化的基础上，打通软件研发管理协作平台(Coding)的代码仓库、测试平台以及持续集成(ContinuousIntegration，CI)和持续交付(Continuous Delivery，CD)，可以提供从编码、测试到发布的流水线能力。利用在线集成开发环境可以基于脚手架工具以及开发者编辑的代码进行编译，得到目标页面。

在一实施例中，页面需求包括与模板物料相关的第一类需求和与代码相关的第二类需求；开发工具包括富文本编辑器和在线集成开发环境；根据页面需求通过相应的开发工具处理待开发页面，得到目标页面，包括：根据第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于模板物料编辑待开发页面；根据第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于脚手架工具和代码编译编辑后的待开发页面，得到目标页面。

本实施例中，页面需求包含两类，对第一类需求和第二类需求分别采用不同的开发工具进行处理，最终得到目标页面。具体的，可以先针对第一类需求，通过物料服务利用富文本编辑器对待开发页面进行编辑，得到编辑后的待开发页面，然后再针对第二类需求，通过编译服务并利用在线集成开发环境处理编辑后的待开发页面，最终得到目标页面。其中，在利用在线集成开发环境处理编辑后的待开发页面的过程中，可以对已导入待开发页面的模板物料进行调整和修改，即实现对富文本编辑器的编辑结果的二次编辑。

图2为一实施例提供的一种页面开发过程的流程图。如图2所示，根据页面需求，可以选择新建页面或者打开已有页面，从而创建待开发页面；对于第一类需求，可以利用富文本编辑器导入模板库中的模板物料编辑待开发页面，这种情况下，如果不存在第二类需求，则目标页面可以基于模板物料快速自主搭建完成并发布；对于第二类需求，可由研发人员通过在线集成开发环境参与代码开发，并且，如果在已有项目中使用过相关的代码，则可以参考已有项目完成代码开发，否则构建新的项目，并使用脚手架工具、CI&CD等完成代码开发，经过在线编译部署以及产品验收后，发布目标页面。在此基础上，目标页面按照复杂度可以分为搭建页面(第一类需求对应的页面，复杂度相对较低，可利用富文本编辑器快速搭建)、半搭建页面(第一类需求和第二类需求对应的页面，部分内容可利用富文本编辑器快速搭建，其他部分需要交由在线集成开发环境和代码开发)和全开发页面(第二类需求对应的页面，整个页面复杂度相对较高，全部交由在线集成开发环境和代码开发)。

在一实施例中，模板物料包括组件模板和页面模板。

具体的，模板库中的模板物料包括组件模板和页面模板，通过富文本编辑器可以导入一个页面模板直接得到一个完整的待开发页面，也可以在创建的待开发页面中导入一个或多个组件模板并进行调整，得到目标页面。例如，模板库中有一个放假通知的页面模板，通过富文本编辑器可以直接点击使用这个页面模板，再根据实际需求修改日期、地址等信息，即可得到目标页面；又如模板库中有一个新人权益领取组件模板，则通过富文本编辑器可以在待开发页面中导入该组件模板，提供新人权益领取功能。这些页面模板和组件模板可以由管理员进行管理，如进行审核、上下架或更新等。

在一实施例中，该方法还包括：

步骤140：通过管理服务监控并实时记录目标页面的生命周期、操作权限、开发统计数据、版本信息以及操作日志中的至少一个。

具体的，管理服务可以理解为一种对发布的目标页面进行多方面实时的监控和记录的服务。具体的，通过管理服务可以监控目标页面的生命周期，包括对目标页面的创建、编辑、回滚、发布、下线等完整生命周期的管理，例如记录目标页面各个环节的执行次数和相应的时间戳等。

通过管理服务还可以监控并实时记录目标页面的操作权限以实现多人协同操作，例如，一个目标页面的各种操作(如查看、修改、发布、分享或权限转移等)可由具备操作权限的一个或多个操作者执行，多个操作者执行的操作可以合并，如果有冲突时也可以根据操作权限的优先级对不同操作进行冲突提示和取舍等；此外，通过监控并实时记录目标页面的操作权限可以保证操作的合法性，例如，可以为各操作者的操作权限配置黑白名单以实现动态权限管理。

通过管理服务还可以对各个环节以及各开发者的操作日志进行记录，便于查看和追溯；目标页面在发布之后其功能需要不断升级和优化，可能出现版本的更新或回滚等，通过管理服务还可以监控并实时记录目标页面的版本信息；通过管理服务还可以监控并实时记录目标页面的开发统计数据，开发统计数据包括目标页面的编辑次数、发布次数、使用的模板物料数量等数据的统计，可为目标页面的升级提供进一步迭代和优化方向。

在一实施例中，该方法还包括：

步骤150：通过数据服务对目标页面进行数据埋点，并对埋点的统计结果进行可视化展示。

具体的，数据服务可以理解为一种对目标页面进行数据埋点并对埋点进行统计的服务。通过数据服务可以对目标页面的曝光埋点和点击埋点等进行统计，并以各种数学统计图表(如柱状图、饼状图或折线图等)对统计结果进行可视化展示，统计结果包括目标页面的页面浏览量或点击量(Page View，PV)、访问次数(Visit View，UV)、访问用户的标签、各个点击位的点击量、跳失率和/或转化率等等，基于埋点的统计结果可及时对目标页面内容进行调整，便于后期运营策略的复盘。

在一实施例中，在发布目标页面之前，还包括：通过客户端软件开发工具包服务构建开放平台；发布目标页面，包括：

步骤1302：通过微前端服务将目标页面中的应用拆分为多个子应用；

步骤1304：基于开放平台的接口将各子应用打包后发布至调用方。

本实施例中，客户端软件开发工具包(Software Development Kit)服务可以理解为一种对外服务(也称扩展服务或跨平台服务)，即通过构建开放平台(Open Platform)将目标页面封装成一系列计算机易识别的开放应用程序接口(Open ApplicationProgramming Interface，Open API)开放出去，供调用方进行联合开发或者审核等，满足跨平台通信的需求。

开放平台可以通过客户端软件开发工具包(Software Development Kit)服务构建，SDK可以为某个程序设计语言提供API的相关文件，但也可能包括能与某种嵌入式***通讯的复杂的硬件。SDK通常包括示例代码、支持性的技术注解或者其他为基本参考资料做出解释和描述的支持文档。

微前端服务可以理解为一种利用微件拆分来达到工程拆分治理的服务，本实施例通过微前端服务可将大型的前端应用拆分成多个独立灵活的子应用，单个应用独立开发和部署，互不影响又能相互通信，然后基于开放平台的API将各子应用打包后发布至调用方。

图3为一实施例提供的一种基于富文本平台实现页面开发的示意图。如图3所示，本实施例在富文本编辑器的基础上，增加了模板库(也称模板市场)、页面发布(可通过电脑和超文本5.0，即PC&H5)、管理服务、数据服务以及对外服务。其中，模板库可以辅助目标页面的搭建，使开发更加便捷，开发者能够根据页面需求使用丰富的模板；管理中心是对页面开发核心流程的支撑，为目标页面从无到有的搭建和生命周期、操作权限、开发统计数据、版本信息以及操作日志进行管理；通过数据服务对目标页面进行数据埋点，对埋点的统计结果进行可视化展示；通过对外服务能够为调用方无缝提供开发工具(如代码编辑器和代码自动部署等能力)，以及形成生态***(包括对调用方的注册、鉴权和连接等进行管理和交互)。

图4为一实施例提供的一种页面开发架构的示意图。该架构在基础服务的支撑下提供精细化的服务，从而对内提高工作效率和页面开发效率，对外提供可靠的扩展服务和跨平台通信能力。如图4所示，基础服务提供数据大盘分析服务，内置定时任务(如定时发布目标页面以及定时统计开发数据等)、日志解析(如解析操作日志等)、性能监控(内部提供的监控平台，仅需将平台参数在监控平台注册即可以使用监控功能)等功能，不仅深度刻画了目标用户的人群画像，为运营策略的调整提供了分析依据，还降低了开发在非研发工作上的占比；定时任务和日志解析都是新增的能力，通过编写脚本语言，结合业务需求实现，比如定时对页面曝光数据同步至离线数据库，再结合日志解析脚本，生产数据大盘需要显示的数据。

基础服务还包括数据上报(例如对埋点的统计结果进行上报)、异常监控(及时发现开发过程中的异常操作)、数据库(用于存储开发过程中产生的数据、目标页面的数据以及与调用方通信的数据等)、云服务(利用云端虚拟资源存储页面使用者在使用目标页面过程中生成的数据等)、配置存储(存储目标页面各个组件的配置信息)、单点登录(SingleSignOn，SSO)、消息推送、内容审核(将目标页面移交给第三方进行攻关审核等)、内容分发网络(Content Delivery Network，CDN)对象存储等。

在上述基础上，通过物料服务打造个性化的模板库，提供页面和组件的导入功能，其支持数据显示(例如对模板物料的使用量、使用频率、模板物料的分类、适用场景等进行显示)，便于快速检索到需要的模板物料；编译服务提供研发脚手架工具，自动化生成项目并内置基础使用工具(Utils)、样式加载器(Style loader)、插件配置项预设(Preset)、编译器核心包(@babel/core)、转换器(Transform)、脚本程序设计语言(ECMAScript 6，ES6)等工具，打通Coding代码仓库、测试平台以及持续集成和持续交付(CI&CD)，提供研发侧从编码、测试到发布版本的流水线能力；通过产品赋能(管理服务)在权限***和发布记录的基础上，提供页面从创建、编辑、回滚、发布、下线等完整生命周期的页面管理功能，并通过可配置的消息通知方式实现多人协同操作和操作权限的管理，用户在编辑页面时通过富文本编辑器的可视化界面，可以在线制作(如***图片、文本、视频等元素，配置其大小、颜色、位置等)；并且提供了富文本插件，可以定制文本、图片等的跳转链接，还具有对埋点进行开发数据统计的能力；通过对外服务，利用微前端和客户端软件开发工具包(SDK)服务，可触发页面的发布等操作，提供Open API开放能力，支持调用方以HTTP和Thrift等方式进行调用，支持CDN同步检测、CI&CD、安全审核以及转发器实现转发。

在一实施例中，发布目标页面，包括：

步骤18100：对调用方进行注册、鉴权并通过开放平台的接口与调用方建立连接；

步骤18200：接收调用方对目标页面的调用请求；

步骤18300：根据调用请求将目标页面传输至调用方，以使调用方对目标页面进行审核；

其中，调用请求采用HTTP和/或RPC框架协议。

本实施例中，调用方可以指在发布过程中对目标页面进行公关审核的第三方。在目标页面搭建完成后、上线之前，可以提交审核流程给公关人员，公关人员在审核平台审核完目标页面内容后，可以给出确认发布目标页面的指令，其中，审核平台即为调用方。调用方向本服务器注册并通过鉴权后，按照接入本服务器的指导规范，调用方可以通过开放平台的API接入本服务器并发送调用请求，本服务器根据调用请求将目标页面移交至调用方。

其中，目标页面支持HTTP和/或RPC框架协议两种方式调用。RPC框架协议具体可以采用Thrift，Thrift是一种IDL接口描述语言和二进制通讯协议，用来定义和创建跨语言的服务，通过一个代码生成引擎联合了一个软件栈，来创建不同程度的、无缝的跨平台高效服务。

在一实施例中，在接收调用方对目标页面的调用请求之前，还包括：

步骤18102：获取开放平台的接口对应的接口描述文件，并基于远程过程调用框架协议将接口描述文件转换为远程过程调用文件；

步骤18104：解析远程过程调用文件，以根据接口启动并监听接口服务；

步骤18105：通过服务治理代理服务在路由注册中心注册接口服务，得到供调用方发送调用请求的路由，路由的目的接口为开放平台的接口。

本实施例中，使用接口描述语言(Interface Description Language，IDL)定义接口描述文件，并通过帮助中心发布协议文档，使用Thrift框架协议可将接口描述文件转换为Javascript类型的代码文件，即RPC文件；

解析并处理该RPC文件中的接口，据此启动并监听接口服务，接口服务可以是Node服务，即使用Node语言开发的服务，Node服务可调用相关的API作为RPC的服务端实现Thrift调用；

调用服务治理代理服务，服务治理代理服务是服务器内部提供的一种公共服务，用于将Node服务注册到路由注册中心，路由注册中心为接口服务生成路由供调用方调用。

图5为一实施例提供的一种远程过程调用框架的示意图。如图5所示，Node服务相当于服务端(如使用Java语言)，使用其他语言(如Java、C/C++、Python或Objective-C等)编写代码文件的调用方作为客户端。在服务端，定义接口描述文件并生成Javascript代码文件，在此基础上启动Node服务并通过服务治理代理服务在路由注册中心注册得到相应的路由，通过路由发现客户端的Thrift调用并通过监听Node服务响应客户端的Thrift调用；在客户端，调用方可通过该路由对应的Open API的接口协议构建参数并根据Node服务的路由发起Thrift调用，服务治理代理服务根据通信协议的序列化和反序列化实现服务端与调用方的数据传输，实现跨平台、跨语言的调用。

在一实施例中，该方法还包括：通过富文本协议将所述目标页面转换为设定语言文件；其中，设定语言文件包括超文本标记语言(Hyper Text Markup Language，HTML)文件、层叠样式表(Cascading Style Sheets，CSS)文件以及Javascript语言文件中的至少一个。

具体的，目标页面的配置和元素均可以通过富文本协议转换为HTML、CSS和/或Javascript文件的形式保存，其中，HTML是用来描述网页的一种语言，用于定义目标页面的结构；CSS表示如何显示HTML，用于定义目标页面的样式；Javascript语言文件由浏览器解释运行，便于后续的发布和二次开发。

在一实施例中，该方法还包括：

步骤160：通过状态管理库分别从基础配置层、组装层和生成层的维度存储并实时更新目标页面的组件状态；其中，基础配置层包括富文本编辑器和在线集成开发环境；组装层包括模板库和脚手架工具；生成层包括目标页面对应的设定语言文件。

状态管理库用于将目标页面在服务器与客户端的交互过程中所产生的数据(即状态)保存下来并实时更新，把组件之间需要共享的状态抽取出来进行统一管理和跟踪，使得组件状态的变化可以预测。状态管理库可以是Flux、Redux或Vuex等。本实施例中，重点围绕目标页面的搭建和发布，将开发过程拆解为三大维度：基础配置层、组装层和生成层，各层之间通过状态管理库实现全局的状态管理。

图6为一实施例提供的一种通过状态管理库进行全局状态管理的示意图。如图6所示，基础配置层主要涉及对搭建目标页面的各种能力的状态管理，包括富文本编辑器、在线集成开发环境(如WebIDE开发工具及其插件，例如HTML、CSS、Javascript等)、个性化配置模块(对于第二类需求由研发人员参与开发的场景，抽象出一些通用的配置模块供开发者直接使用，比如很多页面都需要点击跳转，不同的只是跳转的目标页地址不同，则只需要引入一个通用的跳转模块，再配置一些地址参数等即可实现跳转功能，这个跳转模块即为一种个性化配置模块)、发布平台(PC&HTML5)等；通过数据源接入和后台功能即服务(Functionas a Service，Fass)服务，将各个业务方的数据根据已定制的数据标准化协议进行映射和编排，以统一的协议结构输出给前端开发者调用；该数据协议不仅包含数据结果，还有点击、回调、曝光埋点等参数，通过Javascript实现交互事件以及页面动态数据的上报。此外，还可以对同步策略(目标页面在不同平台之间的同步)以及扩展点接入(Open API)的组件状态进行管理。

组装层主要涉及模板库、模板物料收藏、模板物料导入、页面预览功能等产品化能力以及脚手架和开发者套件等为复杂开发提供便利的工具等进行状态管理，其中页面预览通过调用生成层能力，以微前端模块的方式显示实时效果，组装层还包括异常上报能力，从而及时发现开发过程中的异常操作。

生成层主要涉及组装层的产物，即目标页面的数据(包括样式和动态资源等)进行解析和预处理等，包括对设定语言文件的解析、预处理以及预编译，最终将项目打包生成浏览器可直接显示的页面，服务端同步进行代码检测和上传存储平台，刷新页面发布区数据，最终生成线上的可***；同时接入流水线(Pipeline)，实现研发代码的自动化集成管理，Pipeline指的是基于自动化引擎创建的一套流水线配置，作为实现CI&CD重要环节的脚本实现。生成层还包括服务端渲染(Server Side Rendering，SSR)的相关组件。

本实施例的页面开发方法，通过打造全面的富文本平台以及强大的在线集成开发环境，既可以使开发者以所见即所得的方式自主完成页面的制作、发布和管理，同时也提供研发在线二次编辑页面的能力以及在线代码开发的能力，可实现PC&H5等渠道的线上页面搭建及发布，减少沟通成本，提高开发效率；通过微前端服务实现应用的解耦，各子应用可以独立开发、独立运行、独立部署，使页面开发更便捷更便于维护；通过完善富文本平台的生态***，可对接调用方，实现多平台跨端接入；通过RPC以及Open API实现客户端服务与后台服务端间的调用；通过状态管理库从基础配置层、组装层和生成层实现对目标页面相关组件的全局状态管理，使各组件的状态可以预测，任意组件状态发生改变时，都可以根据全局状态确定其他组件状态，提高目标页面开发效率和运行的可靠性。

图7为本发明实施例提供的一种页面开发装置的结构示意图，该装置可由软件和/或硬件实现。如图7所示，该装置包括：

创建模块210，用于根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；

处理模块220，用于通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；

发布模块230，用于发布所述目标页面。

本实施例的页面开发装置，通过根据页面需求灵活采用不同的开发工具，可利用富文本编辑器导入丰富的模板物料，也可以利用在线集成开发环境供开发者线上快速编写代码，满足了页面功能开发的多样性需求，也提高了开发效率。

在一实施例中，所述页面需求包括与所述模板物料相关的第一类需求；所述开发工具包括所述富文本编辑器；

处理模块220具体用于：根据所述第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于所述模板物料编辑所述待开发页面，得到所述目标页面。

在一实施例中，所述页面需求包括与所述代码相关的第二类需求；所述开发工具包括所述在线集成开发环境；

处理模块220具体用于：根据所述第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于所述脚手架工具和所述代码编译所述待开发页面，得到所述目标页面。

在一实施例中，所述页面需求包括与所述模板物料相关的第一类需求和与所述代码相关的第二类需求；所述开发工具包括所述富文本编辑器和所述在线集成开发环境；

处理模块220具体用于：根据所述第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于所述模板物料编辑所述待开发页面；

根据所述第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于所述脚手架工具和所述代码编译编辑后的所述待开发页面，得到所述目标页面。

在一实施例中，该装置还包括：

第一管理模块，用于通过管理服务监控并实时记录所述目标页面的生命周期、操作权限、开发统计数据、版本信息以及操作日志中的至少一个。

在一实施例中，该装置还包括：

第二管理模块，用于通过数据服务对所述目标页面进行数据埋点，并对埋点的统计结果进行可视化展示。

在一实施例中，该装置还包括：

构建模块，用于在所述发布所述目标页面之前，通过客户端软件开发工具包服务构建开放平台；

发布模块230，包括：

拆分单元，用于通过微前端服务将所述目标页面中的应用拆分为多个子应用；

打包单元，用于基于所述开放平台的接口将各所述子应用打包后发布至调用方。

在一实施例中，发布模块230，包括：

接入单元，用于对调用方进行注册、鉴权并通过开放平台的接口与所述调用方建立连接；

接收单元，用于接收所述调用方对所述目标页面的调用请求；

传输单元，用于根据所述调用请求将所述目标页面传输至所述调用方，以使所述调用方对所述目标页面进行审核；

其中，所述调用请求采用超文本传输协议和/或远程过程调用框架协议。

在一实施例中，该装置还包括：

文件转换模块，用于在接收所述调用方对所述目标页面的调用请求之前，获取所述开放平台的接口对应的接口描述文件，并基于远程过程调用框架协议将所述接口描述文件转换为远程过程调用文件；

监听模块，用于解析所述远程过程调用文件，以根据所述接口启动并监听接口服务；

注册模块，用于通过服务治理代理服务在路由注册中心注册所述接口服务，得到供所述调用方发送调用请求的路由，所述路由的目的接口为所述开放平台的接口。

在一实施例中，该装置还包括：

页面转换模块，用于通过富文本协议将所述目标页面转换为设定语言文件；

其中，所述设定语言文件包括超文本标记语言文件、层叠样式表文件以及Javascript语言文件中的至少一个。

在一实施例中，该装置还包括：

状态管理模块，用于通过状态管理库分别从基础配置层、组装层和生成层的维度存储并实时更新所述目标页面的组件状态；

其中，所述基础配置层包括所述富文本编辑器和所述在线集成开发环境；

所述组装层包括所述模板库和脚手架工具；

所述生成层包括所述目标页面对应的设定语言文件。

在一实施例中，该装置所述模板物料包括组件模板和页面模板。

上述页面开发装置可执行本发明任意实施例所提供的页面开发方法，具备执行方法相应的功能模块和有益效果。

图8为本发明实施例提供的一种服务器的结构示意图。如图8所示，本发明实施例提供的服务器包括：一个或多个处理器810和存储装置820；该服务器中的处理器810可以是一个或多个，图8中以一个处理器810为例；存储装置820用于存储一个或多个程序；所述一个或多个程序被所述一个或多个处理器810执行，使得所述一个或多个处理器810实现如本发明实施例中任一项所述的页面开发方法。

所述服务器还可以包括：输入装置830和输出装置840。

服务器中的处理器810、存储装置820、输入装置830和输出装置840可以通过总线或其他方式连接，图8中以通过总线连接为例。

该服务器中的存储装置820作为一种计算机可读存储介质，可用于存储一个或多个程序，所述程序可以是软件程序、计算机可执行程序以及模块，如本发明实施例所提供页面开发方法对应的程序指令/模块(例如，附图5所示的页面开发装置中的模块，包括：创建模块210、处理模块220以及发布模块230)。处理器810通过运行存储在存储装置820中的软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中页面开发方法。

存储装置820可包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序；存储数据区可存储根据服务器的使用所创建的数据等。此外，存储装置820可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置820可进一步包括相对于处理器810远程设置的存储器，这些远程存储器可以通过网络连接至服务器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置830可用于接收输入的数字或字符信息，以及产生与服务器的用户设置以及功能控制有关的键信号输入。输出装置840可包括显示屏等显示设备。

并且，当上述服务器所包括一个或者多个程序被所述一个或者多个处理器810执行时，程序进行如下操作：根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；发布所述目标页面。

本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时用于执行页面开发方法，该方法包括：根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；发布所述目标页面。

可选的，该程序被处理器执行时还可以用于执行本发明任意实施例所提供的页面开发方法。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(Random Access Memory，RAM)、只读存储器(Read Only Memory，ROM)、可擦式可编程只读存储器(ErasableProgrammable Read Only Memory，EPROM)、闪存、光纤、便携式CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于：电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆或无线电频率(Radio Frequency，RF)等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (15)

1.一种页面开发方法，其特征在于，包括：

根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；

通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；

发布所述目标页面。

2.根据权利要求1所述的方法，其特征在于，所述页面需求包括与所述模板物料相关的第一类需求；所述开发工具包括所述富文本编辑器；

所述根据所述页面需求通过相应的开发工具处理所述待开发页面，得到目标页面，包括：

根据所述第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于所述模板物料编辑所述待开发页面，得到所述目标页面。

3.根据权利要求1所述的方法，其特征在于，所述页面需求包括与所述代码相关的第二类需求；所述开发工具包括所述在线集成开发环境；

所述根据所述页面需求通过相应的开发工具处理所述待开发页面，得到目标页面，包括：

根据所述第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于所述脚手架工具和所述代码编译所述待开发页面，得到所述目标页面。

4.根据权利要求1所述的方法，其特征在于，所述页面需求包括与所述模板物料相关的第一类需求和与所述代码相关的第二类需求；所述开发工具包括所述富文本编辑器和所述在线集成开发环境；

所述根据所述页面需求通过相应的开发工具处理所述待开发页面，得到目标页面，包括：

根据所述第一类需求，通过物料服务获取模板库中的模板物料，并通过富文本编辑器基于所述模板物料编辑所述待开发页面；

根据所述第二类需求，通过编译服务获取脚手架工具，并通过在线集成开发环境基于所述脚手架工具和所述代码编译编辑后的所述待开发页面，得到所述目标页面。

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

通过管理服务监控并实时记录所述目标页面的生命周期、操作权限、开发统计数据、版本信息以及操作日志中的至少一个。

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

通过数据服务对所述目标页面进行数据埋点，并对埋点的统计结果进行可视化展示。

7.根据权利要求1所述的方法，其特征在于，在所述发布所述目标页面之前，还包括：通过客户端软件开发工具包服务构建开放平台；

所述发布所述目标页面，包括：

通过微前端服务将所述目标页面中的应用拆分为多个子应用；

基于所述开放平台的接口将各所述子应用打包后发布至调用方。

8.根据权利要求1所述的方法，其特征在于，所述发布所述目标页面，包括：

对调用方进行注册、鉴权并通过开放平台的接口与所述调用方建立连接；

接收所述调用方对所述目标页面的调用请求；

根据所述调用请求将所述目标页面传输至所述调用方，以使所述调用方对所述目标页面进行审核；

其中，所述调用请求采用超文本传输协议和/或远程过程调用框架协议。

9.根据权利要求8所述的方法，其特征在于，在接收所述调用方对所述目标页面的调用请求之前，还包括：

获取所述开放平台的接口对应的接口描述文件，并基于远程过程调用框架协议将所述接口描述文件转换为远程过程调用文件；

解析所述远程过程调用文件，以根据所述接口启动并监听接口服务；

通过服务治理代理服务在路由注册中心注册所述接口服务，得到供所述调用方发送调用请求的路由，所述路由的目的接口为所述开放平台的接口。

10.根据权利要求1所述的方法，其特征在于，还包括：

通过富文本协议将所述目标页面转换为设定语言文件；

其中，所述设定语言文件包括超文本标记语言文件、层叠样式表文件以及Javascript语言文件中的至少一个。

11.根据权利要求1所述的方法，其特征在于，还包括：

通过状态管理库分别从基础配置层、组装层和生成层的维度存储并实时更新所述目标页面的组件状态；

其中，所述基础配置层包括所述富文本编辑器和所述在线集成开发环境；

所述组装层包括所述模板库和脚手架工具；

所述生成层包括所述目标页面对应的设定语言文件。

12.根据权利要求1-11中任一项所述的方法，其特征在于，所述模板物料包括组件模板和页面模板。

13.一种页面开发装置，其特征在于，包括：

创建模块，用于根据页面需求创建待开发页面，所述页面需求是页面使用者对目标页面的功能的需求；

处理模块，用于通过所述页面需求对应的开发工具处理所述待开发页面，得到所述目标页面，其中，所述开发工具包括用于导入模板库中模板物料的富文本编辑器和/或用于编辑代码的在线集成开发环境；

发布模块，用于发布所述目标页面。

14.一种服务器，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-12中任一所述的页面开发方法。

15.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-12中任一所述的页面开发方法。

Images