本发明涉及一种电数字数据处理，尤其涉及软件工程设计的，具体为一种基于vue框架的低代码平台的界面定制化方法。
背景技术：
1、随着数字化转型和信息化的普及，低代码平台因其能够显著降低企业成本、提高研发产能而备受青睐，低代码平台通过可视化界面和拖拉低代码组件的方式，使得非技术人员也能快速生成应用程序页面，极大地扩展了开发者的范围，降低了技术门槛，然而，随着业务场景的不断深入和复杂化，传统的低代码平台配置方法逐渐显现出局限性，难以满足所有定制需求。
2、vue框架作为一种流行的前端框架，以其组件化、响应式数据绑定等特点，为前端应用开发提供了极大的便利。将vue框架应用于低代码平台，可以进一步提升平台的灵活性和开发效率。通过结合vue的组件化和动态加载机制，可以实现低代码平台的界面定制化，满足复杂业务场景下的个性化需求。
3、当前低代码平台面临以下缺陷：1、尽管低代码平台通过提供预设的功能模板和配置选项简化了页面组件的配置过程，但其在面对超出预设范围的功能需求时，缺乏足够的灵活性以支持定制，这种局限性不仅降低了平台的易用性，还导致系统因过度依赖预设模板而变得臃肿；2、为降低二次开发成本，低代码平台允许用户导入并复用资源文件。然而，这一机制缺乏有效的管理，使得无限制的资源复用导致平台代码库不断膨胀，进而影响了系统的首次加载性能。此外，并非所有组件都适用于复用，不同业务场景对组件的需求也各不相同，当前机制未能充分考虑这一点；3、部分低代码平台虽然实现了组件的热更新功能，允许服务端动态更新组件代码以实时预览效果，但这种更新仍局限于组件级别，未能解决页面级别自定义资源的动态加载问题。这限制了用户在复杂业务场景下对页面进行快速定制和预览的能力。
4、因此，有必要对现有技术中的低代码平台的界面定制化方法进行改进，以解决上述问题。
技术实现思路
1、本发明克服了现有技术的不足，提供一种基于vue框架的低代码平台的界面定制化方法，旨在解决现有技术中资源复用机制的不完善以及热更新功能的局限性的问题。
2、为达到上述目的，本发明采用的技术方案为：一种基于vue框架的低代码平台的界面定制化方法，包括：
3、s1、创建界面资源表、附件资源表和ai辅助决策表，其中界面资源表用于存储界面定制化的元数据信息，附件资源表用于存储定制化界面相关的文件资源；
4、s2、将vue框架开发的界面打包为单个js文件，生成包含必要描述信息的json文件，将js文件和json文件压缩，形成打包文件；
5、s3、接收打包文件并解析，将json文件中的描述信息插入界面资源表中，同时将js文件存储于附件资源表中，发布低代码平台的界面，更新发布状态；
6、s4、当低代码平台的界面被发布后，响应请求，发送html和js文件给用户端，根据界面资源表构建自定义资源信息，并插入到预设的js配置文件中，所述请求在低代码平台被访问时触发，所述请求从用户端发往服务器端；
7、s5、当用户端接收响应后，服务器端获取相应js文件，结合ai辅助决策表和当前环境，执行加载方案；
8、s6、服务器端将加载方案中的页面实例传输给用户端，所述页面实例缓存于用户端内存。
9、本发明一个较佳实施例中，步骤s1中，界面资源表和附件资源表均在数据库中创建；附件资源表属于界面资源表的关联子表；
10、元数据信息包括：唯一标识应用程序、vue路由名称、vue路由路径和路由元信息；文件资源包括：附件资源、版本号、更新说明和是否发布。
11、本发明一个较佳实施例中，步骤s2中，通过vue-cli工具将界面打包成单js界面文件；描述信息包含界面的元数据信息；将js文件与json文件一起压缩为zip格式的包。
12、本发明一个较佳实施例中，步骤s2中，通过微前端架构设计界面的组件，组件的生命周期包括：加载、激活、更新、交互和卸载。
13、本发明一个较佳实施例中，步骤s3中，在将json文件中的描述信息插入界面资源表，且将js文件存储于附件资源表时，自动生成初始版本号，自动生成的初始版号首次为0.0.1，有更新自动+1，发布状态初始状态为未发布。
14、本发明一个较佳实施例中，步骤s3中，当需要发布低代码平台的界面时，通过服务器的管理界面点击发布，更新发布状态为已发布；对组件特性进行评估，判断是否适合采用wasm进行性能优化，需要wasm进行性能优化的组件特性包含：有密集型计算任务、多个相似功能的组件频繁加载和采用c/c++、rust语言编写。
15、本发明一个较佳实施例中，步骤s5中，微前端架构的组件的生命周期和ai辅助决策相结合的步骤包括：
16、加载阶段：从服务器请求必要的脚本和资源，对组件的代码和资源进行加载解析，当ai算法建议延迟加载，则组件暂时不被加载；
17、激活阶段：组件被插入到dom树中，成为页面的一部分，准备与用户进行交互，触发准备动作；当组件被激活时，ai算法检查当前上下文变化，并调整组件加载策略；
18、更新阶段：当组件的状态发生变化时，组件重新渲染，比较组件新旧状态，只更新必要的部分，ai算法持续监测用户行为，动态调整组件加载顺序；
19、交互阶段：组件与用户进行交互，响应用户输入或外部事件，ai算法根据用户操作预加载相关组件；
20、卸载阶段：当用户离开当前路由或关闭组件时，组件被移出dom树，释放所占资源；ai算法记录用户行为，为加载决策提供数据支持。
21、本发明一个较佳实施例中，步骤s6中，当组件被wasm优化，服务端将获取的js文件转化为wasm模块发送给用户端。
22、本发明一个较佳实施例中，步骤s4中，用户端浏览器接收到来自服务端的响应后，执行js文件中的代码，获取window.customroutes数组，并解析为路由配置数据；所述window.customroutes数组包含了自定义组件的路由配置信息，包含：vue路由名称、vue路由路径、路由元信息以及组件。
23、本发明解决了背景技术中存在的缺陷，本发明具备以下有益效果：
24、（1）本发明提出了一种基于vue框架的低代码平台界面定制化方法，通过创建界面资源表、附件资源表及ai辅助决策表，实现界面元数据和文件资源的高效管理；利用vue-cli编译打包界面代码，结合微前端架构和ai辅助决策优化组件加载，支持wasm性能优化，提高了界面定制化的灵活性、加载速度和用户体验。
25、（2）本发明微前端架构中组件生命周期各阶段与ai辅助决策的结合。当用户端接收响应后，服务器端获取相应js文件，并结合ai辅助决策表和当前环境执行加载方案。通过ai算法辅助决策，实现组件的智能加载和管理，通过ai算法的辅助决策，可以根据用户行为和上下文信息动态调整组件的加载策略，提高系统的响应速度和用户体验，与现有技术相比，进一步提升了系统的响应速度和资源利用效率。
26、（3）本发明采用了微前端架构设计界面组件，并规定了组件的生命周期管理。通过将vue框架开发的界面打包为单个js文件，并与包含必要描述信息的json文件一起压缩为zip格式的包，实现了组件级别的独立部署与协同工作，实现了功能模板与配置选项的自由组合，与现有技术相比，进一步达到了组件间的解耦合，在更新界面时，秩序更新必要组件即可，提升了开发效率和系统的可维护性。
27、（4）本发明通过将页面实例传输给用户端，并将页面实例缓存于用户端内存，实现了页面实例的高效加载和展示，当组件被 wasm 优化，服务端将 js 文件转化为 wasm 模块发送给用户端，提高执行效率，页面实例缓存于用户端内存，减少了重复加载，进一步提高了响应速度，提高资源复用效率。
1.一种基于vue框架的低代码平台的界面定制化方法，其特征在于，包括步骤：
2.根据权利要求1所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s1中，界面资源表和附件资源表均在数据库中创建；附件资源表属于界面资源表的关联子表；
3.根据权利要求1所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s2中，通过vue-cli工具将界面打包成单js界面文件；描述信息包含界面的元数据信息；将js文件与json文件一起压缩为zip格式的包。
4.根据权利要求3所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s2中，通过微前端架构设计界面的组件，组件的生命周期包括：加载、激活、更新、交互和卸载。
5.根据权利要求1所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s3中，在将json文件中的描述信息插入界面资源表，且将js文件存储于附件资源表时，自动生成初始版本号，自动生成的初始版号首次为0.0.1，有更新自动+1，发布状态初始状态为未发布。
6.根据权利要求1所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s3中，当需要发布低代码平台的界面时，通过服务器的管理界面点击发布，更新发布状态为已发布；对组件特性进行评估，判断是否适合采用wasm进行性能优化，需要wasm进行性能优化的组件特性包含：有密集型计算任务、多个相似功能的组件频繁加载和采用c/c++、rust语言编写。
7.根据权利要求4所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s5中，微前端架构的组件的生命周期和ai辅助决策相结合的步骤包括：
8.根据权利要求6所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s6中，当组件被wasm优化，服务端将获取的js文件转化为wasm模块发送给用户端。
9.根据权利要求1所述的一种基于vue框架的低代码平台的界面定制化方法，其特征在于：步骤s4中，用户端浏览器接收到来自服务端的响应后，执行js文件中的代码，获取window.customroutes数组，并解析为路由配置数据；所述window.customroutes数组包含了自定义组件的路由配置信息，包含：vue路由名称、vue路由路径、路由元信息以及组件。
