模块化的页面快速构建方法、系统、设备及介质与流程

本发明涉及计算机的，具体涉及一种基于模块化的页面快速构建方法、系统、设备及介质。

背景技术：

1、计算机软件从大类上分为系统软件、工具软件、应用软件等，其中应用软件(application)是和系统软件相对应的，是用户可以使用的各种程序设计语言，以及用各种程序设计语言编制的应用程序的集合。应用软件是计算机系统实用功能的最终载体，是政府与各类企事业单位计算机应用的核心。

2、随着“互联网+”时代推动了互联网与各行各业之间的紧密联系，web应用的需求量也日益增长。这类需求的web应用的前端功能大部分比较相似，页面结构相对固定，整体需求数量庞大，ui样式要求不高。主要为数据的展示和管理，以及用户权限的管理，本质是针对数据的增、删、改、查操作，在开发的过程中存在很多重复性工作。在传统的前端网页构造流程中，首先由美工设计界面原型图，然后开发者根据设计图编程生成静态网页，再编写逻辑代码生成动态网页，并且在开发的任何阶段可能会根据用户的需求变化进行修改。

3、因此,网页的开发过程当中存在很多制约效率的问题。前端开发工作重复度高，并且维护程度复杂，则导致开发周期延长，成本也相应地提高，业务效率低下。

技术实现思路

1、针对现有技术中所存在的不足，本发明提供了一种基于模块化的页面快速构建方法、系统、设备及介质，以解决现有技术中网页的开发过程当中存在很多制约效率的问题。前端开发工作重复度高，并且维护程度复杂，则导致开发周期延长，成本也相应地提高，业务效率低下的技术问题。

2、本发明提供了一种基于模块化的页面快速构建方法，包括：

3、s1、采用b/s架构分别构建用于数据的传入与输出的表示层、用于逻辑处理与执行控制的业务逻辑层和用于数据连接和指令传达的数据访问层，所述业务逻辑层包括用于编写前端页面的功能逻辑代码和管理前端状态数据的前端模块，和用于读取和存储系统配置数据，并对接口请求进行相应执行业务逻辑的后端模块；

4、s2、基于所述表示层进入操作界面，并对业务逻辑层的空白模块化页面进行编辑操作，对所述模块化页面中组件库的组件进行参数配置，并通过所述数据访问层实时保存在本地；

5、s3、对所述空白模块化页面进行编辑直至满足需求，并将页面的参数配置保存至所述数据访问层。

6、可选地，所述基于所述表示层进入操作界面，包括：

7、基于设定的账户密码登陆所述操作界面，并对前端模块的导航菜单进行配置，为每项菜单设置绑定的路由以及访问权限，自动生成页面导航菜单，并映射到所设定的路由地址，以及控制其访问权限。

8、可选地，所述并对业务逻辑层的空白模块化页面进行编辑操作，包括：

9、点击生成的导航菜单，进入对应的空白页面，对组件库里的组件进行浏览和选择，将选定的组件逐个添加至空白页面上，调整其位置和大小。

10、可选地，所述对所述模块化页面中组件库的组件进行参数配置，包括：

11、对选取的所述组件进行可视化编辑，并绑定所述后端模块的接口，获取后端数据，并对所述组件和接口进行调试，设置组件参数。

12、本发明还提供了一种基于模块化的页面快速构建系统，包括：

13、架构构建模块，用于采用b/s架构分别构建用于数据的传入与输出的表示层、用于逻辑处理与执行控制的业务逻辑层和用于数据连接和指令传达的数据访问层，所述业务逻辑层包括用于编写前端页面的功能逻辑代码和管理前端状态数据的前端模块，和用于读取和存储系统配置数据，并对接口请求进行相应执行业务逻辑的后端模块；

14、页面编辑模块，用于基于所述表示层进入操作界面，并对业务逻辑层的空白模块化页面进行编辑操作，对所述模块化页面中组件库的组件进行参数配置，并通过所述数据访问层实时保存在本地；

15、存储模块，用于对所述空白模块化页面进行编辑直至满足需求，并将页面的参数配置保存至所述数据访问层。

16、本发明还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现前述方法的步骤。

17、本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现前述方法的步骤。

18、相比于现有技术，本发明具有如下有益效果：

19、本文首先基于b/s架构开发页面构建系统，构建可视化交互操作界面。其次以组件化的开发方式，分析整理后台管理系统的通用功能，运用echarts图表库和ant design ui组件样式库开发成低耦合、可复用、能交互的前端组件库。设计实现组件的拖拽、缩放、增删功能，基于响应式的流式网格布局，使组件能够在页面上灵活排列，从而生成个性化的页面布局。并且系统还具有导航路由和访问权限的自动配置、组件可视化动态编辑、后端数据接口绑定和交互、数据操作项设置、配置数据自动生成和保存、跨设备响应等功能。

技术特征：

1.一种基于模块化的页面快速构建方法，其特征在于，包括：

2.如权利要求1所述的基于模块化的页面快速构建方法，其特征在于，所述基于所述表示层进入操作界面，包括：

3.如权利要求2所述的基于模块化的页面快速构建方法，其特征在于，所述并对业务逻辑层的空白模块化页面进行编辑操作，包括：

4.如权利要求3所述的基于模块化的页面快速构建方法，其特征在于，所述对所述模块化页面中组件库的组件进行参数配置，包括：

5.一种基于模块化的页面快速构建系统，其特征在于，包括：

6.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1-4任一项所述方法的步骤。

7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-4任一项所述方法的步骤。

技术总结
本发明提供了一种基于模块化的页面快速构建方法，本发明首先基于B/S架构开发页面构建系统，构建可视化交互操作界面。其次以组件化的开发方式，分析整理后台管理系统的通用功能，运用ECharts图表库和Ant Design UI组件样式库开发成低耦合、可复用、能交互的前端组件库。设计实现组件的拖拽、缩放、增删功能，基于响应式的流式网格布局，使组件能够在页面上灵活排列，从而生成个性化的页面布局。并且系统还具有导航路由和访问权限的自动配置、组件可视化动态编辑、后端数据接口绑定和交互、数据操作项设置、配置数据自动生成和保存、跨设备响应等功能。

技术研发人员：王贺,樊静,黄玮洁,王恺
受保护的技术使用者：重庆工业赋能创新中心有限公司
技术研发日：
技术公布日：2024/1/15