一种前端页面生成方法与流程

1.本发明属于前端开发技术领域，具体涉及一种前端页面生成方法。


背景技术：

2.目前在前端开发的页面功能，大多都是重复性的功能开发。而为了减小重复开发的现象，人们开发了通用的组件库减少了重复性的劳动，也大大减轻了开发的成本。然而仅仅基于组件库开发还是不够的，仍然需要开发代码，而有代码就要开发人员进行开发、维护、优化。长期的维护这些重复性的功能页面，非常影响前端人员的技术成长。随着企业业务的迅速增长开发效率的提升却非常的缓慢，目前最有效的提升手段也只有增加开发人员，其必然造成成本的增加，非常不利于企业的发展。


技术实现要素：

3.为了解决现有技术存在的维护效率低、开发成本高的问题，本发明提供了一种前端页面生成方法，其具有节约开发资源、减少资源开发成本等特点。
4.根据本发明的具体实施方式的一种前端页面生成方法，包括：
5.基于页面的统计分析获取页面中各个组成部分的通用组件；
6.基于预设开源库对目标页面中的所述通用组件进行调整；
7.为每一个所述通用组件配备相应的配置页面以对所述通用组件进行配置；
8.基于预设开发平台对所述目标页面进行存储以减少代码的开发。
9.进一步地，所述通用组件具有相应的通讯接口用于所述通讯组件间的通信。
10.进一步地，所述基于预设开源库对目标页面中的所述通用组件进行调整包括：
11.基于开源库vue
‑
grid
‑
layout对所述通用组件的拖拽、缩放以及组件间的位置调换进行布局调整。
12.进一步地，所述为每一个所述通用组件配备相应的配置页面以对所述同样组件进行配置包括：
13.在配置页面对配置组件的功能、样式、数据展示、与其他组件通信进行配置。
14.进一步地，所述基于预设开发平台对所述目标页面进行存储以减少代码的开发包括：
15.基于no
‑
code系统对所述目标页面进行存储以减少代码的开发。
16.本发明的有益效果为：通过基于页面的统计分析获取页面中各个组成部分的通用组件；基于预设开源库对目标页面中的通用组件进行调整；并为每一个通用组件配备相应的配置页面以对同样组件进行配置；基于预设开发平台对目标页面进行存储以减少代码的开发抽离出通用功能组件，实现了以组件为单位，通过组件间拖拽布局，配置通信的方式形成普通页面。极大节约开发资源，优化资源开发成本。
附图说明
17.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
18.图1是根据一示例性实施例提供的前端页面生成方法的流程图；
19.图2是根据一示例性实施例提供的前端页面生成的操作图。
具体实施方式
20.为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。
21.参照图1所示，本发明的实施例提供了一种前端页面生成方法，具体包括以下步骤：
22.101、基于页面的统计分析获取页面中各个组成部分的通用组件；
23.因为整个页面可以看作是一个一个组件的组合，那么可以通过观察页面统计分析。开发出通用组件，此组件可配置，可与其他组件通信。
24.102、基于预设开源库对目标页面中的通用组件进行调整；
25.页面组件布局功能是非常重要的，它直接面对使用者，此功能的布局难易程度以及使用顺滑度直接影响用户体验，因此采用开源库不仅在组件拖拽、组件放大缩小以及组件间调换位置都非常的流畅。
26.103、为每一个通用组件配备相应的配置页面以对通用组件进行配置；
27.同一个组件针对不同场景会有小功能以及样式的改变，因此每个组件都有一个配置页面，便于进行组件相关参数的配置。
28.104、基于预设开发平台对目标页面进行存储以减少代码的开发。
29.可通过no
‑
code系统开发的页面并不会开发代码，最后会生成一个数组形式的字符串存储于后端数据库。当要渲染此页面，会先从数据库取出此字符串，前端转换为数组。数组里面的每个对象代表一个组件，这个对象里面有组件的类型、大小、位置以及各种配置信息等。通过此对象数据渲染出最终的组件页面，最终实现相关的配置页面。
30.这样不仅可以单个页面的实现，也可以多页面的实现。也可以实现页面大屏展示。组件与组件之间可以通过配置界面实现互联互通。组件的数据来源可以通过后端接口api来获取，这样其灵活性大大增强，不需要提前配置数据源。对于现有的前端项目而言，可以直接过渡和复用之前的api。通过抽离出通用功能组件，以组件为单位，通过组件间拖拽布局，配置通信的方式形成普通页面。极大节约开发资源，优化资源开发成本。
31.其中no
‑
code系统即无程式码开发平台，是可以让程式设计者及一般用户不用传统程式设计语言即可以开发应用程序的开发平台，使用的是图形用户界面(gui)以及组态。业务人员根据业务的实际需求，可以通过自主配置的方式实现应用搭建，随着业务变化，新需求可以随时增加到应用当中，不再依赖it开发人员，也没有严格的设计和运行的界限，新
需求即时更改，即时上线，一键部署，从而帮助企业提升开发效率、管理效率、协作效率，降低开发成本、人员成本、沟通成本。
32.在本发明的一些具体实施例中，页面组件布局功能是非常重要的，它直接面对使用者，此功能的布局难易程度以及使用顺滑度直接影响用户体验。基于此，使用了开源库vue
‑
grid
‑
layout。不仅在组件拖拽、组件放大缩小以及组件间调换位置都非常的流畅。
33.vue
‑
grid
‑
layout是网络布局系统，是一个vue的可拖拽的瀑布流布局组件，并提供相应的事件进行自定义操作。而且布局可以存储和再展现，其中的元素可拖动、元素可调整大小、边界检查拖动和调整大小，可以添加或删除窗口小部件而无需重建网格，布局可以序列化和恢复。
34.参照图2所示，在本发明的另一些具体实施例中，由本发明的上述实施例所提供的前端页面生成方法进行相关前端页面的生成的具体操作如下：
35.首先拖入需要展示的组件，在进行拖拽时可以在选取组件的相关页面进行拖入；
36.一个系统不可能只有一个页面，需要添加路由系统，容器组件可以承载路由页面；
37.容器上可以添加页面，对应的有页面的名字和唯一的path路径,这样菜单点击的时候可以自由切换到相应的页面；
38.页面path配置好后，就可以在这个页面上添加想要展示的组件信息了，比如一个表格组件；
39.表格组件添加城后，需要对其进行配置，比如交互方式以及数据来源等；
40.一个容器上创建一个页面基本就完成了。为了对比，可以重复上述步骤在之前容器上再创建一个页面；
41.还可以在这个页面上进一步地添加了头部组件等其他的功能组件进行进一步的优化；
42.最后进行效果的展示，不同的路由path,展示不同的页面，达到了路由页面的效果。
43.本发明上述实施例所提供的前端页面生成方法，仅可以单个页面的实现，也可以多页面的实现。也可以实现页面大屏展示。组件与组件之间可以通过配置界面实现互联互通。组件的数据来源可以通过后端接口api来获取，这样其灵活性大大增强，不需要提前配置数据源。对于现有的前端项目而言，可以直接过渡和复用之前的api。能够抽离出通用功能组件，以组件为单位，通过组件间拖拽布局，配置通信的方式形成普通页面。极大节约开发资源，优化资源开发成本。
44.本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
45.此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
46.上述提到的存储介质可以是只读存储器，磁盘或光盘等。
47.在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
48.上文的描述包括一个或多个实施例的举例。当然，为了描述上述实施例而描述部件或方法的所有可能的结合是不可能的，但是本领域普通技术人员应该认识到，各个实施例可以做进一步的组合和排列。因此，本文中描述的实施例旨在涵盖落入所附权利要求书的保护范围内的所有这样的改变、修改和变型。此外，就说明书或权利要求书中使用的术语“包含”，该词的涵盖方式类似于术语“包括”，就如同“包括”在权利要求中用作衔接词所解释的那样。此外，使用在权利要求书的说明书中的任何一个术语“或者”是要表示“非排它性的或者”。
49.以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。