一种应用软件项目开发平台及文件打包方法与流程

1.本发明涉及应用软件开发领域，尤其涉及一种应用软件项目开发平台及文件打包方法。


背景技术：

2.随着物联平台等服务快速发展以及各产品的供应与应用软件关联，当有新产品或者产品需要基于物联平台服务搭建快应用软件时，各种微定制化的应用软件关联开发将大大浪费开发成本并且拖延了产品的发布速度，同时以往编辑好的线上应用软件都要基于编辑平台才能运行，无法输出成让用户可使用及复用的软件包，即时可输出也充斥着各种局限性。


技术实现要素：

3.本发明涉及应用软件开发领域，并提供一种应用软件项目开发平台及文件打包方法，所述开发平台通过在编辑器的画布中拖拽ui组件进行布局的方式快速生产用户界面，以达到快速开发各种微定制化的应用软件效果。
4.为达到上述目的，本发明采取的技术方案如下：
5.一种应用软件项目开发平台，包括ui框架、编辑器、事件系统和打包模块；所述编辑器中设有组件列表、画布和拖拽模块；所述ui框架以组件形式集成在所述组件列表中；所述拖拽模块用于拖拽所述组件列表的组件到所述画布中以生成用户界面，且被拖拽组件的属性数据进入数据源数组中；所述事件系统通过封装的关联方法及网络请求逻辑将组件与事件或请求模块进行关联绑定；所述打包模块通过后台算法将编辑完成的项目文件加入静态资源后打包并压缩成资源包供用户下载。
6.进一步的，所述ui框架选用自研框架。
7.进一步的，所述画布具有多场景功能，每一所述场景具有唯一的id和对应的存储场景源数据的数据源数组。
8.进一步的，所述画布具有监听数据源数据变化，重新读取、遍历数据源数据并将当前选中组件的数据进行赋值渲染功能。
9.进一步的，所述拖拽模块具有生成组件外部容器框的功能；所述容器框具有接收组件信息数据和鼠标位置数据，并跟随鼠标移动的功能。
10.进一步的，所述所述编辑器中还设有工具栏和用于设置组件属性数据的属性设置模块。
11.进一步的，所述属性设置模块包括输入栏、功能开关属性设置面板。
12.进一步的，所述工具栏上设有回退、重做、层级调整、预览和提交功能。
13.进一步的，所述应用软件项目开发平台还包括服务器组件自更新模块，以用于在ui框架有新控件时提交ui框架内容及对应的配套事件系统文件到gitlab，并通知到线上服务器更新资源。
14.一种应用软件的项目开发文件打包方法，应用于所述的应用软件项目开发平台，包括以下步骤：
15.s1:用户端完成编辑后，发送编辑数据到线上服务器；
16.s2:线上服务器读取发来的前台编辑数据，通过后台算法调用并写入静态资源，生成项目文件；
17.s3:child_process.exec执行webpack，将项目文件自动化打包并利用jszip进行压缩；
18.s4:通知用户打包完成并返回压缩包资源下载链接。
19.本发明提供一种应用软件项目开发平台及文件打包方法，所述项目开发平台包括ui框架、编辑器、事件系统和打包模块；所述编辑器中设有组件列表、画布和拖拽模块；所述ui框架以组件形式集成在所述组件列表中并通过拖拽方式在画布中快速生成用户界面；所述事件系统通过封装的关联方法及网络请求逻辑将组件与事件或请求模块进行关联绑定，加快了各种微定制化的应用软件的开发速度，降低开发成本。同时所述打包模块通过文件打包方法将项目开发文件进行打包供用户下载，使得开发的应用软件可以脱离开发平台运行，大大方便了普及使用。开发过程中使用自研的ui框架,可以好地契合物联平台动行，助力于产品发布速度。
附图说明
20.图1为一种应用软件项目开发平台结构示意图；
21.图2为选取组件操作时组件数据流向示意图；
22.图3为列表请求和可视化请求属性设置事项的组成结构示意图；
23.图4为网络请求流程示意图；
24.图5为项目开发文件打包流程示意图；
25.图6为服务器组件自更新流程示意图。
具体实施方式
26.下面结合附图对本公开实施例进行详细描述。
27.以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用软件，本说明书中的各项细节也可以基于不同观点与应用软件，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
28.实施例一
29.如图1所示为一种应用软件项目开发平台，所述平台包括ui框架、编辑器、事件系统、打包模块以及服务器组件自更新模块。所述编辑器中设有组件列表、画布、拖拽模块、属性设置模块和工具栏；所述ui框架集成在所述编辑器的组件列表中，以便于在所述拖拽模块支持下拖拽到所述画布中生成用户界面；所述事件系统通过封装的关联方法及网络请求
逻辑将组件与事件或请求模块进行绑定；所述打包模块通过后台算法将编辑完成的项目文件加入静态资源后打包并压缩成资源包供用户下载。
30.在物联平台的内部，以所述ui框架为原型来作为编辑器组件，具有以快速拖拽方式进行导出使用来生成用户界面的功能，供无基础的用户进行非定制化应用软件开发，使得用户可以快速设计应用软件的图形用户界面。为了契合物联平台以及应用软件的开发，所述ui框架选用自研框架并对外提供给用户使用，用户使用npm(程序包管理器)可以直接使用以引入开发项目进行快速开发。
31.所述编辑器中设有一套可供用户操作的拖拽画布界面，具有多样化工具栏，并具有对当前用户操作进行回退、重做、预览、布局辅助线以及多页面开发等辅助功能，以方便用户快速完成控件定位以及布局锁定。所述编辑器是以vue前端框架为基础开发出来的，其中设有组件列表、画布、拖拽模块、属性设置模块和工具栏。
32.具体实施中，如图2所示，所述组件列表在拖拽画布界面的左侧，并分别排列设置有单独的各功能组件图标。所述组件列表在用户点击后某一个组件后，根据当前点击的组件，将提前定义好的该组件数据提取出组件库，并向数据源数组中添加该组件数据。
33.具体实施中，所述画布在用户点击组件后，画布监听到数据源数组中数据的变化，然后重新读取数据源数组中的数据，遍历数据后将当前选中的组件数据通过动态组件进行赋值渲染并反馈效果给用户。所述组件数据包括组件类型(即用来区分是哪个组件)、组件的宽和高大小、位置和颜色等基准数据。所述组件则为引入的ui架构库的单个组件。所述画布具有多场景功能，也即是具有多个画布场景；每个画布场景都有单独的场景id和对应的数据源数组，以存储对应的各场景源数据。具体实施中，默认第一个场景页面为主页面。
34.具体实施中，所述拖拽模块在组件渲染时生成一个相应的可拖拽的外部容器框和单独的容器框id，并利用js(javascript)鼠标事件，在点击时获取组件的信息并赋值到相应的容器框。在鼠标移动时利用鼠标坐标事件获取鼠标的位置数据，并动态赋值到当前点击组件相对应的容器框，使得容器框跟随鼠标移动。
35.具体实施中，所述鼠标坐标事件的触发只在当前的画布场景范围内有效，并对当前容器框坐标值的上下左右四个坐标点进行画布边缘计算，当超出或者贴近时自动贴合画布边缘。贴合时组件的上下左右四个坐标中，贴合的坐标采用对应的画布上下左右四个坐标。
36.具体实施中，所述容器框id均为不可重复的。
37.具体实施中，画布的上下左右四个坐标分别为0、画布高、0和画布宽。
38.具体实施中，所述属性设置模块包括根据每个组件特性相应设置的输入栏、功能开关等属性设置面板，通过这些设置面板对数据源数组中的组件属性数据进行设置修改。当用户点击当前画布场景中的某一个组件时，会唤起该组件的属性设置面板，在设置面板中输入相应的数据即可以对当前添加在数据源数组中的该组件属性数据进行设置修改，设置完毕后画布监听到当前场景数据源数组中的数据变化时自动更新视图。
39.具体实施中，所述工具栏上设有操作回退及重做、层级调整、预览和提交等功能按钮，每一个功能按钮包含一个对应的功能单元。
40.操作回退功能单元在根目录创建log数组，当用户完成一项操作时将当前数据源信息保存到log数组中。当用户点击操作回退时将当前log数组最后一项数据抹除，然后取
抹除后log数组的最后一项值覆盖当前画布场景的数据源信息，画布监听数据源数组中的数据变化时重新渲染。
41.重做功能单元用于抹除当前画布场景的所有数据，并且将抹除前的数据源数据保存到log数组以方便回退，抹除后当前画布清空。
42.层级调整功能单元用于选中当前组件后根据该组件的id改变其zindex值，以改变当前组件的层级。所述zindex值的变化范围最小值为1、最大值为数据源中的组件数据总长度(例如，有5个组件则组件数据总长度为5)。当前组件创建顺序为第四个时则该组件的zindex值为4，在源数据中的位置排列也为4；当层级需要上移一层时则改变该组件的zindex值为5，且与原下标为5的组件数据交换在数据源中的位置，原第五个组件的zindex值改变为4，下移或其他移动同理。
43.预览功能单元用于在用户点击预览按钮时弹出弹框，所述弹框页面读取当前画布场景的数据源并通过vue动态组件进行遍历渲染，同时写入相关属性数据，逻辑同理画布部分。
44.提交功能单元用于在用户点击提交时，将当前数据源数据通过json转为字符串后，直接通过后台接口请求进行传输。
45.具体实施中，所述事件系统中封装有大量关联方法及网络请求逻辑，用于在用户选取某一组件后，通过所述关联方法和网络请求逻辑可将该组件绑定相关事件及请求模块以进行赋能，使其拥有标准的符合应用模块规则的互动操作。所述关联方法及网络请求逻辑根据ui框架内的组件类型进行分类管理，其中事件系统分类中也包含多模块联合事件等方法的封装，以达到可以快速应用该基础功能效果。
46.所述事件系统中的关联方法根据组件分类管理，例如按钮click点击事件中，以组件的id为关联项，通过关联方法关联点击的组件及点击后要触发的一个或者多个组件，设置被关联组件触发后的效果，例：控制被关联组件的显示隐藏、播放暂停或切换等
47.所述网络请求逻辑封装包括http/https请求模块封装。所述http/https请求模块中包括如图3所示的列表请求以及可视化请求两种模式，以列表请求模式为例：提供url输入框用于输入请求数据，请求类型下拉方式包括get、post和delete等，参数设置模块对每一栏输入框提供对应的key及value参数项，返回的数据中对层级结构用/隔开，返回数据中要渲染的数据key值及key调用的表头文字。如图4所示，列表请求的各项属性设置完成后，列表控件将自动调用接口根据用户设置的属性自动渲染，但当内部请求逻辑执行时出现网络异常时，会出现弹窗及提示语告知用户接口信息有误请重新输入。
48.在所述事件系统中还可以设置多场景跳转模式，其中包括底部跳转和按钮等其他模块触发跳转两种模式；设置底部跳转模式时，属性栏可设置对应的采用跳转属性的场景id；按钮等其他模块触发跳转时，同理绑定对应跳转场景的id。
49.所述打包模块用于在用户操作界面完成布局及事件等强关联后，对开发数据进行打包操作。将上述的开发数据提交后台，后台在基础vue模板上利用后台算法逻辑在上述的开发数据中写入相关静态资源，然后child_process.exec执行webpack将加入资源后的开发数据自动化打包，再利用jszip压缩文件并返回资源下载链接，前台收到资源下载链接后提示打包完成并显示下载按钮供用户下载。
50.具体实施中，所述基础vue模板创建:创建一个主vue页面及用做渲染的组件页面，
创建时主要考虑的因素有数据读取、多场景、请求封装和页面渲染。
51.所述数据读取是指后台接收到数据后将数据写入到vue模板的用于数据读取的js文件中以便调用。所述多场景主要涉及页面跳转，主页面读取当前数据源解析当前数组是否存在多场景；若无多场景时则将当前数据源数组转成对象并以唯一场景id为key、当前项数据为value以便切换跳转动作时调用；若为多场景时，以当前第一个为主页面，将场景数据传入组件页面组件，页面接收到后进行渲染，跳转时通知主vue页面根据跳转id切换到当前需要显示的数据源直接进行渲染。所述请求封装是指在当前模块中编写共用方法以对axios进行封装，内部根据传入地址的请求类型请求发送及返回数据(返回promise对象，以便接收调用)。所述页面渲染是指接收到外部数据后，遍历数据获取当前遍历项组件类型，调用对应组件名，在vue动态组件中加载并同时带入组件属性数据进行渲染。
52.如图5所示，以node后台为例，所述打包则是直接使用webpack进行打包处理，包括以下步骤：
53.s1:用户端完成编辑后，发送编辑数据到线上服务器；
54.s2:线上服务器读取发来的前台编辑数据，通过后台算法调用并写入静态资源，生成项目文件；
55.s3:child_process.exec执行webpack，将项目文件自动化打包并利用jszip进行压缩；
56.s4:通知用户打包完成并返回压缩包资源下载链接。
57.如图6所示，所述服务器组件自更新模块是指当ui框架有开发和添加新控件时，前端同步调整后提交ui框架内容及对应的配套事件系统文件到gitlab，然后git将通知到线上服务器，然后线上服务器将自动拉取更新资源以便后续打包。
58.整个应用软件开发平台整体上为前后端分离，提高整体可维护性和更新带来影响。
59.本发明提供一种应用软件项目开发平台及文件打包方法，所述项目开发平台包括ui框架、编辑器、事件系统和打包模块；所述编辑器中设有组件列表、画布和拖拽模块。所述ui框架以组件形式集成在所述组件列表中并通过拖拽方式在画布中快速生成用户界面，直接省去页面开发等繁琐环节，让一个无编程基础的用户也能快速在线搭建出一套应用软件。所述事件系统通过封装的关联方法及网络请求逻辑将组件与事件或请求模块进行关联绑定，加快了各种微定制化的应用软件的开发速度，降低开发成本。同时所述打包模块通过文件打包方法将项目开发文件进行打包成软件包供用户下载，使得开发的应用软件可以脱离开发平台运行，可方便用户快速部署及复用，并不是相对往常平台生成在线应用软件，减少其局限性。开发过程中使用自研的ui框架,可以好地契合物联平台动行，助力于产品发布速度。
60.在本发明中，除非另有明确的规定和限定，第一特征在第二特征“上”可以是第一和第二特征直接接触，或第一和第二特征通过中间媒介间接接触。“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。
61.在本发明中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或成一体；可以是机械连接，也可以是电连接或彼此可通讯；可以是直接相连，也可以通过中间媒介间接相连，可以
是两个元件内部的连通或两个元件的相互作用关系，除非另有明确的限定。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
62.以上仅为说明本发明的实施方式，并不用于限制本发明，对于本领域的技术人员来说，凡在本发明的精神和原则之内，不经过创造性劳动所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。