Front-end component calling method, electronic equipment and storage medium

Abstract

The invention provides a front-end component calling method, electronic equipment and a storage medium, and relates to the technical field of business system development. The front-end component calling method is applied to a data system composed of a plurality of middle and background management systems, front-end component libraries corresponding to the middle and background management systems are preset, and the method comprises the steps that service scene information is received, and a scene type corresponding to the service scene information is determined; and analyzing the type of the front-end component corresponding to the scene type, searching the category of the front-end component corresponding to the scene type in a front-end component library, and calling the front-end component to a background management system according to the category of the front-end component. According to the front-end component calling method provided by the invention, efficient and overall calling of the front-end component is realized on an integrated platform of the front-end component.

Description

[0001] This application claims priority based on the invention patent application filed with the China National Intellectual Property Administration on December 29, 2023, with the application number 202311867056.2 and the invention title "Front-end Component Invocation Method and Electronic Device". Technical Field

[0002] This application relates to the technical field of business system development, and particularly relates to a front-end component invocation method, an electronic device, and a storage medium. Background Art

[0003] The electric vehicle battery swapping technology refers to the technology of removing the depleted or exhausted power battery of a new energy vehicle from the vehicle body and replacing it with a brand-new power battery. The battery swapping technology can significantly improve the efficiency of power replenishment, extend the service life of the battery, and eliminate the range anxiety. In recent years, the construction of electric vehicle charging infrastructure in China has made great progress.

[0004] With the rapid development of the battery swapping business, the corresponding business scenarios of the battery swapping technology have gradually become diversified. For example: the first is the commercial vehicle battery swapping station, which is suitable for heavy-duty electric commercial vehicles in fully enclosed or semi-enclosed areas with relatively fixed routes; the second is the centralized battery swapping station, which mainly serves electric taxis and has low requirements for the number of service points and usually does not involve special occasions such as highways; the third is the battery swapping service for private pure electric passenger cars. Due to the randomness of the driving trajectories of private cars, this type of service has extremely high requirements for the number of service points and must cover various occasions such as urban areas and highways. In each type of battery swapping business scenario, there are also many corresponding sub-business scenarios.

[0005] Among them, in some cases, the business scenarios corresponding to several ongoing middle and back-end management systems are similar, but each maintains a set of components independently, and the front-end components maintained by each middle and back-end management system have different styles, performances, and qualities, which easily causes problems such as inconsistent front-end components called by each middle and back-end management system and low call efficiency. Summary of the Invention

[0006] To solve at least one aspect of the technical problems in the background art, this application provides a front-end component invocation method to achieve efficient and overall coordinated invocation of front-end components on the integrated platform of front-end components.

[0007] The second aspect of this application provides an electronic device.

[0008] The third aspect of this application provides a storage medium.

[0009] The technical solution adopted by this application is as follows:

[0010] An embodiment of the first aspect of the present application provides a method for calling front-end components, which is characterized in that a front-end component library corresponding to multiple mid-back office management systems is preset, and the method for calling front-end components includes:

[0011] Receive business scenario information and determine the scenario type corresponding to the business scenario information;

[0012] Analyze the front-end component types corresponding to the scenario type, search for the categories of front-end components in the front-end component library corresponding to the scenario type, and call the front-end components to the mid-back office management system according to the categories of the front-end components.

[0013] According to the method for calling front-end components provided by the embodiment of the first aspect of the present application, it is applied to a data system composed of multiple mid-back office management systems. Among them, a front-end component library corresponding to multiple mid-back office management systems is preset. This method can improve development efficiency and reduce repetitive workload. Specifically:

[0014] In the execution steps of the method for calling front-end components, first receive business scenario information and determine the scenario type corresponding to the business scenario information, so that the business scenario can be associated with the data system, and a starting point is given to the data system to confirm the specific requirement type of the current business scenario;

[0015] Then analyze the front-end component types corresponding to the scenario type, search for the categories of front-end components in the front-end component library corresponding to the scenario type. Among them, a rich collection of front-end components is integrated in the front-end component library, which can help developers quickly screen and provide corresponding front-end components. Therefore, when there are categories of front-end components in the front-end component library corresponding to the scenario type, the corresponding front-end components can be directly called to the mid-back office management system according to the categories of the front-end components. This method can more flexibly control the behavior of the front-end components, improve the readability and maintainability of the front-end components, and improve the calling efficiency of the front-end components.

[0016] In summary, the method for calling front-end components provided by the embodiment of the first aspect of the present application can realize the efficient and overall calling of front-end components on the integrated platform of front-end components, improve the development and management efficiency of mid-back office management systems, and reduce the development and management costs.

[0017] The technical solution provided by the present application further includes the following additional technical features:

[0018] According to an embodiment of the present application, presetting a front-end component library corresponding to multiple mid-back office management systems specifically means:

[0019] Establish a set of categories of front-end components corresponding to the multiple mid-back office management systems;

[0020] Establish a data hosting architecture in the front - end component library;

[0021] Package and upload the category set to the data hosting architecture through a package management tool;

[0022] Host the category set of the front - end components through the data hosting architecture.

[0023] Establishing a category set of front - end components is equivalent to establishing a resource database for front - end components of various styles, facilitating integrated management and storage. Using a data hosting architecture to host the category set of front - end components can help enterprises reduce data storage and management costs, and improve data processing efficiency and security.

[0024] According to an embodiment of the present application, in the data hosting architecture, the category set of the front - end components includes at least one of a file preview component, a file list component, a text function component, and an associated vehicle model information component;

[0025] The data hosting architecture further includes at least one of an enterprise - side private component storage system, a third - party hosted component storage system, and an open public component storage system.

[0026] By centrally managing different types of front - end components (such as file preview components, file list components, text function list components, and associated vehicle model information components, etc.) in one or more category sets, it can ensure that unified - standard components are used in each mid - back - end management system. This not only improves the stability and reliability of the system, but also reduces problems caused by different systems using different versions or components with inconsistent styles.

[0027] The data hosting architecture supports multiple storage methods (enterprise private, third - party hosted, and open public), which means that the most suitable storage solution can be selected according to specific requirements. For example, components related to sensitive data can be stored in a secure environment within the enterprise, while general - purpose components can choose a more convenient third - party hosting service, ensuring both security and cost - effectiveness.

[0028] According to an embodiment of the present application, call the front - end components to the mid - back - end management system according to the categories of the front - end components. Specifically:

[0029] Call the NPM module from the package management tool;

[0030] Find the path of the category of the front - end components in the data hosting architecture through the NPM module;

[0031] Download the front - end components from the path through the NPM module and distribute them to the mid - back - end management system.

[0032] NPM, whose full name is Node Package Manager, is the package manager of Node.js. NPM modules can quickly find the paths of front-end component categories in the data hosting architecture, and efficiently download front-end components from the current path and distribute them to the middle and back-end management systems, greatly improving the call efficiency and accuracy of front-end components and helping developers improve development efficiency.

[0033] In addition, NPM modules can also be shared by multiple middle and back-end management systems, thereby improving the reusability of the front-end components being called currently. NPM modules can also better organize and manage front-end components, improving the maintainability of front-end components.

[0034] According to an embodiment of the present application, downloading the front-end components from the path through the NPM module and distributing them to the middle and back-end management systems specifically includes:

[0035] Obtaining the configuration parameters of all front-end components in the front-end component library;

[0036] Based on the configuration parameters, distributing each of the front-end components to the corresponding middle and back-end management systems respectively.

[0037] The above steps are aimed at realizing the global loading of front-end components. First, obtain the configuration parameters of all front-end components in the front-end component library. These configuration parameters usually include information such as the name, version, dependencies, and entry files of front-end components. Then, based on the configuration parameters, distribute each front-end component to the corresponding middle and back-end management systems respectively. During the distribution process, tools or APIs in the front-end component library can be applied to achieve this.

[0038] The advantage of global loading of front-end components is that the globally loaded front-end components can be accessed from any template in the middle and back-end management systems. The globally loaded front-end components can be called one-to-one to the corresponding middle and back-end management systems, reducing the error rate during the call of front-end components.

[0039] According to an embodiment of the present application, downloading the front-end components from the path through the NPM module and distributing them to the middle and back-end management systems specifically includes:

[0040] Determining the types and quantities of front-end components to be called;

[0041] Asynchronously loading the front-end components into the middle and back-end management systems.

[0042] The above steps are aimed at achieving the on-demand loading of front-end components. First, determine the types and quantities of the front-end components to be called, which need to be determined according to the specific business scenario requirements. There are many types of front-end components. For example, there are UI components, business components, data components, etc. When determining the quantity of the front-end components to be called, factors such as the scale, performance requirements, and development time of the mid-backend management system need to be considered. Then, asynchronously load the front-end components into the mid-backend management system. Asynchronous loading of front-end components means that the front-end components will be loaded into the corresponding pages of the mid-backend management system only when they are needed, thereby improving the page loading speed and performance.

[0043] According to an embodiment of the present application, determining the scenario type corresponding to the business scenario information specifically includes:

[0044] Search in the business scenario processing database to find out whether there is processing record information corresponding to the business scenario information;

[0045] If there is processing record information corresponding to the business scenario information in the business scenario processing database, determine that the business scenario type is the original business scenario;

[0046] If there is no processing record information corresponding to the business scenario information in the business scenario processing database, determine that the business scenario type is a new business scenario.

[0047] In the above search process, the specific query statement needs to be determined according to the business scenario information and the business scenario processing database structure. Further, the SELECT statement can be used to query whether there is processing record information of the information to be searched in the processing record table. The SELECT statement is a statement in SQL (Structured Query Language) used to select data from a database table. If it exists, all information of the processing record will be returned, that is, it is determined that the current business scenario is the original business scenario. If it does not exist, no result will be returned, that is, it is determined that the current business scenario is a new business scenario.

[0048] By adopting the method of searching the business scenario processing database to determine the business scenario type, the efficiency can be improved, the required information can be quickly obtained, without the need for manual inspection of each record, and at the same time, the search errors can be reduced and the accuracy can be improved. In addition, if there are processing records in the business scenario processing database, we can view historical data to understand the past business processing situations, so as to provide experience support for developers.

[0049] According to an embodiment of the present application, the method further includes:

[0050] Obtain the category update parameters of the front-end component, and determine the category update status information of the front-end component by comparing with the original category parameters of the front-end component;

[0051] Based on the category update status information of the front-end component, call the updated category of the front-end component into the middle and back-end management system; or, generate an update prompt message and send the update prompt message to the middle and back-end management system.

[0052] Based on the above steps, the front-end component calling method provided by the embodiments of the present application can also implement the update call of the front-end component. Specifically, combining the above steps, first, we need to obtain the category update parameters of the front-end component from the backend or other data sources. Then, we need to obtain the original category parameters of the front-end component, which can usually be completed by accessing the properties or states of the front-end component. With the category update parameters and the original category parameters, we can perform a comparison, which usually involves some comparison operations, such as checking whether the two parameters are equal. According to the comparison result, we can determine the category update status information of the front-end component. For example, if the category update parameter and the original category parameter are the same, then we can consider that the category has not been updated; if they are different, then we can consider that the category has been updated.

[0053] When it is determined that the category has been updated, the front-end component code can be automatically downloaded and updated, or a corresponding update prompt message can be given for the developer to decide whether to download and update. Additionally, if the forced update method is used, the front-end components in the front-end component library can be updated to each middle and back-end management system in a timely manner, improving the update call efficiency of the front-end components.

[0054] According to an embodiment of the present application, based on the category update status information of the front-end component, calling the updated category of the front-end component into the middle and back-end management system; or, generating an update prompt message and sending the update prompt message to the middle and back-end management system, specifically:

[0055] Establish a webpack plugin in the front-end component library;

[0056] Apply the webpack plugin to directly call the updated category of the front-end component into the middle and back-end management system, or apply the webpack plugin to generate an update prompt message and send the update prompt message to the middle and back-end management system.

[0057] Webpack is a module bundler. Its main goal is to bundle JavaScript files together for use in the browser, but it is also capable of transforming, bundling, or packaging any resource or asset.

[0058] Applying Webpack plugins can modularize front-end components, making the code more structured and easier to manage. Through Webpack plugins, some common tasks can be automated, such as compressing code, converting ES6 to ES5, etc. Among them, ES5, whose full name is ECMAScript 5.1 and is also known as ECMAScript 2009, is an important generation standard of the JavaScript language; ES6, whose full name is ECMAScript 6.0 and is also known as ECMAScript 2015, is the next-generation standard of the JavaScript language. Webpack plugins can also optimize front-end performance, such as reducing the first-screen loading time through code splitting and improving development efficiency.

[0059] According to an embodiment of the present application, a front-end component library corresponding to multiple middle and back-office management systems is preset, specifically:

[0060] The front-end component library is embedded and connected in the multiple middle and back-office management systems; or,

[0061] Custom components are built in the multiple middle and back-office management systems by utilizing the APIs and ecosystem provided by the front-end component library.

[0062] When the front-end component library is embedded and connected in multiple middle and back-office management systems, the front-end components in the front-end component library can be reused in multiple middle and back-office management systems, greatly improving development efficiency; using the same set of front-end component libraries in multiple middle and back-office management systems can ensure consistent user experiences among different systems. At the same time, the update and maintenance of the front-end component library can be synchronized to all middle and back-office management systems using the front-end component library, reducing maintenance costs.

[0063] API, whose full name is Application Programming Interface, is the English abbreviation for Application Programming Interface. It is a software interface that provides services for other software. Building custom components in multiple middle and back-office management systems by utilizing the APIs and ecosystem provided by the front-end component library has high flexibility. Most front-end component libraries provide rich APIs and ecosystems, allowing developers to customize the behavior of front-end components according to their needs. By using and customizing front-end components, developers can learn the API design concepts of front-end components, thereby improving their design thinking.

[0064] According to an embodiment of the present application, if there is no category of front-end components corresponding to the scenario type in the front-end component library, after the generated target front-end component is called to the middle-backend management system, a category of the target front-end component is newly created in the front-end component library so that the target front-end component is stored in the category of the target front-end component.

[0065] When there is no category of front-end components corresponding to the scenario type in the front-end component library, after the generated target front-end component is called to the middle-backend management system, a category of the target front-end component is newly created in the front-end component library so that the target front-end component is stored in the category of the target front-end component. This method can improve the reusability of front-end components, reduce the repetitive workload of front-end components, lower the development cost, and improve the development efficiency.

[0066] An embodiment of the second aspect of the present application provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the front-end component calling method in any of the above-mentioned first aspect embodiments.

[0067] An embodiment of the third aspect of the present application provides a non-volatile computer storage medium storing computer-executable instructions, which can implement the front-end component calling method in any of the above-mentioned first aspect embodiments when executed by a computer.

[0068] Due to the above technical solutions, the beneficial effects obtained by the present application are:

[0069] The front-end component calling method provided by the embodiment of the first aspect of the present application is applied to a data system composed of multiple middle-backend management systems. Among them, a front-end component library corresponding to multiple middle-backend management systems is preset. This method can improve the development efficiency and reduce the repetitive workload. Specifically:

[0070] In the execution steps of the front-end component calling method, first, business scenario information is received, and the scenario type corresponding to the business scenario information is determined. In this way, the business scenario can be associated with the data system, and a starting point is given to the data system to confirm the specific requirement type of the current business scenario;

[0071] Then, analyze the front-end component types corresponding to the scenario types, and search for the categories of front-end components in the front-end component library that correspond to the scenario types. Among them, the front-end component library integrates a rich variety of front-end components, which can help developers quickly filter and provide corresponding front-end components. Therefore, when there are categories of front-end components in the front-end component library that correspond to the scenario types, the corresponding front-end components can be directly called into the middle and back-end management system according to the categories of the front-end components. This method can more flexibly control the behavior of the front-end components, improve the readability and maintainability of the front-end components, and improve the calling efficiency of the front-end components.

[0072] In summary, the front-end component calling method provided in the first aspect embodiment of this application can achieve efficient and coordinated calling of front-end components on the integrated platform of front-end components, improve the development and management efficiency of the middle and back-end management system, and reduce the development and management costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0073] The drawings described herein are used to provide a further understanding of this application, and constitute a part of this application. The illustrative embodiments of this application and their descriptions are used to explain this application, and do not constitute an improper limitation to this application. In the drawings:

[0074] Figure 1 is a schematic flowchart of the front-end component calling method provided in the embodiment of this application;

[0075] Figure 2 is a schematic structural diagram of the electronic device provided in the embodiment of this application.

[0076] Reference numerals:

[0077] 810, processor; 820, communication interface; 830, memory; 840, communication bus. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0078] In order to more clearly illustrate the overall concept of this application, the following will be described in detail by way of examples in conjunction with the accompanying drawings of the specification.

[0079] In the following description, many specific details are set forth in order to fully understand this application. However, this application can also be implemented in other ways different from those described herein. Therefore, the protection scope of this application is not limited by the specific embodiments disclosed below. It should be noted that, without conflict, the embodiments of this application and the features in each embodiment can be combined with each other.

[0080] As Figure 1 shown, the first aspect embodiment of this application provides a front-end component calling method, which is applied to a data system composed of multiple middle and back-end management systems. Among them, a front-end component library corresponding to multiple middle and back-end management systems is preset, and the front-end component calling method includes:

[0081] Step 100: Receive business scenario information and determine the scenario type corresponding to the business scenario information.

[0082] In step 100, the application of front-end components in the business scenario is to achieve function reuse and code modularization. A front-end component is defined as a system or functional module that can run independently to build an enterprise. Generally speaking, a front-end component is a collection of a group of closely related work items that need to be completed to achieve a specific goal. The role of front-end components is to build an enterprise business capability network from the perspective of professional division of labor by componentizing enterprise functions, so as to achieve the specialization and flexibility of the enterprise. Among them, the five elements of front-end components include five elements: goal / usage, activity, resource, governance, and service.

[0083] Step 200: Analyze the front-end component type corresponding to the scenario type, search for the category of front-end components in the front-end component library corresponding to the scenario type, and call the front-end components into the middle and back-end management system according to the category of front-end components.

[0084] In step 200, front-end components are code blocks used to implement specific functions or interfaces, and they can be reused and combined to create complex user interfaces. The implementation of front-end components usually needs to consider their use in different scenarios. For example, the storage of states, data mapping, templates, and expressions, etc. In the front-end component library, there are usually various types of front-end components for developers to choose and use. For example, ElementUI, Ant-design, vant, etc. are all commonly used open-source component libraries. Among them, ElementUI is a desktop component library based on Vue2.0 prepared for developers, designers, and product managers; AntDesign is an enterprise-level UI design language and a component library based on React. It provides a set of high-quality React components and is one of the commonly used React UI libraries in enterprise-level development; Vant is a lightweight and customizable mobile Vue component library.

[0085] When there is a category of front-end components in the front-end component library corresponding to the scenario type, the front-end components can be called into the middle and back-end management system according to the following steps: First, determine the component type of the front-end component, which can be specifically completed by viewing the documentation or examples of the front-end component library; then import the front-end component, which can be completed by adding an import statement in the code; the third step is to use the front-end component, and the label of the front-end component can be used in the template or rendering function; the fourth step is to configure the component. For example, configure parameters such as the style and behavior of the front-end component according to requirements. The fifth step is to test the behavior of the front-end component in the application to ensure that the behavior of the front-end component meets the expected value.

[0086] The front-end component calling method provided by the first aspect embodiment of the present application is applied to a data system composed of multiple mid-back office management systems. Among them, a front-end component library corresponding to multiple mid-back office management systems is preset. This method can improve development efficiency and reduce repetitive workload. Specifically:

[0087] In the execution steps of the front-end component calling method, first, receive business scenario information and determine the scenario type corresponding to the business scenario information. In this way, the business scenario can be associated with the data system, and the data system is given a starting point to confirm the specific requirement type of the current business scenario;

[0088] Then, analyze the front-end component type corresponding to the scenario type and find the category of the front-end component corresponding to the scenario type in the front-end component library. Among them, a rich set of front-end components is integrated in the front-end component library, which can help developers quickly screen and provide corresponding front-end components. Therefore, when there is a category of front-end components corresponding to the scenario type in the front-end component library, the corresponding front-end components can be directly called into the mid-back office management system according to the category of the front-end components. This method can more flexibly control the behavior of the front-end components, improve the readability and maintainability of the front-end components, and improve the calling efficiency of the front-end components.

[0089] In summary, the front-end component calling method provided by the first aspect embodiment of the present application can realize the efficient and overall calling of front-end components on the integrated platform of front-end components, improve the development and management efficiency of mid-back office management systems, and reduce the development and management costs.

[0090] In some embodiments of the present application, presetting a front-end component library corresponding to multiple mid-back office management systems specifically includes:

[0091] Step a: Establish a category set of front-end components corresponding to multiple mid-back office management systems.

[0092] Step b: Establish a data hosting architecture in the front-end component library.

[0093] Step c: Package and upload the category set to the data hosting architecture through a package management tool.

[0094] Step d: Host the category set through the data hosting architecture.

[0095] Specifically, establishing a category set for front-end components corresponding to multiple mid-back office management systems can help developers better manage and reuse front-end components. During the process of establishing the category set, it is necessary to determine which categories are needed in the front-end component library. In the front-end component library, each created category should have a clear and specific name so that other developers can understand its purpose. When adding a front-end component to the corresponding category, each front-end component should have a short description explaining its function and purpose. Further, as business requirements change, new categories need to be added or existing categories need to be updated. Therefore, the categories should be regularly checked to ensure that they still meet the business requirements.

[0096] Among them, the data hosting architecture refers to the methods and technologies for storing, managing, and accessing data in a specific environment. The data hosting architecture can include cloud hosting, database hosting, and data center hosting. Among them, cloud hosting uses cloud resources and the network of interconnected virtual and physical cloud servers to access applications and websites. The applications and solutions are deployed on the cloud network rather than on a single local server. Cloud hosting can support SQL (including MySQL) or NoSQL databases. Among them, SQL, the full name of which is Structured Query Language, is the English abbreviation of Structured Query Language. In the embodiments of the present application, SQL can be used to store, operate, and retrieve the front-end component data in the front-end component library; NoSQL, sometimes also referred to as "Not Only SQL", is a database design method that provides a mechanism for storing and retrieving data. NoSQL databases are usually used to store large-scale data.

[0097] Regarding database hosting: Database hosting is a special data hosting architecture that focuses on the storage and management of databases. There are fully managed relational databases, NoSQL databases, and in-memory databases for you to choose from, and they can be used across dedicated engines and open-source engines. The fully managed database will automate some tasks, such as cross-region configuration and management of high availability, disaster recovery, backup, and data replication, thus saving development time and costs.

[0098] Regarding data center hosting: Data center hosting is a data hosting architecture. In the network architecture of the data center, usually the TCP / IP protocol is used for data transmission on the uplink ports of the servers. The overall uplink network layer may include access layer switching, aggregation layer switching, core layer switching, routing, etc.

[0099] In summary, establishing a category set for front-end components is equivalent to establishing a resource database for various styles of front-end components, which is convenient for integrated management and storage. Adopting a data hosting architecture to host the category set of front-end components can help enterprises reduce data storage and management costs, and improve data processing efficiency and security.

[0100] In some embodiments of the present application, in the data hosting architecture, the category set of the front-end component includes at least one of a file preview component, a file list component, a text function component, and an associated vehicle model information component;

[0101] The data hosting architecture also includes at least one of an enterprise-side private component storage system, a third-party hosted component storage system, and an open public component storage system.

[0102] Specifically, by centrally managing different types of front-end components (such as file preview components, file list components, text function list components, and associated vehicle model information components, etc.) in one or more category sets, it is possible to ensure that all middle and back-end management systems use components of unified standards. This not only improves the stability and reliability of the system, but also reduces the problems caused by different systems using components of different versions or inconsistent styles.

[0103] The data hosting architecture supports multiple storage methods (enterprise private, third-party hosting, and open public), which means that the most suitable storage solution can be selected according to specific needs. For example, components related to sensitive data can be stored in a secure environment within the enterprise, while general components can choose a more convenient third-party hosting service, which ensures both security and cost-effectiveness.

[0104] Among them, the enterprise private component storage system refers to the company's internal Nexus warehouse, such as the aulton storage system; the third-party hosted component storage system can be the aulton-taobao storage system; the open public component storage system can be a public-oriented Web application developed by the open source project team.

[0105] In some embodiments of the present application, the front-end component is called to the middle and back-end management system according to the category of the front-end component, specifically:

[0106] Step 301: Call the NPM module from the package management tool.

[0107] Step 302: Use the NPM module to find the path of the category of the front-end component in the data hosting architecture.

[0108] Step 303: Download the front-end components from the path through the NPM module and distribute them to the middle and back-end management systems.

[0109] NPM, whose full name is Node Package Manager, is a package manager for Node.js and is used for the management of Node plugins, including installation, uninstallation, and dependency management. The NPM module provides a command-line tool that can be used to conveniently download, install, upgrade, and delete packages. The NPM module allows for the management of dependencies in a project. Further, the `npmlist` command can be used to view the category modules of all the front-end components installed in the project. Additionally, the NPM module can be used to publish newly developed modules for other developers to use. The NPM module can quickly find the paths of the category of front-end components in the data hosting architecture, efficiently download front-end components from the current path, and distribute them to the mid-backend management system, greatly improving the call efficiency and accuracy of front-end components and helping developers improve development efficiency.

[0110] In addition, the NPM module can also be shared by multiple mid-backend management systems, thereby improving the reusability of the front-end components currently being called. The NPM module can also better organize and manage front-end components, improving the maintainability of front-end components.

[0111] In some embodiments of the present application, downloading front-end components from a path via the NPM module and distributing them to the mid-backend management system specifically involves:

[0112] Step 303a: Obtain the configuration parameters of all front-end components in the front-end component library.

[0113] Step 303b: Based on the configuration parameters, distribute each front-end component to the corresponding mid-backend management system respectively.

[0114] The above steps aim to achieve the global loading of front-end components. First, obtain the configuration parameters of all front-end components in the front-end component library. These configuration parameters usually include information such as the name, version, dependencies, and entry files of the front-end components. Then, based on the configuration parameters, distribute each front-end component to the corresponding mid-backend management system respectively. During the distribution process, tools or APIs in the front-end component library can be applied to achieve this.

[0115] The advantage of global loading of front-end components is that the globally loaded front-end components can be accessed from any template in the mid-backend management system, and the globally loaded front-end components can be called one-to-one to the corresponding mid-backend management system, reducing the error rate during the call of front-end components.

[0116] Different from the global loading method in the foregoing embodiments, in some embodiments of the present application, downloading front-end components from a path via the NPM module and distributing them to the mid-backend management system specifically involves:

[0117] Step 303c: Determine the types and quantities of front-end components to be invoked.

[0118] Step 303d: Asynchronously load the front-end components into the middle and back-office management system.

[0119] The above steps aim to achieve the on-demand loading of front-end components. First, determine the types and quantities of front-end components to be invoked, which need to be determined according to the specific business scenario requirements. There are many types of front-end components, such as UI components, business components, data components, etc. When determining the quantity of front-end components to be invoked, factors such as the scale, performance requirements, and development time of the middle and back-office management system need to be considered. Then, asynchronously load the front-end components into the middle and back-office management system. Asynchronous loading of front-end components means that the front-end components will be loaded into the corresponding pages of the middle and back-office management system only when they are needed, thus improving the page loading speed and performance.

[0120] In some embodiments of the present application, determining the scenario type corresponding to the business scenario information is specifically as follows:

[0121] Step 101: Search in the business scenario processing database to find out if there is any processing record information corresponding to the business scenario information.

[0122] Step 102: If there is any processing record information corresponding to the business scenario information in the business scenario processing database, determine that the business scenario type is the original business scenario.

[0123] Step 103: If there is no processing record information corresponding to the business scenario information in the business scenario processing database, determine that the business scenario type is a new business scenario.

[0124] The business scenario processing database can use a relational database or a NoSQL database to store data. Further, according to the complexity of the business scenario, operations such as data cleaning, data transformation, and data integration may be required. The processing record information of the business scenario information can include information such as flowcharts, matrix diagrams, and business logics.

[0125] In the above search process, the specific query statement needs to be determined according to the business scenario information and the business scenario processing database structure. Further, the SELECT statement can be used to query whether there is any processing record information of the information to be searched in the processing record table. The SELECT statement is a statement in SQL (Structured Query Language) used to select data from a database table. If it exists, all the information of the processing record will be returned, that is, it is determined that the current business scenario is the original business scenario. If it does not exist, no result will be returned, that is, it is determined that the current business scenario is a new business scenario.

[0126] By adopting the method of searching the business scenario processing database to determine the business scenario type, the efficiency can be improved, the required information can be quickly obtained, without the need for manual inspection of each record. At the same time, search errors can be reduced and accuracy can be improved. In addition, if there are processing records in the business scenario processing database, we can view historical data to understand past business processing situations, so as to provide experience support for developers.

[0127] In some embodiments of the present application, the method further includes:

[0128] Step 500: Obtain the category update parameter of the front-end component, and determine the category update status information of the front-end component by comparing it with the original category parameter of the front-end component.

[0129] Step 600: Based on the category update status information of the front-end component, call the updated category of the front-end component into the middle and back-end management system; or, generate an update prompt message and send the update prompt message to the middle and back-end management system.

[0130] Based on the above steps, the front-end component calling method provided by the embodiments of the present application can also implement the update call of the front-end component. Specifically, combining the above steps, first, we need to obtain the category update parameter of the front-end component from the backend or other data sources. Then, we need to obtain the original category parameter of the front-end component, which can usually be completed by accessing the attributes or status of the front-end component. With the category update parameter and the original category parameter, we can perform a comparison, which usually involves some comparison operations, such as checking whether the two parameters are equal. According to the comparison result, we can determine the category update status information of the front-end component. For example, if the category update parameter and the original category parameter are the same, then we can consider that the category has not been updated; if they are different, then we can consider that the category has been updated.

[0131] When it is determined that the category has been updated, the front-end component code can be automatically downloaded for update, or a corresponding update prompt message can be given for the developer to decide whether to download the update. In addition, if the forced update method is used, the front-end components in the front-end component library can be updated to each middle and back-end management system in a timely manner, improving the update call efficiency of the front-end components.

[0132] In some embodiments of the present application, based on the category update status information of the front-end component, calling the updated category of the front-end component into the middle and back-end management system; or, generating an update prompt message and sending the update prompt message to the middle and back-end management system, specifically:

[0133] Step 601: Establish a webpack plugin in the front-end component library.

[0134] Step 602: Use the webpack plugin to directly call the category of the updated front-end component into the middle and back-end management system, or use the webpack plugin to generate an update prompt message and send the update prompt message to the middle and back-end management system.

[0135] Webpack is a module bundler. Its main goal is to bundle JavaScript files together for use in the browser, but it is also capable of transforming, bundling, or packaging any resource.

[0136] Using the webpack plugin can modularize front-end components, making the code more structured and easier to manage. Through the webpack plugin, some common tasks can be automated, such as compressing code, converting ES6 to ES5, etc. Among them, ES5, full name ECMAScript 5.1, is also known as ECMAScript 2009 and is an important generation standard of the JavaScript language; ES6, full name ECMAScript 6.0, is also known as ECMAScript 2015 and is the next-generation standard of the JavaScript language. The webpack plugin can also optimize front-end performance, such as reducing the first-screen loading time through code splitting and improving development efficiency.

[0137] In some embodiments of the present application, a front-end component library corresponding to multiple middle and back-end management systems is preset, specifically:

[0138] The front-end component library is embedded and connected to multiple middle and back-end management systems; or,

[0139] By using the APIs and ecosystem provided by the front-end component library, custom components are built in multiple middle and back-end management systems.

[0140] When the front-end component library is embedded and connected to multiple middle and back-end management systems, the front-end components in the front-end component library can be reused in multiple middle and back-end management systems, greatly improving development efficiency; using the same set of front-end component libraries in multiple middle and back-end management systems can ensure consistent user experiences among different systems. At the same time, the update and maintenance of the front-end component library can be synchronized to all middle and back-end management systems using the front-end component library, reducing maintenance costs.

[0141] API, whose full name is Application Programming Interface, is the English abbreviation of Application Programming Interface. It is a software interface that provides services for other software. By using the APIs and ecosystems provided by front-end component libraries, custom components can be built in multiple middle and back-end management systems, which has a high degree of flexibility. Most front-end component libraries provide rich APIs and ecosystems, allowing developers to customize the behavior of front-end components according to their needs. By using and customizing front-end components, developers can learn the API design concepts of front-end components, thereby improving their design thinking.

[0142] In some embodiments of the present application, if there is no category of front-end components corresponding to the scenario type in the front-end component library, after the generated target front-end component is called to the middle and back-end management system, a category for the target front-end component is newly created in the front-end component library so that the target front-end component is stored in the category of the target front-end component.

[0143] If there is no category of front-end components corresponding to the scenario type in the front-end component library, the call of the corresponding front-end component can be performed according to the following steps: First, generate a target front-end component according to the business requirements and scenario type; then, call the generated target front-end component to the middle and back-end management system; the third step is to create a new category in the front-end component library for storing the target front-end component; the fourth step is to store the target front-end component in the newly created category.

[0144] When there is no category of front-end components corresponding to the scenario type in the front-end component library, after the generated target front-end component is called to the middle and back-end management system, a category for the target front-end component is newly created in the front-end component library so that the target front-end component is stored in the category of the target front-end component. This method can improve the reusability of front-end components, reduce the repetitive workload of front-end components, lower the development cost, and improve the development efficiency.

[0145] An embodiment of the second aspect of the present application provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the front-end component call method in any of the above embodiments of the first aspect.

[0146] Figure 2 Illustrates a schematic diagram of the entity structure of an electronic device, such as Figure 2As shown in the figure, the electronic device may include: a processor 810, a communications interface 820, a memory 830, and a communication bus 840. Among them, the processor 810, the communications interface 820, and the memory 830 complete communication with each other through the communication bus 840. The processor 810 may call the logic instructions in the memory 830 to execute the front-end component calling method in any embodiment of the first aspect above. The method includes:

[0147] Step 100: Receive service scenario information and determine the scenario type corresponding to the service scenario information.

[0148] Step 200: Analyze the front-end component type corresponding to the scenario type, find the category of the front-end component corresponding to the scenario type in the front-end component library, and call the front-end component into the mid-backend management system according to the category of the front-end component.

[0149] In addition, when the logic instructions in the above-mentioned memory 830 are implemented in the form of a software functional unit and sold or used as an independent product, they may be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or a part of this technical solution, may be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention. The foregoing storage medium includes: various media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk, or an optical disc that can store program codes.

[0150] On the other hand, the present invention also provides a computer program product. The computer program product includes a computer program. The computer program can be stored on a non-volatile computer-readable storage medium. When the computer program is executed by a processor, the computer can execute the front-end component calling method provided by the above-mentioned various methods. The method includes:

[0151] Step 100: Receive service scenario information and determine the scenario type corresponding to the service scenario information.

[0152] Step 200: Analyze the front-end component type corresponding to the scenario type, find the category of the front-end component corresponding to the scenario type in the front-end component library, and call the front-end component into the mid-backend management system according to the category of the front-end component.

[0153] In another aspect, the present invention also provides a non-volatile computer-readable storage medium, on which computer-executable instructions are stored. When the computer-executable instructions are executed by a computer, they can implement the front-end component calling method provided by each of the above methods. The method includes:

[0154] Step 100: Receive service scenario information and determine the scenario type corresponding to the service scenario information.

[0155] Step 200: Analyze the front-end component type corresponding to the scenario type, search for the category of the front-end component corresponding to the scenario type in the front-end component library, and call the front-end component into the mid-backend management system according to the category of the front-end component.

[0156] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative labor.

[0157] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on such an understanding, the essence of the above technical solution or the part that contributes to the prior art can be embodied in the form of a software product. The computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0158] What is not described in this application can be realized by adopting or referring to the existing technology.

[0159] Each embodiment in this specification is described in a progressive manner. The same or similar parts among the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments.

[0160] The above are only the embodiments of the present application and are not used to limit the present application. For those skilled in the art, the present application can have various changes and modifications. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included within the scope of the claims of the present application.

Claims

1. A method for calling a front-end component, characterized in that Pre-set a front-end component library corresponding to multiple middle and back-end management systems. The method for calling the front-end components includes: Receiving business scenario information and determining the scenario type corresponding to the business scenario information; Analyzing the front-end component types corresponding to the scenario type, searching for the categories of front-end components in the front-end component library corresponding to the scenario type, and calling the front-end components into the middle and back-end management systems according to the categories of the front-end components.

2. The front-end component calling method according to claim 1, wherein Pre-setting a front-end component library corresponding to multiple middle and back-end management systems specifically includes: Establishing a category set of front-end components corresponding to the multiple middle and back-end management systems; Establishing a data hosting architecture in the front-end component library; Packaging and uploading the category set to the data hosting architecture through a package management tool; Hosting the category set through the data hosting architecture.

3. The method for calling the front-end components according to claim 2, wherein In the data hosting architecture, the category set of the front-end components includes at least one of a file preview component, a file list component, a text function component, and an associated vehicle model information component; The data hosting architecture further includes at least one of an enterprise-side private component storage system, a third-party hosted component storage system, and an open public component storage system.

4. The method for calling the front-end components according to claim 2, wherein Calling the front-end components into the middle and back-end management systems according to the categories of the front-end components specifically includes: Calling the NPM module from the package management tool; Searching for the path of the category of the front-end components in the data hosting architecture through the NPM module; Downloading the front-end components from the path through the NPM module and distributing them to the middle and back-end management systems.

5. The method for calling the front-end components according to claim 4, wherein Downloading the front-end components from the path through the NPM module and distributing them to the middle and back-end management systems specifically includes: Obtaining the configuration parameters of all the front-end components in the front-end component library; Based on the configuration parameters, distributing each of the front-end components to the corresponding middle and back-end management systems respectively.

6. The method for calling the front-end components according to claim 4, wherein Downloading the front-end components from the path through the NPM module and distributing them to the middle and back-end management systems specifically includes: Determining the types and quantities of the front-end components to be called; Asynchronously loading the front-end components into the middle and back-end management systems.

7. The method for calling the front-end components according to claim 1, wherein Determining the scenario type corresponding to the business scenario information specifically includes: Searching in the business scenario processing database to check if there is any processing record information corresponding to the business scenario information; If there is processing record information corresponding to the business scenario information in the business scenario processing database, determining the business scenario type as the original business scenario; If there is no processing record information corresponding to the business scenario information in the business scenario processing database, determining the business scenario type as a new business scenario.

8. The front-end component calling method according to claim 1, wherein, It further includes: Obtain the category update parameters of the front-end component, and determine the category update status information of the front-end component by comparing with the original category parameters of the front-end component; Based on the category update status information of the front-end component, call the updated category of the front-end component into the middle and back-end management system; or, generate an update prompt message and send the update prompt message to the middle and back-end management system.

9. The method for calling a front-end component according to claim 8, wherein: Based on the category update status information of the front-end component, call the updated category of the front-end component into the middle and back-end management system; or, generate an update prompt message and send the update prompt message to the middle and back-end management system, specifically: Establish a webpack plugin in the front-end component library; Use the webpack plugin to directly call the updated category of the front-end component into the middle and back-end management system, or use the webpack plugin to generate an update prompt message and send the update prompt message to the middle and back-end management system.

10. The method for calling a front-end component according to any one of claims 1 to 9, wherein: Pre-set a front-end component library corresponding to multiple middle and back-end management systems, specifically: The front-end component library is embedded and connected in the multiple middle and back management systems; or, Build custom components in the multiple middle and back-end management systems by using the APIs and ecosystems provided by the front-end component library.

11. The method for calling a front-end component according to any one of claims 1 to 9, wherein: If there is no category of the front-end component corresponding to the scenario type in the front-end component library, after calling the generated target front-end component into the middle and back-end management system, create the category of the target front-end component in the front-end component library so that the target front-end component is stored in the category of the target front-end component.

12. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor implements the method for calling a front-end component according to any one of claims 1 to 11 when executing the program.

13. A non-volatile computer storage medium, characterized in that, Store computer-executable instructions, and when the computer-executable instructions are executed by a computer, they can implement the method for calling a front-end component according to any one of claims 1-11.

Images