技术领域Technical Field
本发明涉及软件开发技术领域，特别涉及可视化拼装组件与实时界面渲染引擎交互领域。The present invention relates to the technical field of software development, and in particular to the field of interaction between a visual assembly component and a real-time interface rendering engine.
背景技术Background Art
在软件开发的传统模式中，项目开发遵循从需求分析、设计、编码、测试直至部署的严格的线性流程。这种生命周期管理虽然确保了开发过程的系统性和严谨性，但也导致了开发周期的延长、成本的增加。同时，需要依赖大量专业技术人员的参与，要求开发者具备深厚的编程技能，这限制了业务方和设计师的参与度，因为他们缺乏足够的编程背景来直接实现自己的想法。此外，现有技术在实现前端界面与后端业务逻辑同步更新方面存在不足，导致用户界面的更新常常滞后于后端逻辑的变更，这不仅影响了用户体验，也增加了前后端开发者之间沟通和协作的复杂性。随着市场环境的快速变化，用户需求日益多样化和个性化，产品需要快速迭代以适应市场，但传统开发流程的缓慢节奏常常无法跟上市场的步伐，导致产品错失推广商机。在资源利用方面，传统开发模式存在着显著的资源浪费，大量的时间和人力被投入到重复的编码和调试工作中，而这些工作本可以通过更高效的工具和方法来减少。最后，随着技术的快速发展，现有系统面临着可维护性和扩展性的问题，许多系统在前期设计过程未考虑到未来需求变更的可能，导致在产品迭代过程中难以适应新的要求。综上，尽管现有技术在软件开发领域取得了一定的成就，但仍面临着多方面的挑战和限制，急需一种创新的方法来打破瓶颈，提升效率，降低门槛，并满足快速变化的市场需求。In the traditional model of software development, project development follows a strict linear process from requirements analysis, design, coding, testing to deployment. Although this lifecycle management ensures the systematicness and rigor of the development process, it also leads to the extension of the development cycle and the increase of costs. At the same time, it needs to rely on the participation of a large number of professional and technical personnel, requiring developers to have deep programming skills, which limits the participation of business parties and designers because they lack sufficient programming background to directly realize their ideas. In addition, the existing technology has deficiencies in achieving synchronous updates of the front-end interface and the back-end business logic, resulting in the update of the user interface often lagging behind the change of the back-end logic, which not only affects the user experience, but also increases the complexity of communication and collaboration between front-end and back-end developers. With the rapid changes in the market environment, user needs are becoming increasingly diversified and personalized, and products need to be iterated quickly to adapt to the market, but the slow pace of the traditional development process often cannot keep up with the pace of the market, resulting in the product missing promotion opportunities. In terms of resource utilization, there is a significant waste of resources in the traditional development model, and a lot of time and manpower are invested in repetitive coding and debugging work, which could have been reduced through more efficient tools and methods. Finally, with the rapid development of technology, existing systems are facing problems of maintainability and scalability. Many systems do not consider the possibility of future demand changes in the early design process, which makes it difficult to adapt to new requirements during product iteration. In summary, although existing technologies have made certain achievements in the field of software development, they still face many challenges and limitations. An innovative method is urgently needed to break bottlenecks, improve efficiency, lower barriers, and meet rapidly changing market needs.
发明内容Summary of the invention
本发明提出了一种可视化业务拼装组件与实时界面渲染引擎交互方法及系统，用以解决传统技术使用门槛高、开发周期长、操作流程繁琐以及资源浪费等问题，所采取的技术方案如下：The present invention proposes a method and system for interaction between a visual business assembly component and a real-time interface rendering engine to solve the problems of high threshold for use of traditional technologies, long development cycle, cumbersome operation process and waste of resources. The technical solutions adopted are as follows:
可视化业务拼装组件与实时界面渲染引擎交互方法，所述方法包括：A method for interacting a visual business assembly component with a real-time interface rendering engine, the method comprising:
S1：根据组件与逻辑模块的不同种类，建立对应的组件库与逻辑模块库，实现组件与逻辑模块的分类化储存；S1: According to the different types of components and logic modules, corresponding component libraries and logic module libraries are established to realize classified storage of components and logic modules;
S2：为组件库与逻辑模块库设置属性编辑器，并与数据模型绑定，并通过预览窗口实时反馈给用户；S2: Set up property editors for component libraries and logic module libraries, bind them to data models, and provide real-time feedback to users through preview windows;
S3：通过交互模型，使组件与逻辑模块通过拖拽移动到设计区域，实现编辑后的组件与编辑后的逻辑模块实时交互；S3: Through the interactive model, components and logic modules are moved to the design area by dragging, so that the edited components and edited logic modules can interact in real time;
S4：添加优化装置，优化组件与逻辑模块交互过程中的流畅程度，实现组件与设计区域、逻辑模块与设计区域以及组件与逻辑模块之间交互过程流畅进行。S4: Add optimization devices to optimize the smoothness of the interaction between components and logic modules, so as to achieve smooth interaction between components and design areas, logic modules and design areas, and components and logic modules.
优选地，所述S1包括：Preferably, the S1 includes:
S11：根据组件的不同种类，将组件库分为图形组件库、交互组件库以及动画效果组件库；S11: According to different types of components, the component library is divided into a graphic component library, an interactive component library and an animation effect component library;
S12：根据逻辑模块的不同种类，将逻辑模块分为渲染控制模块、交互逻辑模块以及实时数据更新模块。S12: According to different types of logic modules, the logic modules are divided into a rendering control module, an interactive logic module, and a real-time data update module.
所述S2包括：The S2 includes:
S21：根据每一种组件库以及逻辑模块库设置对应的属性编辑器，并且通过表单收集用户输入；S21: setting a corresponding property editor according to each component library and logic module library, and collecting user input through a form;
S22：将属性编辑器的表单与组件与逻辑模块的数据模型进行绑定，并建立组件与逻辑模块的数据模型与预览窗口的实时连接，使属性编辑的同时，实时更新设计区域中对应组件的展示，并通过预览窗口展示给用户。S22: Bind the form of the property editor to the data model of the component and logic module, and establish a real-time connection between the data model of the component and logic module and the preview window, so that while the property is being edited, the display of the corresponding component in the design area is updated in real time and displayed to the user through the preview window.
优选地，所述组件和逻辑模块与设计区域的交互方式包括：Preferably, the interaction between the components and logic modules and the design area includes:
A：引入一个拖拽库，组件或逻辑模块应用所述拖拽库提供的拖拽源包装器，使组件或逻辑模块变成可拖拽的；A: Introduce a drag library, and apply the drag source wrapper provided by the drag library to the component or logic module to make the component or logic module draggable;
B：在设计区域设置放置区域包装器，并定义整个设计区域为放置区域；B: Set the placement area wrapper in the design area and define the entire design area as the placement area;
C：鼠标拖住组件或逻辑模块，所述组件或逻辑模块随着鼠标平移被拽至设计区域后，鼠标释放，所述组件或逻辑模块与设计区域完成交互。C: Drag a component or logic module with the mouse. After the component or logic module is dragged to the design area as the mouse is moved horizontally, the mouse is released, and the component or logic module completes the interaction with the design area.
优选地，所述S3包括：Preferably, S3 includes:
S31：创建组件的应用程序编程接口，定义组件需要触发的自定义事件后，通过应用程序编程接口将数据变化传输给逻辑模块；S31: Create an application programming interface for the component, define a custom event that the component needs to trigger, and transmit data changes to the logic module through the application programming interface;
S32：创建逻辑模块的应用程序编程接口，接收来自组件的数据，并且传输逻辑模块的返回结果和触发事件；S32: creating an application programming interface of the logic module, receiving data from the component, and transmitting the return results and triggering events of the logic module;
S33：在主界面中，将组件与逻辑模块组合到一起，形成完整的模块。S33: In the main interface, combine the components and logic modules together to form a complete module.
优选地，所述S4包括：Preferably, the S4 includes:
S41：建立单元测试模块，测试组件与逻辑模块，并确保组件与逻辑模块按照预期工作；S41: Establish unit test modules to test components and logic modules and ensure that components and logic modules work as expected;
S42：建立集成测试模块，测试组件与逻辑模块之间的交互，并确保组件与逻辑模块之间的交互流畅；S42: Establish an integration test module to test the interaction between components and logic modules, and ensure that the interaction between components and logic modules is smooth;
S43：建立端到端测试模块，模拟用户操作，测试整个系统的流程，并保证整个流程的流畅。S43: Establish an end-to-end testing module, simulate user operations, test the entire system process, and ensure the smoothness of the entire process.
可视化业务拼装组件与实时界面渲染引擎交互系统，所述系统包括：A visual business assembly component and a real-time interface rendering engine interaction system, the system comprising:
组件库与逻辑模块库：根据组件与逻辑模块的不同种类，建立对应的组件库与逻辑模块库，实现组件与逻辑模块的分类化储存；Component library and logic module library: According to the different types of components and logic modules, corresponding component libraries and logic module libraries are established to realize classified storage of components and logic modules;
区域设计模块：为组件库与逻辑模块库设置属性编辑器，并与数据模型绑定，并通过预览窗口实时反馈给用户；Area design module: Set up property editors for component libraries and logic module libraries, bind them to data models, and provide real-time feedback to users through preview windows;
交互装置：通过交互模型，使组件与逻辑模块通过拖拽移动到设计区域，实现编辑后的组件与编辑后的逻辑模块实时交互；Interactive device: through the interactive model, components and logic modules can be moved to the design area by dragging, so that the edited components and edited logic modules can interact in real time;
优化装置：添加优化装置，优化组件与逻辑模块交互过程中的流畅程度，实现组件与设计区域、逻辑模块与设计区域以及组件与逻辑模块之间交互过程流畅进行。Optimization device: Add optimization device to optimize the smoothness of the interaction between components and logic modules, so as to achieve smooth interaction between components and design areas, logic modules and design areas, and components and logic modules.
优选地，所述区域设计模块包括：Preferably, the area design module includes:
属性编辑器：根据每一种组件库以及逻辑模块库设置对应的属性编辑器，并且通过表单收集用户输入；Property editor: Set up corresponding property editors according to each component library and logic module library, and collect user input through forms;
实时同步装置：将属性编辑器的表单与组件与逻辑模块的数据模型进行绑定，并建立组件与逻辑模块的数据模型与预览窗口的实时连接，使属性编辑的同时，实时更新设计区域中对应组件的展示，并通过预览窗口展示给用户。Real-time synchronization device: binds the form of the property editor to the data model of the component and logic module, and establishes a real-time connection between the data model of the component and logic module and the preview window, so that while the properties are edited, the display of the corresponding component in the design area is updated in real time and displayed to the user through the preview window.
优选地，所述交互装置包括：Preferably, the interaction device comprises:
组件应用程序编程接口：创建组件的应用程序编程接口，定义组件需要触发的自定义事件后，通过应用程序编程接口将数据变化传输给逻辑模块；Component API: Create the component API, define the custom events that the component needs to trigger, and transmit data changes to the logic module through the API;
逻辑模块的应用程序编程接口：创建逻辑模块的应用程序编程接口，接收来自组件的数据，并且传输逻辑模块的返回结果和触发事件；Application programming interface of logic module: Create the application programming interface of logic module, receive data from components, and transmit the return results and trigger events of logic module;
集成装置：在主界面中，将组件与逻辑模块组合到一起，形成完整的模块。Integrated device: In the main interface, combine components and logic modules together to form a complete module.
优选地，所述优化装置包括：Preferably, the optimization device comprises:
单元测试模块：建立单元测试模块，测试组件与逻辑模块，并确保组件与逻辑模块按照预期工作；Unit test module: Establish unit test modules to test components and logic modules and ensure that components and logic modules work as expected;
集成测试模块:建立集成测试模块，测试组件与逻辑模块之间的交互，并确保组件与逻辑模块之间的交互流畅；Integration test module: Establish an integration test module to test the interaction between components and logic modules, and ensure smooth interaction between components and logic modules;
端到端测试模块:建立端到端测试模块，模拟用户操作，测试整个系统的流程，并保证整个流程的流畅；End-to-end testing module: Establish an end-to-end testing module to simulate user operations, test the entire system process, and ensure the smoothness of the entire process;
所述测试优化装置对可视化组件和逻辑模块与设计区域交互的流畅度进行测试，包括，The test optimization device tests the smoothness of the interaction between the visualization component and the logic module and the design area, including:
搭建与实际情况相似的测试环境，记录操作开始时间和响应完成时间；Build a test environment similar to the actual situation and record the operation start time and response completion time;
根据收集到的操作开始时间和响应完成时间，计算每个操作的响应时间，同时结合系统吞吐量和并发用户数，获取性能评估分数，其中所述性能评估分数公式可以通过如下公式获取：The response time of each operation is calculated based on the collected operation start time and response completion time. The performance evaluation score is obtained by combining the system throughput and the number of concurrent users. The performance evaluation score formula can be obtained by the following formula:
其中，P表示性能评估分数，表示单位时间内实际观察到的吞吐量的平均值， Mmax表示单位时间内系统承受的最大吞吐量，C表示实际观察到的并发用户数， Cmax表示系统能够稳定支持的最大并发用户数，表示单位时间内实际观察到的响应时间的平均值， Emin表示单位时间内可接收的最小响应时间， Emax表示单位时间内可接收的最大响应时间，n表示总共测试的单位时间段数，并且，所述吞吐量表示网络在单位时间内成功传输的数据量，所述并发用户数表示在同一时间段内，同时与系统进行交互操作的用户数量；Where P represents the performance evaluation score, represents the average throughput actually observed per unit time, Mmax represents the maximum throughput that the system can withstand per unit time, C represents the number of concurrent users actually observed, and Cmax represents the maximum number of concurrent users that the system can stably support. represents the average value of the response time actually observed in the unit time, Emin represents the minimum response time acceptable in the unit time, Emax represents the maximum response time acceptable in the unit time, n represents the total number of unit time periods tested, and the throughput represents the amount of data successfully transmitted by the network in the unit time, and the number of concurrent users represents the number of users who interact with the system at the same time period;
并且根据性能评估策略结合性能评估分数获取性能评估结果，其中，性能评价策略是：And the performance evaluation result is obtained according to the performance evaluation strategy combined with the performance evaluation score, wherein the performance evaluation strategy is:
当90＜P≤100时，表示系统性能非常优秀，吞吐量接近最大值，并发用户数高，且响应时间非常短，应继续保持现有系统，确保系统能够持续高效地运行；When 90＜P≤100, it means that the system performance is very good, the throughput is close to the maximum value, the number of concurrent users is high, and the response time is very short. The existing system should be maintained to ensure that the system can continue to run efficiently;
当50＜P≤90时，表示系统性能存在异常风险，向用户发出异常风险预警；When 50＜P≤90, it indicates that there is an abnormal risk in system performance, and an abnormal risk warning is issued to the user;
当P≤50时，表示系统性能较差，向用户发出性能较差预警。When P≤50, it indicates that the system performance is poor, and a poor performance warning is issued to the user.
本发明有益效果：本发明是以应对软件开发流程中的低效率和高技术门槛。它通过一个直观的可视化界面，使得业务逻辑的构建和界面设计变得简单易懂，从而极大地降低了技术门槛，让非技术背景的运营人员也能轻松参与到软件开发中。此外，本发明的实时界面渲染引擎能够确保用户界面的变更与业务逻辑的更新同步进行，解决了界面与逻辑不同步的问题。它还通过快速原型开发和迭代更新，迅速响应市场需求的变化，提高了软件开发的灵活性和适应性。通过优化开发流程，本发明减少了资源浪费，提供了实时反馈机制，加快了设计决策过程。同时，它通过共享的可视化组件和实时更新机制，加强了团队成员间的沟通和协作，提高了团队的工作效率。本发明的模块化设计和组件化架构，增强了系统的可维护性和扩展性，为未来的产品迭代和功能升级提供了坚实的基础。最重要的是，本发明通过降低技术门槛和提供快速迭代的环境，激发了团队的创新潜能，为软件行业的创新和发展开辟了新的道路。Beneficial effects of the present invention: The present invention is to deal with the low efficiency and high technical threshold in the software development process. It makes the construction of business logic and interface design simple and easy to understand through an intuitive visual interface, thereby greatly reducing the technical threshold and allowing operators with non-technical backgrounds to easily participate in software development. In addition, the real-time interface rendering engine of the present invention can ensure that the change of the user interface is synchronized with the update of the business logic, solving the problem of the interface and logic being out of sync. It also responds quickly to changes in market demand through rapid prototyping and iterative updates, thereby improving the flexibility and adaptability of software development. By optimizing the development process, the present invention reduces resource waste, provides a real-time feedback mechanism, and speeds up the design decision-making process. At the same time, it strengthens communication and collaboration among team members through shared visual components and real-time update mechanisms, thereby improving the work efficiency of the team. The modular design and componentized architecture of the present invention enhance the maintainability and scalability of the system, and provide a solid foundation for future product iterations and functional upgrades. Most importantly, the present invention stimulates the innovation potential of the team by lowering the technical threshold and providing a fast iteration environment, thus opening up a new path for innovation and development in the software industry.
通过本发明，我们能够实现以下几个方面的突破：Through this invention, we can achieve breakthroughs in the following aspects:
1.提升开发效率：通过可视化的操作界面，业务人员和设计师可以直接参与到产品的构建中，无需编写代码，大幅缩短开发周期。1. Improve development efficiency: Through a visual operation interface, business personnel and designers can directly participate in product construction without writing code, greatly shortening the development cycle.
2.降低技术门槛：简化的操作流程和直观的用户界面使得非技术背景的人员也能轻松上手，参与到软件开发中。2. Lower the technical threshold: The simplified operation process and intuitive user interface make it easy for people with non-technical backgrounds to get started and participate in software development.
3.实现界面与逻辑的同步更新：实时界面渲染引擎确保了业务逻辑的任何变更都能立即反映在用户界面上，消除了前后端开发不同步的问题。3. Realize synchronous update of interface and logic: The real-time interface rendering engine ensures that any changes in business logic can be immediately reflected in the user interface, eliminating the problem of asynchronous front-end and back-end development.
4.快速响应市场需求：本发明支持快速迭代，使得产品能够迅速适应市场变化和用户需求。4. Rapid response to market demand: The present invention supports rapid iteration, allowing the product to quickly adapt to market changes and user needs.
5.增强多平台兼容性：本发明支持跨平台的即时适配，简化了在不同设备和操作系统上的开发工作。5. Enhanced multi-platform compatibility: The present invention supports instant cross-platform adaptation, simplifying development work on different devices and operating systems.
6.优化资源分配：减少了传统编码和调试过程中的资源浪费，使得资源能够更高效地被利用。6. Optimize resource allocation: Reduce resource waste in traditional coding and debugging processes, allowing resources to be used more efficiently.
7.增强系统的可维护性和扩展性：组件化的设计使得系统更易于维护和扩展，适应未来产品迭代的需求。7. Enhance the maintainability and scalability of the system: The componentized design makes the system easier to maintain and expand, and adapt to the needs of future product iterations.
附图说明BRIEF DESCRIPTION OF THE DRAWINGS
图1为本发明可视化拼装组件与实时界面渲染引擎交互方法的流程图。FIG. 1 is a flow chart of a method for interaction between a visual assembly component and a real-time interface rendering engine according to the present invention.
具体实施方式DETAILED DESCRIPTION
以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。The preferred embodiments of the present invention are described below in conjunction with the accompanying drawings. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.
本发明的一个实施例，参考图1所示，可视化业务拼装组件与实时界面渲染引擎交互方法，所述方法包括：According to an embodiment of the present invention, as shown in FIG1 , a method for interacting a visual business assembly component with a real-time interface rendering engine includes:
S1：根据组件与逻辑模块的不同种类，建立对应的组件库与逻辑模块库，实现组件与逻辑模块的分类化储存；S1: According to the different types of components and logic modules, corresponding component libraries and logic module libraries are established to realize classified storage of components and logic modules;
S2：为组件库与逻辑模块库设置属性编辑器，并与数据模型绑定，并通过预览窗口实时反馈给用户；S2: Set up property editors for component libraries and logic module libraries, bind them to data models, and provide real-time feedback to users through preview windows;
S3：通过交互模型，使组件与逻辑模块通过拖拽移动到设计区域，实现编辑后的组件与编辑后的逻辑模块实时交互；S3: Through the interactive model, components and logic modules are moved to the design area by dragging, so that the edited components and edited logic modules can interact in real time;
S4：添加优化装置，优化组件与逻辑模块交互过程中的流畅程度，实现组件与设计区域、逻辑模块与设计区域以及组件与逻辑模块之间交互过程流畅进行。S4: Add optimization devices to optimize the smoothness of the interaction between components and logic modules, so as to achieve smooth interaction between components and design areas, logic modules and design areas, and components and logic modules.
上述技术方案的工作原理和效果为：可视化拼装组件允许用户通过编辑器进行搭建和编排，用户可以通过组件面板选择并修改组件属性。这些组件通常被设计为低代码开发的方式，即开发好的组件可以通过编辑器拖拽编排，以完成特定的业务功能。拼装完成的组件会携带其属性、样式、行为等数据。这些数据将被传递给实时界面渲染引擎，用于后续的渲染和交互处理。渲染引擎使用HTML解析器将HTML文档解析成DOM树，DOM树是浏览器理解和操作网页的基础。CSS解析器解析CSS样式，并将其转化为CSS对象，这些对象组装成CSSOM树。在DOM树和CSSOM树都构建完成后，浏览器会根据这两棵树构建出渲染树（RenderTree），它决定了哪些元素是可见的，以及它们的样式信息。渲染树构建完毕后，浏览器会计算所有元素的大小和绝对位置，确定它们在页面上的布局。页面布局完成后，浏览器会将渲染树中的每个节点转换为像素，并解码所有的媒体文件，最终生成可视化的图像结果。实时界面渲染引擎在渲染过程中会考虑组件的数据和属性，如颜色、大小、位置等。渲染引擎会根据组件的属性动态地调整渲染结果，以实现实时的可视化效果。用户与组件的交互（点击、拖动等）也会通过渲染引擎进行处理，并实时更新渲染结果。可视化拼装组件允许开发者通过拖拽、编排等方式快速搭建页面，无需编写大量的HTML、CSS和JavaScript代码，从而显著提高开发效率。实时界面渲染引擎能够立即响应组件属性的变化，无需重新编译或加载整个页面，进一步加快了开发迭代的速度。可视化拼装组件的直观性和易用性使得开发者即使不具备深厚的编程知识也能快速上手，降低了开发的门槛。实时渲染的即时反馈有助于开发者更直观地理解页面效果，减少因代码错误或逻辑问题导致的开发困扰。实时界面渲染引擎能够实时地将组件的属性和行为转化为可视化的界面效果，确保用户能够立即看到修改后的页面效果。组件与渲染引擎的实时交互支持使得页面具有高度的互动性，用户可以通过操作组件来触发相应的页面变化，提高了用户体验。可视化拼装组件的灵活性使得开发者能够根据需要自由组合和修改组件，以满足不同的业务需求。实时界面渲染引擎的可扩展性使得开发者能够根据需要添加新的渲染效果和交互功能，满足项目的不断发展和变化。可视化拼装组件的模块化设计使得代码结构清晰、易于维护。当需要修改或扩展页面功能时，只需要针对特定的组件进行修改和扩展即可。实时界面渲染引擎的抽象性和封装性使得开发者可以更加关注业务逻辑的实现，而无需过多关心底层的渲染细节。The working principle and effect of the above technical solution are as follows: Visual assembly components allow users to build and arrange through the editor, and users can select and modify component properties through the component panel. These components are usually designed as a low-code development method, that is, the developed components can be dragged and arranged through the editor to complete specific business functions. The assembled components will carry their properties, styles, behaviors and other data. These data will be passed to the real-time interface rendering engine for subsequent rendering and interaction processing. The rendering engine uses the HTML parser to parse the HTML document into a DOM tree, which is the basis for the browser to understand and operate the web page. The CSS parser parses the CSS style and converts it into a CSS object, which is assembled into a CSSOM tree. After the DOM tree and the CSSOM tree are built, the browser will build a rendering tree (RenderTree) based on these two trees, which determines which elements are visible and their style information. After the rendering tree is built, the browser will calculate the size and absolute position of all elements and determine their layout on the page. After the page layout is completed, the browser will convert each node in the rendering tree into pixels and decode all media files to finally generate a visual image result. The real-time interface rendering engine considers the data and properties of components, such as color, size, position, etc., during the rendering process. The rendering engine dynamically adjusts the rendering results according to the properties of the components to achieve real-time visualization. The user's interaction with the component (click, drag, etc.) is also processed by the rendering engine and the rendering results are updated in real time. Visual assembly components allow developers to quickly build pages by dragging, arranging, etc., without having to write a lot of HTML, CSS and JavaScript code, which significantly improves development efficiency. The real-time interface rendering engine can respond immediately to changes in component properties without recompiling or loading the entire page, further speeding up the development iteration. The intuitiveness and ease of use of visual assembly components allow developers to quickly get started even without deep programming knowledge, lowering the threshold for development. The instant feedback of real-time rendering helps developers understand the page effect more intuitively and reduce development troubles caused by code errors or logic problems. The real-time interface rendering engine can convert the properties and behaviors of components into visual interface effects in real time, ensuring that users can immediately see the modified page effect. The real-time interaction support between components and rendering engines makes the page highly interactive. Users can trigger corresponding page changes by operating components, improving the user experience. The flexibility of visual assembly components allows developers to freely combine and modify components as needed to meet different business needs. The scalability of the real-time interface rendering engine allows developers to add new rendering effects and interactive functions as needed to meet the continuous development and changes of the project. The modular design of visual assembly components makes the code structure clear and easy to maintain. When it is necessary to modify or expand the page function, only specific components need to be modified and expanded. The abstraction and encapsulation of the real-time interface rendering engine allow developers to focus more on the implementation of business logic without having to worry too much about the underlying rendering details.
本发明的一个实施例，所述S1包括：In one embodiment of the present invention, the S1 includes:
S11：根据组件的不同种类，将组件库分为图形组件库、交互组件库以及动画效果组件库；S11: According to different types of components, the component library is divided into a graphic component library, an interactive component library and an animation effect component library;
S12：根据逻辑模块的不同种类，将逻辑模块分为渲染控制模块、交互逻辑模块以及实时数据更新模块。S12: According to different types of logic modules, the logic modules are divided into a rendering control module, an interactive logic module, and a real-time data update module.
上述技术方案的工作原理和效果为：图形组件库主要负责在界面上展示信息，用户可以通过属性编辑器调整其外观（如大小、颜色、字体等），以适应不同的设计需求。图形组件库提供了一套标准的接口和属性集，使得开发者可以轻松地将其嵌入到任何界面中。交互组件库不仅展示信息，还能接收用户的输入，并根据用户的操作触发相应的事件或行为。交互组件库提供了事件处理机制，允许开发者为组件定义各种事件监听器和回调函数，以实现复杂的交互逻辑。动画效果组件库提供了动画控制接口，允许开发者定义动画的类型、持续时间、延迟等参数，以及动画的触发条件和结束条件。渲染控制模块接收来自组件库的数据和样式信息，根据预设的布局规则和渲染算法，将组件绘制到界面上。同时，它还负责处理渲染过程中的性能问题，如减少重绘和重排的次数，提高渲染效率。交互逻辑模块通过监听用户操作来触发相应的事件处理函数。在事件处理函数中，模块会根据业务需求更新组件的状态或执行其他操作。同时，它还可以将用户操作的结果反馈给用户。实时数据更新模块通过轮询、WebSocket或其他实时通信技术，从服务器或其他数据源获取最新数据。获取到数据后，模块会根据数据格式和更新规则，将数据映射到界面上的相应组件中，实现数据的实时展示。同时，它还可以处理数据更新过程中的异常情况，如数据加载失败或数据格式错误等。通过将组件和逻辑模块细分，每个部分都变得更加独立和模块化。这意味着开发者可以轻松地重用这些组件和模块，在不同的项目中快速搭建界面和功能，减少了重复劳动，提高了开发效率。分类化的存储方式使得组件库和逻辑模块库的组织结构更加清晰。开发者可以迅速找到所需的组件或模块，降低了学习和使用的门槛。同时，这种结构也便于团队之间的协作和代码管理。细分后的组件和模块可以根据需要进行扩展或修改，而不会影响其他部分。这种灵活性使得系统能够轻松适应不断变化的业务需求和技术发展。同时，当需要添加新功能时，只需开发新的组件或模块，并将其集成到现有的系统中即可。The working principle and effect of the above technical solution are as follows: the graphic component library is mainly responsible for displaying information on the interface, and users can adjust its appearance (such as size, color, font, etc.) through the property editor to adapt to different design requirements. The graphic component library provides a set of standard interfaces and property sets, so that developers can easily embed it into any interface. The interactive component library not only displays information, but also receives user input and triggers corresponding events or behaviors according to user operations. The interactive component library provides an event handling mechanism, allowing developers to define various event listeners and callback functions for components to implement complex interactive logic. The animation effect component library provides an animation control interface, allowing developers to define animation parameters such as type, duration, delay, and animation trigger conditions and end conditions. The rendering control module receives data and style information from the component library, and draws the component onto the interface according to preset layout rules and rendering algorithms. At the same time, it is also responsible for handling performance issues in the rendering process, such as reducing the number of redrawing and rearrangement and improving rendering efficiency. The interactive logic module triggers the corresponding event handling function by listening to user operations. In the event handling function, the module updates the status of the component or performs other operations according to business needs. At the same time, it can also feed back the results of user operations to the user. The real-time data update module obtains the latest data from the server or other data sources through polling, WebSocket or other real-time communication technologies. After obtaining the data, the module will map the data to the corresponding components on the interface according to the data format and update rules to realize the real-time display of the data. At the same time, it can also handle abnormal situations in the data update process, such as data loading failure or data format error. By subdividing components and logic modules, each part becomes more independent and modular. This means that developers can easily reuse these components and modules to quickly build interfaces and functions in different projects, reducing duplication of work and improving development efficiency. The classified storage method makes the organizational structure of the component library and the logic module library clearer. Developers can quickly find the required components or modules, lowering the threshold for learning and use. At the same time, this structure also facilitates collaboration and code management between teams. The subdivided components and modules can be expanded or modified as needed without affecting other parts. This flexibility enables the system to easily adapt to changing business needs and technological development. At the same time, when new functions need to be added, only new components or modules need to be developed and integrated into the existing system.
本发明的一个实施例，所述S2包括：In one embodiment of the present invention, S2 includes:
S21：根据每一种组件库以及逻辑模块库设置对应的属性编辑器，并且通过表单收集用户输入；S21: setting a corresponding property editor according to each component library and logic module library, and collecting user input through a form;
S22：将属性编辑器的表单与组件与逻辑模块的数据模型进行绑定，并建立组件与逻辑模块的数据模型与预览窗口的实时连接，使属性编辑的同时，实时更新设计区域中对应组件的展示，并通过预览窗口展示给用户。S22: Bind the form of the property editor to the data model of the component and logic module, and establish a real-time connection between the data model of the component and logic module and the preview window, so that while the property is being edited, the display of the corresponding component in the design area is updated in real time and displayed to the user through the preview window.
上述技术方案的工作原理和效果为：为每种类型的组件（设计专门的属性编辑器。这些编辑器根据组件或模块的特性提供不同的配置项，如颜色选择器、字体选择器、数值输入框、下拉菜单等。在属性编辑器内部，使用表单元素（如输入框、选择框、滑块等）来构建用户界面，以便用户输入或选择配置值。这些表单元素与组件或模块的属性直接关联。当用户在属性编辑器的表单中输入或选择值时，这些值会被实时收集并存储在临时变量或数据结构中，等待进一步处理。将属性编辑器中的表单元素与组件或逻辑模块的数据模型进行绑定。这意味着表单元素的任何变化都会自动更新到数据模型中，反之亦然。这种绑定通常通过数据绑定框架或双向数据绑定技术实现。在设计区域和预览窗口之间建立实时连接。这种连接确保了设计区域中的组件和逻辑模块的状态与预览窗口中展示的内容保持同步。当用户在属性编辑器中修改组件或逻辑模块的属性时，这些变化会立即反映到数据模型中。随后，通过实时连接机制，这些变化被传递到设计区域和预览窗口中。在设计区域中，对应的组件会根据新的属性值重新渲染；在预览窗口中，用户可以看到这些变化对最终界面效果的影响。整个过程形成了一个闭环反馈系统。用户通过属性编辑器修改组件或逻辑模块的属性，这些变化通过数据模型和实时连接机制实时反映在设计区域和预览窗口中，用户可以根据预览效果进一步调整属性，直到达到满意的效果为止。实时预览功能让用户能够在编辑过程中即时看到界面变化，无需等待编译或刷新，大大提升了设计效率和用户满意度。用户可以直接在设计环境中调整组件和逻辑模块的属性，并立即在预览窗口中查看效果，这种即时反馈机制有助于用户快速迭代和优化设计方案。数据模型绑定和实时更新机制减少了手动编码和调试的工作量，使得开发者可以更加专注于界面设计和功能实现本身。减少了因修改组件或逻辑模块属性而需要重新编译或刷新页面的次数，从而加快了开发流程。The working principle and effect of the above technical solution are as follows: a dedicated property editor is designed for each type of component. These editors provide different configuration items according to the characteristics of the component or module, such as color selector, font selector, numeric input box, drop-down menu, etc. Inside the property editor, form elements (such as input box, selection box, slider, etc.) are used to build a user interface so that users can enter or select configuration values. These form elements are directly associated with the properties of the component or module. When the user enters or selects values in the form of the property editor, these values are collected in real time and stored in temporary variables or data structures, waiting for further processing. Bind the form elements in the property editor to the data model of the component or logic module. This means that any changes in the form elements are automatically updated to the data model, and vice versa. This binding is usually implemented through a data binding framework or two-way data binding technology. Establish a real-time connection between the design area and the preview window. This connection ensures that the status of the components and logic modules in the design area is synchronized with the content displayed in the preview window. When the user modifies the properties of the component or logic module in the property editor, these changes are immediately reflected in the data model. Subsequently, these changes are passed to the design area and preview window through the real-time connection mechanism. In the design area, the corresponding components are re-rendered according to the new property values; in the preview window, users can see the impact of these changes on the final interface effect. The whole process forms a closed-loop feedback system. Users modify the properties of components or logic modules through the property editor, and these changes are reflected in the design area and preview window in real time through the data model and the real-time connection mechanism. Users can further adjust the properties according to the preview effect until a satisfactory effect is achieved. The real-time preview function allows users to see interface changes instantly during the editing process without waiting for compilation or refresh, which greatly improves design efficiency and user satisfaction. Users can adjust the properties of components and logic modules directly in the design environment and immediately view the effects in the preview window. This instant feedback mechanism helps users quickly iterate and optimize design solutions. Data model binding and real-time update mechanisms reduce the workload of manual coding and debugging, allowing developers to focus more on interface design and function implementation itself. It reduces the number of times the page needs to be recompiled or refreshed due to modifying the properties of components or logic modules, thereby speeding up the development process.
本发明的一个实施例，所述组件和逻辑模块与设计区域的交互方式包括：In one embodiment of the present invention, the interaction between the components and logic modules and the design area includes:
A：引入一个拖拽库，组件或逻辑模块应用所述拖拽库提供的拖拽源包装器，使组件或逻辑模块变成可拖拽的；A: Introduce a drag library, and apply the drag source wrapper provided by the drag library to the component or logic module to make the component or logic module draggable;
B：在设计区域设置放置区域包装器，并定义整个设计区域为放置区域；B: Set the placement area wrapper in the design area and define the entire design area as the placement area;
C：鼠标拖住组件或逻辑模块，所述组件或逻辑模块随着鼠标平移被拽至设计区域后，鼠标释放，所述组件或逻辑模块与设计区域完成交互。C: Drag a component or logic module with the mouse. After the component or logic module is dragged to the design area as the mouse is moved horizontally, the mouse is released, and the component or logic module completes the interaction with the design area.
上述技术方案的工作原理和效果为：首先，需要在一个项目中集成一个拖拽库，这个库提供了实现拖拽功能所需的API和工具。使用拖拽库提供的拖拽源包装器来封装组件或逻辑模块的表示元素。这个包装器会将元素标记为可拖拽的，并处理拖拽事件的初始化、进行中和结束等阶段。在拖拽源包装器中，通常需要准备一些与组件或逻辑模块相关的数据，这些数据将在拖拽过程中被传递，并在放置时用于创建或更新设计区域中的元素。使用拖拽库提供的放置区域（drop target）包装器来包装整个设计区域。这个包装器负责监听拖拽事件，特别是拖拽元素进入、悬停和离开放置区域的事件。将整个设计区域定义为放置区域，意味着用户可以在设计区域的任何位置放置拖拽的组件或逻辑模块。在放置区域中，可以通过视觉反馈（如改变鼠标指针样式、显示占位符或高亮区域）来指示用户当前可以放置拖拽元素的位置。用户通过鼠标拖住已包装为拖拽源的组件或逻辑模块，并在屏幕上移动。在这个过程中，拖拽库会处理鼠标移动事件，并更新拖拽元素的位置和状态。当拖拽元素进入设计区域时，放置区域包装器会捕捉到这一事件，并准备接收拖拽元素。用户继续移动鼠标以调整放置位置，并在满意的位置释放鼠标按钮。在鼠标释放后，拖拽库会触发放置事件。在这个事件中，会根据拖拽元素和放置区域的数据进行交互处理，如在设计区域中创建新的组件或逻辑模块实例，并更新其属性和位置。拖拽操作是一种直观且自然的交互方式，用户无需学习复杂的命令或界面元素，只需通过鼠标的简单操作即可完成组件或逻辑模块的添加、移动和调整。这种直观性降低了学习成本，提高了用户的使用效率。拖拽库提供了丰富的API和工具，使得开发者可以快速地实现拖拽功能，而无需从头开始编写相关代码。这大大节省了开发时间，使得开发者可以更加专注于业务逻辑和功能实现。同时，拖拽操作也加速了界面设计的迭代过程。开发者可以快速地尝试不同的布局和组件组合，通过即时反馈来优化设计方案，从而提高了开发效率。拖拽操作使得用户能够更加灵活地控制界面元素，如组件和逻辑模块的位置、大小等。这种灵活性使得用户可以根据自己的需求和喜好来定制界面，从而提升了用户体验。The working principle and effect of the above technical solution are as follows: First, a drag library needs to be integrated into a project, which provides the API and tools required to implement the drag function. The drag source wrapper provided by the drag library is used to encapsulate the representation elements of the component or logic module. This wrapper will mark the element as draggable and handle the initialization, ongoing and end stages of the drag event. In the drag source wrapper, it is usually necessary to prepare some data related to the component or logic module, which will be passed during the drag process and used to create or update the elements in the design area when placed. The drop target wrapper provided by the drag library is used to wrap the entire design area. This wrapper is responsible for listening to drag events, especially events of the drag element entering, hovering and leaving the drop area. Defining the entire design area as a drop area means that the user can place the dragged component or logic module anywhere in the design area. In the drop area, visual feedback (such as changing the mouse pointer style, displaying a placeholder or a highlighted area) can be used to indicate the location where the user can currently place the drag element. The user drags the component or logic module that has been wrapped as a drag source with the mouse and moves it on the screen. During this process, the drag library handles the mouse move event and updates the position and state of the dragged element. When the dragged element enters the design area, the drop area wrapper captures this event and prepares to receive the dragged element. The user continues to move the mouse to adjust the drop position and releases the mouse button at a satisfactory position. After the mouse is released, the drag library triggers a drop event. In this event, interaction processing is performed based on the data of the dragged element and the drop area, such as creating a new component or logic module instance in the design area and updating its properties and position. Drag and drop operation is an intuitive and natural way of interaction. Users do not need to learn complex commands or interface elements. They can add, move and adjust components or logic modules through simple mouse operations. This intuitiveness reduces the learning cost and improves user efficiency. The drag library provides a wealth of APIs and tools, allowing developers to quickly implement drag and drop functions without having to write related code from scratch. This greatly saves development time and allows developers to focus more on business logic and function implementation. At the same time, drag and drop operations also accelerate the iteration process of interface design. Developers can quickly try out different layouts and component combinations, and optimize the design through instant feedback, thereby improving development efficiency. Drag-and-drop operations allow users to more flexibly control interface elements, such as the location and size of components and logic modules. This flexibility allows users to customize the interface according to their needs and preferences, thereby improving the user experience.
本发明的一个实施例，所述S3包括：In one embodiment of the present invention, S3 includes:
S31：创建组件的应用程序编程接口，定义组件需要触发的自定义事件后，通过应用程序编程接口将数据变化传输给逻辑模块；S31: Create an application programming interface for the component, define a custom event that the component needs to trigger, and transmit data changes to the logic module through the application programming interface;
S32：创建逻辑模块的应用程序编程接口，接收来自组件的数据，并且传输逻辑模块的返回结果和触发事件；S32: creating an application programming interface of the logic module, receiving data from the component, and transmitting the return results and triggering events of the logic module;
S33：在主界面中，将组件与逻辑模块组合到一起，形成完整的模块。S33: In the main interface, combine the components and logic modules together to form a complete module.
上述技术方案的工作原理和效果为：为每个组件设计一套API，这些API定义了组件可以执行的操作和可以触发的自定义事件。这些操作包括数据的获取、设置以及用户交互的响应等。在组件内部，定义一系列自定义事件，这些事件在组件状态变化或用户交互时触发。当组件的状态发生变化或需要执行某些操作时，通过其API将相关数据变化或操作请求传输给逻辑模块。为每个逻辑模块设计一套API，这些API定义了逻辑模块可以接收的数据类型、可以执行的操作以及可以返回的结果类型。逻辑模块通过其API接收来自组件的数据。逻辑模块根据接收到的数据执行相应的业务逻辑处理。处理完成后，逻辑模块将结果返回给组件，并通过API触发相关事件。在主界面中，根据应用程序的需求和设计，将组件和逻辑模块通过API进行集成。这涉及到在界面布局中放置组件，并通过编程方式将组件与逻辑模块连接起来。集成后，组件和逻辑模块之间形成数据流和事件处理的闭环。用户通过组件与界面交互，组件将用户输入或状态变化通过API传输给逻辑模块；逻辑模块处理数据并返回结果或触发事件，这些结果和事件又通过API影响组件的展示和行为。通过这种方式，组件和逻辑模块被紧密地组合在一起，形成一个完整的模块。这个模块既包含了用户界面元素（组件），也包含了处理数据和业务逻辑的代码（逻辑模块），从而实现了应用程序的特定功能。通过将应用程序拆分为组件和逻辑模块，每个部分都变得更加独立和可重用。这意味着相同的组件或逻辑模块可以在不同的应用程序或项目中被重复使用，从而减少了重复开发的工作量，提高了开发效率。组件负责用户界面和数据的展示，而逻辑模块负责处理数据和业务逻辑。这种清晰的职责划分使得系统结构更加清晰，易于理解和维护。当出现问题时，可以更快地定位到具体的组件或逻辑模块，从而减少了排查和修复问题的时间。The working principle and effect of the above technical solution are as follows: a set of APIs are designed for each component, which define the operations that the component can perform and the custom events that can be triggered. These operations include data acquisition, setting, and response to user interaction. Inside the component, a series of custom events are defined, which are triggered when the component state changes or when the user interacts. When the state of the component changes or certain operations need to be performed, the relevant data changes or operation requests are transmitted to the logic module through its API. A set of APIs are designed for each logic module, which define the data types that the logic module can receive, the operations that can be performed, and the types of results that can be returned. The logic module receives data from the component through its API. The logic module performs corresponding business logic processing based on the received data. After the processing is completed, the logic module returns the results to the component and triggers related events through the API. In the main interface, according to the needs and design of the application, the components and the logic module are integrated through the API. This involves placing components in the interface layout and connecting the components to the logic module programmatically. After integration, a closed loop of data flow and event processing is formed between the components and the logic module. Users interact with the interface through components, and components transmit user input or state changes to the logic module through APIs; the logic module processes data and returns results or triggers events, which in turn affect the display and behavior of components through APIs. In this way, components and logic modules are tightly combined to form a complete module. This module contains both user interface elements (components) and code (logic modules) that process data and business logic, thereby realizing specific functions of the application. By splitting the application into components and logic modules, each part becomes more independent and reusable. This means that the same component or logic module can be reused in different applications or projects, thereby reducing the workload of repeated development and improving development efficiency. Components are responsible for the display of user interfaces and data, while logic modules are responsible for processing data and business logic. This clear division of responsibilities makes the system structure clearer, easier to understand and maintain. When problems occur, specific components or logic modules can be located more quickly, reducing the time to troubleshoot and fix the problem.
本发明的一个实施例，所述S4包括：In one embodiment of the present invention, the S4 includes:
S41：建立单元测试模块，测试组件与逻辑模块，并确保组件与逻辑模块按照预期工作；S41: Establish unit test modules to test components and logic modules and ensure that components and logic modules work as expected;
S42：建立集成测试模块，测试组件与逻辑模块之间的交互，并确保组件与逻辑模块之间的交互流畅；S42: Establish an integration test module to test the interaction between components and logic modules, and ensure that the interaction between components and logic modules is smooth;
S43：建立端到端测试模块，模拟用户操作，测试整个系统的流程，并保证整个流程的流畅。S43: Establish an end-to-end testing module, simulate user operations, test the entire system process, and ensure the smoothness of the entire process.
上述技术方案的工作原理和效果为：对于组件和逻辑模块而言，单元测试会分别测试它们的内部逻辑和功能，确保它们能够正确执行预期的操作。测试装置会为每个组件和逻辑模块编写测试用例，这些测试用例会模拟各种输入条件和边界情况，并验证输出结果是否符合预期。单元测试通常是在隔离的环境下进行的，即只测试单个模块，而不考虑与其他模块的交互。集成测试的主要目标是测试软件组件之间的交互。在这个阶段，会将多个组件和逻辑模块组合在一起，测试它们之间的接口和数据传递是否按照预期进行。集成测试会模拟组件之间的交互场景，包括数据的发送和接收、事件的触发和响应等。测试装置会编写测试用例来验证这些交互是否符合设计规格和业务逻辑。端到端测试的主要目标是模拟用户操作，测试整个系统的流程从开始到结束的整个过程。这包括用户界面的交互、后端服务的调用、数据库的读写操作等。端到端测试会模拟用户的行为，从登录系统开始，一直到完成某个特定的任务或操作。测试装置会编写测试脚本来自动化这些操作，并验证系统的响应和结果是否符合预期。单元测试通常在隔离的环境下进行，不依赖于其他模块或外部系统。这使得测试过程更加稳定，减少了因依赖关系导致的测试失败。通过为每个模块编写详细的测试用例，单元测试能够覆盖代码的多个路径和边界条件，确保代码的健壮性和可靠性。集成测试能够发现组件之间接口的不一致性和问题，确保它们能够正确地交互和协作。通过测试多个组件的集成情况，集成测试能够确保系统的整体稳定性和可靠性。端到端测试模拟了用户的实际操作流程，能够发现那些在单元测试和集成测试中可能遗漏的问题。通过确保整个系统流程的流畅性，端到端测试能够提升用户体验，从而提高用户满意度。The working principle and effect of the above technical solution are as follows: for components and logic modules, unit testing will test their internal logic and functions respectively to ensure that they can correctly perform the expected operations. The test device will write test cases for each component and logic module, which will simulate various input conditions and boundary conditions and verify whether the output results meet expectations. Unit testing is usually performed in an isolated environment, that is, only a single module is tested without considering the interaction with other modules. The main goal of integration testing is to test the interaction between software components. At this stage, multiple components and logic modules are combined to test whether the interface and data transfer between them are performed as expected. Integration testing simulates the interaction scenarios between components, including the sending and receiving of data, the triggering and response of events, etc. The test device will write test cases to verify whether these interactions meet the design specifications and business logic. The main goal of end-to-end testing is to simulate user operations and test the entire process of the entire system flow from start to end. This includes user interface interaction, backend service calls, database read and write operations, etc. End-to-end testing simulates user behavior, starting from logging into the system until completing a specific task or operation. The test harness writes test scripts to automate these operations and verify that the system's responses and results are as expected. Unit testing is usually performed in an isolated environment without relying on other modules or external systems. This makes the testing process more stable and reduces test failures due to dependencies. By writing detailed test cases for each module, unit testing can cover multiple paths and boundary conditions of the code to ensure the robustness and reliability of the code. Integration testing can discover inconsistencies and problems in the interfaces between components to ensure that they can interact and collaborate correctly. By testing the integration of multiple components, integration testing can ensure the overall stability and reliability of the system. End-to-end testing simulates the user's actual operation process and can discover problems that may be missed in unit testing and integration testing. By ensuring the smoothness of the entire system process, end-to-end testing can improve the user experience and thus improve user satisfaction.
本发明的一个实施例，可视化业务拼装组件与实时界面渲染引擎交互系统，所述系统包括：One embodiment of the present invention is a system for interacting with a visual business assembly component and a real-time interface rendering engine, the system comprising:
组件库与逻辑模块库：根据组件与逻辑模块的不同种类，建立对应的组件库与逻辑模块库，实现组件与逻辑模块的分类化储存；Component library and logic module library: According to the different types of components and logic modules, corresponding component libraries and logic module libraries are established to realize classified storage of components and logic modules;
区域设计模块：为组件库与逻辑模块库设置属性编辑器，并与数据模型绑定，并通过预览窗口实时反馈给用户；Area design module: Set up property editors for component libraries and logic module libraries, bind them to data models, and provide real-time feedback to users through preview windows;
交互装置：通过交互模型，使组件与逻辑模块通过拖拽移动到设计区域，实现编辑后的组件与编辑后的逻辑模块实时交互；Interactive device: through the interactive model, components and logic modules can be moved to the design area by dragging, so that the edited components and edited logic modules can interact in real time;
优化装置：添加优化装置，优化组件与逻辑模块交互过程中的流畅程度，实现组件与设计区域、逻辑模块与设计区域以及组件与逻辑模块之间交互过程流畅进行。Optimization device: Add optimization device to optimize the smoothness of the interaction between components and logic modules, so as to achieve smooth interaction between components and design areas, logic modules and design areas, and components and logic modules.
上述技术方案的工作原理和效果为：可视化拼装组件允许用户通过编辑器进行搭建和编排，用户可以通过组件面板选择并修改组件属性。这些组件通常被设计为低代码开发的方式，即开发好的组件可以通过编辑器拖拽编排，以完成特定的业务功能。拼装完成的组件会携带其属性、样式、行为等数据。这些数据将被传递给实时界面渲染引擎，用于后续的渲染和交互处理。渲染引擎使用HTML解析器将HTML文档解析成DOM树，DOM树是浏览器理解和操作网页的基础。CSS解析器解析CSS样式，并将其转化为CSS对象，这些对象组装成CSSOM树。在DOM树和CSSOM树都构建完成后，浏览器会根据这两棵树构建出渲染树（RenderTree），它决定了哪些元素是可见的，以及它们的样式信息。渲染树构建完毕后，浏览器会计算所有元素的大小和绝对位置，确定它们在页面上的布局。页面布局完成后，浏览器会将渲染树中的每个节点转换为像素，并解码所有的媒体文件，最终生成可视化的图像结果。实时界面渲染引擎在渲染过程中会考虑组件的数据和属性，如颜色、大小、位置等。渲染引擎会根据组件的属性动态地调整渲染结果，以实现实时的可视化效果。用户与组件的交互（点击、拖动等）也会通过渲染引擎进行处理，并实时更新渲染结果。可视化拼装组件允许开发者通过拖拽、编排等方式快速搭建页面，无需编写大量的HTML、CSS和JavaScript代码，从而显著提高开发效率。实时界面渲染引擎能够立即响应组件属性的变化，无需重新编译或加载整个页面，进一步加快了开发迭代的速度。可视化拼装组件的直观性和易用性使得开发者即使不具备深厚的编程知识也能快速上手，降低了开发的门槛。实时渲染的即时反馈有助于开发者更直观地理解页面效果，减少因代码错误或逻辑问题导致的开发困扰。实时界面渲染引擎能够实时地将组件的属性和行为转化为可视化的界面效果，确保用户能够立即看到修改后的页面效果。组件与渲染引擎的实时交互支持使得页面具有高度的互动性，用户可以通过操作组件来触发相应的页面变化，提高了用户体验。可视化拼装组件的灵活性使得开发者能够根据需要自由组合和修改组件，以满足不同的业务需求。实时界面渲染引擎的可扩展性使得开发者能够根据需要添加新的渲染效果和交互功能，满足项目的不断发展和变化。可视化拼装组件的模块化设计使得代码结构清晰、易于维护。当需要修改或扩展页面功能时，只需要针对特定的组件进行修改和扩展即可。实时界面渲染引擎的抽象性和封装性使得开发者可以更加关注业务逻辑的实现，而无需过多关心底层的渲染细节。The working principle and effect of the above technical solution are as follows: Visual assembly components allow users to build and arrange through the editor, and users can select and modify component properties through the component panel. These components are usually designed as a low-code development method, that is, the developed components can be dragged and arranged through the editor to complete specific business functions. The assembled components will carry their properties, styles, behaviors and other data. These data will be passed to the real-time interface rendering engine for subsequent rendering and interaction processing. The rendering engine uses the HTML parser to parse the HTML document into a DOM tree, which is the basis for the browser to understand and operate the web page. The CSS parser parses the CSS style and converts it into a CSS object, which is assembled into a CSSOM tree. After the DOM tree and the CSSOM tree are built, the browser will build a rendering tree (RenderTree) based on these two trees, which determines which elements are visible and their style information. After the rendering tree is built, the browser will calculate the size and absolute position of all elements and determine their layout on the page. After the page layout is completed, the browser will convert each node in the rendering tree into pixels and decode all media files to finally generate a visual image result. The real-time interface rendering engine considers the data and properties of components, such as color, size, position, etc., during the rendering process. The rendering engine dynamically adjusts the rendering results according to the properties of the components to achieve real-time visualization. The user's interaction with the component (click, drag, etc.) is also processed by the rendering engine and the rendering results are updated in real time. Visual assembly components allow developers to quickly build pages by dragging, arranging, etc., without having to write a lot of HTML, CSS and JavaScript code, which significantly improves development efficiency. The real-time interface rendering engine can respond immediately to changes in component properties without recompiling or loading the entire page, further speeding up the development iteration. The intuitiveness and ease of use of visual assembly components allow developers to quickly get started even without deep programming knowledge, lowering the threshold for development. The instant feedback of real-time rendering helps developers understand the page effect more intuitively and reduce development troubles caused by code errors or logic problems. The real-time interface rendering engine can convert the properties and behaviors of components into visual interface effects in real time, ensuring that users can immediately see the modified page effect. The real-time interaction support between components and rendering engines makes the page highly interactive. Users can trigger corresponding page changes by operating components, improving the user experience. The flexibility of visual assembly components allows developers to freely combine and modify components as needed to meet different business needs. The scalability of the real-time interface rendering engine allows developers to add new rendering effects and interactive functions as needed to meet the continuous development and changes of the project. The modular design of visual assembly components makes the code structure clear and easy to maintain. When it is necessary to modify or expand the page function, only specific components need to be modified and expanded. The abstraction and encapsulation of the real-time interface rendering engine allow developers to focus more on the implementation of business logic without having to worry too much about the underlying rendering details.
本发明的一个实施例，所述区域设计模块包括：In one embodiment of the present invention, the area design module includes:
属性编辑器：根据每一种组件库以及逻辑模块库设置对应的属性编辑器，并且通过表单收集用户输入；Property editor: Set up corresponding property editors according to each component library and logic module library, and collect user input through forms;
实时同步装置：将属性编辑器的表单与组件与逻辑模块的数据模型进行绑定，并建立组件与逻辑模块的数据模型与预览窗口的实时连接，使属性编辑的同时，实时更新设计区域中对应组件的展示，并通过预览窗口展示给用户。Real-time synchronization device: binds the form of the property editor to the data model of the component and logic module, and establishes a real-time connection between the data model of the component and logic module and the preview window, so that while the properties are edited, the display of the corresponding component in the design area is updated in real time and displayed to the user through the preview window.
上述技术方案的工作原理和效果为：为每种类型的组件（设计专门的属性编辑器。这些编辑器根据组件或模块的特性提供不同的配置项，如颜色选择器、字体选择器、数值输入框、下拉菜单等。在属性编辑器内部，使用表单元素（如输入框、选择框、滑块等）来构建用户界面，以便用户输入或选择配置值。这些表单元素与组件或模块的属性直接关联。当用户在属性编辑器的表单中输入或选择值时，这些值会被实时收集并存储在临时变量或数据结构中，等待进一步处理。将属性编辑器中的表单元素与组件或逻辑模块的数据模型进行绑定。这意味着表单元素的任何变化都会自动更新到数据模型中，反之亦然。这种绑定通常通过数据绑定框架或双向数据绑定技术实现。在设计区域和预览窗口之间建立实时连接。这种连接确保了设计区域中的组件和逻辑模块的状态与预览窗口中展示的内容保持同步。当用户在属性编辑器中修改组件或逻辑模块的属性时，这些变化会立即反映到数据模型中。随后，通过实时连接机制，这些变化被传递到设计区域和预览窗口中。在设计区域中，对应的组件会根据新的属性值重新渲染；在预览窗口中，用户可以看到这些变化对最终界面效果的影响。整个过程形成了一个闭环反馈系统。用户通过属性编辑器修改组件或逻辑模块的属性，这些变化通过数据模型和实时连接机制实时反映在设计区域和预览窗口中，用户可以根据预览效果进一步调整属性，直到达到满意的效果为止。实时预览功能让用户能够在编辑过程中即时看到界面变化，无需等待编译或刷新，大大提升了设计效率和用户满意度。用户可以直接在设计环境中调整组件和逻辑模块的属性，并立即在预览窗口中查看效果，这种即时反馈机制有助于用户快速迭代和优化设计方案。数据模型绑定和实时更新机制减少了手动编码和调试的工作量，使得开发者可以更加专注于界面设计和功能实现本身。减少了因修改组件或逻辑模块属性而需要重新编译或刷新页面的次数，从而加快了开发流程。The working principle and effect of the above technical solution are as follows: a dedicated property editor is designed for each type of component. These editors provide different configuration items according to the characteristics of the component or module, such as color selector, font selector, numeric input box, drop-down menu, etc. Inside the property editor, form elements (such as input box, selection box, slider, etc.) are used to build a user interface so that users can enter or select configuration values. These form elements are directly associated with the properties of the component or module. When the user enters or selects values in the form of the property editor, these values are collected in real time and stored in temporary variables or data structures, waiting for further processing. Bind the form elements in the property editor to the data model of the component or logic module. This means that any changes in the form elements are automatically updated to the data model, and vice versa. This binding is usually implemented through a data binding framework or two-way data binding technology. Establish a real-time connection between the design area and the preview window. This connection ensures that the status of the components and logic modules in the design area is synchronized with the content displayed in the preview window. When the user modifies the properties of the component or logic module in the property editor, these changes are immediately reflected in the data model. Subsequently, these changes are passed to the design area and preview window through the real-time connection mechanism. In the design area, the corresponding components are re-rendered according to the new property values; in the preview window, users can see the impact of these changes on the final interface effect. The whole process forms a closed-loop feedback system. Users modify the properties of components or logic modules through the property editor, and these changes are reflected in the design area and preview window in real time through the data model and the real-time connection mechanism. Users can further adjust the properties according to the preview effect until a satisfactory effect is achieved. The real-time preview function allows users to see interface changes instantly during the editing process without waiting for compilation or refresh, which greatly improves design efficiency and user satisfaction. Users can adjust the properties of components and logic modules directly in the design environment and immediately view the effects in the preview window. This instant feedback mechanism helps users quickly iterate and optimize design solutions. Data model binding and real-time update mechanisms reduce the workload of manual coding and debugging, allowing developers to focus more on interface design and function implementation itself. It reduces the number of times the page needs to be recompiled or refreshed due to modifying the properties of components or logic modules, thereby speeding up the development process.
本发明的一个实施例，所述交互装置包括：In one embodiment of the present invention, the interaction device comprises:
组件应用程序编程接口：创建组件的应用程序编程接口，定义组件需要触发的自定义事件后，通过应用程序编程接口将数据变化传输给逻辑模块；Component API: Create the component API, define the custom events that the component needs to trigger, and transmit data changes to the logic module through the API;
逻辑模块的应用程序编程接口：创建逻辑模块的应用程序编程接口，接收来自组件的数据，并且传输逻辑模块的返回结果和触发事件；Application programming interface of logic module: Create the application programming interface of logic module, receive data from components, and transmit the return results and trigger events of logic module;
集成装置：在主界面中，将组件与逻辑模块组合到一起，形成完整的模块。Integrated device: In the main interface, combine components and logic modules together to form a complete module.
上述技术方案的工作原理和效果为：为每个组件设计一套API，这些API定义了组件可以执行的操作和可以触发的自定义事件。这些操作包括数据的获取、设置以及用户交互的响应等。在组件内部，定义一系列自定义事件，这些事件在组件状态变化或用户交互时触发。当组件的状态发生变化或需要执行某些操作时，通过其API将相关数据变化或操作请求传输给逻辑模块。为每个逻辑模块设计一套API，这些API定义了逻辑模块可以接收的数据类型、可以执行的操作以及可以返回的结果类型。逻辑模块通过其API接收来自组件的数据。逻辑模块根据接收到的数据执行相应的业务逻辑处理。处理完成后，逻辑模块将结果返回给组件，并通过API触发相关事件。在主界面中，根据应用程序的需求和设计，将组件和逻辑模块通过API进行集成。这涉及到在界面布局中放置组件，并通过编程方式将组件与逻辑模块连接起来。集成后，组件和逻辑模块之间形成数据流和事件处理的闭环。用户通过组件与界面交互，组件将用户输入或状态变化通过API传输给逻辑模块；逻辑模块处理数据并返回结果或触发事件，这些结果和事件又通过API影响组件的展示和行为。通过这种方式，组件和逻辑模块被紧密地组合在一起，形成一个完整的模块。这个模块既包含了用户界面元素（组件），也包含了处理数据和业务逻辑的代码（逻辑模块），从而实现了应用程序的特定功能。通过将应用程序拆分为组件和逻辑模块，每个部分都变得更加独立和可重用。这意味着相同的组件或逻辑模块可以在不同的应用程序或项目中被重复使用，从而减少了重复开发的工作量，提高了开发效率。组件负责用户界面和数据的展示，而逻辑模块负责处理数据和业务逻辑。这种清晰的职责划分使得系统结构更加清晰，易于理解和维护。当出现问题时，可以更快地定位到具体的组件或逻辑模块，从而减少了排查和修复问题的时间。The working principle and effect of the above technical solution are as follows: a set of APIs are designed for each component, which define the operations that the component can perform and the custom events that can be triggered. These operations include data acquisition, setting, and response to user interaction. Inside the component, a series of custom events are defined, which are triggered when the component state changes or when the user interacts. When the state of the component changes or certain operations need to be performed, the relevant data changes or operation requests are transmitted to the logic module through its API. A set of APIs are designed for each logic module, which define the data types that the logic module can receive, the operations that can be performed, and the types of results that can be returned. The logic module receives data from the component through its API. The logic module performs corresponding business logic processing based on the received data. After the processing is completed, the logic module returns the results to the component and triggers related events through the API. In the main interface, according to the needs and design of the application, the components and the logic module are integrated through the API. This involves placing components in the interface layout and connecting the components to the logic module programmatically. After integration, a closed loop of data flow and event processing is formed between the components and the logic module. Users interact with the interface through components, and components transmit user input or state changes to the logic module through APIs; the logic module processes data and returns results or triggers events, which in turn affect the display and behavior of components through APIs. In this way, components and logic modules are tightly combined to form a complete module. This module contains both user interface elements (components) and code (logic modules) that process data and business logic, thereby realizing specific functions of the application. By splitting the application into components and logic modules, each part becomes more independent and reusable. This means that the same component or logic module can be reused in different applications or projects, thereby reducing the workload of repeated development and improving development efficiency. Components are responsible for the display of user interfaces and data, while logic modules are responsible for processing data and business logic. This clear division of responsibilities makes the system structure clearer, easier to understand and maintain. When problems occur, specific components or logic modules can be located more quickly, reducing the time to troubleshoot and fix the problem.
本发明的一个实施例，所述优化装置包括：In one embodiment of the present invention, the optimization device comprises:
单元测试模块：建立单元测试模块，测试组件与逻辑模块，并确保组件与逻辑模块按照预期工作；Unit test module: Establish unit test modules to test components and logic modules and ensure that components and logic modules work as expected;
集成测试模块:建立集成测试模块，测试组件与逻辑模块之间的交互，并确保组件与逻辑模块之间的交互流畅；Integration test module: Establish an integration test module to test the interaction between components and logic modules, and ensure smooth interaction between components and logic modules;
端到端测试模块:建立端到端测试模块，模拟用户操作，测试整个系统的流程，并保证整个流程的流畅。End-to-end testing module: Establish an end-to-end testing module to simulate user operations, test the process of the entire system, and ensure the smoothness of the entire process.
所述测试优化装置对可视化组件和逻辑模块与设计区域交互的流畅度进行测试，包括，The test optimization device tests the smoothness of the interaction between the visualization component and the logic module and the design area, including:
搭建与实际情况相似的测试环境，记录操作开始时间和响应完成时间；Build a test environment similar to the actual situation and record the operation start time and response completion time;
根据收集到的操作开始时间和响应完成时间，计算每个操作的响应时间，同时结合系统吞吐量和并发用户数，评估组件的性能表现，并且性能评估的公式可以通过如下公式获取：Based on the collected operation start time and response completion time, the response time of each operation is calculated. At the same time, the performance of the component is evaluated by combining the system throughput and the number of concurrent users. The performance evaluation formula can be obtained through the following formula:
其中，P表示性能评估分数，表示表示单位时间内实际观察到的吞吐量的平均值， Mmax表示单位时间内系统承受的最大吞吐量，C表示实际观察到的并发用户数， Cmax表示系统能够稳定支持的最大并发用户数，表示单位时间内实际观察到的响应时间的平均值， Emin表示单位时间内可接收的最小响应时间， Emax表示单位时间内可接收的最大响应时间，n表示总共测试的单位时间段数，并且，所述吞吐量表示网络在单位时间内成功传输的数据量，所述并发用户数表示在同一时间段内，同时与系统进行交互操作的用户数量；Where P represents the performance evaluation score, represents the average value of the throughput actually observed per unit time, Mmax represents the maximum throughput that the system can withstand per unit time, C represents the number of concurrent users actually observed, and Cmax represents the maximum number of concurrent users that the system can stably support. represents the average value of the response time actually observed in the unit time, Emin represents the minimum response time acceptable in the unit time, Emax represents the maximum response time acceptable in the unit time, n represents the total number of unit time periods tested, and the throughput represents the amount of data successfully transmitted by the network in the unit time, and the number of concurrent users represents the number of users who interact with the system at the same time period;
当90＜P≤100时，表示系统性能非常优秀，吞吐量接近最大值，并发用户数高，且响应时间非常短，应继续保持现有系统，确保系统能够持续高效地运行。When 90＜P≤100, it means that the system performance is very good, the throughput is close to the maximum value, the number of concurrent users is high, and the response time is very short. The existing system should be maintained to ensure that the system can continue to run efficiently.
当50＜P≤90时，表示系统性能尚可，但可能存在某些瓶颈或优化空间，应深入分析各个子项（吞吐量、并发用户数、响应时间）的具体表现，找出性能瓶颈所在。针对瓶颈进行优化，包括优化数据库查询、增加缓存、调整系统配置等。同时，关注系统的稳定性和可靠性，确保系统在高负载下仍能稳定运行。When 50＜P≤90, it means that the system performance is acceptable, but there may be some bottlenecks or room for optimization. You should deeply analyze the specific performance of each sub-item (throughput, number of concurrent users, response time) to find out the performance bottleneck. Optimize the bottleneck, including optimizing database queries, increasing cache, adjusting system configuration, etc. At the same time, pay attention to the stability and reliability of the system to ensure that the system can still run stably under high load.
当P≤50时，表示系统性能较差，可能无法满足当前需求或未来增长的需求，应立即进行性能调优和故障排查。首先，确定是哪个或哪些子项导致了低分。如果是吞吐量低，需要优化数据处理流程、增加硬件资源等；如果是并发用户数低，需要考虑负载均衡、增加服务器数量等；如果是响应时间长，需要优化代码、数据库查询等。When P≤50, it means that the system performance is poor and may not meet current needs or future growth needs. Performance tuning and troubleshooting should be performed immediately. First, determine which sub-items caused the low score. If the throughput is low, you need to optimize the data processing process, increase hardware resources, etc.; if the number of concurrent users is low, you need to consider load balancing, increase the number of servers, etc.; if the response time is long, you need to optimize the code, database query, etc.
上述技术方案的工作原理和效果为：对于组件和逻辑模块而言，单元测试会分别测试它们的内部逻辑和功能，确保它们能够正确执行预期的操作。测试装置会为每个组件和逻辑模块编写测试用例，这些测试用例会模拟各种输入条件和边界情况，并验证输出结果是否符合预期。单元测试通常是在隔离的环境下进行的，即只测试单个模块，而不考虑与其他模块的交互。集成测试的主要目标是测试软件组件之间的交互。在这个阶段，会将多个组件和逻辑模块组合在一起，测试它们之间的接口和数据传递是否按照预期进行。集成测试会模拟组件之间的交互场景，包括数据的发送和接收、事件的触发和响应等。测试装置会编写测试用例来验证这些交互是否符合设计规格和业务逻辑。端到端测试的主要目标是模拟用户操作，测试整个系统的流程从开始到结束的整个过程。这包括用户界面的交互、后端服务的调用、数据库的读写操作等。端到端测试会模拟用户的行为，从登录系统开始，一直到完成某个特定的任务或操作。测试装置会编写测试脚本来自动化这些操作，并验证系统的响应和结果是否符合预期。单元测试通常在隔离的环境下进行，不依赖于其他模块或外部系统。这使得测试过程更加稳定，减少了因依赖关系导致的测试失败。通过为每个模块编写详细的测试用例，单元测试能够覆盖代码的多个路径和边界条件，确保代码的健壮性和可靠性。集成测试能够发现组件之间接口的不一致性和问题，确保它们能够正确地交互和协作。通过测试多个组件的集成情况，能够确保系统的整体稳定性和可靠性。端到端测试模拟了用户的实际操作流程，能够发现那些在单元测试和集成测试中可能遗漏的问题。通过确保整个系统流程的流畅性，端到端测试能够提升用户体验，从而提高用户满意度。The working principle and effect of the above technical solution are as follows: for components and logic modules, unit testing will test their internal logic and functions respectively to ensure that they can correctly perform the expected operations. The test device will write test cases for each component and logic module, which will simulate various input conditions and boundary conditions and verify whether the output results meet expectations. Unit testing is usually performed in an isolated environment, that is, only a single module is tested without considering the interaction with other modules. The main goal of integration testing is to test the interaction between software components. At this stage, multiple components and logic modules are combined to test whether the interface and data transfer between them are performed as expected. Integration testing simulates the interaction scenarios between components, including the sending and receiving of data, the triggering and response of events, etc. The test device will write test cases to verify whether these interactions meet the design specifications and business logic. The main goal of end-to-end testing is to simulate user operations and test the entire process of the entire system flow from start to end. This includes user interface interaction, backend service calls, database read and write operations, etc. End-to-end testing simulates user behavior, starting from logging into the system until completing a specific task or operation. The test harness writes test scripts to automate these operations and verify that the system's responses and results are as expected. Unit testing is usually performed in an isolated environment without relying on other modules or external systems. This makes the testing process more stable and reduces test failures due to dependencies. By writing detailed test cases for each module, unit testing can cover multiple paths and boundary conditions of the code to ensure the robustness and reliability of the code. Integration testing can discover inconsistencies and problems in the interfaces between components to ensure that they can interact and collaborate correctly. By testing the integration of multiple components, the overall stability and reliability of the system can be ensured. End-to-end testing simulates the user's actual operation process and can discover problems that may be missed in unit testing and integration testing. By ensuring the smoothness of the entire system process, end-to-end testing can improve user experience and thus improve user satisfaction.
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202411274123.4ACN118796178B (en) | 2024-09-12 | 2024-09-12 | Visual business assembly component and real-time interface rendering engine interaction method and system |
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202411274123.4ACN118796178B (en) | 2024-09-12 | 2024-09-12 | Visual business assembly component and real-time interface rendering engine interaction method and system |
| Publication Number | Publication Date |
|---|---|
| CN118796178Atrue CN118796178A (en) | 2024-10-18 |
| CN118796178B CN118796178B (en) | 2024-12-03 |
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202411274123.4AActiveCN118796178B (en) | 2024-09-12 | 2024-09-12 | Visual business assembly component and real-time interface rendering engine interaction method and system |
| Country | Link |
|---|---|
| CN (1) | CN118796178B (en) |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105302578A (en)* | 2015-11-27 | 2016-02-03 | 中国电子科技集团公司第二十八研究所 | Comprehensive portal management system of dragging type layout configuration |
| CN107330053A (en)* | 2017-06-27 | 2017-11-07 | 北京天机数测数据科技有限公司 | The visual design device and data large-size screen monitors preparation method based on ReactJS |
| CN111522565A (en)* | 2020-04-21 | 2020-08-11 | 北京邮电大学 | Real-time update data visualization large-screen method and system based on componentization |
| CN111752560A (en)* | 2019-11-25 | 2020-10-09 | 京东安联财产保险有限公司 | Component generation method and device, computer equipment and computer-readable storage medium |
| CN112068831A (en)* | 2020-08-13 | 2020-12-11 | 中国航空无线电电子研究所 | Display system prototype configuration development tool |
| CN115904349A (en)* | 2022-11-30 | 2023-04-04 | 天翼云科技有限公司 | A layout construction method and system based on vue template |
| WO2023070819A1 (en)* | 2021-10-26 | 2023-05-04 | 山东同圆数字科技有限公司 | Intelligent work order system based on graphical strategy programming engine, and working method thereof |
| CN116360739A (en)* | 2023-04-03 | 2023-06-30 | 成都四象联创科技有限公司 | Visual business logic development system |
| CN117667086A (en)* | 2023-10-31 | 2024-03-08 | 八度云计算(安徽)有限公司 | Method for generating front-end page by dragging component |
| CN117891445A (en)* | 2023-11-29 | 2024-04-16 | 昆船智能技术股份有限公司 | Draggable back-end logic arrangement and workflow WEB low-code development platform |
| CN118377475A (en)* | 2024-04-26 | 2024-07-23 | 山东浪潮超高清视频产业有限公司 | Visual drag optimization method, device and medium based on front-end development technology |
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105302578A (en)* | 2015-11-27 | 2016-02-03 | 中国电子科技集团公司第二十八研究所 | Comprehensive portal management system of dragging type layout configuration |
| CN107330053A (en)* | 2017-06-27 | 2017-11-07 | 北京天机数测数据科技有限公司 | The visual design device and data large-size screen monitors preparation method based on ReactJS |
| CN111752560A (en)* | 2019-11-25 | 2020-10-09 | 京东安联财产保险有限公司 | Component generation method and device, computer equipment and computer-readable storage medium |
| CN111522565A (en)* | 2020-04-21 | 2020-08-11 | 北京邮电大学 | Real-time update data visualization large-screen method and system based on componentization |
| CN112068831A (en)* | 2020-08-13 | 2020-12-11 | 中国航空无线电电子研究所 | Display system prototype configuration development tool |
| WO2023070819A1 (en)* | 2021-10-26 | 2023-05-04 | 山东同圆数字科技有限公司 | Intelligent work order system based on graphical strategy programming engine, and working method thereof |
| CN115904349A (en)* | 2022-11-30 | 2023-04-04 | 天翼云科技有限公司 | A layout construction method and system based on vue template |
| CN116360739A (en)* | 2023-04-03 | 2023-06-30 | 成都四象联创科技有限公司 | Visual business logic development system |
| CN117667086A (en)* | 2023-10-31 | 2024-03-08 | 八度云计算(安徽)有限公司 | Method for generating front-end page by dragging component |
| CN117891445A (en)* | 2023-11-29 | 2024-04-16 | 昆船智能技术股份有限公司 | Draggable back-end logic arrangement and workflow WEB low-code development platform |
| CN118377475A (en)* | 2024-04-26 | 2024-07-23 | 山东浪潮超高清视频产业有限公司 | Visual drag optimization method, device and medium based on front-end development technology |
| Title |
|---|
| LÜDEMANN, A，ETC: "Pathway visualization and editing system", 《 BIOINFORMATICS》, vol. 20, no. 16, 1 November 2004 (2004-11-01), pages 2841 - 2844* |
| Publication number | Publication date |
|---|---|
| CN118796178B (en) | 2024-12-03 |
| Publication | Publication Date | Title |
|---|---|---|
| US9437024B2 (en) | Transformation function insertion for dynamically displayed tracer data | |
| US9323863B2 (en) | Highlighting of time series data on force directed graph | |
| US7448024B2 (en) | System and method for software application development in a portal environment | |
| CN101521899B (en) | On-board testing system and method for mobile applications | |
| US20150347628A1 (en) | Force Directed Graph With Time Series Data | |
| US20140019879A1 (en) | Dynamic Visualization of Message Passing Computation | |
| CN104834595A (en) | Visual automatic test method and system | |
| CN110502228A (en) | A method of VR content creation and generation VR application program based on cloud platform | |
| US12161942B2 (en) | Videogame telemetry data and game asset tracker for session recordings | |
| KR20230115340A (en) | Systems and methods for developing user interface applications | |
| CN114416516A (en) | Test case and test script generation method, system and medium based on screenshot | |
| CN115658039A (en) | Application framework oriented to power grid digital twin visual scene | |
| US7926024B2 (en) | Method and apparatus for managing complex processes | |
| CN119152072A (en) | Chart generation method and device, storage medium and electronic equipment | |
| CN118838587A (en) | Visual assembly service functional unit assembly method and system | |
| CN119292591A (en) | User interface generation method, system, electronic device, and storage medium | |
| CN118796178A (en) | Visual business assembly component and real-time interface rendering engine interaction method and system | |
| CN106569828A (en) | Method of realizing simulation of touch device manual operation in expandable and customized way | |
| CN111694723B (en) | Method for editing nodes and components when product runs under H5 and storage medium | |
| US20240370236A1 (en) | Managing an app, developing an app including an event artifact, method, and system | |
| CN120029588A (en) | A method for constructing a comprehensive simulation integration platform | |
| Ivanov et al. | Interactive Visualization of Verification Results from CPAchecker with D3 | |
| CN118605855A (en) | A method and system for implementing list-based UI via JSON configuration on Hongmeng platform | |
| CN119883257A (en) | Editing method and device of interface prototype graph, storage medium and terminal equipment | |
| CN118885157A (en) | Self-developed system, method and electronic device for low-code platform |
| 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 |