一种前端渲染的方法和装置制造方法及图纸

本发明专利技术公开了前端渲染的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：生成配置源，所述配置源包括静态配置和动态配置；基于所生成的配置源生成控制方法，所述控制方法包括控制路由和控制组件；通过所述配置源和所述控制方法渲染前端页面。该实施方式降低了环境多样性对代码的影响，提高了代码复用效率。

【技术实现步骤摘要】
一种前端渲染的方法和装置
本专利技术涉及计算机
，尤其涉及一种前端渲染的方法和装置。
技术介绍
Web前端是互联网时代诞生的一项重要的计算机应用技术，其主要载体是网页浏览器和手机应用程序。通过这项技术，我们可以方便快捷地浏览互联网上的文字、图片、音视频和其他多媒体内容，并可以与之进行交互。早期的网页主要是静态网页，以内容展示为主，随着网络技术和通信技术的不断发展，移动互联网带来了大量高性能的移动终端和高速无线网络，浏览器技术和Web前端技术也随之步入了发展和升级的快车道，前端技术进入大规模工程化和模块化开发时代，各种复杂展示和交互的前端应用也得以诞生，尤其是拥有复杂的构建流程、数据监控和大规模数据分析展示的云计算和大数据等领域。由于项目和工程的大型化和复杂化，以及应用和部署场景的定制化和多样化，如何提高这种状况下的项目开发和部署效率，降低开发和维护的复杂度是前端
一个重要的课题。
技术实现思路
有鉴于此，本专利技术实施例提供一种前端渲染的方法和装置，能够结合静态配置与动态配置，通过对路由和组件的控制，在同一套项目代码中，配置出不同的页面和页面内容，将部署环境的多样性转换成具体功能的多样性，实现了开发与部署分离，最大程度实现了代码复用，降低开发和维护成本。为实现上述目的，根据本专利技术实施例的一个方面，提供了一种前端渲染的方法。根据本专利技术实施例的前端渲染的方法，包括：生成配置源，所述配置源包括静态配置和动态配置；基于所生成的配置源生成控制方法，所述控制方法包括控制路由和控制组件；通过所述配置源和所述控制方法渲染前端页面。根据本专利技术实施例的前端渲染的方法，其中，所述配置源存储与项目相关的全部配置。根据本专利技术实施例的前端渲染的方法，其中，所述配置源包括路由的包含和排除。根据本专利技术实施例的前端渲染的方法，其中，所述配置源包括针对组件的功能开关。根据本专利技术实施例的前端渲染的方法，还包括：通过控制函数将与所述配置源相关联的配置文件加载至状态机以实现动态渲染。根据本专利技术实施例的前端渲染的方法，还包括：通过API接口获取动态配置并加载至状态机以实现实时动态渲染。根据本专利技术实施例的前端渲染的方法，其中，所述渲染前端页面以JavaScript库作为基础渲染库。为实现上述目的，根据本专利技术实施例的一个方面，提供了一种前端渲染的装置，包括：配置模块，用于生成配置源，所述配置源包括静态配置和动态配置；控制模块，用于基于所生成的配置源生成控制方法，所述控制方法包括控制路由和控制组件；渲染模块，用于通过所述配置源和所述控制方法渲染前端页面。根据本专利技术实施例所述的装置，所述配置模块还用于：配置路由的包含和排除；配置针对组件的功能开关。根据本专利技术实施例所述的装置，所述控制模块还用于：通过控制函数将与所述配置源相关联的配置文件加载至状态机以实现动态渲染。根据本专利技术实施例所述的装置，所述控制模块还用于：通过API接口获取动态配置并加载至状态机以实现实时动态渲染。为实现上述目的，根据本专利技术实施例的一个方面，提供了一种前端渲染的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述方法中任一所述的方法。为实现上述目的，根据本专利技术实施例的一个方面，提供了一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现上述方法中任一所述的方法。上述专利技术中的一个实施例具有如下优点或有益效果：因为采用结合静态配置与动态配置，通过对路由和组件的控制，在同一套项目代码中，配置出不同的页面和页面内容的方案，将部署环境的多样性转换成具体功能的多样性，实现了开发与部署分离，最大程度实现了代码复用，降低开发和维护成本。上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。附图说明附图用于更好地理解本专利技术，不构成对本专利技术的不当限定。其中：图1是根据本专利技术实施例的前端渲染的方法的主要流程的示意图；图2是根据本专利技术实施例的前端渲染的另一方法的主要流程的示意图；图3是根据本专利技术实施例的前端渲染的装置的主要模块的示意图；图4是本专利技术实施例可以应用于其中的示例性系统架构图；图5是适于用来实现本专利技术实施例的终端设备或服务器的计算机系统的结构示意图。具体实施方式以下结合附图对本专利技术的示范性实施例做出说明，其中包括本专利技术实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本专利技术的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。针对拥有功能和部署定制化和多样化需求的大型项目，我们解决方案一般有两种。其一，针对不同的部署环境进行独立的项目代码分支开发和维护，在这种开发模式下，我们通过维护多个项目分支来开发不同部署环境的代码，分别解决不同部署环境的独立需求，但是这种方案带来的问题是项目分支维护的复杂性和代码冗余。另一种方案是，针对差异化部分我们进行配置化开发，通过维护不同环境的配置文件实现不同环境的部署，我们的解决方案正是基于这一方案的实现。基于行业技术发展和趋势，针对现代大型前端交互型项目，为了提升项目开发效率，将项目开发任务重点聚焦于业务核心，我们一般会为项目选用一种通用的用于构建用户界面的JavaScript库，如VueJS、ReactJS、AngularJS等，将数据渲染到视图这一工作统一交给这些库。本文以VueJS为例进行说明，本专利技术的实施例也可以采用任何其他库，而不仅限于VueJS。图1是根据本专利技术实施例的前端页面渲染的方法的主要流程图，如图1所示，该方法主要包括步骤S101、S102、S103。步骤S101：生成配置源，所述配置源包括静态配置和动态配置。在一个实施例中，首先生成配置源。配置源可以作为项目的统一配置，存储与项目相关的所有静态、动态配置。静态配置是不会随用户输入等环境变化而发生变化的配置数据；动态配置数据是可以随环境发生变化的配置数据。配置数据可以是针对组件的，也可以是针对页面的。在一种实施方式中，可以用配置文件存储静态配置。具体地，将静态配置文件写入项目的打包文件中作为环境的基础配置。可以通过API接口获取动态配置来实现动态渲染。在一个示例中，以登陆页面和注册页面为例。静态配置数据可以包括例如页面样式、与服务器通信的地址、项目信息等。而动态配置则可以包括要展示的组件。例如，登陆页面响应于动态配置显示输入用户名和密码的组件、确认登陆组件、取消登陆组件；注册页面则响应于动态配置显示输入用户名、密码、邮箱等个人信息的组件，以及确认注册组件。动态本文档来自技高网...

【技术保护点】
1.一种前端渲染的方法，其特征在于，包括：/n生成配置源，所述配置源包括静态配置和动态配置；/n基于所生成的配置源生成控制方法，所述控制方法包括控制路由和控制组件；/n通过所述配置源和所述控制方法渲染前端页面。/n

【技术特征摘要】
1.一种前端渲染的方法，其特征在于，包括：
生成配置源，所述配置源包括静态配置和动态配置；
基于所生成的配置源生成控制方法，所述控制方法包括控制路由和控制组件；
通过所述配置源和所述控制方法渲染前端页面。


2.根据权利要求1所述的方法，其特征在于，所述配置源存储与项目相关的全部配置。


3.根据权利要求1所述的方法，其特征在于，所述配置源包括路由的包含和排除。


4.根据权利要求1所述的方法，其特征在于，所述配置源包括针对组件的功能开关。


5.根据权利要求3或4所述的方法，其特征在于，还包括：
通过控制函数将与所述配置源相关联的配置文件加载至状态机以实现动态渲染。


6.根据权利要求3或4所述的方法，其特征在于，还包括：
通过API接口获取动态配置并加载至状态机以实现实时动态渲染。


7.根据权利要求1所述的方法，其特征在于，所述渲染前端页面以JavaScript库作为基础渲染库。


8.一种前端渲染的装置，其特征在于，包括：
配置模块，用于生成配置源，所述配...

【专利技术属性】
技术研发人员：龙鹏，
申请(专利权)人：中国建设银行股份有限公司，
类型：发明
国别省市：北京;11