一种基于配置驱动前端的方法及装置与流程

本发明属于软件开发技术领域，尤其涉及一种基于配置驱动前端的方法及装置。

背景技术：

当前随着软件技术及互联网技术日益提升，出现了越来越多前端技术，开发框架及ui组件库，同时需要为用户开发实现各个端的功能以满足不同应用场景的业务需求。

其中，前端包括android、ios、微信端应用(小程序)、支付宝应用(小程序)、移动端web应用、pc端web应用、工控端应用等；开发框架包括基于原生应用技术框架(如android、ios、linux桌面应用、macosx桌面应用、window桌面应用等)、基于web技术的技术框架(如materialui、ionicui、antdesiginui、onsenui等)；基于原生应用ui组件库包括android原生组件、ios，mac原生组件、window原生组件等。

目前主流软件开发一般基于二种情况来实现：

第一、针对每个用户不同的需求，选择合适的前端技术及框架，集成合适的ui组件库，针对每个需要的应用场景来开发符合用户需求的前端应用。

第二、在第一个基础之上，采用cordova,capacitor,electront等脚手架技术打包混合前端应用，以节省一部分开发工作量。

现有前端软件开发模式主要存在以下弊端：

1、开发时间周期长，每一个应用场景，第一个端都需要开发，时间周期一般比较长，如果涉及前端比较多，功能复杂，这个时间会更长。

2、开发费用高，伴随开发时间长，开发前端增多，投入人力增加，开发成本必然很高，这也是目前软件开发成本高的一个原因。

3、不易维护，由于用户需求需要，往往一个功能需要在不同前端展示，每次有需求变更，增加，功能涉及到的前端都要有开发人员修改重新发布。

4、偶合性太强，重用性不高，由于针对a用户需求开发的前端，肯定不能完全适合下一个b用户，而这个前端如果要用于下一个用户则需要花大量时间去修改以满足b用户。

5、技术门槛高，那么多种技术，架构及ui组件等，要熟悉精通这些都需要能力非常高的技术人员，至少在某一领域精通的技术人员去开发才能开发出保证质量的软件。

技术实现要素：

本发明的目的是提供一种基于配置驱动前端的方法及装置，以解决上述技术问题。

本发明提供了一种基于配置驱动前端的方法，包括：

步骤1，基于应用配置驱动前端按照配置方式加载应用；

步骤2，基于组件配置驱动前端按照配置方式加载组件。

进一步地，步骤1包括：

基于预设的应用配置模板加载模板配置；

基于预设的页面类型加载页面配置。

进一步地，步骤1还包括：

构建应用配置模板，并对应用配置模板进行源定义，指定前端使用场景。

进一步地，步骤2包括：

基于预设的组件类型加载组件配置；其中，组件类型包括容器组件及基础组件；

对组件加载导航配置及界面配置。

进一步地，步骤2还包括：

对组件加载样式配置、事件配置、接口配置中的任意一种或多种。

本发明还提供了一种基于配置驱动前端的装置，包括：

应用配置模块，用于基于应用配置驱动前端按照配置方式加载应用；

组件配置模块，用于基于组件配置驱动前端按照配置方式加载组件。

进一步地，应用配置模块基于预设的应用配置模板加载模板配置；及

基于预设的页面类型加载页面配置。

进一步地，应用配置模块还构建应用配置模板，并对应用配置模板进行源定义，指定前端使用场景。

进一步地，组件配置模块基于预设的组件类型加载组件配置；其中，组件类型包括容器组件及基础组件；及

对组件加载导航配置及界面配置。

进一步地，组件配置模块还对组件加载样式配置、事件配置、接口配置中的任意一种或多种。

借由上述方案，通过基于配置驱动前端的方法及装置，具有如下技术效果：

1、大大提升前端应用的开发时间，由于通过配置即可以驱动前端运行，只需要选择适合的组件，配置合适的配置项，即可以快速的进行前端应用的配置和发布上线运行。也可以用配置的复制克隆来快速的创建一个相似应用。

2、有利于前端应用的质量不断持续提升，前端应用公用，配置复用的方式，必然会持续的完善的优化前端的组件及配置项目，而每个优化的升级都会对使用此配置的所有应用生效并带来质量的提升。

3、前端应用的使用门槛大大降低，不一定必须要有经验的开发人员才能完成前端的开发测试上线，对于一般的前端用户，用户自己即可以完成前端应用配置发布上线。

4、前端开发费用成本大大降低，随着开发时间的缩短，使用门槛的降低，会带来成本的大大降低。

5、开发及可维护性增强，每个组件都可以有自己独立配置，也意味着每个组件都可以独立的开发升级并集成到整个配置集中，对于开发的维护人员，只需要精通任意至少一种组件即可以参与组件和配置项目的开发工作，也可以将一个组件单独交给个别开发人员去维护。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，并可依照说明书的内容予以实施，以下以本发明的较佳实施例并配合附图详细说明如后。

附图说明

图1为本发明基于配置驱动前端的方法的流程图；

图2为本发明基于配置驱动前端的装置的结构框图；

图3为应用本发明进行前端应用配置加载的一实施例；

图4为应用本发明进行前端组件配置加载的一实施例。

具体实施方式

下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

参图1所示，本实施例提供了一种基于配置驱动前端的方法，包括：

步骤s1，基于应用配置驱动前端按照配置方式加载应用；

步骤s2，基于组件配置驱动前端按照配置方式加载组件。

通过该基于配置驱动前端的方法，能够大大提升前端应用的开发时间；有利于前端应用的质量不断持续提升；大大降低前端应用的使用门槛；大大降低前端开发费用成本；增强开发及可维护性。

在本实施例中，步骤s1包括：

基于预设的应用配置模板加载模板配置；

基于预设的页面类型加载页面配置。

在本实施例中，步骤s1还包括：

构建应用配置模板，并对应用配置模板进行源定义，指定前端使用场景。

在本实施例中，步骤s2包括：

基于预设的组件类型加载组件配置；其中，组件类型包括容器组件及基础组件；

对组件加载导航配置及界面配置。

在本实施例中，步骤s2还包括：

对组件加载样式配置、事件配置、接口配置中的任意一种或多种。

参图2所示，本实施例还提供了一种基于配置驱动前端的装置，包括：

应用配置模块10，用于基于应用配置驱动前端按照配置方式加载应用；

组件配置模块20，用于基于组件配置驱动前端按照配置方式加载组件。

通过该基于配置驱动前端的装置，能够大大提升前端应用的开发时间；有利于前端应用的质量不断持续提升；大大降低前端应用的使用门槛；大大降低前端开发费用成本；增强开发及可维护性。

在本实施例中，应用配置模块10基于预设的应用配置模板加载模板配置；及

基于预设的页面类型加载页面配置。

在本实施例中，应用配置模块10还构建应用配置模板，并对应用配置模板进行源定义，指定前端使用场景。

在本实施例中，组件配置模块20基于预设的组件类型加载组件配置；其中，组件类型包括容器组件及基础组件；及

对组件加载导航配置及界面配置。

在本实施例中，组件配置模块20还对组件加载样式配置、事件配置、接口配置中的任意一种或多种。

通过本实施例提供的基于配置驱动前端的方法及装置，能够实现以下目的：

1)通过定义统一的配置模板和标准，界面配置程序，极大的缩短整体前端开发发布时间周期。

2)伴随缩短开发周期，和人力投入的调整，从而大大降低前端开发费。

3)通过定义统一的配置模板和标准，应用于所有前端，在不需要开发人员的情况，也可以对已经发布的前端进行维护，从而使前端维护变的简单。

4)前端所有元素的导航，界面，样式，事件，接口等均可通过配置参数驱动并工作正常，从而使一个前端程序，满足不同用户的不同需求，从则大大降低偶合性，提高前重用性。

5)只需要少量的技术精通人员维护前端应用即可，任何普通的非软件人员，经过简单培训，都可以通过统一的配置模板和文档，及界面配置程序完成应用前端配置的发布工作，大大降低使用前端的技术门槛。

下面对本发明作进一步详细说明。

参图3所示，图3示出了前端应用配置加载的一实施例。通过应用配置驱动前端面应用加载的方法包括：

1、模板配置加载

模板配置在本实施例中，创建了以下数据结构：

1)源定义，用于指定一种前端使用场景，包括但不限于以下定义，也可以随着使用场景增加来增加。

(a)aas_app原生app应用，例如android,ios

(b)aas_android仅android原生应用

(c)aas_ios仅ios原生应用

(d)aas_desktop原生桌面应用，例如macosx桌面应用,ios桌面应用

(e)aas_ali支付宝h5web应用

(f)aas_ali_min_pro支付宝端小程序

(g)aas_wx微信端h5web应用

(h)aas_wx_min_pro微信端小程序应用

(i)aas_mobild_web移动端通用h5web应用

(j)aas_managerpc端后台管理端h5web应用

(k)aas_personpc端个人中心管理端h5web应用

(l)aas_iot_pad工控端h5web应用

2)基础信息，用于标识模板，用于模板配置，复制等操作。

(a)模板名称

(b)模板描述

2、页面配置加载

页面配置在本实施例中，创建了以下数据结构：

1)页面类型，通过页面类型，可以知道如何使用配置并应用于页面的组件，页面类型包括但不限于以下类型，可以随着后续配置的增加来增加。

(a)ntp_page普通根页面

(b)ntp_pagr_tab切换方式根页面

(c)ntp_pagr_slide切换方式根页面

(d)ntp_sub_page子页面

(e)ntp_grid_row行页面

(f)ntp_grid_col列页面

2)页面配置，用于页面配置，可以让所有页面及页面包含的组件，以正确的方式展示，响应配置好的事件，并进行正确的数据交互,详见组件配置加载。

2、组件配置加载

参图4所示，图4示出了前端应用配置加载的一实施例，通过正确的配置输入，任何页面及组件，都会以正确的方式展示，并和用户交互，响应配置好的事件，如果含有接口配置的组件，也会执行正确的数据交互。组件配置在本实施例中创建了以下数据结构。

1)组件类型，通过组件类型来解析与之对应的配置信息，并用于组件，组件类型包括但不限于以下类型，随着后续的组件库扩展，会持续增加新的组件类型用于配置。

(a)容器组件，可以用于包含其它容器组件和基础组件的组件。

(b)基础组件，不可以包含容器组件，可独立使用，或者仅包含其它基础组件组成的基础单元。

2)容器组件类型，容器组件一般本身仅负责自己在所处页面内的布局及外观配置处理，内部展示仍然由其包含的基础组件来完成配置处理。

(a)ntp_list列表组件，用于以列表方式管理和展现子组件，可以对列表项目进行单独配置，也支持通过接口数据动态获取列表项。

(b)ntp_list_group列表分组组件，以分组方式管理多个列表组件，可以对所属的每个列个列表单独配置。

(c)ntp_grid格子组件，以栅格方式管理和展现子组件，可以对每个栅格项单独配置，也可以对每个行列单独配置，也支持通过接口数据动态获取栅格数据。

(d)ntp_slide滑片组件，以滑动方式来切换和管理子组件，每个子组件可以独立配置。

(e)ntp_carousel轮播组件，以循环播放展现子组件，并可以配置不同播放效果，可以对每个轮播项单独配置，也支持通过接口数据动态获取轮播项。

(f)ntp_tab切换组件，以切换按钮来触发的管理子组件的切换，每个子组件可以独立配置。

(g)ntp_search搜索页组件，以搜索框和列表或栅格组件组合而成组合，支持列表及栅格配置，通过接口数据动态查询。

(h)ntp_toolbar工具栏，包含应用标题，菜单，关键操作项在内的快捷操作栏，支持子组件配置对应不同页面跳转。

(i)ntp_expan_panel，可展开面板，以折叠展开方式管理子组件，便于在有限范围内展示尽可能多的数据，支持对每个管理子组件配置。

(j)ntp_steper，步进器，用于对有操作顺序要求的场景，每一步操作对应一个页面配置，可以对每个子页面单独配置。

(k)ntp_tree，树组件，以树形结构管理和展示数据，通过接口数据动态获取树结构数据及对应层级。

(l)ntp_person，个人信息组件，以个人信息为数据源，以统一认证接口来认证，并获取和展示用户个人信息，可以对每个子组件单独配置。

3)基础组件类型一，大部情况是由基础组件完成页面实际样式展示，数据交互，操作交互，动画效果等。

(a)ntp_action_sheet底部弹出式菜单，用于选择或操作，配置操作项及样式。

(b)ntp_alert提示框，弹出提示并暂停用户其它操作，配置提示内容拉样式。

(c)ntp_avatar头像组件，显示头像信息图片，配置头像来源接口及样式。

(d)ntp_autocomplete可以根据已经输入的部分信息，来提示用户并自动完成输入，配置提示查询策略和接口，样式。

(e)ntp_badge显示角标提示数量，配置角标查询接口及样式。

(f)ntp_btn按钮组件，配置按钮样式及事件响应。

(g)ntp_card卡片展示组件，配置数据绑定及样式。

(h)ntp_checkbox多选框，配置数据绑定及样式。

(i)ntp_datatime时间选择，配置数据绑定及样式。

(j)ntp_drag_drop拖拽组件，用于控制组件位置来进行所需的操作，配置事件响应及数据绑定。

(k)ntp_fabbtn浮动按钮，可以位于页面任意位置，并浮于其它组件之上，配置事件响应及样式。

(l)ntp_header页面顶部组件，用于管理页面顶部区域并固定，配置子组件及样式。

(m)ntp_icon图标组件，用于显示图标库中设计好的图标，配置事件及样式。

(n)ntp_img图片组件，用于显示图片，配置数据绑定及样式。

(o)ntp_input输入框，用于接收用户输入，配置数据绑定及样式。

(p)ntp_label标签，用于显示短文本，配置数据绑定及样式。

4)基础组件类型二，大部情况是由基础组件完成页面实际样式展示，数据交互，操作交互，动画效果等。

(a)ntp_loading加载进度提示，用于显示加载进度，同时暂停用户操作，配置事件响应及样式。

(b)ntp_modal_d普通弹出提示框,配置事件响应，配置子组件。

(c)ntp_menu菜单组件，配置菜单项及事件响应，样式。

(d)ntp_pp组合提示框，配置子组件及事件响应，样式。

(e)ntp_pb进度条，配置数据绑定及事件响应，样式。

(f)ntp_radio单选按钮，配置数据绑定及样式。

(g)ntp_rang范围选择按钮，配置数据绑定及样式。

(h)ntp_refresher刷新组件，配置事件响应及样式。

(i)ntp_select下拉选择，配置数据绑定及样式。

(j)ntp_text文字段落显示,配置数据绑定及样式。

(k)ntp_textarea文字段落输入,配置数据绑定及样式。

(l)ntp_thumbnail缩略图，配置数据绑定及样式。

(m)ntp_title标题显示，配置数据绑定及样式。

(n)ntp_toast短消息提示，配置数据绑定及样式。

(o)ntp_toggle切换按钮，配置数据绑定及样式。

(p)ntp_node其它独立组件。

5)组件配置，本实施例中创建了以下数据结构来完成配置，所有组件都包含以下部分或全部配置，每个组件配置仅对本组件生效。

(a)导航配置，必要信息，配置组件的布局，导航的名称，导航的标签，类型，图标信息。

(b)界面配置，必要信息，配置组件的反射名称，页面的标题，页面的名称，反射组件的附加配置信息。

(c)样式配置，可选信息，对组件样式进行选择，重写。

(d)事件配置，可选信息，对组件事件配置，动画效果及事件选择。

(e)接口配置，可选信息，对组件数据，数据获取接口，数据绑定，属性映射配置。

本发明具有如下技术效果：

1、大大提升前端应用的开发时间，由于通过配置即可以驱动前端运行，只需要选择适合的组件，配置合适的配置项，即可以快速的进行前端应用的配置和发布上线运行。也可以用配置的复制克隆来快速的创建一个相似应用。

2、有利于前端应用的质量不断持续提升，前端应用公用，配置复用的方式，必然会持续的完善的优化前端的组件及配置项目，而每个优化的升级都会对使用此配置的所有应用生效并带来质量的提升。

3、前端应用的使用门槛大大降低，不一定必须要有经验的开发人员才能完成前端的开发测试上线，对于一般的前端用户，用户自己即可以完成前端应用配置发布上线。

4、前端开发费用成本大大降低，随着开发时间的缩短，使用门槛的降低，会带来成本的大大降低。

5、开发及可维护性增强，每个组件都可以有自己独立配置，也意味着每个组件都可以独立的开发升级并集成到整个配置集中，对于开发的维护人员，只需要精通任意至少一种组件即可以参与组件和配置项目的开发工作，也可以将一个组件单独交给个别开发人员去维护。

以上所述仅是本发明的优选实施方式，并不用于限制本发明，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变型，这些改进和变型也应视为本发明的保护范围。