CN116679929A - 一种web系统前端页面开发方法及装置 - Google Patents
一种web系统前端页面开发方法及装置 Download PDFInfo
- Publication number
- CN116679929A CN116679929A CN202310696648.6A CN202310696648A CN116679929A CN 116679929 A CN116679929 A CN 116679929A CN 202310696648 A CN202310696648 A CN 202310696648A CN 116679929 A CN116679929 A CN 116679929A
- Authority
- CN
- China
- Prior art keywords
- page
- development
- component
- template
- prototype
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000011161 development Methods 0.000 claims abstract description 88
- 238000013461 design Methods 0.000 claims abstract description 63
- 230000000007 visual effect Effects 0.000 claims abstract description 29
- 239000010421 standard material Substances 0.000 claims abstract description 18
- 238000012916 structural analysis Methods 0.000 claims abstract description 11
- 239000000463 material Substances 0.000 claims description 19
- 230000001419 dependent effect Effects 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 9
- 238000012545 processing Methods 0.000 claims description 7
- 238000004458 analytical method Methods 0.000 claims description 5
- 230000006835 compression Effects 0.000 claims description 4
- 238000007906 compression Methods 0.000 claims description 4
- 230000003044 adaptive effect Effects 0.000 abstract 1
- 230000008569 process Effects 0.000 description 9
- 230000006870 function Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000006978 adaptation Effects 0.000 description 4
- 239000008186 active pharmaceutical agent Substances 0.000 description 3
- 238000012938 design process Methods 0.000 description 2
- 230000014509 gene expression Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000000354 decomposition reaction Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000012805 post-processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及一种web系统前端页面开发方法及装置，所述方法为工业信息系统中对多种前端框架进行适配的方法，包括：S1、根据多框架UI模板库以及通用UI组件，生成适配所有框架UI模板的标准化UI组件，将所有标准化UI组件作为标准物料库；S2、在接收到前端页面代码开发请求时，基于所述标准物料库展示可视化原型开发界面，获取用户的编辑信息，生成结构化原型设计文件；S3、根据所述多框架UI模板库，对所述结构化原型设计文件进行结构化解析，且按照预设策略嵌套规则生成对应多种前端框架的多套前端UI代码。本发明提供了“一次设计、多框架代码生成”的方法，能够解决适配多框架系统重复开发的问题，提升前端开发效率。
Description
技术领域
本发明涉及一种web系统前端页面开发方法及装置。
背景技术
随着前端技术的快速发展，形成了多套前端基础框架，比如主流的的前端UI开发框架React、Vue、AngularJS等，通过这些框架使得前端开发工作发展成了声明式、组件化和工程化。在这个过程中，企业内部不同阶段又采用了不同的框架开发功能，使得开发一个功能又想要多个内部系统都能使用，从而编写了多个框架的代码，尤其是为了使用不同框架的UI组件，而这些组件有大部分交互和属性都是雷同的，造成前端开发的资源浪费和开发效率低下。
因此，亟需一种能够一次前端设计同时生成多套UI框架前端代码的方法，提高前端开发效率。
发明内容
(一)要解决的技术问题
鉴于现有技术的上述缺点、不足，本发明提供了一种web系统前端页面开发方法及装置。
(二)技术方案
为了达到上述目的，本发明采用的主要技术方案包括：
第一方面，本发明实施例提供一种web系统前端页面开发方法，所述方法为工业信息系统中对多种前端框架进行适配的方法，所述方法包括：
S1、根据多框架UI模板库以及通用UI组件，生成适配所有框架UI模板的标准化UI组件，将所有标准化UI组件作为标准物料库；
S2、在接收到前端页面代码开发请求时，基于所述标准物料库展示可视化原型开发界面，根据所述前端页面代码开发请求，获取用户在所述可视化原型开发界面的编辑信息，基于编辑信息生成结构化原型设计文件；所述结构化原型设计文件包括：待开发页面的结构化页面、容器、和/或UI组件信息；
S3、根据所述多框架UI模板库，对所述结构化原型设计文件进行结构化解析，且按照预设策略嵌套规则生成对应多种前端框架的多套前端UI代码。
可选地，所述多框架UI模板库包括以下一种或多种：React UI模板、Vue UI模板、AngularJS UI模板。
可选地，所述结构化原型设计文件包括：待开发页面的页面层次结构DOM，所述DOM包括页面层、容器层和UI组件，所述UI组件为标准物料库中的标准化UI组件。
可选地，所述S2包括：
S21、接收用户创建的前端页面代码开发请求，基于标准物料库展示可视化原型开发界面，所述可视化原型开发界面包括：物料组件面板、可编辑的画布设计区、属性设置区；
S22、响应用户对所述物料组件面板的选择操作，所述画布设计区展示所述物料组件面板中选择操作所属的UI组件；
S23、响应用户在所述属性设置区的输入操作和用户在所述画布设计区的拖拽操作，获得待开发页面的结构化页面、容器、UI组件信息，生成结构化原型设计文件；
其中，所述物料组件面板展示预先存储的标准物料库的标准化UI组件。
可选地，所述S3包括：
S31、对所述结构化原型设计文件进行结构化解析，得到第一页面、容器、UI组件对象集；
S32、针对所述多框架UI模板库中每一UI模板，基于预设的策略嵌套规则对所述第一页面、容器、UI组件对象进行策略嵌套处理，得到第二页面、容器、UI组件对象集；其中，所述预设的策略嵌套规则为按照包括三方依赖解析策略、框架适配器策略、容器及依赖策略、路由和工具策略的策略流依次执行每一策略；
S33、针对所述多框架UI模板库中每一UI模板，对所述第二页面、容器、UI组件对象集，套用每一UI模板的组件生成器、容器生成器、页面生成器，生成对应该UI模板所属UI框架的前端UI代码。
可选地，所述S33之后还包括：
S34、按照预设代码格式和预设注释生成逻辑格式化每一前端UI代码并生成注释，得到多种前端框架的多套前端UI代码。
可选地，所述S3之后还包括：
S4、针对所述多框架UI模板库中每一UI模板，利用该UI模板的项目生成器将所述前端UI代码打包成前端项目文件夹和压缩包。
可选地，所述标准化UI组件的类型包括以下一种或多种：
按钮、表单、输入框、单选框、日期选择框、多选框、表格；
所述S2中的前端页面代码开发请求为开发终端的请求时，所述可视化原型开发界面为web系统前端页面开发装置的界面，或者可视化原型开发界面为web系统前端页面开发装置基于前端页面代码开发请求向开发终端发送并使开发终端展示的可视化操作界面。
本发明通过上述步骤，抽象UI组件为适配多种前端框架的通用标准化UI组件，并基于通用标准化UI组件提供可视化原型设计界面，通过套用多套UI模板生成多前端框架兼容的代码，实现一次设计、多框架页面开发，有效提升了前端开发效率。
第二方面，本发明提供了一种web系统前端页面开发装置，其特征在于，包括存储器和处理器，所述存储器中存储计算机程序，所述处理器执行所述计算机程序时执行上述第一方面任一项所述的web系统前端页面开发方法的步骤。
第三方面，本发明提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面任一项所述的web系统前端页面开发方法的步骤。
(三)有益效果
与现有技术相比，本发明通过组件抽象、设计态结构化和套用多框架项目模板等手段，提供了一套“一次设计、多框架代码生成”的方法，能够解决因为适配多框架系统而重复开发功能的问题，通过该发明大幅度提升了前端开发效率。
附图说明
图1为本发明一实施例提供的前端页面开发方法流程图；
图2为本发明一实施例提供的前端页面开发方法关键步骤示意图；
图3为本发明一实施例提供的主流组件库的常用组件示意图；
图4为本发明一实施例提供的通用按钮组件标准化描述示意图；
图5为本发明一实施例提供的可视化原型开发界面；
图6为本发明一实施例提供的结构化原型设计文件中的页面结构化描述示意图；
图7为本发明一实施例提供的多框架结构化解析和模板套用流程图；
图8为本发明一实施例提供的模板套用框图。
具体实施方式
为了更好的理解上述技术方案，下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更清楚、透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。
随着工业互联网和工业信息化的发展，越来越多的企业选择了低代码应用开发进行工业信息系统的业务页面的开发，往往通过自研或者选型一种前端框架，选型一种前端组件进行开发，而开发出来的应用也完全依托于对应的低代码平台或容器，这种处理方式有如下问题：
1)前端页面代码高度依赖前端指定框架和UI，很难和企业现有系统的设计进行兼容；
2)存在从设计稿到软件界面的转义过程；
3)开发的页面功能，很难集成到不同前端框架的已有系统内；
4)每个场景都需要重复开发，很难抽取典型场景进行模板化应用。
本发明针对以上问题，在Web系统前端开发过程中，通过抽象UI组件为适配多种前端框架的通用标准化UI组件，并基于通用标准化UI组件提供可视化原型设计界面，以及通过套用多套UI模板生成多前端框架兼容的代码，实现一次设计、多框架页面开发，有效提升了前端开发效率。
为了更好的理解本发明的实施例，下面就一些涉及的专业术语进行说明。
多框架：是指前端进行UI渲染的基础框架，主流的前端UI基础框架有React、Vue、AngularJS等。通过这些框架可以实现前端声明式、组件化的页面开发。
React框架：React是一个用于构建用户界面的JavaScript库。React是一套UI引擎，是DOM的抽象层，它遵循组件设计模式、声明式编程范式和函数式编程的概念，使用虚拟DOM有效的操作DOM，并且遵循从高阶组件到低阶组件的单向数据流，从而使前端应用程序达到高效。
Vue框架：Vue是一套用于构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计，提供了MVVM数据绑定和可组合的组件系统，具有简单、灵活的API，通过简单的API可实现响应式的数据绑定和可组合的视图组件。
AngularJS：AngularJS是一款构建用户界面的前端框架，是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了HTML，实现一套框架，多种平台，移动端和桌面端。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。
UI组件：以多框架为基础，针对前端特定场景进行组件化封装的产物，比如表单场景包含了文本框、下拉框和选择框等组件，实现UI组件的目的是尽可能进行复用和支持前端开发过程的组件化机制。
设计态UI组件：设计态组件是指基于UI组件抽象的一套在页面设计过程中使用的物料组件，通常包含组件的形态，和组件全量属性的描述，通过这类抽象组件屏蔽了多UI组件框架的差异，使得设计态不用关心具体的前端框架技术栈细节。
结构化设计产物：结构化设计是指通过对设计态组件进行可视化配置，从产品设计师的角度形成一个可视化的页面原型，通过对原型的结构化解析形成的一个组件和布局结构文件。该文件描述了页面原型的层级结构和组件组成，后期用于解析过程使用。
结构化设计解析层：结构化设计产物和最终可编译原型代码之间的中间层，该层通过对结构化设计产物进行解析，形成各个框架的页面布局和组件元数据，最终套用项目模板进行代码生成。
项目模板(或UI模板)：指定框架的脚手架代码，通过该模板，配合结构化解析结果用于生成指定框架的前端脚手架代码。
可编译运行代码：指定框架和UI组件的前端代码，可以通过本地安装依赖，然后进行编译和生成最终页面。
实施例一
本发明的实施例提供了一种基于web系统前端页面开发方法的具体实施方式。
如图1和图2所示，本实施例的具体实施步骤主要包括：
S1、根据多框架UI模板库以及通用UI组件，生成适配所有框架UI模板的标准化UI组件，将所有标准化UI组件作为标准物料库；
需要说明的是，在本实施例中，如图2所示，所用到的UI框架包括React、Vue、AngularJS，在实际实施中，也可能用到其他类似的前端UI框架比如Bootstrap，jQuery等。
具体地，该步骤根据需支持的多种UI框架的特点，通过一个自描述契约，将需要支持的多框架UI组件进行结构化描述，最终形成能够用于多框架UI的通用设计UI组件物料(即标准物料库)。
通常，需要支持的常见UI组件如图3所示，包括按钮、表单、输入框、单选框、日期选择框、多选框、表格等。
如图4所示，以按钮(Button)组件为例，本实施例从各UI框架的按钮(Button)组件的共性，提取了通用按钮(Button)组件的属性并以JSON形式进行结构化标准描述。
通过以上对通用UI组件的处理，可以得到用于可视化原型开发的标准物料库，为后续利用可视化手段完成页面设计提供基础。
S2、在接收到前端页面代码开发请求时，基于所述标准物料库展示可视化原型开发界面，根据所述前端页面代码开发请求，获取用户在所述可视化原型开发界面的编辑信息，基于编辑信息生成结构化原型设计文件；所述结构化原型设计文件包括：待开发页面的结构化页面、容器、和/或UI组件信息；
为了更好的说明前端页面可视化设计过程，下面将S2分解为S21-S23的子步骤进行详细说明：
S21、接收用户创建的前端页面代码开发请求，基于标准物料库展示可视化原型开发界面，所述可视化原型开发界面包括：物料组件面板、可编辑的画布设计区、属性设置区；
如图5所示，基于标准化组件描述的标准物料库的基础上，本实施例提供了一种可视化原型开发界面，该界面包括物料组件面板(左侧)、画布设计区(中间)、属性设置区(右侧)三个操作区域。
其中，物料组件面板展示预先存储的标准物料库的标准化UI组件，包括：通过动态读取标准化组件描述文件，解析其相关属性和缩略图，动态渲染一个标准化组件列表，作为中间画布的素材。
画布设计区是结构化原型设计的核心，设计人员通过HTML拖拽功能，对组件进行位置、对齐方式、容器嵌套等一系列的设计，形成一个符合软件需求的原型页面。
属性设置区是编辑指定画布内组件属性的一个设置器，可以做到对组件属性、事件和样式等多种属性的设置。
需要说明的是，当前端页面代码开发请求为开发终端的请求时，所述可视化原型开发界面为web系统前端页面开发装置的界面，或者可视化原型开发界面为web系统前端页面开发装置基于前端页面代码开发请求向开发终端发送并使开发终端展示的可视化操作界面。
S22、响应用户对所述物料组件面板的选择操作，所述画布设计区展示所述物料组件面板中选择操作所属的UI组件；
S23、响应用户在所述属性设置区的输入操作和用户在所述画布设计区的拖拽操作，获得待开发页面的结构化页面、容器、UI组件信息，生成结构化原型设计文件；
设计完成后，通过结构化原型设计组态，形成了一个页面层次结构，如图6所示，通常按照HTML的DOM结构，分成页面层、容器层和UI组件，这个层次结构在多框架UI中是一样的，最终生成一个结构化描述的结构化原型设计文件，作为多框架UI模板进行代码生成的输入。
S3、根据所述多框架UI模板库，对所述结构化原型设计文件进行结构化解析，且按照预设策略嵌套规则生成对应多种前端框架的多套前端UI代码。
为了更好的说明步骤S3，下面将S3分解为子步骤S31-S34进行详细说明：
S31、对所述结构化原型设计文件进行结构化解析，得到第一页面、容器、UI组件对象集；
可理解的是，结构化解析是将设计产出的原型描述文件进行DOM层级遍历的过程，依次按照页面、容器和组件解析其属性，构造对应的处理类对象，用于作为策略嵌套的输入参数。同时处理类记录了组件设计态的所有属性和事件。
S32、针对所述多框架UI模板库中每一UI模板，基于预设的策略嵌套规则对所述第一页面、容器、UI组件对象进行策略嵌套处理，得到第二页面、容器、UI组件对象集；
其中，所述预设的策略嵌套规则为按照包括三方依赖解析策略、框架适配器策略、容器及依赖策略、路由和工具策略的策略流依次执行每一策略；
具体地，在项目模板套用过程中，存在着多个步骤，每个步骤可定义为一种策略，通过对结构化解析文件按照策略流进行嵌套，以实现代码生成各个要点的实现。核心包括三方依赖解析策略、框架适配器策略、容器及依赖策略、路由和工具策略等，如下：
A1、三方依赖解析策略；
结构化解析后，如果有组件联动的脚本，往往会引入第三方脚本，比如：import_from'lodash'，三方依赖解析过程通过正则表达式识别匹配这一类的字符，集中增加到前端脚手架的package.json的依赖配置中。
A2、框架适配器策略；
框架设配器策略包含了多框架适配层，通过提供一层适配器，把需要DOM操作的接口引导到指定的前端框架。比如react适配层需要提供的API如React.createElement、React.createContext、React.findDOMNode等，以实现符合React的DOM生成规则。
A3、容器及依赖策略；
容器及依赖策略主要基于标准化物料描述，将对应的组件映射成具体框架的UI组件。
A4、路由和工具策略；
路由和工具策略是按照框架路由依赖进行对指定三方库的引用，比如路由在React框架使用的React-router。
经过按照预设的策略嵌套规则依次执行上述策略，得到第二页面、容器、UI组件对象集，作为下一步骤UI模板套用的输入。
S33、针对所述多框架UI模板库中每一UI模板，对所述第二页面、容器、UI组件对象集，套用每一UI模板的组件生成器、容器生成器、页面生成器，生成对应该UI模板所属UI框架的前端UI代码。
如图8所示，步骤S33中主要进行模板套用，其中UI模板的组件生成器、容器生成器解析了结构化描述文件，从而生成了实际项目的代码块；页面生成器解析页面属性，并且拼装了代码块内容形成实际项目的文件。
进一步的，在实际应用中，也可增加后置处理的子步骤S34，
S34、按照预设代码格式和预设注释生成逻辑格式化每一前端UI代码并生成注释，得到多种前端框架的多套前端UI代码。
可理解地是，通过步骤S34能够有效提升所生成代码的可读性。
S4、针对所述多框架UI模板库中每一UI模板，利用该UI模板的项目生成器将所述前端UI代码打包成前端项目文件夹和压缩包。
如图8所示，模板中通常也包括项目生成器，可以通过项目生成器将多个代码文件进行从新组织形成一个模块文件夹，进一步结合引用项目模板生成一个包含项目层次文件的前端项目文件夹和压缩包。
本发明通过组件抽象、设计态结构化和套用多框架项目模板等手段，提供了一套“一次设计、多框架代码生成”的方法，能够解决因为适配多框架系统而重复开发功能的问题，通过该发明大幅度提升了前端开发效率。
实施例二
本实施例提供了一种web系统前端页面开发装置，其特征在于，包括存储器和处理器，所述存储器中存储计算机程序，所述处理器执行所述计算机程序时执行上述实施例一中任一所述的web系统前端页面开发方法的步骤。
实施例三
本实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述实施例一中任一所述的web系统前端页面开发方法的步骤。
需要说明的是，在本说明书的描述中，术语“一个实施例”、“一些实施例”、“实施例”、“示例”、“具体示例”或“一些示例”等的描述，是指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
尽管已描述了本发明的优选实施例，但本领域的技术人员在得知了基本创造性概念后，则可对这些实施例作出另外的变更和修改。显然，本领域的技术人员可以对本发明进行各种修改和变型而不脱离本发明的精神和范围。
Claims (10)
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、对所述结构化原型设计文件进行结构化解析，得到第一页面、容器、UI组件对象集；
S32、针对所述多框架UI模板库中每一UI模板，基于预设的策略嵌套规则对所述第一页面、容器、UI组件对象进行策略嵌套处理，得到第二页面、容器、UI组件对象集；其中，所述预设的策略嵌套规则为按照包括三方依赖解析策略、框架适配器策略、容器及依赖策略、路由和工具策略的策略流依次执行每一策略；
S33、针对所述多框架UI模板库中每一UI模板，对所述第二页面、容器、UI组件对象集，套用每一UI模板的组件生成器、容器生成器、页面生成器，生成对应该UI模板所属UI框架的前端UI代码。
6.根据权利要求5所述的方法，其特征在于，所述S33之后还包括：
S34、按照预设代码格式和预设注释生成逻辑格式化每一前端UI代码并生成注释，得到多种前端框架的多套前端UI代码。
7.根据权利要求1所述的方法，其特征在于，所述S3之后还包括：
S4、针对所述多框架UI模板库中每一UI模板，利用该UI模板的项目生成器将所述前端UI代码打包成前端项目文件夹和压缩包。
8.根据权利要求1所述的方法，其特征在于，所述标准化UI组件的类型包括以下一种或多种：
按钮、表单、输入框、单选框、日期选择框、多选框、表格；
所述S2中的前端页面代码开发请求为开发终端的请求时，所述可视化原型开发界面为web系统前端页面开发装置的界面，或者可视化原型开发界面为web系统前端页面开发装置基于前端页面代码开发请求向开发终端发送并使开发终端展示的可视化操作界面。
9.一种web系统前端页面开发装置，其特征在于，包括存储器和处理器，所述存储器中存储计算机程序，所述处理器执行所述计算机程序时执行上述权利要求1至8任一项所述的web系统前端页面开发方法的步骤。
10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述权利要求1至8任一项所述的web系统前端页面开发方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310696648.6A CN116679929A (zh) | 2023-06-13 | 2023-06-13 | 一种web系统前端页面开发方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310696648.6A CN116679929A (zh) | 2023-06-13 | 2023-06-13 | 一种web系统前端页面开发方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116679929A true CN116679929A (zh) | 2023-09-01 |
Family
ID=87780750
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310696648.6A Pending CN116679929A (zh) | 2023-06-13 | 2023-06-13 | 一种web系统前端页面开发方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116679929A (zh) |
-
2023
- 2023-06-13 CN CN202310696648.6A patent/CN116679929A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112181416B (zh) | 一种从视觉稿直接生成ui代码的方法及装置 | |
| Ciccozzi et al. | Blended modelling-what, why and how | |
| CN101661512B (zh) | 一种识别传统表单信息并创建对应Web表单的系统及方法 | |
| CN109062567B (zh) | 基于b/s结构的信息管理系统快速开发平台 | |
| Voelter et al. | Supporting Diverse Notations in MPS'Projectional Editor. | |
| CN108984172B (zh) | 一种界面文件的生成方法及装置 | |
| Sánchez Ramón et al. | Model-driven reverse engineering of legacy graphical user interfaces | |
| CN101526942A (zh) | 在线、实时及自动生成动态网页的组件实现技术 | |
| WO2006051958A1 (ja) | 情報配信システム | |
| CN111625226A (zh) | 一种基于原型的人机交互设计实现方法及系统 | |
| CN102521008B (zh) | 程序编译装置和程序编译方法 | |
| CN113391808A (zh) | 页面的配置方法、装置及电子设备 | |
| CN114820881A (zh) | 图片的生成方法、智能终端及其计算机可读存储介质 | |
| CN113655996B (zh) | 一种基于需求模型的企业级系统生成方法 | |
| US7546541B2 (en) | Method and apparatus for iterative refinement of generated user-interface markup | |
| CN113010168B (zh) | 一种基于场景树的用户界面生成方法 | |
| CN111708529B (zh) | 一种基于angular通过拖拽生成表单的实现方法 | |
| Zhao et al. | Pattern-based design evolution using graph transformation | |
| US9075891B2 (en) | Method and device for editing an object represented in a web page | |
| de Lange et al. | Collaborative wireframing for model-driven web engineering | |
| Sabraoui et al. | A MDA-based model-driven approach to generate GUI for mobile applications | |
| CN116679929A (zh) | 一种web系统前端页面开发方法及装置 | |
| KR101885067B1 (ko) | 콘텐츠 분할 및 예약어를 이용한 홈페이지 콘텐츠 편집 서비스 제공 방법 | |
| Dube et al. | Modeling theories and model transformation scenario for complex system development | |
| CN117667196B (zh) | 基于中间表示模型的uxui高效协作的低代码方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |