CN116414375A - 一种导出设计版源码的方法和系统 - Google Patents
一种导出设计版源码的方法和系统 Download PDFInfo
- Publication number
- CN116414375A CN116414375A CN202310668322.2A CN202310668322A CN116414375A CN 116414375 A CN116414375 A CN 116414375A CN 202310668322 A CN202310668322 A CN 202310668322A CN 116414375 A CN116414375 A CN 116414375A
- Authority
- CN
- China
- Prior art keywords
- layer
- logic
- codes
- exported
- view layer
- 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.)
- Granted
Links
- 238000013461 design Methods 0.000 title claims abstract description 47
- 238000000034 method Methods 0.000 title claims description 16
- 238000013507 mapping Methods 0.000 claims abstract description 28
- 238000011161 development Methods 0.000 claims abstract description 17
- 238000012545 processing Methods 0.000 claims abstract description 10
- 230000001172 regenerating effect Effects 0.000 claims description 6
- 238000009795 derivation Methods 0.000 claims 2
- 238000012423 maintenance Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
Images
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/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/33—Intelligent editors
-
- 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
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及一种导出设计版源码的系统，所述系统为应用设计系统，所述应用设计系统的页面划分为视图层、逻辑处理层以及逻辑映射层；所述应用设计系统拖拽控件对视图层的配置项进行修改；在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用;导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。本发明支持应用二次开发后还能再平台继续对原有应用进行设计，实现软件开发的个性需求。
Description
技术领域
本发明涉及应用设计开发领域，具体涉及一种导出设计版源码的方法和系统。
背景技术
现有的应用设计系统或平台，所有的设计都在平台上统一完成，所有的功能需要平台提供支持，局限了用户的需求，让用户无法满足自己的个性化需求；支持源码导出进行二次开发功能，但是二次开发后的应用无法再导入到原平台进行维护设计，导致后续新增的需求无法再进行可视化开发，并且开发人员还需要理解平台生成的代码逻辑。
发明内容
有鉴于此，本发明的目的在于提供一种导出设计版源码的方法和系统，旨在解决上述问题。
为实现上述目的，本发明采用如下技术方案：
一种导出设计版源码的系统，所述系统为应用设计系统，所述应用设计系统的页面划分为视图层、逻辑处理层以及逻辑映射层；
所述应用设计系统拖拽控件对视图层的配置项进行修改；
在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用;
导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
进一步的，所述视图层包括html和css；所述逻辑处理层包括js脚本；所述逻辑映射层将视图层的dom元素以及视图层的生命周期一一映射到逻辑层指定的全局变量以及钩子函数下。
进一步的，所述视图层中创建html元素界面布局，同时将css信息通过定义变量方式，将变量绑定到对应组件的根节点上。
进一步的，所述逻辑处理层JS脚本逻辑根据应用设计系统内配置的调用方法与组件的uuid属性值，以及固定的生命周期函数映射关系进行生成；所述JS脚本包括所有视图层组件对象，通过调用组件对象的方法或者修改组件对象的属性实现逻辑层数据与视图层进行关联。
进一步的，在导出源码时，会判断数据库中isFirst字段是否为true，若为false则为第一次导出，若为true，则是第二次导出;若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码。
进一步的，在视图层中，对每个dom元素以组件化渲染，每个组件赋值一个唯一的变量，然后通过逻辑映射层将这些变量构造成参数下发给逻辑层的load的方法。
进一步的，若需要二次导出源码，则将二次导出的代码直接暴力覆盖二次开发后的工程。
一种源码导出方法，包括以下步骤：
开发人员通过应用设计系统拖拽控件对视图层的配置项进行修改，创建或编辑应用，并生成源码；
在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用；
导出源码时，判断是否为第一次导出，若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码；
导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
本发明与现有技术相比具有以下有益效果：
1、本发明系统支持源码导出功能，让用户可以直接在源码上进行二次开发与维护，让后期的应用脱离平台后仍然能够进行人工维护，满足用户的个性化需求；
2、本发明支持应用二次开发后还能再平台继续对原有应用进行设计，让应用的二次开发和平台设计可以一起共同维护。
附图说明
图1是本发明源码导出方法示意图。
具体实施方式
下面结合附图及实施例对本发明做进一步说明。
请参照图1，本发明提供一种导出设计版源码的应用设计系统，所述应用设计系统的页面划分为视图层、逻辑处理层以及逻辑映射层；
应用设计系统拖拽控件对视图层的配置项进行修改；
在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用;
导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
在本实施例中，不同于现有传统单页代码是将js业务逻辑代码都集中在vue文件里头，本发明将页面布局，组件样式设置，组件属性配置等视觉展示上的内容归为视图层，将对组件触发事件以及组件与组件之间，组件与数据之间交互作为逻辑层。平台通过文件路径及文件名对视图层进行一对一绑定。 通过平台视图层和逻辑层分离，让js代码和vue文件进行分割，让业务逻辑代码单独在js文件里头，同时平台还做了判空操作，当逻辑层中的业务代码没有实现，会停止调用，保证其他业务正常执行。
在本实施例中，视图层包括html和css；逻辑处理层包括js脚本；所述逻辑映射层将视图层的dom元素以及视图层的生命周期一一映射到逻辑层指定的全局变量以及钩子函数下。
根据平台的配置，在视图层中创建html元素界面布局，同时将css信息通过定义变量方式，将变量绑定到对应组件的根节点上。
在视图层中，对每个dom元素以组件化渲染，每个组件会赋值一个唯一的变量，然后通过逻辑映射层将这些变量构造成参数下发给逻辑层的load的方法。那么在逻辑层load的方法内部就能拿到视图层的dom元素。同理会在视图层中生命钩子函数分别回调逻辑层的生命周期钩子函数。
逻辑处理层JS脚本逻辑根据应用设计系统内配置的调用方法与组件的uuid属性值，以及固定的生命周期函数映射关系进行生成；所述JS脚本包括所有视图层组件对象，通过调用组件对象的方法或者修改组件对象的属性实现逻辑层数据与视图层进行关联。
在本实施例中，在导出源码时，会判断数据库中isFirst字段是否为true，若为false则为第一次导出，若为true，则是第二次导出;若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码。因为系统只是修改视图层和逻辑映射层的内容，视图层通过调用逻辑映射层的接口来调用逻辑层代码，若逻辑层未实现该接口，则视图层相当于不调用逻辑层接口，故只需生成这两层代码即可。
优选地，在本实施例中，若需要二次导出源码，则将二次导出的代码直接暴力覆盖二次开发后的工程。
优先的，在本实施例中，还提供一种源码导出方法，包括以下步骤：
开发人员通过应用设计系统拖拽控件对视图层的配置项进行修改，创建或编辑应用，并生成源码；
在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用；
导出源码时，判断是否为第一次导出，若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码；
导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属本发明的涵盖范围。
Claims (8)
1.一种导出设计版源码的系统，其特征在于，所述系统为应用设计系统，所述应用设计系统的页面划分为视图层、逻辑处理层以及逻辑映射层；
所述应用设计系统拖拽控件对视图层的配置项进行修改；
在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用;
导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
2.根据权利要求1所述的一种导出设计版源码的系统，其特征在于，所述视图层包括html和css；所述逻辑处理层包括js脚本；所述逻辑映射层将视图层的dom元素以及视图层的生命周期一一映射到逻辑层指定的全局变量以及钩子函数下。
3.根据权利要求2所述的一种导出设计版源码的系统，其特征在于，所述视图层中创建html元素界面布局，同时将css信息通过定义变量方式，将变量绑定到对应组件的根节点上。
4.根据权利要求1所述的一种导出设计版源码的系统，其特征在于，所述逻辑处理层JS脚本逻辑根据应用设计系统内配置的调用方法与组件的uuid属性值，以及固定的生命周期函数映射关系进行生成；所述JS脚本包括所有视图层组件对象，通过调用组件对象的方法或者修改组件对象的属性实现逻辑层数据与视图层进行关联。
5.根据权利要求1所述的一种导出设计版源码的系统，其特征在于，在导出源码时，会判断数据库中isFirst字段是否为true，若为false则为第一次导出，若为true，则是第二次导出;若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码。
6.根据权利要求2所述的一种导出设计版源码的系统，其特征在于，在视图层中，对每个dom元素以组件化渲染，每个组件赋值一个唯一的变量，然后通过逻辑映射层将这些变量构造成参数下发给逻辑层的load的方法。
7.根据权利要求1所述的一种导出设计版源码的系统，其特征在于，若需要二次导出源码，则将二次导出的代码直接暴力覆盖二次开发后的工程。
8.一种基于权利要求1-7任一所述的一种导出设计版源码的系统的源码导出方法，其特征在于，包括以下步骤：
开发人员通过应用设计系统拖拽控件对视图层的配置项进行修改，创建或编辑应用，并生成源码；
在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用；、
导出源码时，判断是否为第一次导出，若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码；
导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310668322.2A CN116414375B (zh) | 2023-06-07 | 2023-06-07 | 一种导出设计版源码的方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310668322.2A CN116414375B (zh) | 2023-06-07 | 2023-06-07 | 一种导出设计版源码的方法和系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116414375A true CN116414375A (zh) | 2023-07-11 |
| CN116414375B CN116414375B (zh) | 2023-09-01 |
Family
ID=87059676
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310668322.2A Active CN116414375B (zh) | 2023-06-07 | 2023-06-07 | 一种导出设计版源码的方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116414375B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107357942A (zh) * | 2017-09-04 | 2017-11-17 | 山东达创网络科技股份有限公司 | 一种源代码辅助生成工具及其生成方法 |
| US20180004543A1 (en) * | 2016-06-30 | 2018-01-04 | Sap Portals Israel Ltd. | Centralized overview display generated from annotated data sources |
| CN110554874A (zh) * | 2019-09-12 | 2019-12-10 | 北京百度网讯科技有限公司 | 用于复用SaaS平台网页组件的方法和装置 |
| CN114461204A (zh) * | 2022-04-12 | 2022-05-10 | 南京飓风引擎信息技术有限公司 | 一种将多层级对象数据翻译为原生代码的开发系统和方法 |
| CN114625379A (zh) * | 2022-05-16 | 2022-06-14 | 杭州兑吧网络科技有限公司 | H5项目源码的生成方法及h5项目源码开发系统 |
| CN115328462A (zh) * | 2022-07-28 | 2022-11-11 | 西北大学 | 一种基于Vue.js的可视化开发工具及使用方法 |
-
2023
- 2023-06-07 CN CN202310668322.2A patent/CN116414375B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180004543A1 (en) * | 2016-06-30 | 2018-01-04 | Sap Portals Israel Ltd. | Centralized overview display generated from annotated data sources |
| CN107357942A (zh) * | 2017-09-04 | 2017-11-17 | 山东达创网络科技股份有限公司 | 一种源代码辅助生成工具及其生成方法 |
| CN110554874A (zh) * | 2019-09-12 | 2019-12-10 | 北京百度网讯科技有限公司 | 用于复用SaaS平台网页组件的方法和装置 |
| CN114461204A (zh) * | 2022-04-12 | 2022-05-10 | 南京飓风引擎信息技术有限公司 | 一种将多层级对象数据翻译为原生代码的开发系统和方法 |
| CN114625379A (zh) * | 2022-05-16 | 2022-06-14 | 杭州兑吧网络科技有限公司 | H5项目源码的生成方法及h5项目源码开发系统 |
| CN115328462A (zh) * | 2022-07-28 | 2022-11-11 | 西北大学 | 一种基于Vue.js的可视化开发工具及使用方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116414375B (zh) | 2023-09-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7448024B2 (en) | System and method for software application development in a portal environment | |
| CN102207872B (zh) | 按照用户需求定制Web UI控件的方法和系统 | |
| CN110825362A (zh) | 低代码应用软件开发系统及方法 | |
| CN105511873B (zh) | 用户界面控件展示方法及装置 | |
| US8307015B2 (en) | Decorated model architecture for efficient model-driven application development | |
| WO2015078343A1 (zh) | 用于web开发系统的开发方法和web开发系统 | |
| US20030200533A1 (en) | Method and apparatus for creating software objects | |
| US20030226111A1 (en) | Application development acceleration employing declarative user interfaces | |
| US20030221165A1 (en) | System and method for metadata-driven user interface | |
| CN106293664A (zh) | 代码生成方法及装置 | |
| CN103383645A (zh) | 代码生成方法及系统 | |
| WO2007050110A2 (en) | Method and model for enterprise system development and execution | |
| CN113886362A (zh) | 基于工作流引擎及低代码平台的数据存储系统及存储方法 | |
| CN101901148A (zh) | 基于autosar标准的ecu参数配置界面生成方法 | |
| US20230418562A1 (en) | Interactive graphic design system to enable creation and use of variant component sets for interactive objects | |
| CN109445775A (zh) | 一键活动内嵌代码方法、装置及计算机可读存储介质 | |
| Wadge et al. | Intensional html | |
| WO2013109858A1 (en) | Design canvas | |
| CN111506306A (zh) | 一种Ansible剧本编写方法、装置和电子设备 | |
| CN116909553A (zh) | 一种页面在线开发及本地编译运行系统 | |
| Bennett et al. | Transformations on a dialog tree: rule-based maping of content to style | |
| CN116414375B (zh) | 一种导出设计版源码的方法和系统 | |
| CN110795067A (zh) | 一种需求原型可复用方法 | |
| US11526578B2 (en) | System and method for producing transferable, modular web pages | |
| CN112506943B (zh) | 一种异构数据服务提供方法、装置、设备和介质 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |