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

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

背景技术：

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

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

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

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

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

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

7、1.开发周期问题

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

9、2.开发质量问题

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

11、3.开发效率问题

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

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

技术实现思路

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

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

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

4、s1，开发人员根据组件设计图，提前开发单组件ui库并维护；

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

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

7、作为优选，步骤s1包括如下步骤：

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

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

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

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

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

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

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

15、作为优选，步骤s2包括如下步骤：

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

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

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

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

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

21、作为优选，步骤s3包括如下步骤：

22、s31，接收ui设计师配置的整体项目及页面的配置信息数据；

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

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

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

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

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

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

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

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

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

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