一种导出设计版源码的方法和系统与流程

1.本发明涉及应用设计开发领域，具体涉及一种导出设计版源码的方法和系统。


背景技术：

2.现有的应用设计系统或平台，所有的设计都在平台上统一完成，所有的功能需要平台提供支持，局限了用户的需求，让用户无法满足自己的个性化需求；支持源码导出进行二次开发功能，但是二次开发后的应用无法再导入到原平台进行维护设计，导致后续新增的需求无法再进行可视化开发，并且开发人员还需要理解平台生成的代码逻辑。


技术实现要素：

3.有鉴于此，本发明的目的在于提供一种导出设计版源码的方法和系统，旨在解决上述问题。
4.为实现上述目的，本发明采用如下技术方案：一种导出设计版源码的系统，所述系统为应用设计系统，所述应用设计系统的页面划分为视图层、逻辑处理层以及逻辑映射层；所述应用设计系统拖拽控件对视图层的配置项进行修改；在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用;导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
5.进一步的，所述视图层包括html和css；所述逻辑处理层包括js脚本；所述逻辑映射层将视图层的dom元素以及视图层的生命周期一一映射到逻辑层指定的全局变量以及钩子函数下。
6.进一步的，所述视图层中创建html元素界面布局，同时将css信息通过定义变量方式，将变量绑定到对应组件的根节点上。
7.进一步的，所述逻辑处理层js脚本逻辑根据应用设计系统内配置的调用方法与组件的uuid属性值，以及固定的生命周期函数映射关系进行生成；所述js脚本包括所有视图层组件对象，通过调用组件对象的方法或者修改组件对象的属性实现逻辑层数据与视图层进行关联。
8.进一步的，在导出源码时，会判断数据库中isfirst字段是否为true，若为false则为第一次导出，若为true，则是第二次导出;若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码。
9.进一步的，在视图层中，对每个dom元素以组件化渲染，每个组件赋值一个唯一的变量，然后通过逻辑映射层将这些变量构造成参数下发给逻辑层的load的方法。
10.进一步的，若需要二次导出源码，则将二次导出的代码直接暴力覆盖二次开发后的工程。
11.一种源码导出方法，包括以下步骤：
开发人员通过应用设计系统拖拽控件对视图层的配置项进行修改，创建或编辑应用，并生成源码；在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用；导出源码时，判断是否为第一次导出，若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码；导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
12.本发明与现有技术相比具有以下有益效果：1、本发明系统支持源码导出功能，让用户可以直接在源码上进行二次开发与维护，让后期的应用脱离平台后仍然能够进行人工维护，满足用户的个性化需求；2、本发明支持应用二次开发后还能再平台继续对原有应用进行设计，让应用的二次开发和平台设计可以一起共同维护。
附图说明
13.图1是本发明源码导出方法示意图。
具体实施方式
14.下面结合附图及实施例对本发明做进一步说明。
15.请参照图1，本发明提供一种导出设计版源码的应用设计系统，所述应用设计系统的页面划分为视图层、逻辑处理层以及逻辑映射层；应用设计系统拖拽控件对视图层的配置项进行修改；在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用;导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
16.在本实施例中，不同于现有传统单页代码是将js业务逻辑代码都集中在vue文件里头，本发明将页面布局，组件样式设置，组件属性配置等视觉展示上的内容归为视图层，将对组件触发事件以及组件与组件之间，组件与数据之间交互作为逻辑层。平台通过文件路径及文件名对视图层进行一对一绑定。 通过平台视图层和逻辑层分离，让js代码和vue文件进行分割，让业务逻辑代码单独在js文件里头，同时平台还做了判空操作，当逻辑层中的业务代码没有实现，会停止调用，保证其他业务正常执行。
17.在本实施例中，视图层包括html和css；逻辑处理层包括js脚本；所述逻辑映射层将视图层的dom元素以及视图层的生命周期一一映射到逻辑层指定的全局变量以及钩子函数下。
18.根据平台的配置，在视图层中创建html元素界面布局，同时将css信息通过定义变量方式，将变量绑定到对应组件的根节点上。
19.在视图层中，对每个dom元素以组件化渲染，每个组件会赋值一个唯一的变量，然后通过逻辑映射层将这些变量构造成参数下发给逻辑层的load的方法。那么在逻辑层load的方法内部就能拿到视图层的dom元素。同理会在视图层中生命钩子函数分别回调逻辑层的生命周期钩子函数。
20.逻辑处理层js脚本逻辑根据应用设计系统内配置的调用方法与组件的uuid属性值，以及固定的生命周期函数映射关系进行生成；所述js脚本包括所有视图层组件对象，通过调用组件对象的方法或者修改组件对象的属性实现逻辑层数据与视图层进行关联。
21.在本实施例中，在导出源码时，会判断数据库中isfirst字段是否为true，若为false则为第一次导出，若为true，则是第二次导出;若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码。因为系统只是修改视图层和逻辑映射层的内容，视图层通过调用逻辑映射层的接口来调用逻辑层代码，若逻辑层未实现该接口，则视图层相当于不调用逻辑层接口，故只需生成这两层代码即可。
22.优选地，在本实施例中，若需要二次导出源码，则将二次导出的代码直接暴力覆盖二次开发后的工程。
23.优先的，在本实施例中，还提供一种源码导出方法，包括以下步骤：开发人员通过应用设计系统拖拽控件对视图层的配置项进行修改，创建或编辑应用，并生成源码；在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用；导出源码时，判断是否为第一次导出，若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码；导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。
24.以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属本发明的涵盖范围。


技术特征：
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任一所述的一种导出设计版源码的系统的源码导出方法，其特征在于，包括以下步骤：开发人员通过应用设计系统拖拽控件对视图层的配置项进行修改，创建或编辑应用，并生成源码；在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用；、导出源码时，判断是否为第一次导出，若是第一次导出源码，生成逻辑层代码，若是第二次导出源码，则只生成对应的视图层和逻辑映射层代码；导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。

技术总结
本发明涉及一种导出设计版源码的系统，所述系统为应用设计系统，所述应用设计系统的页面划分为视图层、逻辑处理层以及逻辑映射层；所述应用设计系统拖拽控件对视图层的配置项进行修改；在源码生成时，根据应用设计系统修改的配置项重新生成视图层，并生成视图层与逻辑映射层的生命周期钩子函数调用;导出源码后，开发人员在逻辑层代码进行编辑,进行二次开发。本发明支持应用二次开发后还能再平台继续对原有应用进行设计，实现软件开发的个性需求。求。求。


技术研发人员：谢云光 戴文艳 杨斌 黄彦予 侯建洪 叶威鑫 刘骏
受保护的技术使用者：长威信息科技发展股份有限公司
技术研发日：2023.06.07
技术公布日：2023/7/12