Front-end application interface development method and system based on component library

Abstract

The invention provides a front-end application interface development method and system based on a component library. The front-end application interface development method based on the component library comprises the steps that a frame, content information and an introduction path meeting UI design requirements are created according to the UI design requirements; after compiling of the framework and content information required by UI design and the introduction path is completed, project compiling, packaging, deploying and online are carried out; and introducing the created HTML static component into the HTML option to form a component package. The system comprises modules corresponding to the steps of the method.

Description

Technical Field

[0001] The invention proposes a front-end application interface development method and system based on a component library, belonging to the technical field of interface development. Background Art

[0002] After the UI designer designs a set of display pages, the front-end development technicians need to create the front-end project HTML file according to the UI design. Each component module in the design needs to be developed and written into the corresponding module content in the front-end project. If other pages have the same module content, the developer needs to repeat the operation and edit the function logic. Therefore, the existing technology has the following technical problems:

[0003] 1. The same module content is repeatedly developed, and the reuse rate is low.

[0004] 2. Increase the development workload, and when the project level is too large, the front-end files tend to occupy memory.

[0005] 3. The operation method is single and the functions are not easy to expand.

[0006] When developing the same module content, it is difficult and cumbersome for different developers to collaborate. Summary of the invention

[0007] The present invention provides a front-end application interface development method and system based on a component library to solve the above technical problems existing in the prior art. The technical solutions adopted are as follows:

[0008] A method for developing a front-end application interface based on a component library, the method comprising:

[0009] Create a framework and content information and an introduction path according to the UI design requirements;

[0010] After the framework and content information of the UI design requirements and the import path are compiled, the project is compiled, packaged, deployed and put online;

[0011] Import the created HTML static components into the HTML option to form a component package.

[0012] Further, according to the UI design requirements, a framework and content information and an introduction path are created in accordance with the UI design requirements, including:

[0013] Extract UI design requirements;

[0014] According to the UI design requirements, create an .HTML file in the front-end project, and edit the framework and content information corresponding to the UI design requirements;

[0015] Creating a CSS style file corresponding to the HTML template, rendering and modifying the frame and content information, and obtaining the rendered and modified frame and content information;

[0016] Create a JavaScript script file to implement the processing logic of the functions corresponding to the UI design requirements, and define the abbreviated import name of the component selector (such as the "tb-video-widget" video player component), and the correct import path of the HTML template and CSS style file.

[0017] Furthermore, after the framework and content information of the UI design requirements and the import path are compiled, the project compilation, packaging, deployment and online release include:

[0018] Compile the project according to UI design requirements and obtain the compiled resource files;

[0019] Integrate the compiled resource files into one or more package files, and upload the one or more package files to the server for configuration, deployment and startup;

[0020] Publish the packaged files that have completed configuration and deployment.

[0021] Furthermore, when there are multiple packaged files, real-time monitoring of the upload operation quality of the packaged files includes:

[0022] When there are multiple packaged files, collect the upload time corresponding to each packaged file upload;

[0023] Obtaining an upload duration coefficient using the upload duration corresponding to each package file upload;

[0024] The upload duration coefficient is obtained by the following formula:

[0025]

[0026] Among them, S represents the upload time coefficient; n represents the number of packaged files that have been uploaded; T i Indicates the upload time of the i-th package file that has been uploaded; C i Indicates the data size of the ith package file that has been uploaded; T bi represents the standard deviation of the upload time corresponding to the i-th uploaded package file; C bi represents the standard deviation of the data volume corresponding to the i-th uploaded package file; T max and T min Indicates the maximum and minimum upload duration of n packaged files that have been uploaded; T b T represents the standard deviation of the upload time corresponding to n uploaded packaged files; fpIndicates the average value of the change in upload time between each two adjacent uploaded files in n uploaded package files;

[0027] Comparing the upload duration coefficient with a preset duration coefficient threshold;

[0028] When the upload duration coefficient is lower than a preset duration coefficient threshold, the data transmission rate of the packaged file upload is retrieved;

[0029] The transmission rate coefficient is obtained by combining the data transmission rate of the packaged file upload with the upload duration coefficient;

[0030] The transmission rate coefficient is obtained by the following formula:

[0031]

[0032] Where K represents the transmission rate coefficient; S i V represents the upload duration coefficient corresponding to the i-th uploaded package file; si V represents the data transmission rate at the start upload time corresponding to the i-th uploaded package file; wi V represents the data transmission rate at the time of completion of uploading corresponding to the ith uploaded package file; bi S represents the standard deviation of the data transmission rate corresponding to the i-th uploaded package file; b V represents the standard deviation of the upload duration coefficient corresponding to n uploaded packaged files; b V represents the standard deviation of the data transmission rate corresponding to n uploaded packaged files; p V represents the average data transmission rate corresponding to n uploaded packaged files; z Indicates the median data transmission rate corresponding to n packaged files that have completed uploading;

[0033] comparing the transmission rate coefficient with a preset rate coefficient threshold;

[0034] When the transmission rate coefficient is lower than a preset rate coefficient threshold, it is determined that there is an upload anomaly in the package file upload, and an upload anomaly alarm is issued.

[0035] Furthermore, the created HTML static component is introduced into the HTML option to form a component package, including:

[0036] Access a component library, and extract a component type corresponding to the UI design requirement from the component library;

[0037] Select static components corresponding to the UI design requirements in each component type, and integrate them to generate HTML static components;

[0038] Import the HTML static components created in the HTML option to form a component package.

[0039] A front-end application interface development system based on a component library, the front-end application interface development system based on a component library comprising:

[0040] A path creation module, used to create a framework and content information and an introduction path according to UI design requirements;

[0041] The deployment module is used to compile, package and deploy the project after the framework and content information of the UI design requirements and the import path are compiled;

[0042] The component package forming module is used to introduce the created HTML static components into the HTML options to form a component package.

[0043] Furthermore, the path creation module includes:

[0044] Requirements extraction module, used to extract UI design requirements;

[0045] An editing control module, used to create an .HTML file in the front-end project according to the UI design requirements, and edit the framework and content information corresponding to the UI design requirements;

[0046] A style file creation module is used to create a CSS style file corresponding to the HTML template, render and modify the frame and content information, and obtain the rendered and modified frame and content information;

[0047] The processing logic creation module is used to create a JavaScript script file to implement the processing logic of the functions corresponding to the UI design requirements, and define the abbreviated import name of the component selector (such as the "tb-video-widget" video player component), and the correct import path of the HTML template and CSS style file.

[0048] Furthermore, the deployment module includes:

[0049] Project compilation module, used to compile projects according to UI design requirements and obtain compiled resource files;

[0050] An upload module, used to integrate the compiled resource files into one or more package files, and upload the one or more package files to a server for configuration, deployment and startup;

[0051] The release control module is used to release the packaged files that have completed the configuration deployment.

[0052] Furthermore, the operation of the upload module includes real-time monitoring of the upload operation quality of the packaged files when there are multiple packaged files, including:

[0053] When there are multiple packaged files, collect the upload time corresponding to each packaged file upload;

[0054] Obtaining an upload duration coefficient using the upload duration corresponding to each package file upload;

[0055] The upload duration coefficient is obtained by the following formula:

[0056]

[0057] Among them, S represents the upload time coefficient; n represents the number of packaged files that have been uploaded; T i Indicates the upload time of the i-th package file that has been uploaded; C i Indicates the data size of the ith package file that has been uploaded; T bi represents the standard deviation of the upload time corresponding to the i-th uploaded package file; C bi represents the standard deviation of the data volume corresponding to the i-th uploaded package file; T max and T min Indicates the maximum and minimum upload duration of n packaged files that have been uploaded; T b T represents the standard deviation of the upload time corresponding to n uploaded packaged files; fp Indicates the average value of the change in upload time between each two adjacent uploaded files in n uploaded package files;

[0058] Comparing the upload duration coefficient with a preset duration coefficient threshold;

[0059] When the upload duration coefficient is lower than a preset duration coefficient threshold, the data transmission rate of the packaged file upload is retrieved;

[0060] The transmission rate coefficient is obtained by combining the data transmission rate of the packaged file upload with the upload duration coefficient;

[0061] The transmission rate coefficient is obtained by the following formula:

[0062]

[0063] Where K represents the transmission rate coefficient; S i V represents the upload duration coefficient corresponding to the i-th uploaded package file; si V represents the data transmission rate at the start upload time corresponding to the i-th uploaded package file; wiV represents the data transmission rate at the time of completion of uploading corresponding to the ith uploaded package file; bi S represents the standard deviation of the data transmission rate corresponding to the i-th uploaded package file; b V represents the standard deviation of the upload duration coefficient corresponding to n uploaded packaged files; b V represents the standard deviation of the data transmission rate corresponding to n uploaded packaged files; p V represents the average data transmission rate corresponding to n uploaded packaged files; z Indicates the median data transmission rate corresponding to n packaged files that have completed uploading;

[0064] comparing the transmission rate coefficient with a preset rate coefficient threshold;

[0065] When the transmission rate coefficient is lower than a preset rate coefficient threshold, it is determined that there is an upload anomaly in the package file upload, and an upload anomaly alarm is issued.

[0066] Furthermore, the component package forming module includes:

[0067] A component type extraction module, used for accessing a component library and extracting a component type corresponding to the UI design requirement from the component library;

[0068] An HTML static component generation module is used to select static components corresponding to the UI design requirements in each component type, and integrate and generate HTML static components;

[0069] The component package generation execution module is used to introduce the created HTML static components into the HTML options to form a component package.

[0070] Beneficial effects of the present invention:

[0071] The present invention provides a method and system for developing a front-end application interface based on a component library, which has the following beneficial effects:

[0072] 1. High efficiency: Modular development improves code reusability, reduces development workload, improves development efficiency, and achieves rapid development.

[0073] 2. Scalability: allows developers to customize components to meet the needs of different projects, and the operation is simple and practical.

[0074] 3. Maintainability: The code of the component library is easy to maintain and debug, which facilitates team collaboration and subsequent function iteration

[0075] 4. The display method of the same module is unified, which is easy to manage, and the interaction between different module components is convenient and smooth.

[0076] 5. Visualization: Visual large-screen display can be achieved by splicing components. BRIEF DESCRIPTION OF THE DRAWINGS

[0077] Figure 1 is a flow chart of the method of the present invention;

[0078] Figure 2 The system block diagram of the system of the present invention. DETAILED DESCRIPTION

[0079] 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.

[0080] The embodiment of the present invention proposes a front-end application interface development method based on a component library, such as Figure 1 As shown, the front-end application interface development method based on the component library includes:

[0081] S1. Create a framework and content information and an introduction path according to the UI design requirements;

[0082] S2. After the framework and content information of the UI design requirements and the introduction path are compiled, the project is compiled, packaged, deployed and put online;

[0083] S3. Introduce the created HTML static components into the HTML option to form a component package.

[0084] The working principle of the above technical solution is: according to the UI design, create an .HTML file in the front-end project, and edit the basic framework and content; create a CSS style file for the HTML template to render and modify the displayed content; create a JavaScript script file to implement the processing logic of basic functions, and define the abbreviated import name of the component selector (such as the "tb-video-widget" video player component), and the correct import path of the HTML template and CSS style file; after the above content is edited, the project is compiled, packaged, deployed and put online; enter the platform component library module and select the component type as a static component to create a component; introduce the created HTML static component in the HTML option, if external resources are required, enter the correct URL, and edit the required basic function script logic, and set the parameters in the mode, etc. After completion, save the component resources, and when you are done here, a required component package is realized; finally, in the data cockpit module, select the component in the created component package, and realize the visual page layout display by dragging and dropping.

[0085] At the same time, the component library-based development method of this embodiment provides the following functions:

[0086] 1. Provide online editing of HTML or import of custom components.

[0087] 2. Provide CDN method to import external JavaScript scripts and CSS style file resource URLs.

[0088] 3. Support online editing of CSS styles of module contents.

[0089] 4. Provide JavaScript initialization function and support related logic processing or animation operations.

[0090] 5. Provide setting mode options to add customized advanced functions.

[0091] 6. The data key mode can be set for the data returned by the service, and the title alias, data type and default value can be set for each data parameter.

[0092] 7. Support component thumbnail settings;

[0093] 8. Supports dragging and dropping components to customize layout display to achieve large-screen visualization, and provides editing, full-screen and other functions.

[0094] 9. Support adding multiple data sources to a single component, title setting, icon selection, and component style setting.

[0095] The widget supports adding action options such as jump, click, mouse-in, etc.

[0096] The effect of the above technical solution is: through the predefined HTML static components, developers can quickly build an interface that meets the UI design requirements without having to write a lot of HTML code from scratch. This method reduces repetitive work and enables developers to focus more on business logic and function implementation. This method compiles and packages the framework and content information of UI design requirements and the introduction path, simplifying the process of project deployment and launch. Developers can more easily deploy development results to the production environment, thereby speeding up product iteration. Using a component library-based development method can ensure that the HTML static components used in the project have a unified code style and structure. This helps to improve the readability and maintainability of the code and reduce potential problems caused by inconsistent code styles.

[0097] Predefined HTML static components have been tested and verified to have high stability and reliability. Using these components can reduce the error rate caused by manually writing code and improve development efficiency and quality. By encapsulating HTML static components into component packages, developers can reuse these components in different projects. This helps reduce the workload of repeated development and improve development efficiency. Developers can flexibly combine and match different HTML static components according to project requirements to build a rich and diverse user interface. This flexibility enables the component library-based development approach to adapt to front-end projects of different sizes and complexities. After encapsulating HTML static components into component packages, developers can maintain and update these components more conveniently. When a component needs to be modified or updated, it is only necessary to make the corresponding changes in the component package without modifying the code in the project one by one. With the continuous development of front-end technology, HTML static components also need to be continuously updated and upgraded to adapt to new technical standards and user needs. The component library-based development approach makes these upgrades simpler and faster, and developers can more easily introduce new technologies and functions.

[0098] In summary, the front-end application interface development method based on component library has the technical effects of improving development efficiency, improving code quality, enhancing component reusability, and facilitating maintenance and upgrading, etc. These effects make the method have high practical value and application prospects in front-end development.

[0099] In one embodiment of the present invention, a framework and content information and an introduction path corresponding to the UI design requirements are created according to the UI design requirements, including:

[0100] S101. Extract UI design requirements;

[0101] S102, creating an .HTML file in the front-end project according to the UI design requirements, and editing the framework and content information corresponding to the UI design requirements;

[0102] S103, creating a CSS style file corresponding to the HTML template, rendering and modifying the frame and content information, and obtaining the rendered and modified frame and content information;

[0103] S104. Create a JavaScript script file to implement the processing logic of the functions corresponding to the UI design requirements, and define the abbreviated import name of the component selector (such as "tb-video-widget" video player component), and the correct import path of the HTML template and CSS style file.

[0104] The working principle of the above technical solution is: extract specific interface layout, color matching, font style, interactive effects and other requirements from UI design drafts, design specifications or communication with customers.

[0105] Create a new .HTML file in the front-end project, which will serve as the basic structure of the page. According to the UI design requirements, write the corresponding tags and attributes in the HTML file to build the basic framework and content information of the page. For example, use 、 、 Tags to layout page elements, use Tags to insert images, use <form>Tags to create forms, etc.

[0106] Create a CSS style file corresponding to the HTML file, which will be used to render and modify the frame and content information in the HTML file. Write selectors, attributes, and values ​​in the CSS file to define the style of each element in the page. For example, use a class selector (.classname) or an ID selector (#idname) to select a specific element and set style attributes such as color, font, margin, border, etc. through the cascading and inheritance of CSS to achieve the unity and coordination of page styles.

[0107] Create a JavaScript script file, which will be used to implement the functional processing logic corresponding to the UI design requirements. Write functions, event listeners, and DOM operations in the JavaScript file to implement page interaction effects, form validation, data requests, and other functions. Define the abbreviated import name of the component selector, such as "tb-video-widget" to identify the video player component, so that it is easy to quickly reference and operate the component in the JavaScript code. <script>标签正确引入JavaScript脚本文件，并设置其引入路径。同时，在需要的地方通过JavaScript代码动态加载或操作CSS样式文件。

[0108] 上述技术方案的效果为：通过使用预设的HTML标签、CSS样式和JavaScript函数库，可以快速构建出符合UI设计需求的页面。部件选择器的简写引入名称和正确的文件引入路径，简化了代码编写和调试过程。CSS样式文件的统一管理和应用，确保了页面中各个元素的样式一致性和协调性。通过CSS的层叠性和继承性，可以方便地实现页面样式的统一修改和更新。精确的HTML结构和CSS样式设计，使得页面布局合理、美观且易于使用。丰富的JavaScript交互效果和功能处理逻辑，提升了页面的互动性和用户体验。清晰的HTML、CSS和JavaScript文件结构，使得团队成员可以方便地分工合作和共享代码。通过版本控制系统(如Git)对代码进行版本管理，可以方便地追踪和记录代码的修改历史，便于后续的维护和更新。

[0109] 综上所述，该技术方案通过提取UI设计需求、创建并编辑HTML、CSS和JavaScript文件等步骤，实现了根据UI设计需求创建对应前端项目文件的目标。其工作原理基于前端开发的基础知识和技术规范，技术效果则体现在提高开发效率、保证页面风格一致、提升用户体验以及便于团队协作和维护等方面。

[0110] 本发明的一个实施例，在UI设计需求的框架和内容信息以及引入路径完成编译之后，进行项目编译打包部署上线包括：

[0111] S201、针对UI设计需求进行项目编译，获取编译后的资源文件；

[0112] S202、将所述编译后的资源文件整合为一个或多个打包文件，并将所述一个或多个打包文件上传至服务器进行配置部署和启动；

[0113] S203、对完成配置部署的打包文件进行对外发布。

[0114] 上述技术方案的工作原理为：在完成UI设计需求的框架和内容信息以及引入路径的编写后，使用前端构建工具(如Webpack、Gulp等)对项目进行编译。编译过程包括将HTML、CSS、JavaScript等源文件转换为浏览器可以识别的格式，并进行代码优化(如压缩、合并、混淆等)以提高加载速度和性能。编译过程中还会处理资源文件的引用路径，确保它们在打包后的文件中能够正确加载。编译完成后，将生成的资源文件(如压缩后的CSS、JavaScript文件，以及图片、字体等静态资源)整合为一个或多个打包文件。打包文件可以是单个文件(如将所有资源打包成一个.js或.css文件)，也可以是多个文件(如根据页面或功能模块进行拆分)。将打包文件上传至服务器，通常是通过FTP、SFTP等文件传输协议，或者使用云服务提供商提供的上传工具。在服务器上配置项目的运行环境，包括设置Web服务器(如Nginx、Apache)、数据库连接等。启动服务器上的项目，使其能够对外提供服务。完成配置部署后，通过域名解析、CDN加速等方式将项目对外发布。用户可以通过浏览器访问项目的URL地址，查看和使用项目提供的功能和服务。

[0115] 上述技术方案的效果为：通过编译和打包过程，对代码进行优化和压缩，减少了资源文件的体积和加载时间。打包文件的合理拆分和加载策略，提高了页面的响应速度和用户体验。将编译后的资源文件整合为打包文件，简化了部署过程，减少了手动上传和配置的工作量。自动化构建和部署工具的使用(如CI / CD流水线)，进一步提高了部署效率和可靠性。清晰的打包文件结构和代码组织方式，使得项目的维护和管理更加便捷。便于后续的功能扩展和代码更新，降低了维护成本。编译和打包过程可以对代码进行混淆和加密处理，提高了代码的安全性。通过配置Web服务器的安全设置(如HTTPS、防火墙等)，进一步保护了项目的安全。

[0116] 综上所述，该技术方案通过项目编译、资源打包与上传以及对外发布等步骤，实现了项目的快速部署和上线。其工作原理基于前端构建工具和服务器配置管理的知识，技术效果则体现在提高项目性能、简化部署流程、增强项目可维护性以及提升安全性等方面。

[0117] 本发明的一个实施例，当所述打包文件为多个时，实时监测打包文件的上传运行质量，包括：

[0118] 步骤1、当所述打包文件为多个时，采集每个打包文件上传对应的上传时长；

[0119] 步骤2、利用所述每个打包文件上传对应的上传时长获取上传时长系数；

[0120] 其中，所述上传时长系数通过如下公式获取：

[0121]

[0122] 其中，S表示上传时长系数；n表示已完成上传的打包文件的个数；Ti表示第i个已完成上传的打包文件的上传时长；Ci表示第i个已完成上传的打包文件的数据量；Tbi表示第i个已完成上传的打包文件对应的上传时长标准差；Cbi表示第i个已完成上传的打包文件对应的数据量标准差；Tmax和Tmin表示n个已完成上传的打包文件的上传时长最大值和最小值；Tb表示n个已完成上传的打包文件对应的上传时长标准差；Tfp表示n个已完成上传的打包文件中每相邻两个上传文件之间的上传时长变化幅度平均值；

[0123] 步骤3、将所述上传时长系数与预设的时长系数阈值进行比较；

[0124] 步骤4、当所述上传时长系数低于预设的时长系数阈值时，则调取打包文件上传的数据传输速率；

[0125] 步骤5、利用所述打包文件上传的数据传输速率结合上传时长系数获取传输速率系数；

[0126] 其中，所述传输速率系数通过如下公式获取：

[0127]

[0128] 其中，K表示传输速率系数；Si表示第i个已完成上传的打包文件对应的上传时长系数；Vsi表示第i个已完成上传的打包文件对应的起始上传时刻的数据传输速率；Vwi表示第i个第i个已完成上传的打包文件对应的上传完成时刻的数据传输速率；Vbi表示第i个已完成上传的打包文件对应的数据传输速率标准差；Sb表示n个已完成上传的打包文件对应的上传时长系数标准差；Vb表示n个已完成上传的打包文件对应的数据传输速率标准差；Vp表示n个已完成上传的打包文件对应的数据传输速率平均值；Vz表示n个已完成上传的打包文件对应的数据传输速率中间值；

[0129] 步骤6、将所述传输速率系数与预设的速率系数阈值进行比较；

[0130] 步骤7、当所述传输速率系数低于预设的速率系数阈值时，则判定打包文件上传存在上传异常，并进行上传异常报警。

[0131] 上述技术方案的工作原理为：当打包文件为多个时，首先采集每个打包文件上传对应的上传时长(Ti)。利用采集到的上传时长(Ti)、每个打包文件的数据量(Ci)、上传时长标准差(Tbi和数据量标准差Cbi)、上传时长的最大值(Tmax)和最小值(Tmin)、所有打包文件的上传时长标准差(Tb)以及每相邻两个上传文件之间的上传时长变化幅度平均值(Tfp)，通过特定公式计算出上传时长系数(S)。将计算出的上传时长系数(S)与预设的时长系数阈值进行比较。如果上传时长系数低于预设的时长系数阈值，则调取打包文件上传的数据传输速率(Vsi和Vwi，分别表示起始上传时刻和上传完成时刻的数据传输速率)。利用调取到的数据传输速率(Vsi和Vwi)、传输速率标准差(Vbi)、传输速率平均值(Vp)、传输速率中间值(Vz)以及上传时长系数标准差(Sb)，通过特定公式计算出传输速率系数(K)。将计算出的传输速率系数(K)与预设的速率系数阈值进行比较。如果传输速率系数低于预设的速率系数阈值，则判定打包文件上传存在上传异常，并进行上传异常报警。

[0132] 上述技术方案的效果为：通过实时监测打包文件的上传时长和数据传输速率，能够及时发现上传过程中的异常情况，并通过报警机制提醒相关人员进行处理。通过计算上传时长系数和传输速率系数，能够更精确地评估打包文件的上传质量，避免单一指标带来的误判。根据监测和评估结果，可以调整上传策略，如优化网络带宽、改进文件打包方式等，以提高上传效率和质量。通过确保打包文件的快速、稳定上传，能够提升用户的使用体验，避免因上传问题导致的不便和损失。该技术方案适用于多个打包文件的上传监测，能够处理大数据量的传输场景，满足大型项目或应用的部署需求。

[0133] 综上所述，该技术方案通过实时监测打包文件的上传时长和数据传输速率，并计算相关系数进行精确评估，能够及时发现并处理上传过程中的异常情况，从而优化上传策略、提升用户体验和支持大数据量传输。

[0134] 本发明的一个实施例，在HTML选项中引入创建的HTML静态部件，形成部件包，包括：

[0135] S301、访问部件库，在所述部件库中提取与所述UI设计需求对应的部件类型；

[0136] S302、在每种部件类型中筛选与所述UI设计需求对应的静态部件，整合生成HTML静态部件；

[0137] S303、在HTML选项中引入创建的HTML静态部件形成部件包。

[0138] 上述技术方案的工作原理为：首先，系统或开发人员需要访问一个预先建立的部件库。这个部件库包含了多种类型的HTML静态部件，这些部件可能是预先设计好的、可复用的HTML代码片段，用于实现特定的UI功能或展示效果。在访问部件库时，系统或开发人员会根据当前的UI设计需求，从部件库中筛选出与需求相匹配的部件类型。这些部件类型可能包括按钮、表单、图片、视频播放器等。在确定了部件类型后，系统或开发人员会进一步在每种部件类型中筛选与UI设计需求对应的静态部件。这个筛选过程可能基于部件的样式、功能、大小等多个因素。筛选完成后，系统或开发人员会将这些静态部件整合在一起，生成一个或多个HTML静态部件。这些部件可能已经包含了必要的HTML、CSS和JavaScript代码，以实现特定的UI效果和功能。最后，系统或开发人员会在HTML选项中引入这些创建的HTML静态部件。这个过程可能涉及将静态部件的代码片段插入到HTML文档的适当位置，或者通过某种机制(如JavaScript动态加载)在运行时将这些部件添加到HTML文档中。通过这个过程，一个或多个HTML静态部件被整合到了一起，形成了一个部件包。这个部件包可以作为一个整体被重用，以满足不同的UI设计需求。

[0139] 上述技术方案的效果为：通过使用预定义的HTML静态部件，开发人员可以更快地构建出符合UI设计需求的网页。这减少了从头开始编写HTML、CSS和JavaScript代码的时间，从而提高了开发效率。将HTML静态部件封装成可复用的代码片段，使得代码更加模块化和清晰。这有助于开发人员更容易地理解和维护代码，降低了代码出错的概率。团队成员可以共享和使用相同的HTML静态部件库，从而促进了团队协作和代码复用。这有助于保持代码风格的一致性，并减少因重复编码而产生的错误。由于HTML静态部件是可复用的，因此当UI设计需求发生变化时，开发人员可以快速地替换或更新部件，而无需对整个网页进行重写。这支持了快速迭代和部署，使得网页能够更快地适应市场需求。

[0140] 综上所述，该技术方案通过引入HTML静态部件形成部件包的方式，提高了开发效率、增强了代码的可维护性、促进了团队协作并支持了快速迭代和部署。

[0141] 本发明实施例提出了一种基于部件库的前端应用界面开发系统，如图2所示，所述基于部件库的前端应用界面开发系统包括：

[0142] 路径创建模块，用于根据UI设计需求创建与所述UI设计需求的框架和内容信息以及引入路径；

[0143] 部署模块，用于在UI设计需求的框架和内容信息以及引入路径完成编译之后，进行项目编译打包部署上线；

[0144] 部件包形成模块，用于在HTML选项中引入创建的HTML静态部件，形成部件包。

[0145] 上述技术方案的工作原理为：根据UI设计，在前端项目中创建.HTML文件，编辑出基本的框架和内容；创建HTML模板的CSS样式文件，对展示的内容进行渲染修饰；创建JavaScript脚本文件实现基本功能的处理逻辑，并定义部件选择器的简写引入名称(如"tb-video-widget”视频播放器部件)，和HTML模板、CSS样式文件的正确引入路径；以上内容编辑完后，项目编译打包部署上线；进入平台部件库模块选择部件类型为静态组件创建部件；在HTML选项中引入创建的HTML静态部件，如有外部资源需要则输入正确的URL，并编辑需要的基本功能脚本逻辑，同时对模式中参数进行设置等，完成后对部件资源保存，完成到这里，一个需要的部件包就实现了；最后，在数据驾驶舱模块中，选择创建的组件包中的部件，通过拖拉拽实现可视化页面布局展示。

[0146] 同时，本实施例的基于部件库的开发方式提供一下几点功能：

[0147] 1.提供自定义部件在线编辑HTML或引入。

[0148] 2.提供CDN方式外部JavaScipt脚本和CSS样式文件资源URL引入。

[0149] 3.支持在线编辑模块内容的CSS样式。

[0150] 4.提供JavaScript初始化函数功能，并支持相关逻辑处理或动效操作。

[0151] 5.提供设置模式选项，可进行自定义高级功能添加。

[0152] 6.可对服务返回的数据进行数据键模式设置，单个数据参数设置标题别名、数据类型和默认值。

[0153] 7.支持部件缩略图设置；

[0154] 8.支持部件拖拉拽自定义布局展示实现可视化大屏，并提供编辑、全屏等功能。

[0155] 9.支持对单一部件多数据源添加，标题设置、图标选择、部件风格的设置。

[0156] 部件支持提供如跳转、点击、鼠标移入等动作选项的添加。

[0157] 上述技术方案的效果为：通过预定义的HTML静态部件，开发人员可以快速搭建出符合UI设计需求的界面，无需从头开始编写大量的HTML代码。这种方法减少了重复劳动，使开发人员能够更专注于业务逻辑和功能实现。该方法将UI设计需求的框架和内容信息以及引入路径进行编译打包，简化了项目部署上线的流程。开发人员可以更方便地将开发成果部署到生产环境中，从而加快了产品的迭代速度。使用基于部件库的开发方法，可以确保项目中使用的HTML静态部件具有统一的代码风格和结构.这有助于提升代码的可读性和可维护性，降低因代码风格不一致而导致的潜在问题。

[0158] 预定义的HTML静态部件经过测试和验证，具有较高的稳定性和可靠性。使用这些部件可以降低因手动编写代码而产生的错误率，提高开发效率和质量。通过将HTML静态部件封装成部件包，开发人员可以在不同的项目中复用这些部件。这有助于减少重复开发的工作量，提高开发效率。开发人员可以根据项目需求灵活组合和搭配不同的HTML静态部件，以构建出丰富多样的用户界面。这种灵活性使得基于部件库的开发方法能够适应不同规模和复杂度的前端项目。将HTML静态部件封装成部件包后，开发人员可以更方便地对这些部件进行维护和更新。当需要修改或更新某个部件时，只需在部件包中进行相应的修改即可，无需逐个修改项目中的代码。随着前端技术的不断发展，HTML静态部件也需要不断更新和升级以适应新的技术标准和用户需求。基于部件库的开发方法使得这些升级变得更加简单和快速，开发人员可以更方便地引入新的技术和功能。

[0159] 综上所述，所述基于部件库的前端应用界面开发方法具有提高开发效率、提升代码质量、增强组件复用性以及便于维护和升级等技术效果。这些效果使得该方法在前端开发中具有较高的实用价值和应用前景。

[0160] 本发明的一个实施例，所述路径创建模块包括：

[0161] 需求提取模块，用于提取UI设计需求；

[0162] 编辑控制模块，用于根据所述UI设计需求，在前端项目中创建.HTML文件，并编辑与所述UI设计需求对应的框架和内容信息；

[0163] 样式文件创建模块，用于创建HTML模板对应的CSS样式文件，对所述框架和内容信息进行渲染修饰，获取渲染修饰后的框架和内容信息；

[0164] 处理逻辑创建模块，用于创建JavaScript脚本文件实现与所述UI设计需求对应的功能的处理逻辑，并定义部件选择器的简写引入名称(如"tb-video-widget”视频播放器部件)，和HTML模板、CSS样式文件的正确引入路径。

[0165] 上述技术方案的工作原理为：从UI设计稿、设计规范或与客户沟通中，提取出具体的界面布局、色彩搭配、字体样式、交互效果等需求。

[0166] 在前端项目中创建一个新的.HTML文件，该文件将作为页面的基础结构。根据UI设计需求，在HTML文件中编写相应的标签和属性，以构建出页面的基本框架和内容信息。例如，使用、、等标签来布局页面元素，使用标签来插入图片，使用<form>标签来创建表单等。

[0167] 创建一个与HTML文件对应的CSS样式文件，该文件将用于对HTML文件中的框架和内容信息进行渲染修饰。在CSS文件中编写选择器、属性和值，以定义页面中各个元素的样式。例如，使用类选择器(.classname)或ID选择器(#idname)来选中特定的元素，并为其设置颜色、字体、边距、边框等样式属性。通过CSS的层叠性和继承性，实现页面样式的统一和协调。

[0168] 创建一个JavaScript脚本文件，该文件将用于实现与UI设计需求对应的功能处理逻辑。在JavaScript文件中编写函数、事件监听器和DOM操作等代码，以实现页面的交互效果、表单验证、数据请求等功能。定义部件选择器的简写引入名称，如"tb-video-widget”用于标识视频播放器部件，方便在JavaScript代码中快速引用和操作该部件。在HTML文件中通过<script>标签正确引入JavaScript脚本文件，并设置其引入路径。同时，在需要的地方通过JavaScript代码动态加载或操作CSS样式文件。

[0169] 上述技术方案的效果为：通过使用预设的HTML标签、CSS样式和JavaScript函数库，可以快速构建出符合UI设计需求的页面。部件选择器的简写引入名称和正确的文件引入路径，简化了代码编写和调试过程。CSS样式文件的统一管理和应用，确保了页面中各个元素的样式一致性和协调性。通过CSS的层叠性和继承性，可以方便地实现页面样式的统一修改和更新。精确的HTML结构和CSS样式设计，使得页面布局合理、美观且易于使用。丰富的JavaScript交互效果和功能处理逻辑，提升了页面的互动性和用户体验。清晰的HTML、CSS和JavaScript文件结构，使得团队成员可以方便地分工合作和共享代码。通过版本控制系统(如Git)对代码进行版本管理，可以方便地追踪和记录代码的修改历史，便于后续的维护和更新。

[0170] 综上所述，该技术方案通过提取UI设计需求、创建并编辑HTML、CSS和JavaScript文件等步骤，实现了根据UI设计需求创建对应前端项目文件的目标。其工作原理基于前端开发的基础知识和技术规范，技术效果则体现在提高开发效率、保证页面风格一致、提升用户体验以及便于团队协作和维护等方面。

[0171] 本发明的一个实施例，所述部署模块包括：

[0172] 项目编译模块，用于针对UI设计需求进行项目编译，获取编译后的资源文件；

[0173] 上传模块，用于将所述编译后的资源文件整合为一个或多个打包文件，并将所述一个或多个打包文件上传至服务器进行配置部署和启动；

[0174] 发布控制模块，用于对完成配置部署的打包文件进行对外发布。

[0175] 上述技术方案的工作原理为：在完成UI设计需求的框架和内容信息以及引入路径的编写后，使用前端构建工具(如Webpack、Gulp等)对项目进行编译。编译过程包括将HTML、CSS、JavaScript等源文件转换为浏览器可以识别的格式，并进行代码优化(如压缩、合并、混淆等)以提高加载速度和性能。编译过程中还会处理资源文件的引用路径，确保它们在打包后的文件中能够正确加载。编译完成后，将生成的资源文件(如压缩后的CSS、JavaScript文件，以及图片、字体等静态资源)整合为一个或多个打包文件。打包文件可以是单个文件(如将所有资源打包成一个.js或.css文件)，也可以是多个文件(如根据页面或功能模块进行拆分)。将打包文件上传至服务器，通常是通过FTP、SFTP等文件传输协议，或者使用云服务提供商提供的上传工具。在服务器上配置项目的运行环境，包括设置Web服务器(如Nginx、Apache)、数据库连接等。启动服务器上的项目，使其能够对外提供服务。完成配置部署后，通过域名解析、CDN加速等方式将项目对外发布。用户可以通过浏览器访问项目的URL地址，查看和使用项目提供的功能和服务。

[0176] 上述技术方案的效果为：通过编译和打包过程，对代码进行优化和压缩，减少了资源文件的体积和加载时间。打包文件的合理拆分和加载策略，提高了页面的响应速度和用户体验。将编译后的资源文件整合为打包文件，简化了部署过程，减少了手动上传和配置的工作量。自动化构建和部署工具的使用(如CI / CD流水线)，进一步提高了部署效率和可靠性。清晰的打包文件结构和代码组织方式，使得项目的维护和管理更加便捷。便于后续的功能扩展和代码更新，降低了维护成本。编译和打包过程可以对代码进行混淆和加密处理，提高了代码的安全性。通过配置Web服务器的安全设置(如HTTPS、防火墙等)，进一步保护了项目的安全。

[0177] 综上所述，该技术方案通过项目编译、资源打包与上传以及对外发布等步骤，实现了项目的快速部署和上线。其工作原理基于前端构建工具和服务器配置管理的知识，技术效果则体现在提高项目性能、简化部署流程、增强项目可维护性以及提升安全性等方面。

[0178] 本发明的一个实施例，上传模块运行包括当所述打包文件为多个时，实时监测打包文件的上传运行质量，包括：

[0179] 当所述打包文件为多个时，采集每个打包文件上传对应的上传时长；

[0180] 利用所述每个打包文件上传对应的上传时长获取上传时长系数；

[0181] 其中，所述上传时长系数通过如下公式获取：

[0182]

[0183] 其中，S表示上传时长系数；n表示已完成上传的打包文件的个数；Ti表示第i个已完成上传的打包文件的上传时长；Ci表示第i个已完成上传的打包文件的数据量；Tbi表示第i个已完成上传的打包文件对应的上传时长标准差；Cbi表示第i个已完成上传的打包文件对应的数据量标准差；Tmax和Tmin表示n个已完成上传的打包文件的上传时长最大值和最小值；Tb表示n个已完成上传的打包文件对应的上传时长标准差；Tfp表示n个已完成上传的打包文件中每相邻两个上传文件之间的上传时长变化幅度平均值；

[0184] 将所述上传时长系数与预设的时长系数阈值进行比较；

[0185] 当所述上传时长系数低于预设的时长系数阈值时，则调取打包文件上传的数据传输速率；

[0186] 利用所述打包文件上传的数据传输速率结合上传时长系数获取传输速率系数；

[0187] 其中，所述传输速率系数通过如下公式获取：

[0188]

[0189] 其中，K表示传输速率系数；Si表示第i个已完成上传的打包文件对应的上传时长系数；Vsi表示第i个已完成上传的打包文件对应的起始上传时刻的数据传输速率；Vwi表示第i个第i个已完成上传的打包文件对应的上传完成时刻的数据传输速率；Vbi表示第i个已完成上传的打包文件对应的数据传输速率标准差；Sb表示n个已完成上传的打包文件对应的上传时长系数标准差；Vb表示n个已完成上传的打包文件对应的数据传输速率标准差；Vp表示n个已完成上传的打包文件对应的数据传输速率平均值；Vz表示n个已完成上传的打包文件对应的数据传输速率中间值；

[0190] 将所述传输速率系数与预设的速率系数阈值进行比较；

[0191] 当所述传输速率系数低于预设的速率系数阈值时，则判定打包文件上传存在上传异常，并进行上传异常报警。

[0192] 上述技术方案的工作原理为：当打包文件为多个时，首先采集每个打包文件上传对应的上传时长(Ti)。利用采集到的上传时长(Ti)、每个打包文件的数据量(Ci)、上传时长标准差(Tbi和数据量标准差Cbi)、上传时长的最大值(Tmax)和最小值(Tmin)、所有打包文件的上传时长标准差(Tb)以及每相邻两个上传文件之间的上传时长变化幅度平均值(Tfp)，通过特定公式计算出上传时长系数(S)。将计算出的上传时长系数(S)与预设的时长系数阈值进行比较。如果上传时长系数低于预设的时长系数阈值，则调取打包文件上传的数据传输速率(Vsi和Vwi，分别表示起始上传时刻和上传完成时刻的数据传输速率)。利用调取到的数据传输速率(Vsi和Vwi)、传输速率标准差(Vbi)、传输速率平均值(Vp)、传输速率中间值(Vz)以及上传时长系数标准差(Sb)，通过特定公式计算出传输速率系数(K)。将计算出的传输速率系数(K)与预设的速率系数阈值进行比较。如果传输速率系数低于预设的速率系数阈值，则判定打包文件上传存在上传异常，并进行上传异常报警。

[0193] 上述技术方案的效果为：通过实时监测打包文件的上传时长和数据传输速率，能够及时发现上传过程中的异常情况，并通过报警机制提醒相关人员进行处理。通过计算上传时长系数和传输速率系数，能够更精确地评估打包文件的上传质量，避免单一指标带来的误判。根据监测和评估结果，可以调整上传策略，如优化网络带宽、改进文件打包方式等，以提高上传效率和质量。通过确保打包文件的快速、稳定上传，能够提升用户的使用体验，避免因上传问题导致的不便和损失。该技术方案适用于多个打包文件的上传监测，能够处理大数据量的传输场景，满足大型项目或应用的部署需求。

[0194] 综上所述，该技术方案通过实时监测打包文件的上传时长和数据传输速率，并计算相关系数进行精确评估，能够及时发现并处理上传过程中的异常情况，从而优化上传策略、提升用户体验和支持大数据量传输。

[0195] 本发明的一个实施例，所述部件包形成模块，包括：

[0196] 部件类型提取模块，用于访问部件库，在所述部件库中提取与所述UI设计需求对应的部件类型；

[0197] HTML静态部件生成模块，用于在每种部件类型中筛选与所述UI设计需求对应的静态部件，整合生成HTML静态部件；

[0198] 部件包生成执行模块，用于在HTML选项中引入创建的HTML静态部件形成部件包。

[0199] 上述技术方案的工作原理为：首先，系统或开发人员需要访问一个预先建立的部件库。这个部件库包含了多种类型的HTML静态部件，这些部件可能是预先设计好的、可复用的HTML代码片段，用于实现特定的UI功能或展示效果。在访问部件库时，系统或开发人员会根据当前的UI设计需求，从部件库中筛选出与需求相匹配的部件类型。这些部件类型可能包括按钮、表单、图片、视频播放器等。在确定了部件类型后，系统或开发人员会进一步在每种部件类型中筛选与UI设计需求对应的静态部件。这个筛选过程可能基于部件的样式、功能、大小等多个因素。筛选完成后，系统或开发人员会将这些静态部件整合在一起，生成一个或多个HTML静态部件。这些部件可能已经包含了必要的HTML、CSS和JavaScript代码，以实现特定的UI效果和功能。最后，系统或开发人员会在HTML选项中引入这些创建的HTML静态部件。这个过程可能涉及将静态部件的代码片段插入到HTML文档的适当位置，或者通过某种机制(如JavaScript动态加载)在运行时将这些部件添加到HTML文档中。通过这个过程，一个或多个HTML静态部件被整合到了一起，形成了一个部件包。这个部件包可以作为一个整体被重用，以满足不同的UI设计需求。

[0200] 上述技术方案的效果为：通过使用预定义的HTML静态部件，开发人员可以更快地构建出符合UI设计需求的网页。这减少了从头开始编写HTML、CSS和JavaScript代码的时间，从而提高了开发效率。将HTML静态部件封装成可复用的代码片段，使得代码更加模块化和清晰。这有助于开发人员更容易地理解和维护代码，降低了代码出错的概率。团队成员可以共享和使用相同的HTML静态部件库，从而促进了团队协作和代码复用。这有助于保持代码风格的一致性，并减少因重复编码而产生的错误。由于HTML静态部件是可复用的，因此当UI设计需求发生变化时，开发人员可以快速地替换或更新部件，而无需对整个网页进行重写。这支持了快速迭代和部署，使得网页能够更快地适应市场需求。

[0201] 综上所述，该技术方案通过引入HTML静态部件形成部件包的方式，提高了开发效率、增强了代码的可维护性、促进了团队协作并支持了快速迭代和部署。

[0202] 显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。< / script> < / form>

Claims

1. A front-end application interface development method based on a component library, characterized in that: The front-end application interface development method based on the component library includes: Create a framework and content information and an introduction path according to the UI design requirements; After the framework and content information of the UI design requirements and the import path are compiled, the project is compiled, packaged, deployed and put online; Import the created HTML static components into the HTML option to form a component package.

2. The front-end application interface development method based on component library according to claim 1 is characterized in that: Create the framework and content information and introduction path according to the UI design requirements, including: Extract UI design requirements; According to the UI design requirements, create an .HTML file in the front-end project, and edit the framework and content information corresponding to the UI design requirements; Creating a CSS style file corresponding to the HTML template, rendering and modifying the frame and content information, and obtaining the rendered and modified frame and content information; Create a JavaScript script file to implement the processing logic of the functions corresponding to the UI design requirements, and define the abbreviated import name of the component selector, and the correct import path of the HTML template and CSS style file.

3. The front-end application interface development method based on component library according to claim 1 is characterized in that: After the framework and content information of the UI design requirements and the import path are compiled, the project compilation, packaging, deployment and release include: Compile the project according to UI design requirements and obtain the compiled resource files; Integrate the compiled resource files into one or more package files, and upload the one or more package files to the server for configuration, deployment and startup; Publish the packaged files that have completed configuration and deployment.

4. The front-end application interface development method based on component library according to claim 3 is characterized in that: When there are multiple packaged files, real-time monitoring of the upload quality of the packaged files includes: When there are multiple packaged files, collect the upload time corresponding to each packaged file upload; Obtaining an upload duration coefficient using the upload duration corresponding to each package file upload; The upload duration coefficient is obtained by the following formula: Among them, S represents the upload time coefficient; n represents the number of packaged files that have been uploaded; T i Indicates the upload time of the i-th package file that has been uploaded; C i Indicates the data size of the ith package file that has been uploaded; T bi represents the standard deviation of the upload time corresponding to the i-th uploaded package file; C bi represents the standard deviation of the data volume corresponding to the i-th uploaded package file; T max and T min Indicates the maximum and minimum upload duration of n packaged files that have been uploaded; T b T represents the standard deviation of the upload time corresponding to n uploaded packaged files; fp Indicates the average value of the change in upload time between each two adjacent uploaded files in n uploaded package files; Comparing the upload duration coefficient with a preset duration coefficient threshold; When the upload duration coefficient is lower than a preset duration coefficient threshold, the data transmission rate of the packaged file upload is retrieved; The transmission rate coefficient is obtained by combining the data transmission rate of the packaged file upload with the upload duration coefficient; The transmission rate coefficient is obtained by the following formula: Where K represents the transmission rate coefficient; S i V represents the upload duration coefficient corresponding to the i-th uploaded package file; si V represents the data transmission rate at the start upload time corresponding to the i-th uploaded package file; wi V represents the data transmission rate at the time of completion of uploading corresponding to the ith uploaded package file; bi represents the standard deviation of the data transmission rate corresponding to the i-th uploaded package file; S b V represents the standard deviation of the upload duration coefficient corresponding to n uploaded packaged files; b V represents the standard deviation of the data transmission rate corresponding to n uploaded packaged files; p V represents the average data transmission rate corresponding to n uploaded packaged files; z Indicates the median data transmission rate corresponding to n packaged files that have been uploaded; comparing the transmission rate coefficient with a preset rate coefficient threshold; When the transmission rate coefficient is lower than a preset rate coefficient threshold, it is determined that there is an upload anomaly in the package file upload, and an upload anomaly alarm is issued.

5. The front-end application interface development method based on component library according to claim 1 is characterized in that: Import the created HTML static components in the HTML option to form a component package, including: Access a component library, and extract a component type corresponding to the UI design requirement from the component library; Select static components corresponding to the UI design requirements in each component type, and integrate them to generate HTML static components; Import the HTML static components created in the HTML option to form a component package.

6. A front-end application interface development system based on component library, characterized in that: The front-end application interface development system based on the component library includes: A path creation module, used to create a framework and content information and an introduction path according to UI design requirements; The deployment module is used to compile, package and deploy the project after the framework and content information of the UI design requirements and the import path are compiled; The component package forming module is used to introduce the created HTML static components into the HTML options to form a component package.

7. The front-end application interface development system based on component library according to claim 6 is characterized in that: The path creation module includes: Requirements extraction module, used to extract UI design requirements; An editing control module, used to create an .HTML file in the front-end project according to the UI design requirements, and edit the framework and content information corresponding to the UI design requirements; A style file creation module is used to create a CSS style file corresponding to the HTML template, render and modify the frame and content information, and obtain the rendered and modified frame and content information; The processing logic creation module is used to create a JavaScript script file to implement the processing logic of the functions corresponding to the UI design requirements, and define the abbreviated import name of the component selector, and the correct import path of the HTML template and CSS style file.

8. The front-end application interface development system based on component library according to claim 6 is characterized in that: The deployment module includes: Project compilation module, used to compile projects according to UI design requirements and obtain compiled resource files; An upload module, used to integrate the compiled resource files into one or more package files, and upload the one or more package files to a server for configuration, deployment and startup; The release control module is used to release the packaged files that have completed the configuration deployment.

9. The front-end application interface development system based on component library according to claim 8 is characterized in that: The operation of the upload module includes real-time monitoring of the upload operation quality of the packaged files when there are multiple packaged files, including: When there are multiple packaged files, collect the upload time corresponding to each packaged file upload; Obtaining an upload duration coefficient using the upload duration corresponding to each package file upload; The upload duration coefficient is obtained by the following formula: Among them, S represents the upload time coefficient; n represents the number of packaged files that have been uploaded; T i Indicates the upload time of the i-th package file that has been uploaded; C i Indicates the data size of the ith package file that has been uploaded; T bi represents the standard deviation of the upload time corresponding to the i-th uploaded package file; C bi represents the standard deviation of the data volume corresponding to the i-th uploaded package file; T max and T min Indicates the maximum and minimum upload duration of n packaged files that have been uploaded; T b T represents the standard deviation of the upload time corresponding to n uploaded packaged files; fp It indicates the average value of the change in upload time between two adjacent uploaded files in n uploaded package files; Comparing the upload duration coefficient with a preset duration coefficient threshold; When the upload duration coefficient is lower than a preset duration coefficient threshold, the data transmission rate of the packaged file upload is retrieved; The transmission rate coefficient is obtained by combining the data transmission rate of the packaged file upload with the upload duration coefficient; The transmission rate coefficient is obtained by the following formula: Where K represents the transmission rate coefficient; S i V represents the upload duration coefficient corresponding to the i-th uploaded package file; si V represents the data transmission rate at the start upload time corresponding to the i-th uploaded package file; wi V represents the data transmission rate at the time of completion of uploading corresponding to the ith uploaded package file; bi represents the standard deviation of the data transmission rate corresponding to the i-th uploaded package file; S b V represents the standard deviation of the upload duration coefficient corresponding to n uploaded packaged files; b V represents the standard deviation of the data transmission rate corresponding to n uploaded packaged files; p V represents the average data transmission rate corresponding to n uploaded packaged files; z Indicates the median data transmission rate corresponding to n packaged files that have been uploaded; comparing the transmission rate coefficient with a preset rate coefficient threshold; When the transmission rate coefficient is lower than a preset rate coefficient threshold, it is determined that there is an upload anomaly in the package file upload, and an upload anomaly alarm is issued.

10. The front-end application interface development system based on component library according to claim 6, characterized in that: The component package forming module includes: A component type extraction module, used for accessing a component library and extracting a component type corresponding to the UI design requirement from the component library; An HTML static component generation module is used to select static components corresponding to the UI design requirements in each component type, and integrate and generate HTML static components; The component package generation execution module is used to introduce the created HTML static components into the HTML options to form a component package.

Images