CN116028039A - 基于可进阶组件库快速产出前端项目的方法及系统 - Google Patents

Abstract

本发明涉及Web项目开发技术领域，具体涉及基于可进阶组件库快速产出前端项目的方法及系统。方法包括：S1，开发人员根据组件设计图，提前开发单组件UI库并维护；S2，UI设计师通过前端Canvas画布可视化配置呈现的项目整体界面、单组件交互效果和页面之间跳转逻辑，选择产出初始化项目或单页面或选择开发框架并提交；S3，根据步骤S2中配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件，供前端开发人员使用。本发明具有能够缩短开发周期，实现UI设计和前端开发并行，同时增加开发质量和节约成本的特点。

Description

基于可进阶组件库快速产出前端项目的方法及系统

技术领域

本发明涉及Web项目开发技术领域，具体涉及基于可进阶组件库快速产出前端项目的方法及系统。

背景技术

在以往传统式的互联网公司中，一套完整项目的开发及完成，除产品设计外，包括UI（User Interface，用户界面）设计+前端开发+后端开发，而Web项目的成本，绝大部分也是人力成本，其中前后两端的开发占整体项目人力成本的绝大部分。

传统的web项目前端开发主要包含三步：

1.选择适合自己项目的前端框架并生成基础的项目开发环境架构。

2.据UI设计师给出的设计图编写界面代码及交互代码。

3.据业务逻辑编写插入个性化业务逻辑代码，例如接口数据处理等等。

传统的web项目开发流程存在以下缺点：

1.开发周期问题

现有项目开发中，整体项目开发链路UI设计+前端+后端，前端和UI设计无法像前端和后端一样并行开发同步进行，前端需要等待UI设计完成后才可以介入开发，开发周期长，整体效率低，且前端实现效果和UI设计有出入时还需要反复和设计师确认修改。

2.开发质量问题

市面上现有前端开发UI组件库，只集合单组件代码，但实现整体项目搭建、单页面布局、个性化页面效果、页面之间跳转等等代码还是要由人工来完成，现有组件库只起到了有限的一小部分帮助，绝大部分实现还是由人工实现，出错率高，且样式及效果单一，个性化部分无法满足。

3.开发效率问题

市面上现有组件库，不同的技术框架对应不同组件库，使用方式不同，开发者需要翻阅不同的使用文档，但最终呈现界面效果却大致相同，徒增开发者使用学习成本。

因此，设计一种能够缩短开发周期，实现UI设计和前端开发并行，同时增加开发质量和节约成本的基于可进阶组件库快速产出前端项目的方法及系统，就显得十分重要。

发明内容

本发明是为了克服现有技术中，现有的web项目开发流程，存在开发周期长，开发质量差以及增加开发者使用学习成本的问题，提供了一种能够缩短开发周期，实现UI设计和前端开发并行，同时增加开发质量和节约成本的基于可进阶组件库快速产出前端项目的方法及系统。

为了达到上述发明目的，本发明采用以下技术方案：

基于可进阶组件库快速产出前端项目的方法，包括如下步骤；

S1，开发人员根据组件设计图，提前开发单组件UI库并维护；

S2，UI设计师通过前端Canvas画布可视化配置呈现的项目整体界面、单组件交互效果和页面之间跳转逻辑，选择产出初始化项目或单页面或选择开发框架并提交；

S3，根据步骤S2中配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件，供前端开发人员使用。

作为优选，步骤S1包括如下步骤：

S11，将UI设计师提供的整体UI界面拆分成单个模块化前端组件，并定义每个模块化前端组件可配置化的各类样式及各种可执行的交互效果；

S12，前端开发人员根据UI界面提供的模块化前端组件进行代码片段生产；

S13，前端结合现有官方组件库进行二次封装，并生产出模块化前端组件在不同框架所对应的代码片段；

S14，前端产出不同页面及项目交互效果所对应的代码片段；

S15，将所有生成的代码片段上传至代码集中；

其中所述代码集通过NodeJs运行环境结合MySQL关系型数据库进行管理及增删改查和后期复用操作。

作为优选，步骤S11中每个模块化前端组件均包括有可选的配置或属性所生成的样式代码和交互代码。

作为优选，步骤S2包括如下步骤：

S21，UI设计师选择需要产出的模块化前端组件和框架，通过NodeJs运行环境在MySQL数据库存储的代码集中进行查找所述模块化前端组件对应不同框架的代码片段，最后返回处理及拼接，生成单文件或项目文件；

S22，UI设计师选择需要配置的不同页面之间跳转关联关系，对应的代码片段由代码集产出，并进行拼接操作，最终生成单文件或项目文件；

S23，UI设计师在页面中通过可视化组件库及画布，进行拖拽拼接，自定义宽高和自定义交互，最终生产出整个页面所呈现的效果，完成单个页面产出效果配置；

S24，步骤S21至步骤S23的配置完成后点击确认，通过NodeJs运行环境在MySQL数据库里的代码集中查找到对应框架、对应模块化前端组件、对应交互效果所对应的代码片段，并进行组装拼接，最后产出对应的单文件或者整体项目zip文件，最终通过接口数据流传输返回，并下载到本地。

作为优选，步骤S21中所述框架包括react开发框架或vue开发框架。

作为优选，步骤S3包括如下步骤：

S31，接收UI设计师配置的整体项目及页面的配置信息数据；

S32，拆分页面中的单页面、单模块化前端组件配置及产出框架选择、路由跳转、页面交互信息；

S33，根据拆分出来的各种模块化前端组件的配置信息，到MySQL数据库里存储的代码集中选择对应的代码片段；

S34，由NodeJs运行环境将步骤S33中选择的代码片段进行组装，组装后生成单文件或结合框架代码片段生成项目文件；

S35，将最终生成的单文件或者项目文件通过接口数据流形式返回给客户端。

作为优选，步骤S34中所述单文件的格式包括vue、tsx、html和css。

本发明还提供了基于可进阶组件库快速产出前端项目的系统，包括：

单组件维护模块，用于开发人员根据组件设计图，提前开发单组件UI库并维护；

整体项目结构配置模块，用于UI设计师通过前端Canvas画布可视化配置呈现的项目整体界面、单组件交互效果和页面之间跳转逻辑，选择产出初始化项目或单页面或选择开发框架并提交；

开发环境项目生成模块，用于根据配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件，供前端开发人员使用。

本发明与现有技术相比，有益效果是：（1）本发明缩短了开发周期，实现UI设计和前端开发并行；前端人员只需维护整体项目配置模块即可，UI设计师可从该系统中通过拖拽模块组件，配置样式及交互，快速精准的搭建出最终呈现的页面效果及交互；（2）本发明增加开发质量；代码全部自动化生成产出，人工部分只需要关注接口数据等业务逻辑代码注入及处理即可，大大减少了bug的产生，提高了整体项目开发质量；（3）本发明节约成本；前端项目代码通过该系统自动生成初始化项目或单文件，前端开发人员只需要在生成初始项目基础上继续开发即可，或者将生成单页面直接放入项目中使用，有效节省了前端部分开发人员成本。

附图说明

图1为本发明中基于可进阶组件库快速产出前端项目的系统的一种整体构架示意图；

图2为本发明中单组件维护模块的一种功能结构示意图；

图3为本发明中整体项目结构配置模块的一种功能结构示意图；

图4为本发明中开发环境项目生成模块的一种功能结构示意图。

具体实施方式

为了更清楚地说明本发明实施例，下面将对照附图说明本发明的具体实施方式。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图，并获得其他的实施方式。

如图1所示，本发明所提出的整体方法和系统主要包括3个模块；

1.单组件维护模块：

在此模块中前端开发人员根据UI设计师给出的组件设计图，提前开发并一直维护一个全面的单组件UI库，里面包含了界面拆分的各个部分的小的UI组件，所述UI组件需包含各大框架的产出代码，包含交互代码及各种可配置化代码，供UI设计师在整体项目结构配置模块使用。用户可根据自身的开发经验、任务积累、历史数据，自行添加各种UI组件至该模块库，使得组件库不断完善进阶，在后续的使用中进一步复用，提高开发效率。

2.整体项目结构配置模块：

UI设计师可在此模块中通过前端Canvas画布可视化的配置最终呈现的项目整体界面、单组件交互效果、页面之间跳转逻辑等等，并选择产出初始化项目还是单页面，选择开发框架等等并提交，供开发环境项目生成模块使用。

3.开发环境项目生成模块：

此模块会根据整体项目结构配置模块配置提交的数据，并结合对应的模版代码，最终通过NodeJs的fs模块产出生成对应的开发环境整体项目框架文件或单页面文件，供前端开发人员使用。

fs模块是NodeJs提供的，用来操作文件的模块(读取/写入)。它提供了一些属性和方法，用来满足用户对文件的操作。

进一步的，如图2所示，单组件维护模块的主要步骤如下：

1.将UI设计师提供的整体UI界面拆分成单个模块化前端组件，定义好每个组件可配置化的各类样式及各种可执行的交互效果。

2.前端开发人员根据UI提供单组件进行代码片段生产，根据样式和交互效果、每个组件包括有可选的配置或属性，比如框架、适配浏览器等配置所生成的样式代码和交互代码。

3.前端生产不同框架（例react、vue等等）所对应的代码片段，可结合Antd或ElementUI现有组件库进行二次封装，产出该组件在不同框架所对应的代码片段，每个组件包括有可选的配置或属性，比如框架、适配浏览器等，只要在此一次性配置足够丰富的不同框架代码片段，后期便可重复多次的一直复用。

4.前端产出不同页面及项目交互所对应的代码片段，例如页面router跳转、跳转传参、接口调用、点击、拖拽等。

5将所生成的组件代码片段上传至开发环境项目生成模块中的代码集中，其中整个代码集通过NodeJs结合MySQL关系型数据库进行管理及增删改查和后期复用等操作。

单组件维护模块主要负责往代码集中不断添加新的组件代码片段，方便在整体项目结构配置模块中，给UI设计师配置实现具体页面时提供更完善、更丰富的组件库资源。

进一步的，如图3所示，整体项目结构配置模块的主要步骤如下：

1.配置产出开发项目技术框架，如选择react开发框架或vue开发框架，对UI设计师而言，由于在单组件维护模块中已经配置产出了组件所对应的不同框架的代码片段，所以在整体项目结构配置模块中只需在页面中点击选择即可，不需要关心不同框架对应的不同代码问题，选择后开发环境项目生成模块会根据UI设计师所选组件和框架，通过NodeJs运行环境在MySQL数据库存储的代码集中进行查找所述模块化前端组件对应不同框架的代码片段，最后返回处理及拼接，最终生成单文件或项目文件。

2.配置项目所有页面之间关联路由跳转数据，该功能UI设计师只需在页面中点击选择配置不同页面之间跳转关联关系即可，所对应的代码片段同样由单组件维护模块配置产出，由开发环境项目生成模块在代码集中查找操作拼接，最终生成单文件或整体项目文件。

3.配置单个页面产出后整体效果，包括布局，内容等，该功能UI设计师可在页面中通过可视化组件库及画布，拖拽拼接，自定义宽高、自定义交互，最终产出整个页面所呈现出的效果，不需要关心不同页面组件所对应的代码问题，和上述两步骤过程相同，组件所对应的代码产出问题全部交给另外两个模块完成，对UI设计师而言，可迅速直观、灵活的配置出想要的页面效果。

4.配置完成后点击确认，开发环境项目生成模块在MySQL数据库里的代码集中查找到对应框架、对应组件、对应交互效果所对应的代码片段，通过NodeJs进行组装拼接最后产出对应的单文件或者整体项目zip文件，最终通过接口数据流传输返回，下载到本地。

进一步的，如图4所示，开发环境项目生成模块的主要步骤如下：

1.接收整体项目结构配置模块中UI设计师配置的整体项目及页面的配置信息数据。

2.拆分页面中的单页面、单组件配置及产出框架选择、路由跳转、页面交互等信息。

3.根据拆分出来的各种小的模块化前端组件的配置信息，到MySQL数据库里存储的代码集中选择对应的代码片段，例如用户在整体项目结构配置模块中选择了react框架，则在代码集中查找之前在单组件维护模块中配置的react对应的代码片段，只要在单组件维护模块中配置了足够丰富的框架代码片段，在这里就可以生成多种框架的代码片段，且一次配置后可重复多次的复用。

4. 由NodeJs运行环境将上一步骤中选择的代码片段进行组装，组装后生成（.vue、.tsx、.html、.css等）单文件或结合框架代码片段生成整体项目文件。

5.将最终生成的单文件或者项目文件通过接口数据流形式返回给整体项目结构配置模块。

本发明通过结合实例，具体说明本发明的实现过程，以五个项目订单，需产出五套不同功能PC端项目(后台管理、中台系统等)为例，使用本发明系统开发流程及主要工作量如下：

主要工作说明：

UI设计师：将界面拆分成一个个例如表格、表单、输入框、下拉框、文章阅读、pdf预览、文件上传、文件下载、各种按钮、侧边栏等小的模块，并备注好默认样式及交互、可选性样式及交互等说明，以输入框为例，备注：尺寸默认200*50、尺寸可调整、默认提示(请输入内容)。

前端开发：根据UI设计师提供的小UI模块封装成代码片段，且同一UI组件模块需封装成不同框架所对应的代码片段，每个组件包括有可选的配置或属性，比如框架、适配浏览器等，虽然花费了大量时间来封装不同框架所对应的代码片段，但在此之后，便可一直重复使用，这也是本发明所说的可进阶的由来，通过不断的积累，不断的完善代码集，最终将会产出一个非常完善且丰富的项目产出系统，封装完成后，将代码片段上传至数据库中的代码集中。

后端开发：根据业务逻辑编写后端部分代码并最终提供接口供前端调用联调。

主要开发分为四个部分：

1.UI产出界面模块部分：在此过程中，UI设计师不断将产出的小的UI模块转交给前端，前端不需要等待UI设计师完成全部界面UI，即可开始开发工作，占总开发时长20%。

2.前端产出代码模块部分：前端不断将设计师产出的小的UI模块编写成代码模块组件并添加到此系统的组件库中，每个模块包含可选配置、可选开发框架，每个组件包括有可选的配置或属性，比如框架、适配浏览器等，前端和UI同步进行，占总开发时长30%。

3.界面及项目组装部分：UI设计师使用此系统可视化将一个个小的代码模块拼接、位置布局、配置大小、配置参数、选择使用框架，最终生成一个整体页面，首次配置整体项目文件产出供前端使用，后期迭代则产出单个页面文件供前端使用，占总开发时长10%。

4.后端开发业务逻辑部分：将业务逻辑处理代码转换成接口最终前后端联调用，占总开发时长30%。

5.前后端联调部分：前端调用后端接口，将拿到的数据插入项目中，占总开发时长10%。

以上为第一套项目的开发总量：UI产出界面模块部分2d+前端产出代码模块部分3d+界面及项目组装部分1d+后端开发业务逻辑部分3d+前后端联调部分1d，总计10d。

第二套项目开发总量：UI产出界面模块部分（由于第一套项目中部分小模块类型相同，例如表单、表格、输入框等，故不需要重复设计）1d+前端产出代码模块部分（部分重复组件在第一套项目时已完成并已导入此系统组件库中，故不需要重复开发）1.5d+界面及项目组装部分1d+后端开发业务逻辑部分3d+前后端联调部分1d，总计7.5d。

第三套项目开发总量：UI产出界面模块部分（由于第一套和第二套项目中部分小模块类型相同，故不需要重复设计）0.5d+前端产出代码模块部分（由于第一套和第二套项目中部分小模块类型相同，故不需要重复开发导入）0.5d+界面及项目组装部分1d+后端开发业务逻辑部分3d+前后端联调部分1d，总计6d。

以此类推，则第五套项目开发总量：UI产出界面模块部分（由于前期项目中所有小模块类型皆有相同的，故不需要重复设计）0d+前端产出代码模块部分（由于前期项目中所有小模块类型皆有，故不需要重复开发导入）0d+界面及项目组装部分1d+后端开发业务逻辑部分3d+前后端联调部分1d，总计5d。

后续项目开发中，随着此系统组件库越来越丰富，可以省略掉第一和第二部分，直接由UI设计师在此系统中可视化拼接配置出想要的页面，配置好交互及对应的样式，并导出时选择导出开发框架及导出单页面或整个项目，前端开发继续在此基础上进行第五部分前后端接口联调即可，整体节省了大量工作量及开发时间，由于设计师亲自配置的页面，避免了设计和开发出的页面样式或交互有出入后期反复修改，项目质量也得到了提高。

本发明提出了一种RPA问题场景梳理的方式，结合客服收集的用户反馈问题和在线咨询用户输入两种数据源，从用户反馈中梳理出场景，从在线咨询输入中构造问题文本。基于输入日志挖掘最常见的问题及其输入，基于构造的训练数据训练NLU意图模型。在接受到用户激活对话窗口的动作后，主动推送RPA常见问题，用户输入后使用训练的NLU意图模型区分用户场景。多轮对话过程中除了支持文本、鼠标点选结果作为输入外，还支持调用RPA组件界面交互设置参数的结果作为输入，在进行多轮对话收集RPA的参数时，本发明提出了使用常量参数表和场景相关的不重要参数表，减少交互轮次，另外本发明还对用户在多轮输入时需要切换场景和中断对话的需求进行了意图判断和处理，使得本系统更加智能和人性化。最后本方法提出了生成交互式引导教程并在结果中给出点击链接，以便用户更直观的学习RPA软件操作方法。

本发明的创新点如下：

1.本发明创造性地提出前端开发人员结合NodeJs和MySQL数据库，自动化精准生成前端项目代码片段文件及项目整体文件的想法；

2.本发明创新性地结合javaScript及Canvas使Web开发设计图代码实现生成可精准并且自动化。

以上所述仅是对本发明的优选实施例及原理进行了详细说明，对本领域的普通技术人员而言，依据本发明提供的思想，在具体实施方式上会有改变之处，而这些改变也应视为本发明的保护范围。

Claims (8)

1.基于可进阶组件库快速产出前端项目的方法，其特征在于，包括如下步骤；

S1，根据组件设计图，提前开发单组件UI库并维护；

S2，通过前端Canvas画布可视化配置呈现的项目整体界面、单组件交互效果和页面之间跳转逻辑，选择产出初始化项目或单页面或选择开发框架并提交；

S3，根据步骤S2中配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件。

2.根据权利要求1所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S1包括如下步骤：

S11，将提供的整体UI界面拆分成单个模块化前端组件，并定义每个模块化前端组件可配置化的各类样式及各种可执行的交互效果；

S12，根据UI界面提供的模块化前端组件进行代码片段生产；

S13，前端结合现有官方组件库进行二次封装，并生产出模块化前端组件在不同框架所对应的代码片段；

S14，前端产出不同页面及项目交互效果所对应的代码片段；

S15，将所有生成的代码片段上传至代码集中；

其中所述代码集通过NodeJs运行环境结合MySQL关系型数据库进行管理及增删改查和后期复用操作。

3.根据权利要求2所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S11中每个模块化前端组件均包括有可选的配置或属性所生成的样式代码和交互代码。

4.根据权利要求2所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S2包括如下步骤：

S21，选择需要产出的模块化前端组件和框架，通过NodeJs运行环境在MySQL数据库存储的代码集中进行查找所述模块化前端组件对应不同框架的代码片段，最后返回处理及拼接，生成单文件或项目文件；

S22，选择需要配置的不同页面之间跳转关联关系，对应的代码片段由代码集产出，并进行拼接操作，最终生成单文件或项目文件；

S23，在页面中通过可视化组件库及画布，进行拖拽拼接，自定义宽高和自定义交互，最终生产出整个页面所呈现的效果，完成单个页面产出效果配置；

S24，步骤S21至步骤S23的配置完成后点击确认，通过NodeJs运行环境在MySQL数据库里的代码集中查找到对应框架、对应模块化前端组件、对应交互效果所对应的代码片段，并进行组装拼接，最后产出对应的单文件或者整体项目zip文件，最终通过接口数据流传输返回，并下载到本地。

5.根据权利要求4所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S21中所述框架包括react开发框架或vue开发框架。

6.根据权利要求4所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S3包括如下步骤：

S31，接收配置的整体项目及页面的配置信息数据；

S32，拆分页面中的单页面、单模块化前端组件配置及产出框架选择、路由跳转、页面交互信息；

S33，根据拆分出来的各种模块化前端组件的配置信息，到MySQL数据库里存储的代码集中选择对应的代码片段；

S34，由NodeJs运行环境将步骤S33中选择的代码片段进行组装，组装后生成单文件或结合框架代码片段生成项目文件；

S35，将最终生成的单文件或者项目文件通过接口数据流形式返回给客户端。

7.根据权利要求6所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S34中所述单文件的格式包括vue、tsx、html和css。

8.基于可进阶组件库快速产出前端项目的系统，用于实现权利要求1-7任一项所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，所述基于可进阶组件库快速产出前端项目的系统包括：

单组件维护模块，用于根据组件设计图，提前开发单组件UI库并维护；

整体项目结构配置模块，用于通过前端Canvas画布可视化配置呈现的项目整体界面、单组件交互效果和页面之间跳转逻辑，选择产出初始化项目或单页面或选择开发框架并提交；

开发环境项目生成模块，用于根据配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件。

Images