CN108388444A - 一种基于React组件的前端页面配置方法及系统 - Google Patents

Abstract

本发明涉及一种基于React组件的前端页面配置方法及系统，通过引入React组件化思想完成页面的组装构建。同时以针对页面组件元素进行扩展优化的方式，来解决由于对页面整体的更新迭代造成的结构复杂度不断提升的问题。本发明通过对组件素材嵌套拼接及配置的形式实现了页面的构建，以一种便捷的方式简化开发流程，提升开发效率，在既能满足页面需求的前提下，又能减轻后期扩展、迭代及维护的工作量。

Description

一种基于React组件的前端页面配置方法及系统

技术领域

本发明涉及计算机软件工程领域，特别是涉及一种基于React组件的前端交互式页面配置的方法及系统。

背景技术

随着互联网信息科技的不断发展，Web前端技术的迭代也日新月异。与此同时，用户对于视图页面的设计和功能也都提出了更高的要求。传统的前端页面通常只负责信息的呈现与展示，开发者只需要考虑页面的结构和布局，并利用以HTML、CSS、Javascript/Jquery为核心的开发技术即可完成对视图页面的开发。但随着时间的推移，为了能够提升用户的浏览体验和实现更多的交互功能，就需要对已经构建完成的视图页面进行不断的扩展和更新。但由此而产生的潜在隐患也日益凸显。在经过对页面多次的改造和扩展后，其内部结构势必会变得错综复杂。对于一个繁重臃肿的前端页面，其优化、调试及修复的成本是十分高昂的。造成页面后期不易维护的问题，是因为在页面构建初期及扩展阶段缺乏一种统一规范的开发方式，导致页面在不断迭代的过程中结构耦合度逐渐提升，致使视图页面无法再完成进一步的迭代或更新。

发明内容

有鉴于此，本发明所要解决的技术问题是提供一种基于React组件的前端页面配置方法，用于解决页面在不断更新迭代的过程中结构复杂度不断提升，导致后期开发效率低、出错率高、不易维护等问题。并依据该方法实现一个简单易用的视图页面构建系统，以一种便捷的方式简化开发流程，提升开发效率，在既能满足页面需求的前提下，又能减轻后期扩展、迭代及维护的工作量。

本发明解决上述技术问题的技术方案如下：一种基于React组件的前端页面配置方法，包括：

步骤1：采用前端React技术框架搭建系统界面，主要包括：类型选择页、设计构造页、效果预览页、组件素材上传页。

步骤2：通过React技术提供的JSX语法规则构建组件模型，在构建的同时可依据特定的需求进行个性化定制。

步骤3：将构建完成的组件模型文件通过“组件素材上传页”上传至服务器端的数据存储模块。

步骤4：通过“类型选择页”选择所要构建的页面类型，并选取所需的相关页面组件素材。

步骤5：在“设计构造页”中完成对视图页面的嵌套拼接，形成页面的整体骨架。

步骤6：布局结构和组件素材放置完成后，需要对编辑区的组件进行参数配置。

步骤7：通过“效果预览页”可对编辑完成的页面进行实时预览，并提供页面下载按钮。

附图说明

图1为本发明所述的一种基于React组件的前端页面配置方法及系统的流程示意图。

具体实施方式

针对上述技术方案步骤，以下结合附图对本发明的原理和特征展开进一步的描述说明。

一种基于React组件的前端页面配置方法，包括：

步骤1：采用前端React技术框架搭建系统界面，主要包括：类型选择页、设计构造页、效果预览页、组件素材上传页。

具体的页面构建系统所使用的技术桟包括：HTML5、CSS3、React、Webpack、Nodejs、Mysql。其中在类型选择页，主要提供数据资源类、信息管理类、个人博客类、运营活动类等几种页面类型的选择，并且包含组件素材上传页的跳转按钮，以及读取本地页面的按钮。设计构造页是构造页面的核心部分，主要分为五个区域，分别为页面最顶部的功能导航条，主要用于对当前编辑的页面进行管理。左侧上部的页面布局项，主要包含多个页面布局框架，使用者可以选择需要的页面布局方式进行编辑。左侧下部的组件素材项，主要包含了当前类型页面的所有组件素材，通过组件素材的拼接嵌套来完成整体页面的开发。中部的页面编辑区，是完成页面搭建的主要区域，通过该区域的编辑能够对页面视图进行实时的调整。右侧的组件参数配置区，是对当前编辑区中的各个组件进行参数的配置，可依据需求进行认为设定。效果预览页主要对构建完成的页面进行效果预览，并提供页面源代码下载接口。组件素材上传页的主要功能是为指定类型的页面提供组件素材，同时也能够检索并修改当前组件库中所有已构建的组件。

步骤2：通过React技术提供的JSX语法规则构建组件模型，在构建的同时可依据特定的需求进行个性化定制。

所有的组件素材在上传系统前需要通过JSX语法规则进行构建，JSX语法是构建页面组件时采用的统一规则标准，这不仅确保了组件之间能够进行灵活的嵌套拼接，还将复杂的页面开发过程转化为单个组件素材的开发。对页面的功能扩展转变为对组件的功能扩展，在更新迭代时，也只需针对单独的组件个体进行改造即可，不涉及页面当中的其他部分，展现了良好的封装性与独立性。

步骤3：将构建完成的组件模型文件通过“组件素材上传页”上传至服务器端的数据存储模块。

组件素材开发完成后，会产生许多组件模型相关的文件。通过Webpack打包工具对这些素材文件进行压缩打包，并生成一个或多个bundle文件(组件依赖的资源文件)，然后上传至服务器端的数据存储模块。当系统运行时，会自动加载当前类型页面中的组件库，作为编辑页面的所需的素材。直至该步骤，已经完成了页面组件的构建工作。

步骤4：通过“类型选择页”选择所要构建的页面类型，并选取所需的相关页面组件素材。

这一步是对所要构建的页面类型进行选择，并挑选出构建页面时所要用到的组件素材。在该页中，能够对当前类型页面的组件素材库进行检索操作，并允许对组件库中的所有组件进行查看和删除操作。

步骤5：在“设计构造页”中完成对视图页面的嵌套拼接，形成页面的整体骨架。

这一步是构建页面的主要实施阶段。从“设计构造页”左侧上部排列的页面布局项中，选择所需的布局结构，并以拖拽的方式放入位于中部的页面编辑区中。再以同样拖拽的方式从“设计构造页”左侧下部排列的组件素材区中，选择所需的组件放入布局结构中相应的位置。组件之间可以同级拼接，也可以上下级嵌套，组件的位置可依据需求进行实时调整。

步骤6：布局结构和组件素材放置完成后，需要对编辑区的组件进行参数配置。

页面的整体骨架构建完成后，需要针对各个组件进行特定的参数配置。例如组件的外观样式、事件绑定、数据源选取、跳转链接等等。配置的方式是通过鼠标点击选择当前组件，在“设计构造页”右侧的参数配置区，会显示当前组件能够进行配置的参数列表，配置完成后点击确定按钮即可生效当前配置，点击重置按钮会清空当前配置的所有参数。

步骤7：通过“效果预览页”可对编辑完成的页面进行实时预览，并提供页面下载按钮。

在页面结构和参数配置都完成后，可以进入“效果预览页”进行页面效果预览，如果不符合页面设计需求可以返回“设计构造页”对页面进行改造，如果对页面的效果确认无误，可以点击页面的下载按钮，将页面所有的依赖资源文件封装打包，生成最终的效果页，并下载到本地指定的文件目录下。

Claims (7)

1.一种基于React组件的前端页面配置方法及系统，其特征主要包括：

步骤1：采用前端React技术框架搭建系统界面，主要包括：类型选择页、设计构造页、效果预览页、组件素材上传页。

步骤2：通过React技术提供的JSX语法规则构建组件模型，在构建的同时可依据特定的需求进行个性化定制。

步骤3：将构建完成的组件模型文件通过“组件素材上传页”上传至服务器端的数据存储模块。

步骤4：通过“类型选择页”选择所要构建的页面类型，并选取所需的相关页面组件素材。

步骤5：在“设计构造页”中完成对视图页面的嵌套拼接，形成页面的整体骨架。

步骤6：布局结构和组件素材放置完成后，需要对编辑区的组件进行参数配置。

步骤7：通过“效果预览页”可对编辑完成的页面进行实时预览，并提供页面下载接口。

2.根据权利要求1所述的一种基于React组件的前端页面配置方法及系统，其特征在于React技术框架开发的视图页面构建系统，包括类型选择页、设计构造页、效果预览页、组件素材上传页四个部分。

3.根据权利要求1所述的一种基于React组件的前端页面配置方法及系统，其特征在于组件素材模型有JSX语法创建。

4.根据权利要求1所述的一种基于React组件的前端页面配置方法及系统，其特征在于以拖拽的交互方式完成页面的嵌套拼接过程。

5.根据权利要求1所述的一种基于React组件的前端页面配置方法及系统，其特征在于提供了组件素材上传功能。

6.根据权利要求1所述的一种基于React组件的前端页面配置方法及系统，其特征在于对组件个体进行更新迭代来完成对页面整体的功能扩展。

7.根据权利要求1所述的一种基于React组件的前端页面配置方法及系统，其特征在于能够对构建完成的页面进行打包封装并下载。