CN115562662A - Application page creating method and device, computer equipment and storage medium - Google Patents

Application page creating method and device, computer equipment and storage medium Download PDF

Info

Publication number
CN115562662A
CN115562662A CN202211160709.9A CN202211160709A CN115562662A CN 115562662 A CN115562662 A CN 115562662A CN 202211160709 A CN202211160709 A CN 202211160709A CN 115562662 A CN115562662 A CN 115562662A
Authority
CN
China
Prior art keywords
application
sub
resource
page
file
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211160709.9A
Other languages
Chinese (zh)
Inventor
晋朝阳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Property and Casualty Insurance Company of China Ltd
Original Assignee
Ping An Property and Casualty Insurance Company of China Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Property and Casualty Insurance Company of China Ltd filed Critical Ping An Property and Casualty Insurance Company of China Ltd
Priority to CN202211160709.9A priority Critical patent/CN115562662A/en
Publication of CN115562662A publication Critical patent/CN115562662A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Abstract

The embodiment of the application belongs to the field of big data, and relates to a method for creating an application page, which comprises the following steps: when an application access request corresponding to the sub-application is received, loading a main application corresponding to a preset micro front-end framework, and acquiring the name of the sub-application from the application access request through the main application; acquiring an entry file corresponding to the name of the sub-application; acquiring a resource configuration file corresponding to the sub-application based on the entry file; determining an initialization resource corresponding to the sub-application based on the resource configuration file; and based on the initialization resources, rendering the page of the sub application in the designated mount area corresponding to the sub application. The application also provides a device for creating the application page, computer equipment and a storage medium. In addition, the present application also relates to a block chain technique, where initialization resources may be stored. According to the method and the device, the page of the sub-application corresponding to the application access request can be quickly created and generated through the micro front-end framework, and the efficiency of developing and creating the page of the sub-application is improved.

Description

Application page creating method and device, computer equipment and storage medium
Technical Field
The present application relates to the field of big data and application development technologies, and in particular, to a method and an apparatus for creating an application page, a computer device, and a storage medium.
Background
With the development of technology, the content carried by the front-end application is increasingly complex, and particularly in the field of financial technology, as the number of financial related industries is very large and each industry is subdivided, a large number of heterogeneous inventory systems are faced, and the demand of various front-end systems in each industry is also very large. However, for some financial enterprises, many old systems, such as Iframe-based systems, still exist inside the financial enterprises, the technology stacks adopted by the old systems are very old, the development and maintenance costs for page creation using the old systems are very large, the pages with small differences are often required to be repeatedly developed, and the efficiency of page development and creation is low.
Disclosure of Invention
The embodiment of the application aims to provide a method and a device for creating an application page, computer equipment and a storage medium, so as to solve the technical problems that the development and maintenance cost of the existing old system for creating the page is very high, the page with little difference is often required to be repeatedly developed, the workload of developers is large, the repetition rate is high, the time consumption is long, and the efficiency of page development and creation is low.
In order to solve the above technical problem, an embodiment of the present application provides a method for creating an application page, which adopts the following technical solutions:
judging whether an application access request corresponding to the sub-application is received or not; wherein the application access carries the name of the sub-application;
if so, loading a main application corresponding to a preset micro front-end framework, and acquiring the name of the sub-application from an application access request through the main application;
acquiring an entry file corresponding to the name of the sub-application;
acquiring a resource configuration file corresponding to the sub-application based on the entry file;
determining an initialization resource corresponding to the sub-application based on the resource profile;
and rendering the page of the sub application in a designated mount area corresponding to the sub application based on the initialization resource.
Further, the step of obtaining the resource configuration file corresponding to the sub-application based on the entry file specifically includes:
analyzing the entry file, and acquiring a request address of the resource configuration file from the entry file;
sending a file acquisition request corresponding to the resource configuration file to a preset first server based on the request address;
and receiving the resource configuration file returned after the first server processes the file acquisition request.
Further, the step of determining the initialization resource corresponding to the sub-application based on the resource configuration file specifically includes:
acquiring all file names contained in the initialized resources based on the resource configuration file;
reading target tags meeting preset conditions from all the file names;
inserting the target tag into a preset application environment;
sending a resource acquisition request to a preset second server based on the inserted target label;
and receiving the initialized resource returned after the second server processes the resource acquisition request.
Further, the step of rendering the page of the sub-application in the designated mount area corresponding to the sub-application based on the initialization resource specifically includes:
acquiring js resource files and css resource files contained in the initialization resources;
determining component information corresponding to the specified mounting area based on the js resource file;
determining display information of the component corresponding to the component information based on the css resource file;
and rendering the page of the sub application in the designated mounting area based on the component information and the display information.
Further, after the step of rendering the page of the sub application in the designated mount area corresponding to the sub application based on the initialization resource, the method further includes:
judging whether an editing request which is triggered by a target user and corresponds to the page of the sub application is received;
if yes, displaying a preset sub-application editing page, and loading a preset component library in the sub-application editing page;
receiving a target component dragged from the component library to a specified area in the sub application editing page by the target user based on a dragging mode;
determining a designated location of the target component within the designated area;
acquiring component resource information corresponding to the target component;
and performing rendering processing and attribute configuration processing on the target assembly based on the position of the target assembly and the assembly resource information to obtain a corresponding application interface.
Further, the step of performing rendering processing and attribute configuration processing on the target component based on the position of the target component and the component resource information to obtain a corresponding application interface specifically includes:
analyzing the component resource information to obtain a code download address of the target component and an attribute file of the target component;
acquiring a code corresponding to the target component based on the code downloading address;
rendering the target component within the specified location based on the code;
and performing attribute configuration on the target assembly based on the attribute file to obtain the application interface.
Further, before the step of rendering the page of the sub application in the designated mount area corresponding to the sub application based on the initialization resource, the method further includes:
acquiring a preset sub-application isolation strategy; wherein the isolation strategy comprises one or more of soft isolation, hard isolation and css isolation;
determining a target sub-application isolation strategy from the sub-application isolation strategies;
and performing corresponding application isolation processing based on the target sub-application isolation strategy.
In order to solve the above technical problem, an embodiment of the present application further provides an apparatus for creating an application page, which adopts the following technical solutions:
the first judgment module is used for judging whether an application access request corresponding to the sub-application is received or not; wherein the application access carries the name of the sub-application;
the loading module is used for loading a main application corresponding to a preset micro front end framework if the main application is in the preset micro front end framework, and acquiring the name of the sub-application from an application access request through the main application;
the first acquisition module is used for acquiring an entry file corresponding to the name of the sub-application;
a second obtaining module, configured to obtain, based on the entry file, a resource configuration file corresponding to the sub-application;
a first determining module, configured to determine, based on the resource configuration file, an initialization resource corresponding to the sub-application;
and the rendering module is used for rendering the page of the sub application in the specified mounting area corresponding to the sub application based on the initialization resource.
In order to solve the above technical problem, an embodiment of the present application further provides a computer device, which adopts the following technical solutions:
judging whether an application access request corresponding to the sub-application is received or not; wherein the application access carries the name of the sub-application;
if so, loading a main application corresponding to a preset micro front-end framework, and acquiring the name of the sub-application from an application access request through the main application;
acquiring an entry file corresponding to the name of the sub-application;
acquiring a resource configuration file corresponding to the sub-application based on the entry file;
determining initialization resources corresponding to the sub-applications based on the resource configuration file;
and rendering the page of the sub application in a designated mount area corresponding to the sub application based on the initialization resource.
In order to solve the above technical problem, an embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solutions:
judging whether an application access request corresponding to the sub-application is received or not; wherein the application access carries the name of the sub-application;
if so, loading a main application corresponding to a preset micro front-end framework, and acquiring the name of the sub-application from an application access request through the main application;
acquiring an entry file corresponding to the name of the sub-application;
acquiring a resource configuration file corresponding to the sub-application based on the entry file;
determining an initialization resource corresponding to the sub-application based on the resource profile;
and rendering the page of the sub application in a designated mount area corresponding to the sub application based on the initialization resource.
Compared with the prior art, the embodiment of the application mainly has the following beneficial effects:
according to the method and the device for rendering the page of the sub-application, after an application access request corresponding to the sub-application is received, a main application corresponding to a preset micro front-end framework is loaded firstly, the name of the sub-application is obtained from the application access request through the main application, then an entry file corresponding to the name of the sub-application is obtained, then a resource configuration file corresponding to the sub-application is obtained based on the entry file, an initialization resource corresponding to the sub-application is determined based on the resource configuration file, and finally the page of the sub-application is rendered in a designated mount area corresponding to the sub-application based on the initialization resource. According to the method and the device, the page of the sub-application corresponding to the application access request can be quickly created and generated through the micro front-end frame, so that the access of the webpage of the sub-application can be responded at a higher speed, and the efficiency of developing and creating the page of the sub-application is improved. And the resource configuration file required by the sub-application can be dynamically acquired, so that the lightweight processing of the page of the sub-application is realized, and the use experience of a user is improved.
Drawings
In order to more clearly illustrate the solution of the present application, the drawings used in the description of the embodiments of the present application will be briefly described below, and it is obvious that the drawings in the description below are some embodiments of the present application, and that other drawings may be obtained by those skilled in the art without inventive effort.
FIG. 1 is an exemplary system architecture diagram to which the present application may be applied;
FIG. 2 is a flow diagram of one embodiment of a method for creating an application page according to the present application;
FIG. 3 is a schematic structural diagram of one embodiment of an apparatus for creating an application page according to the present application;
FIG. 4 is a schematic block diagram of one embodiment of a computer device according to the present application.
Detailed Description
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "including" and "having," and any variations thereof, in the description and claims of this application and the description of the above figures are intended to cover non-exclusive inclusions. The terms "first," "second," and the like in the description and claims of this application or in the above-described drawings are used for distinguishing between different objects and not for describing a particular order.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein may be combined with other embodiments.
In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.
As shown in fig. 1, the system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. Network 104 is the medium used to provide communication links between terminal devices 101, 102, 103 and server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
A user may use terminal devices 101, 102, 103 to interact with a server 105 over a network 104 to receive or send messages or the like. The terminal devices 101, 102, 103 may have various communication client applications installed thereon, such as a web browser application, a shopping application, a search application, an instant messaging tool, a mailbox client, social platform software, and the like.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to a smart phone, a tablet computer, an e-book reader, an MP3 player (Moving Picture experts Group Audio Layer III, motion Picture experts compression standard Audio Layer 3), an MP4 player (Moving Picture experts Group Audio Layer IV, motion Picture experts compression standard Audio Layer 4), a laptop portable computer, a desktop computer, and the like.
The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the terminal devices 101, 102, 103.
It should be noted that the method for creating an application page provided in the embodiment of the present application is generally executed by a server/terminal device, and accordingly, the apparatus for creating an application page is generally disposed in the server/terminal device.
It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for an implementation.
With continued reference to FIG. 2, a flow diagram of one embodiment of a method for creation of an application page in accordance with the present application is shown. The method for creating the application page comprises the following steps:
step S201, judging whether an application access request corresponding to the sub-application is received; wherein the application access carries the name of the sub-application.
In this embodiment, the browser in the electronic device (for example, the server/terminal device shown in fig. 1) on which the application page creation method operates may obtain the application access request through a wired connection manner or a wireless connection manner. It should be noted that the above-mentioned wireless connection means may include, but is not limited to, 3G/4G/5G connection, wiFi connection, bluetooth connection, wiMAX connection, zigbee connection, UWB (ultra wideband) connection, and other now known or later developed wireless connection means. The application access request is a triggered request for accessing the page of the sub-application by the user. Specifically, the present solution may be based on a user operation, for example, a click operation of a sub application or a domain name input operation of the sub application, and receive an access request of the sub application in a process of running a browser installed in the electronic device, and invoke a scene of the sub application on the basis of the browser.
And S202, if yes, loading a main application corresponding to a preset micro front end framework, and acquiring the name of the sub-application from an application access request through the main application.
In this embodiment, the micro-tip framework is specifically Single-Spa. Micro front-ends, like micro services, combine front-end applications of different domains in a unified enterprise management platform. Each sub-application is independently deployed, independently operated and independently rolled back, and the sub-applications are not mutually influenced and have no technical stack limitation. The micro front end uses Single-Spa, which is a JavaScript framework for aggregating a plurality of Single-page applications into a whole application, and can support application programs developed by all mainstream frameworks of Vue, fact and Angular. Basic concept of micro front-end: loader (independent service): namely, the core of the micro front-end architecture is mainly used for scheduling the sub-applications, determining when to show which sub-application, and understanding the sub-application as a power supply; wrappers (each child application needs to have its own wrapper): packaging the sub-applications, providing life cycle hooks to the sub-applications and exporting them so that they can be used by a loader, which is equivalent to a power adapter; master application (independent service): typically an item that contains a common part of all sub-applications, also called a base, such as a navigation bar, a left menu, a right content area; sub-application (independent service): and the modules are displayed in the content area of the main application, such as quotation management, insurance management, delivery management and the like.
Step S203, acquiring an entry file corresponding to the name of the sub-application.
In this embodiment, the entry file of the sub-application may be requested to the server corresponding to the micro front end framework through routing based on the name of the sub-application. The entry file refers to a file which is accessed first when a program item or a system is accessed for request, all instruction functions are distributed from the file, and then corresponding modules are searched for processing, and some initialization work is also performed here. The entry file of the sub-application can call different modules of the framework according to different requests. In addition, the entry file of the sub-application may include a request address of the resource configuration file, and the request address may be used to obtain the resource configuration file. The entry file may further include a mount location of the sub-application. The mount location of the sub-application may be a location of a function implementation that is preset for mounting the sub-application. In addition, the entry files of the sub-applications can be set differently for each sub-application, that is, how many sub-applications there are, how many sub-application entry files.
And the corresponding resource loads the request address of the file.
Step S204, acquiring a resource configuration file corresponding to the sub-application based on the entry file.
In this embodiment, the above-mentioned specific implementation process of obtaining the resource configuration file corresponding to the sub-application based on the entry file will be described in further detail in the following specific embodiments, and will not be described in detail herein.
Step S205, determining an initialization resource corresponding to the sub-application based on the resource configuration file.
In this embodiment, the specific implementation process for determining the initialization resource corresponding to the sub application based on the resource configuration file is described in further detail in the following specific embodiments, and is not described in detail herein.
And step S206, based on the initialization resource, rendering the page of the sub application in the designated mount area corresponding to the sub application.
In this embodiment, in the above-mentioned specific implementation process of rendering the page of the sub application in the designated mount area corresponding to the sub application based on the initialization resource, this will be described in further detail in the following specific embodiments, and will not be described in detail herein.
After receiving an application access request corresponding to a sub-application, the method and the device can load the main application corresponding to a preset micro front-end framework, acquire the name of the sub-application from the application access request through the main application, then acquire an entry file corresponding to the name of the sub-application, then acquire a resource configuration file corresponding to the sub-application based on the entry file, determine an initialization resource corresponding to the sub-application based on the resource configuration file subsequently, and finally render a page of the sub-application in a designated mount area corresponding to the sub-application based on the initialization resource. According to the method and the device, the page of the sub-application corresponding to the application access request can be quickly created and generated through the micro front-end frame, so that the access of the webpage of the sub-application can be responded at a higher speed, and the efficiency of developing and creating the page of the sub-application is improved. And the resource configuration file required by the sub-application can be dynamically acquired, so that the lightweight processing of the page of the sub-application is realized, and the use experience of a user is improved.
In some optional implementations, step S204 includes the following steps:
and analyzing the entry file, and acquiring the request address of the resource configuration file from the entry file.
In this embodiment, the entry file corresponding to the sub-application includes a request address of the resource configuration file. In addition, the mount position corresponding to the sub application can be included in the entry file.
And sending a file acquisition request corresponding to the resource configuration file to a preset first server based on the request address.
In this embodiment, the first server is a server corresponding to the micro front end framework. And sending a file acquisition request corresponding to the resource configuration file to a preset first server through a flow route when the request address of the resource configuration file is obtained.
And receiving the resource configuration file returned after the first server processes the file acquisition request.
In this embodiment, after receiving the file obtaining request, the first server processes the file obtaining request, so as to query the resource configuration file corresponding to the sub-application from the configuration manifest file produced when the production environment code is constructed, and return a page including a request address of the resource configuration file to the browser.
According to the method and the device, the entry file is analyzed, the request address of the resource configuration file is obtained from the entry file, the file obtaining request corresponding to the resource configuration file is sent to the preset first server based on the request address, the resource configuration file is rapidly obtained through the first server, the initialization resource corresponding to the sub application can be rapidly and accurately determined based on the obtained resource configuration file, the page of the sub application is rendered in the designated mount area corresponding to the sub application based on the initialization resource, and the rapid loading process of the page of the sub application is achieved.
In some optional implementations of this embodiment, step S205 includes the following steps:
and acquiring all file names contained in the initialized resources based on the resource configuration file.
In this embodiment, the resource configuration file includes a resource loading function, and all file names included in the initialized resource can be read from the resource loading function by executing the resource loading function. The resource loading function is an immediate execution function. By executing the resource loading function, a static resource service may be requested to obtain a corresponding resource profile. The resource configuration file refers to a necessary file required for rendering of the front page of the sub-application. Specifically, the resource configuration file may include a file such as a rendering format of a top page of the sub application, a file for determining the number of components in a page rendered by the sub application, and a file for determining a style of a component in a page rendered by the sub application.
And reading out target tags meeting preset conditions from all the file names.
In this embodiment, the target tags meeting the preset condition specifically refer to js tags and css tags. Specifically, the css tag and the js tag required by rendering of the sub-application can be determined by reading a hash value list of a file name in the resource configuration file and based on the hash value list.
And inserting the target label into a preset application environment.
In this embodiment, the preset application environment refers to an application environment of a browser in the electronic device.
And sending a resource acquisition request to a preset second server based on the inserted target label.
In this embodiment, the second server is a server corresponding to the micro front end frame. After the target tag is inserted into the preset application environment, a corresponding resource acquisition request can be sent to a preset second server.
And receiving the initialized resource returned after the second server processes the resource acquisition request.
In this embodiment, after receiving the resource obtaining request, the second server processes the resource obtaining request to query the initialized resource corresponding to the sub-application.
According to the method and the device, all file names contained in the initialized resource are obtained based on the resource configuration file, the target tags meeting the preset conditions are read from all the file names, the target tags are inserted into the preset application environment and then the resource obtaining request is sent to the preset second server, so that the initialized resource is rapidly obtained through the second server, the follow-up process of rendering the page of the sub-application in the specified mounting area corresponding to the sub-application based on the initialized resource is facilitated, and the rapid loading process of the page of the sub-application is achieved.
In some optional implementations, step S206 includes the following steps:
and acquiring js resource files and cs resource files contained in the initialization resources.
In this embodiment, the initialization resource at least includes a js resource file and a css resource file.
And determining component information corresponding to the specified mounting area based on the js resource file.
In this embodiment, the component information refers to the number of components and component types constructed by the initialization resource required for constructing the page of the sub application, and for example, which types of components are included in the top page or other pages of the sub application and the number of included components may be determined.
And determining display information of the component corresponding to the component information based on the css resource file.
In this embodiment, the display information refers to one or more of a display form, a display position, and a display color of each component of the initialization resource configuration required for configuring the page of the sub application, and may specifically include, for example, a specific style of a top page or other pages of the sub application.
And rendering the page of the sub application in the designated mounting area based on the component information and the display information.
In this embodiment, after obtaining the component information and the display information required by the page to be built of the sub-application, the page of the sub-application may be rendered in the designated mount area based on the component information and the display information, so as to build and generate a final required sub-application page.
According to the method and the device, the js resource file and the css resource file contained in the initialization resource are obtained, then the component information corresponding to the specified mounting area is determined based on the js resource file, the display information of the component corresponding to the component information is determined based on the css resource file, the page of the sub-application is rendered in the specified mounting area based on the component information and the display information, and the rapid and accurate loading process of the page of the sub-application is achieved.
In some optional implementations, the electronic device may further perform the following steps:
and judging whether an editing request which is triggered by a target user and corresponds to the page of the sub application is received.
In this embodiment, the target user may be an operation and maintenance person related to front-end page maintenance. The editing request is a request triggered by a target user and used for modifying the page of the created sub-application.
And if so, displaying a preset sub-application editing page, and loading a preset component library in the sub-application editing page.
In this embodiment, the component library is a database that is pre-constructed according to actual service usage requirements and includes a certain number of components, for example, the component library at least includes components of ElementUI and Ant Design, custom-developed components, and the like.
And receiving a target component dragged from the component library to a specified area in the sub application editing page by the target user based on a dragging mode.
In this embodiment, the actual position of the designated area is not particularly limited, and may be preset according to the actual use requirement. When the target component is detected in the designated area in the sub application editing page, the target component is indicated as a component required to be used for editing the page of the sub application.
Determining a specified location of the target component within the specified region.
In this embodiment, the specified position may be determined by acquiring coordinate information of the target component in the specified area.
And acquiring component resource information corresponding to the target component.
In this embodiment, the component resource information includes a code download address of the target component and a property file of the target component.
And performing rendering processing and attribute configuration processing on the target assembly based on the position of the target assembly and the assembly resource information to obtain a corresponding application interface.
In this embodiment, the specific implementation process of rendering and configuring the property of the target component based on the position of the target component and the component resource information to obtain the corresponding application interface is described in further detail in the following specific embodiments, and will not be described in detail herein.
After a page of a generated sub-application is created, if an editing request which is triggered by a target user and corresponds to the page of the sub-application is received, the sub-application editing page loaded with a preset component library is displayed, then a target component which is dragged to a specified area in the sub-application editing page by the target user based on a dragging mode is received, then a specified position of the target component in the specified area is determined, component resource information corresponding to the target component is obtained subsequently, and finally the target component is subjected to rendering processing and attribute configuration processing based on the position of the target component and the component resource information to obtain a corresponding application interface, so that the page of the sub-application is modified based on the personal requirements of the user, and the use experience of the user is improved. In addition, the micro front end is used for rendering and modifying to generate the page of the final sub application, so that code pollution and security threats to the electronic equipment can be avoided.
In some optional implementation manners of this embodiment, the rendering processing and the attribute configuration processing on the target component based on the position of the target component and the component resource information to obtain a corresponding application interface includes the following steps:
and analyzing the component resource information to obtain a code download address of the target component and an attribute file of the target component.
In this embodiment, the component resource information includes a code download address of the target component and a property file of the target component.
And acquiring a code corresponding to the target component based on the code downloading address.
In this embodiment, a code acquisition request corresponding to the code download address may be sent to a server corresponding to the micro front end framework based on the request address, so as to process the code acquisition request and return a corresponding code through the server.
Rendering the target component within the specified location based on the code.
And performing attribute configuration on the target assembly based on the attribute file to obtain the application interface.
According to the method and the device, the code download address of the target assembly and the attribute file of the target assembly are obtained by analyzing the assembly resource information, then the code corresponding to the target assembly is obtained based on the code download address, the target assembly in the designated position is rendered based on the code subsequently, and finally the attribute configuration is carried out on the target assembly based on the attribute file to obtain the application interface, so that the modification processing of the page of the sub-application is completed based on the personal requirement of the user, and the use experience of the user is improved. In addition, the micro front end is used for rendering and modifying to generate the page of the final sub application, so that code pollution and security threat to the electronic equipment can be prevented.
In some optional implementations of this embodiment, before step S206, the electronic device may further perform the following steps:
acquiring a preset sub-application isolation strategy; wherein the isolation strategy comprises one or more of soft isolation, hard isolation and css isolation.
In this embodiment, a sub-application from loading to running to unloading may have some pollution on the whole. These contaminants include, but are not limited to: adding/deleting/modifying global variables, binding global events, modifying native methods or objects, modifying a primitive chain of native methods or objects. And the impact of all these sub-applications may cause a potential global conflict. Therefore, it is desirable to eliminate the aforementioned effects as much as possible while loading and unloading one sub-application. The sub-application isolation policy is a pre-constructed policy for isolating different sub-applications. Specifically, (1) soft isolation: the global snapshot is made before the application is loaded, and after the sub-application is unloaded, the global attribute is restored according to the snapshot. Considering that the main application and the sub-applications will run in Window at the same time, it is necessary to distinguish which modifications are caused by the sub-applications and need to be restored. To this end, we created a sandbox. Before and after the sub-application is loaded, the following processing needs to be carried out: a. recording the modification of the global variable, and recovering the original value when the application is released; b. recording the modification of the global event, and removing the event when the application is unloaded; c. recording modifications of setTimeout and setInterval, and removing when the application is uninstalled; d. since the sandbox cannot hear the global methods (objects) and their prototype chain modifications, it is necessary to create a window snapshot before loading the sub-applications and restore the global methods (objects) and their prototype chain by snapshot after unloading the applications. (2) Hard isolation means that before each sub-application is loaded, window reload is performed once, so that each sub-application can be guaranteed to be a brand new environment when being rendered, and even if the attribute of the window is changed by the last sub-application, no influence is caused. However, only window reload is not possible and refreshing of the page can cause a degradation in the user experience. Therefore, in cooperation with this scheme, the following means needs to be performed for optimization: a. and the front end snapshot + resume quickly restores an application interface. b. The main application uses SSR local straight-out, so that the page is not refreshed visually. (3) cs isolation: when a sub application is loaded, all the link files and style files of the sub application are marked. After the child application is uninstalled, all the link files and the style files are uninstalled synchronously.
And determining a target sub-application isolation strategy from the sub-application isolation strategies.
In this embodiment, the determination process of the target sub-application isolation policy is not specifically limited, and may be set according to actual use requirements. For example, the target sub-application isolation policy may include only any one of the three seed application isolation policies, or may include any two of the three sub-application isolation policies, or include all of the three seed application isolation policies.
And performing corresponding application isolation processing based on the target sub-application isolation strategy.
In this embodiment, by executing the target sub-application isolation policy, isolation processing between sub-applications can be implemented.
According to the method and the device, before the process of rendering the page of the sub application in the designated mount area corresponding to the sub application based on the initialized resource, the target sub application isolation strategy is determined from the obtained sub application isolation strategies, and then the corresponding application isolation processing is performed based on the obtained target sub application isolation strategy, so that each sub application is guaranteed to be a brand new environment during rendering, potential global conflict possibly caused by influence caused by the sub application is effectively avoided, and the intelligence of generation of a sub application interface is improved.
It is emphasized that the resource profile may also be stored in a node of a block chain in order to further ensure privacy and security of the resource profile.
The block chain referred by the application is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.
The embodiment of the application can acquire and process related data based on an artificial intelligence technology. Among them, artificial Intelligence (AI) is a theory, method, technique and application system that simulates, extends and expands human Intelligence using a digital computer or a machine controlled by a digital computer, senses the environment, acquires knowledge and uses the knowledge to obtain the best result.
The artificial intelligence infrastructure generally includes technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a robot technology, a biological recognition technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and the like.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware associated with computer readable instructions, which can be stored in a computer readable storage medium, and when executed, the processes of the embodiments of the methods described above can be included. The storage medium may be a non-volatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a Random Access Memory (RAM).
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and may be performed in other orders unless otherwise indicated herein. Moreover, at least a portion of the steps in the flow chart of the figure may include multiple sub-steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.
With further reference to fig. 3, as an implementation of the method shown in fig. 2, the present application provides an embodiment of an apparatus for creating an application page, where the embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus may be specifically applied to various electronic devices.
As shown in fig. 3, the apparatus 300 for creating an application page according to this embodiment includes: a first determining module 301, a loading module 302, a first obtaining module 303, a second obtaining module 304, a first determining module 305, and a rendering module 306. Wherein:
a first determining module 301, configured to determine whether an application access request corresponding to a sub-application is received; wherein the application access carries the name of the sub-application;
a loading module 302, configured to load a main application corresponding to a preset micro front-end framework if the sub application is a main application, and obtain a name of the sub application from an application access request through the main application;
a first obtaining module 303, configured to obtain an entry file corresponding to the name of the sub application;
a second obtaining module 304, configured to obtain, based on the entry file, a resource configuration file corresponding to the sub-application;
a first determining module 305, configured to determine an initialization resource corresponding to the sub-application based on the resource profile;
a rendering module 306, configured to render the page of the sub-application in the designated mount area corresponding to the sub-application based on the initialization resource.
In this embodiment, the operations respectively executed by the modules or units correspond to the steps of the method for creating an application page in the foregoing embodiment one by one, and are not described herein again.
In some optional implementations of this embodiment, the second obtaining module 304 includes:
the first obtaining submodule is used for analyzing the entry file and obtaining a request address of the resource configuration file from the entry file;
the first sending submodule is used for sending a file acquisition request corresponding to the resource configuration file to a preset first server based on the request address;
the first receiving submodule is configured to receive the resource configuration file returned after the file acquisition request is processed by the first server.
In this embodiment, the operations that the modules or units are respectively configured to execute correspond to the steps of the method for creating an application page in the foregoing embodiment one by one, and are not described herein again.
In some optional implementations of this embodiment, the first determining module 305 includes:
the second obtaining submodule is used for obtaining all file names contained in the initialized resources based on the resource configuration file;
the reading submodule is used for reading target tags meeting preset conditions from all the file names;
the inserting sub-module is used for inserting the target label into a preset application environment;
the second sending submodule is used for sending a resource obtaining request to a preset second server based on the inserted target tag;
and the second receiving submodule is used for receiving the initialized resource returned after the resource obtaining request is processed by the second server.
In this embodiment, the operations that the modules or units are respectively used to execute correspond to the steps of the method for creating an application page in the foregoing embodiment one by one, and are not described herein again.
In some optional implementations of this embodiment, the rendering module 306 includes:
a third obtaining sub-module, configured to obtain js resource files and css resource files included in the initialization resource;
the first determining sub-module is used for determining component information corresponding to the specified mounting area based on the js resource file;
the second determining sub-module is used for determining display information of the component corresponding to the component information based on the css resource file;
and the first rendering sub-module is used for rendering the page of the sub-application in the specified mounting area based on the component information and the display information.
In this embodiment, the operations respectively executed by the modules or units correspond to the steps of the method for creating an application page in the foregoing embodiment one by one, and are not described herein again.
In some optional implementations of this embodiment, the creating device of the application page further includes:
the second judgment module is used for judging whether an editing request which is triggered by a target user and corresponds to the page of the sub application is received;
the display module is used for displaying a preset sub-application editing page and loading a preset component library in the sub-application editing page if the display module is used for displaying the preset sub-application editing page;
the receiving module is used for receiving a target component dragged from the component library to a specified area in the sub-application editing page by the target user based on a dragging mode;
a second determination module for determining a specified location of the target component within the specified area;
a third obtaining module, configured to obtain component resource information corresponding to the target component;
and the first processing module is used for performing rendering processing and attribute configuration processing on the target assembly based on the position of the target assembly and the assembly resource information to obtain a corresponding application interface.
In this embodiment, the operations respectively executed by the modules or units correspond to the steps of the method for creating an application page in the foregoing embodiment one by one, and are not described herein again.
In some optional implementations of this embodiment, the first processing module includes:
the fourth acquisition submodule is used for analyzing the component resource information and acquiring a code download address of the target component and an attribute file of the target component;
a fifth obtaining sub-module, configured to obtain a code corresponding to the target component based on the code download address;
a second rendering submodule for rendering the target component within the specified location based on the code;
and the configuration submodule is used for carrying out attribute configuration on the target assembly based on the attribute file to obtain the application interface.
In this embodiment, the operations respectively executed by the modules or units correspond to the steps of the method for creating an application page in the foregoing embodiment one by one, and are not described herein again.
In some optional implementations of this embodiment, the creating device of the application page further includes:
the fourth acquisition module is used for acquiring a preset sub-application isolation strategy; wherein the isolation strategy comprises one or more of soft isolation, hard isolation and css isolation;
a third determining module, configured to determine a target sub-application isolation policy from the sub-application isolation policies;
and the second processing module is used for carrying out corresponding application isolation processing based on the target sub-application isolation strategy.
In this embodiment, the operations respectively executed by the modules or units correspond to the steps of the method for creating an application page in the foregoing embodiment one by one, and are not described herein again.
In order to solve the technical problem, the embodiment of the application further provides computer equipment. Referring to fig. 4 in particular, fig. 4 is a block diagram of a basic structure of a computer device according to the embodiment.
The computer device 4 comprises a memory 41, a processor 42, a network interface 43 communicatively connected to each other via a system bus. It is noted that only computer device 4 having components 41-43 is shown, but it is understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead. As will be understood by those skilled in the art, the computer device is a device capable of automatically performing numerical calculation and/or information processing according to a preset or stored instruction, and the hardware includes, but is not limited to, a microprocessor, an Application Specific Integrated Circuit (ASIC), a Programmable Gate Array (FPGA), a Digital Signal Processor (DSP), an embedded device, and the like.
The computer device can be a desktop computer, a notebook, a palm computer, a cloud server and other computing devices. The computer equipment can carry out man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch panel or voice control equipment and the like.
The memory 41 includes at least one type of readable storage medium including flash memory, hard disks, multimedia cards, card-type memory (e.g., SD or DX memory, etc.), random Access Memory (RAM), static Random Access Memory (SRAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), programmable Read Only Memory (PROM), magnetic memory, magnetic disks, optical disks, etc. In some embodiments, the memory 41 may be an internal storage unit of the computer device 4, such as a hard disk or a memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the computer device 4. Of course, the memory 41 may also include both internal and external storage devices of the computer device 4. In this embodiment, the memory 41 is generally used for storing an operating system installed in the computer device 4 and various types of application software, such as computer readable instructions of a creating method of an application page. Further, the memory 41 may also be used to temporarily store various types of data that have been output or are to be output.
The processor 42 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is configured to execute computer readable instructions stored in the memory 41 or process data, for example, execute computer readable instructions of the application page creation method.
The network interface 43 may comprise a wireless network interface or a wired network interface, and the network interface 43 is generally used for establishing communication connection between the computer device 4 and other electronic devices.
Compared with the prior art, the embodiment of the application mainly has the following beneficial effects:
in the embodiment of the application, after an application access request corresponding to a sub-application is received, a main application corresponding to a preset micro front-end framework is loaded, a name of the sub-application is obtained from the application access request through the main application, then an entry file corresponding to the name of the sub-application is obtained, then a resource configuration file corresponding to the sub-application is obtained based on the entry file, an initialization resource corresponding to the sub-application is determined based on the resource configuration file, and finally a page of the sub-application is rendered in a designated mount area corresponding to the sub-application based on the initialization resource. According to the method and the device for creating the sub-application page, the sub-application page corresponding to the application access request can be quickly created and generated through the micro front-end frame, so that the access of the sub-application page can be responded at a higher speed, and the efficiency of developing and creating the sub-application page is improved. And the resource configuration file required by the sub-application can be dynamically acquired, so that the lightweight processing of the page of the sub-application is realized, and the use experience of a user is improved.
The present application further provides another embodiment, which is to provide a computer-readable storage medium storing computer-readable instructions executable by at least one processor to cause the at least one processor to perform the steps of the method for creating an application page as described above.
Compared with the prior art, the embodiment of the application mainly has the following beneficial effects:
in the embodiment of the application, after an application access request corresponding to a sub-application is received, a main application corresponding to a preset micro front-end framework is loaded, the name of the sub-application is obtained from the application access request through the main application, then an entry file corresponding to the name of the sub-application is obtained, then a resource configuration file corresponding to the sub-application is obtained based on the entry file, an initialization resource corresponding to the sub-application is determined based on the resource configuration file, and finally a page of the sub-application is rendered in a designated mount area corresponding to the sub-application based on the initialization resource. According to the method and the device for creating the sub-application page, the sub-application page corresponding to the application access request can be quickly created and generated through the micro front-end frame, so that the access of the sub-application page can be responded at a higher speed, and the efficiency of developing and creating the sub-application page is improved. And the resource configuration file required by the sub-application can be dynamically acquired, so that the lightweight processing of the page of the sub-application is realized, and the use experience of a user is improved.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present application may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (such as a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present application.
It should be understood that the above-described embodiments are merely exemplary of some, and not all, embodiments of the present application, and that the drawings illustrate preferred embodiments of the present application without limiting the scope of the claims appended hereto. This application is capable of embodiments in many different forms and is provided for the purpose of enabling a thorough understanding of the disclosure of the application. Although the present application has been described in detail with reference to the foregoing embodiments, it will be apparent to one skilled in the art that the present application may be practiced without modification or with equivalents of some of the features described in the foregoing embodiments. All equivalent structures made by using the contents of the specification and the drawings of the present application are directly or indirectly applied to other related technical fields, and all the equivalent structures are within the protection scope of the present application.

Claims (10)

1. A method for creating an application page is characterized by comprising the following steps:
judging whether an application access request corresponding to the sub-application is received or not; wherein the application access carries the name of the sub-application;
if yes, loading a main application corresponding to a preset micro front-end framework, and acquiring the name of the sub-application from an application access request through the main application;
acquiring an entry file corresponding to the name of the sub-application;
acquiring a resource configuration file corresponding to the sub-application based on the entry file;
determining an initialization resource corresponding to the sub-application based on the resource profile;
and rendering the page of the sub application in a specified mounting area corresponding to the sub application based on the initialization resource.
2. The method for creating an application page according to claim 1, wherein the step of obtaining the resource configuration file corresponding to the sub-application based on the entry file specifically includes:
analyzing the entry file, and acquiring a request address of the resource configuration file from the entry file;
sending a file acquisition request corresponding to the resource configuration file to a preset first server based on the request address;
and receiving the resource configuration file returned after the first server processes the file acquisition request.
3. The method for creating an application page according to claim 1, wherein the step of determining the initialized resource corresponding to the sub-application based on the resource profile specifically includes:
acquiring all file names contained in the initialized resources based on the resource configuration file;
reading target tags meeting preset conditions from all the file names;
inserting the target label into a preset application environment;
sending a resource acquisition request to a preset second server based on the inserted target label;
and receiving the initialized resource returned after the second server processes the resource acquisition request.
4. The method for creating the application page according to claim 1, wherein the step of rendering the page of the sub application in the designated mount area corresponding to the sub application based on the initialization resource specifically includes:
acquiring js resource files and css resource files contained in the initialization resources;
determining component information corresponding to the specified mounting area based on the js resource file;
determining display information of a component corresponding to the component information based on the css resource file;
and rendering the page of the sub application in the designated mounting area based on the component information and the display information.
5. The method for creating an application page according to claim 1, further comprising, after the step of rendering the page of the sub application in a designated mount area corresponding to the sub application based on the initialization resource, the steps of:
judging whether an editing request which is triggered by a target user and corresponds to the page of the sub application is received;
if so, displaying a preset sub-application editing page, and loading a preset component library in the sub-application editing page;
receiving a target component dragged from the component library to a specified area in the sub application editing page by the target user based on a dragging mode;
determining a designated location of the target component within the designated area;
acquiring component resource information corresponding to the target component;
and performing rendering processing and attribute configuration processing on the target assembly based on the position of the target assembly and the assembly resource information to obtain a corresponding application interface.
6. The method for creating an application page according to claim 5, wherein the step of performing rendering processing and attribute configuration processing on the target component based on the position of the target component and the component resource information to obtain a corresponding application interface specifically includes:
analyzing the component resource information to obtain a code downloading address of the target component and an attribute file of the target component;
acquiring a code corresponding to the target component based on the code download address;
rendering the target component within the specified location based on the code;
and performing attribute configuration on the target assembly based on the attribute file to obtain the application interface.
7. The method for creating an application page according to claim 1, further comprising, before the step of rendering the page of the sub application in a designated mount area corresponding to the sub application based on the initialization resource, the steps of:
acquiring a preset sub-application isolation strategy; wherein the isolation strategy comprises one or more of soft isolation, hard isolation and css isolation;
determining a target sub-application isolation strategy from the sub-application isolation strategies;
and performing corresponding application isolation processing based on the target sub-application isolation strategy.
8. An apparatus for creating an application page, comprising:
the first judgment module is used for judging whether an application access request corresponding to the sub-application is received or not; wherein the application access carries the name of the sub-application;
the loading module is used for loading a main application corresponding to a preset micro front end framework if the main application is in the preset micro front end framework, and acquiring the name of the sub-application from an application access request through the main application;
the first acquisition module is used for acquiring an entry file corresponding to the name of the sub application;
a second obtaining module, configured to obtain, based on the entry file, a resource configuration file corresponding to the sub-application;
a first determining module, configured to determine, based on the resource configuration file, an initialization resource corresponding to the sub-application;
and the rendering module is used for rendering the page of the sub application in the specified mounting area corresponding to the sub application based on the initialization resource.
9. A computer device comprising a memory having computer readable instructions stored therein and a processor which when executed implements the steps of the method of creating an application page as claimed in any one of claims 1 to 7.
10. A computer-readable storage medium, having computer-readable instructions stored thereon, which, when executed by a processor, implement the steps of the method of creating an application page of any one of claims 1 to 7.
CN202211160709.9A 2022-09-22 2022-09-22 Application page creating method and device, computer equipment and storage medium Pending CN115562662A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211160709.9A CN115562662A (en) 2022-09-22 2022-09-22 Application page creating method and device, computer equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211160709.9A CN115562662A (en) 2022-09-22 2022-09-22 Application page creating method and device, computer equipment and storage medium

Publications (1)

Publication Number Publication Date
CN115562662A true CN115562662A (en) 2023-01-03

Family

ID=84741346

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211160709.9A Pending CN115562662A (en) 2022-09-22 2022-09-22 Application page creating method and device, computer equipment and storage medium

Country Status (1)

Country Link
CN (1) CN115562662A (en)

Similar Documents

Publication Publication Date Title
CN113254445A (en) Real-time data storage method and device, computer equipment and storage medium
CN115455058A (en) Cache data processing method and device, computer equipment and storage medium
CN113076224B (en) Data backup method, data backup system, electronic device and readable storage medium
CN109976744B (en) Visual programming method, system and terminal equipment
CN115712422A (en) Form page generation method and device, computer equipment and storage medium
CN116450723A (en) Data extraction method, device, computer equipment and storage medium
CN115562662A (en) Application page creating method and device, computer equipment and storage medium
CN115546356A (en) Animation generation method and device, computer equipment and storage medium
CN116466945A (en) Data display method, device, computer equipment and storage medium
CN117390119A (en) Task processing method, device, computer equipment and storage medium
CN115828846A (en) Display page font processing method and related equipment thereof
CN115526731A (en) Task batch processing method and device, computer equipment and storage medium
CN117591190A (en) Application data loading optimization method, device, equipment and storage medium thereof
CN116643884A (en) Data computing method, device, equipment and storage medium based on rule engine
CN116932486A (en) File generation method, device, computer equipment and storage medium
CN117056629A (en) Cache configuration method, device, computer equipment and storage medium
CN115827047A (en) Request processing method and device, computer equipment and storage medium
CN115344372A (en) Cell layout method, device and equipment for sliding view and storage medium
CN115563935A (en) Page data loading method of tree form and related equipment thereof
CN114528220A (en) Test case generation method and device, computer equipment and storage medium
CN115828018A (en) Electronic magazine interface material replacing method and related equipment thereof
CN117407469A (en) Cluster deployment method and device, computer equipment and storage medium
CN115756630A (en) Plug-in processing method and device, computer equipment and storage medium
CN114510916A (en) Template loading method and device, computer equipment and storage medium
CN117874137A (en) Data processing method, device, computer equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination