一种web系统前端页面开发方法及装置制造方法及图纸

本发明专利技术涉及一种web系统前端页面开发方法及装置，所述方法为工业信息系统中对多种前端框架进行适配的方法，包括：S1、根据多框架UI模板库以及通用UI组件，生成适配所有框架UI模板的标准化UI组件，将所有标准化UI组件作为标准物料库；S2、在接收到前端页面代码开发请求时，基于所述标准物料库展示可视化原型开发界面，获取用户的编辑信息，生成结构化原型设计文件；S3、根据所述多框架UI模板库，对所述结构化原型设计文件进行结构化解析，且按照预设策略嵌套规则生成对应多种前端框架的多套前端UI代码。本发明专利技术提供了“一次设计、多框架代码生成”的方法，能够解决适配多框架系统重复开发的问题，提升前端开发效率。提升前端开发效率。提升前端开发效率。

【技术实现步骤摘要】
一种web系统前端页面开发方法及装置


[0001]本专利技术涉及一种web系统前端页面开发方法及装置。

技术介绍

[0002]随着前端技术的快速发展，形成了多套前端基础框架，比如主流的的前端UI开发框架React、Vue、AngularJS等，通过这些框架使得前端开发工作发展成了声明式、组件化和工程化。在这个过程中，企业内部不同阶段又采用了不同的框架开发功能，使得开发一个功能又想要多个内部系统都能使用，从而编写了多个框架的代码，尤其是为了使用不同框架的UI组件，而这些组件有大部分交互和属性都是雷同的，造成前端开发的资源浪费和开发效率低下。
[0003]因此，亟需一种能够一次前端设计同时生成多套UI框架前端代码的方法，提高前端开发效率。

技术实现思路

[0004](一)要解决的技术问题
[0005]鉴于现有技术的上述缺点、不足，本专利技术提供了一种web系统前端页面开发方法及装置。
[0006](二)技术方案
[0007]为了达到上述目的，本专利技术采用的主要技术方案包括：/>[0008]第一本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种web系统前端页面开发方法，其特征在于，所述方法为工业信息系统中对多种前端框架进行适配的方法，所述方法包括：S1、根据多框架UI模板库以及通用UI组件，生成适配所有框架UI模板的标准化UI组件，将所有标准化UI组件作为标准物料库；S2、在接收到前端页面代码开发请求时，基于所述标准物料库展示可视化原型开发界面，根据所述前端页面代码开发请求，获取用户在所述可视化原型开发界面的编辑信息，基于编辑信息生成结构化原型设计文件；所述结构化原型设计文件包括：待开发页面的结构化页面、容器、和/或UI组件信息；S3、根据所述多框架UI模板库，对所述结构化原型设计文件进行结构化解析，且按照预设策略嵌套规则生成对应多种前端框架的多套前端UI代码。2.根据权利要求1所述的方法，其特征在于，所述多框架UI模板库包括以下一种或多种：React UI模板、Vue UI模板、AngularJS UI模板。3.根据权利要求1所述的方法，其特征在于，所述结构化原型设计文件包括：待开发页面的页面层次结构DOM，所述DOM包括页面层、容器层和UI组件，所述UI组件为标准物料库中的标准化UI组件。4.根据权利要求1所述的方法，其特征在于，所述S2包括：S21、接收用户创建的前端页面代码开发请求，基于标准物料库展示可视化原型开发界面，所述可视化原型开发界面包括：物料组件面板、可编辑的画布设计区、属性设置区；S22、响应用户对所述物料组件面板的选择操作，所述画布设计区展示所述物料组件面板中选择操作所属的UI组件；S23、响应用户在所述属性设置区的输入操作和用户在所述画布设计区的拖拽操作，获得待开发页面的结构化页面、容器、UI组件信息，生成结构化原型设计文件；其中，所述物料组件面板展示预先存储的标准物料库的标准化UI组件。5.根据权利要求1所述的方法，其特征在于，所述S3包括：S31、对所述结构化原型设计文件进行结构化解析，得到第一页面...

【专利技术属性】
技术研发人员：傅浩，潘采宝，蔡元贞，
申请(专利权)人：浙江中控技术股份有限公司，
类型：发明
国别省市：