CN112925998A - Interface data processing method, device and system, electronic equipment and storage medium - Google Patents
Interface data processing method, device and system, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN112925998A CN112925998A CN202110341279.XA CN202110341279A CN112925998A CN 112925998 A CN112925998 A CN 112925998A CN 202110341279 A CN202110341279 A CN 202110341279A CN 112925998 A CN112925998 A CN 112925998A
- Authority
- CN
- China
- Prior art keywords
- access request
- interface element
- target
- interface
- address
- 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.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9538—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
According to the technical scheme, a front-end application program does not need to know a server for deploying static resources or interface data of an interface element, and the static resources or the interface data corresponding to the interface element can be inquired by a public background server only according to the unique identifier of the interface element. Therefore, the independently developed and deployed interface elements can be loaded by the front-end application program, the API corresponding to the interface elements can be called after the interface elements are loaded, and the interface elements developed by different teams can be flexibly and alternately used in the website development, operation and maintenance process, the website development, operation and maintenance efficiency is improved, and the communication and cooperation cost is reduced.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to an interface data processing method, apparatus, system, electronic device, and storage medium.
Background
With the development of internet technology, the functions of modern websites are highly complex and need to be completed by the division of labor and cooperation of large-scale teams. In a traditional division work mode, division is generally performed on the basis of a front-end interface and a back-end service, then different functional modules are divided in the front-end interface or the back-end service, each module is developed by different teams, and finally the modules are imported into a summary project to complete overall construction and deployment. Because all modules need to be constructed and deployed together finally, a large amount of coordination work is carried out among the modules, and therefore the development, operation and maintenance process of a large website is caused, and the problems of high cooperation cost and low efficiency exist.
Disclosure of Invention
In order to solve the technical problem or at least partially solve the technical problem, embodiments of the present application provide an interface data processing method, apparatus, system, electronic device, and storage medium.
According to an aspect of an embodiment of the present application, there is provided an interface data processing method, including:
receiving an initial access request from a front-end application program, wherein the initial access request comprises an initial address corresponding to a first interface element;
analyzing the initial access request to obtain a unique identifier corresponding to the first interface element;
querying a target address corresponding to the first interface element based on the unique identifier;
replacing the initial address in the initial access request with the target address to obtain a target access request;
sending the target access request to a target server corresponding to the target address, and inquiring by the target server based on the target access request to obtain accessed data;
and forwarding the accessed data fed back by the target server to the front-end application program.
Optionally, the unique identifier includes object information corresponding to the first interface element;
the analyzing the initial access request to obtain the unique identifier corresponding to the first interface element includes:
analyzing the initial address to obtain attribute information corresponding to the first interface element;
obtaining object information corresponding to the first interface element based on the attribute information;
the querying of the target address corresponding to the first interface element based on the unique identifier includes:
and inquiring the extended information corresponding to the object information, and obtaining the target address from the extended information, wherein the extended information is stored in a database in an object storage mode.
Optionally, the analyzing the initial access request to obtain the unique identifier corresponding to the first interface element further includes:
analyzing to obtain a request type corresponding to the initial access request, wherein the request type comprises a resource request or an interface request;
the querying of the target address corresponding to the first interface element based on the unique identifier includes:
inquiring the extension information corresponding to the unique identification;
and inquiring a target resource address corresponding to the resource request or a target interface address corresponding to the interface request from the extended information.
According to another aspect of the embodiments of the present application, there is provided an interface data processing method, including:
generating an initial access request corresponding to a first interface element, wherein the initial access request comprises a unique identifier and an initial address corresponding to the first interface element;
sending the initial access request to a public background server, inquiring a target address corresponding to the unique identifier by the public background server according to the initial access request, replacing the initial address in the initial access request with the target address to obtain a target access request, sending the target access request to a target server corresponding to the target address, and receiving accessed data fed back by the target server based on the target access request;
and displaying the first interface element according to the accessed data forwarded by the public background server.
Optionally, the generating an initial access request corresponding to the first interface element includes:
when a loading request for a functional component corresponding to the first interface element is received, generating an initial access request for requesting a static resource corresponding to the first interface element;
or the like, or, alternatively,
when an operation request for the first interface element is received, an initial access request for requesting interface data corresponding to the first interface element is generated.
Optionally, when the first interface element is disposed inside a second interface element, the first interface element is defined as a custom element, and a custom element tag is inserted into an insertion position of the first interface element inside the second interface element;
when the received accessed data includes the static resource corresponding to the first interface element, the displaying the first interface element according to the accessed data forwarded by the public backend server includes:
running a script file containing the static resource in the accessed data to obtain a rendering parameter corresponding to the custom element;
searching a self-defined element tag corresponding to the first interface element;
and rendering the custom element with the rendering parameters to an insertion position corresponding to the custom element tag so as to display the first interface element.
According to another aspect of the embodiments of the present application, there is provided an interface data processing apparatus including:
the system comprises a receiving module, a sending module and a processing module, wherein the receiving module is used for receiving an initial access request from a front-end application program, and the initial access request comprises an initial address corresponding to a first interface element;
the analysis module is used for analyzing the initial access request to obtain a unique identifier corresponding to the first interface element;
the query module is used for querying a target address corresponding to the first interface element based on the unique identifier;
the replacing module is used for replacing the initial address in the initial access request with the target address to obtain a target access request;
the sending module is used for sending the target access request to a target server corresponding to the target address, and the target server inquires to obtain accessed data based on the target access request;
and the receiving module is used for forwarding the accessed data fed back by the target server to the front-end application program.
According to another aspect of the embodiments of the present application, there is provided an interface data processing apparatus including:
the system comprises a generating module, a sending module and a processing module, wherein the generating module is used for generating an initial access request corresponding to a first interface element, the initial access request comprises an initial address of the first interface element, and the first interface element is arranged in a second interface element;
the sending module is used for sending the initial access request to a public background server, the public background server inquires a target address corresponding to the first interface element according to the initial access request, replaces the initial address in the initial access request with the target address to obtain a target access request, sends the target access request to a target server corresponding to the target address, and receives accessed data fed back by the target server based on the target access request;
and the display module is used for displaying the first interface element according to the accessed data forwarded by the public background server.
According to another aspect of the embodiments of the present application, there is provided an interface data processing system including: a front-end application program, a public background server and a target server;
the front-end application program is used for generating an initial access request corresponding to the first interface element, and the initial access request comprises an initial address of the first interface element; sending the initial access request to a public backend server;
the public background server is used for analyzing the initial access request to obtain a unique identifier corresponding to the first interface element; querying a target address corresponding to the first interface element based on the unique identifier; replacing the initial address in the initial access request with the target address to obtain a target access request; sending the target access request to a target server corresponding to the target address;
the target server is used for inquiring to obtain accessed data based on the target access request;
the public background server is used for forwarding the accessed data fed back by the target server to the front-end application program;
and the front-end application program is used for displaying the first interface element according to the accessed data.
According to another aspect of the embodiments of the present application, there is also provided a storage medium including a stored program that executes the above steps when the program is executed.
According to another aspect of an embodiment of the present application, there is provided an electronic device including: the system comprises a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory complete mutual communication through the communication bus;
the memory is used for storing a computer program;
the processor is configured to implement the above method steps when executing the computer program.
According to another aspect of embodiments of the present application, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the above-mentioned method steps.
Compared with the prior art, the technical scheme provided by the embodiment of the application has the following advantages:
in the embodiment of the application, after the interface element is deployed independently, when any front-end application program uses the interface element, the static resource request required for loading the interface element can be forwarded to the independently deployed resource server through the object data corresponding to the interface element stored in the public background server in advance, and the back-end API interface request sent by the interface element loaded by the front-end application program is forwarded to the independently deployed interface server according to the object data. Therefore, the front-end application program does not need to know the server for deploying the static resources or the interface data of the interface element, and the public background server can inquire the static resources or the interface data corresponding to the interface element only according to the unique identifier of the interface element. Therefore, the independently developed and deployed interface elements can be loaded by the front-end application program, the API corresponding to the interface elements can be called after the interface elements are loaded, and the interface elements developed by different teams can be flexibly and alternately used in the website development, operation and maintenance process, the website development, operation and maintenance efficiency is improved, and the communication and cooperation cost is reduced.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and together with the description, serve to explain the principles of the invention.
In order to more clearly illustrate the embodiments or technical solutions in the prior art of the present invention, the drawings used in the description of the embodiments or prior art will be briefly described below, and it is obvious for those skilled in the art that other drawings can be obtained based on these drawings without creative efforts.
Fig. 1 is a flowchart of an interface data processing method according to an embodiment of the present disclosure;
fig. 2 is a flowchart of an interface data processing method according to another embodiment of the present application;
fig. 3 is a flowchart of an interface data processing method according to another embodiment of the present application;
fig. 4 is a flowchart of an interface data processing method according to another embodiment of the present application;
fig. 5 is a flowchart of an interface data processing method according to another embodiment of the present application;
fig. 6 is a flowchart of an interface data processing method according to another embodiment of the present application;
fig. 7 is a block diagram of an interface data processing apparatus according to an embodiment of the present application;
fig. 8 is a block diagram of an interface data processing apparatus according to another embodiment of the present application;
FIG. 9 is a block diagram of an interface data processing system provided by an embodiment of the present application;
fig. 10 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The interface element (interface element) in the embodiment of the present application refers to a series of elements that satisfy user interaction requirements and are included in a software or system interface that can satisfy interaction requirements. Interface elements can be classified into the following categories: windows, dialog boxes, menus, scroll bars, graphics, control panels, clipboards, cursor buttons, and the like.
In order to solve the problems of high cost and low efficiency of large website development, operation and maintenance cooperation in the prior art, the embodiment of the application provides an interface data processing technology, and static resources or interface data corresponding to interface elements to be loaded by a front-end application program are inquired by using a common background server.
For interface elements developed by different teams, after static resources of the interface elements are deployed to a resource server or interface data are deployed to the interface server, target addresses of the static resources or the interface data of the interface elements in the resource server are stored in a database through a public background server in an extended information mode. Therefore, when the front-end application program needs to load the interface element, the static resource or the interface data corresponding to the interface element can be obtained through the inquiry of the public background server without knowing the address of the server for deploying the static resource or the interface data of the interface element. Therefore, in the website development, operation and maintenance process, interface elements developed by different teams can be flexibly and alternately used, the website development, operation and maintenance efficiency is improved, and the communication and cooperation cost is reduced.
In this embodiment, inside an interface element, at least one insertion position (also referred to as a slot) for placing other interface elements may be set. Based on the characteristics of the Web Components specification in the HTML standard, the interface element inserted into the slot is defined as a Custom element (Custom Elements), and static resources such as HTML, css, Javascript and the like required by the interface element are packaged into a Javascript script file, for example, through tools such as Webpack and the like. The packaged script file can be deployed to a resource server, and an initial address (URL) for accessing the script file is provided for the outside.
The Custom element (Custom Elements) is an object of a customizable interface under the specification of Web Components.
The embodiment of the application relates to a front-end application program, a public background server and a target server. The front-end application program is used for loading the interface elements and requesting to access the static resources and the interface data of the interface elements; a public background server (Portal) forwards an access request of a front-end application program to an actual target server; and the target server sends the accessed data corresponding to the access request to the Portal, and the Portal forwards the accessed data to the front-end application program.
First, an interface data processing method provided by an embodiment of the present invention is described below.
According to the technical scheme, the static resources and the interface API service of each interface element can be independently deployed, namely are respectively deployed on different servers and accessed through different URL addresses. However, the static resources of the interface element and the API interface services are typically accessed as a whole by the front-end application using the same domain name. Therefore, the embodiment of the present application provides an interface data processing method, so that the URL addresses requested by the front-end application all use the same domain name, and the Portal can forward the access request sent by the front-end application to the actual target server.
Fig. 1 is a flowchart of an interface data processing method according to an embodiment of the present application. As shown in fig. 1, the method is applied to Portal, and comprises the following steps:
step S11, an initial access request from the front-end application is received, where the initial access request includes an initial address corresponding to the first interface element.
The initial address is not the actual address to be accessed by the initial access request, but a virtual URL address of the same domain name is used. The initial address is used for inquiring the actual target address corresponding to the interface element from Portal.
And step S12, analyzing the initial access request to obtain the unique identifier corresponding to the first interface element.
The initial access request may include a unique identifier corresponding to the first interface element and an initial address.
Wherein, the unique identification of the interface element may include, but is not limited to, at least one of the following information:
(1) object information
The object information may include an object type kid.
And the kind comprises: group name group, simpleName for short and version number version.
(2) Scope name scope and name
An interface element can be globally and uniquely determined by scope and name.
(3) Fully Qualified Name (FQN)
Where FQN ═ scope > + '/' + < object name > to which the object belongs.
(4) Universal Unique identification code (UUID, Universal Unique Identifier)
Wherein the UUID is generated at the time of interface element creation.
By any of the above information, the interface element can be uniquely determined by Portal.
Thus, the initial address may be a predefined virtual URL address, such as/ui/extension/Portal/xxx or/api/extension/Portal/xxx, which is then used only to pass the initial access request to Portal and to determine whether the request type of the initial access request is a resource request ("ui") or an interface request ("api").
And step S13, inquiring a target address corresponding to the first interface element based on the unique identifier.
In the database, the actual address of the interface element at the target server is stored, that is, the address of the static resource or API interface data that can actually access the interface element. Portal can query its corresponding target address from the database through the unique identification of the interface element.
And step S14, replacing the initial address in the initial access request with the target address to obtain the target access request.
And replacing the initial address in the initial access request by the Portal with the target address obtained by query to obtain a target access request containing the actual URL address.
And step S15, sending the target access request to a target server corresponding to the target address, and obtaining the accessed data by the target server based on the target access request query.
Through the target address, Portal can send a target access request to the target server that actually stores the data served by the interface element static resource or the provisioning API, from which the data to be accessed is available.
And step S16, forwarding the accessed data fed back by the target server to the front-end application program.
Portal forwards the queried accessed data to the front-end application, which may display interface elements based on the accessed data.
Through the steps S11 to S16, after the interface element is deployed independently, when any front-end application uses the interface element, object data corresponding to the interface element pre-stored in the database may be queried through Portal, a static resource request required to load the interface element is forwarded to the resource server deployed independently, and a back-end API interface request sent by the interface element loaded by the front-end application is forwarded to the interface server deployed independently according to the object data.
Therefore, the front-end application program does not need to know the server for deploying the static resources or the interface data of the interface element, and the public background server can inquire the static resources or the interface data corresponding to the interface element only according to the unique identifier of the interface element. Therefore, the independently developed and deployed interface elements can be loaded by the front-end application program, the API corresponding to the interface elements can be called after the interface elements are loaded, and the interface elements developed by different teams can be flexibly and alternately used in the website development, operation and maintenance process, the website development, operation and maintenance efficiency is improved, and the communication and cooperation cost is reduced.
In the embodiment of the application, after the interface element is created and the static resource of the interface element is deployed to the resource server, the extended information of the interface element can be stored in the database through the associated interface of the Portal and the database.
Fig. 2 is a flowchart of an interface data processing method according to another embodiment of the present application. As shown in fig. 2, the method further comprises the steps of:
step S21, acquiring element extension information corresponding to the first interface element; the static resources corresponding to the first interface elements are deployed on the resource server; the element extension information includes: the unique identification of the first interface element and the target resource address of the static resource on the resource server;
step S22, acquiring a target interface address of the interface server corresponding to the first interface element as the interface extension information;
step S23, the element extension information and the interface extension information are stored in the database in an object storage manner as extension information corresponding to the first interface element.
In this embodiment, the extended information is stored in the database in an object storage manner. In the object storage mode, each object is a tree-structured document and is represented by YAML or Json format.
Taking YAML format as an example, the objects stored in the database are in the following form:
kid: < object type >
metadata:
UUID: < globally unique UUID, automatically generated by server side during creation >
revision: < object version, server automatically generates when creating, and automatically updates when updating >
scope: < FQN as subject of scope >
name: < unique name under same scope at current time point >
labels:<String->String>
annotations:<String->String>
spec:
... < Each object type can define a respective spec schema >
Wherein, each object can be globally and uniquely determined by scope and name, and can be uniquely identified by the form of FQN.
FQN ═ scope > + '/' + < object name > to which the object belongs.
Each object must be under a scope, which is formed by each object, and the name of the scope is the FQN of the object.
The object life cycle is always in the life cycle of the scope object, the scope of the object must exist before the object is created, and after the scope object is deleted, the objects under the scope should be deleted recursively. A global scope is denoted by '/' and is not generated by any object, nor can it be deleted.
The object has a type, specified by the kind field. The value of kind is a string of characters of the form < group >/< simpleName >/< version >.
Any tree-shaped structured data can be stored under the spec field of each object, so that universal unified storage capacity is provided for all application programs. And the spec field of the kind object has a specific format, such as:
spec:
group:mesos
simpleName:qae
version:0.1.0
uiExtension:
baseUrl:http://qae-ui
components:
-element:qae-app-view
bundlePath:/component/qae-app-view.js
slot:default
apiExtension:
baseURL:http://qae-api
wherein, the group, simpleName and version fields indicate that the kind object defines an object type named < meso >/< qae >/<0.1.0 >. The uiExtension and apiExtension fields store extension information of the interface element, and may store information such as the HTML tag name of the Custom Elements of the interface element, the insertion location of the interface element, and the like, in addition to the target address URL that needs to be used when forwarding the request.
Optionally, all the extension information stored in the object storage manner may provide an access interface to the outside through a set of RESTAPI, and support querying, creating, deleting, and modifying (including the kind object) the stored object.
In the embodiment, the object storage model is adopted, and besides the data required by the storage extension mechanism, a flexible and universal data persistence storage capacity is provided, so that the development of the application program is not required to develop respective data storage layers, and the development complexity of the application program is greatly simplified.
In another alternative embodiment, the unique identifier may include object information, i.e., object type kid, corresponding to the first interface element, such that the initial access request does not include a field corresponding to the unique identifier, and the unique identifier may be resolved from the initial address by including object type kid in the initial address. Fig. 3 is a flowchart of an interface data processing method according to an embodiment of the present application. As shown in fig. 3, the step S12 includes:
step S31, analyzing the initial address to obtain attribute information corresponding to the first interface element;
optionally, the attribute information includes a group name, a abbreviation, and a version number;
step S32, obtaining object information corresponding to the first interface element based on the attribute information;
the step S13 includes:
and step S33, inquiring the extension information corresponding to the object information, and obtaining the target address from the extension information, wherein the extension information is stored in the database in an object storage mode.
For example, in an initial request received by Portal, the initial address includes: ui/extension/< ind.group >/< ind.simplename >/< ind.version >. From the initial address, three variables of a group name, which is called "kindsiplename for short, and a version number, which are analyzed, can be obtained, so that object information (object type kind) corresponding to the interface element is obtained.
Because the extended information is stored in the database in an object storage mode, based on the object information (object type kind), the extended information corresponding to the object information can be inquired, and further the target address corresponding to the access request can be inquired.
In an alternative embodiment, the content of the initial access request sent by the front-end application may be static resources of the interface element or API interface data. Fig. 4 is a flowchart of an interface data processing method according to an embodiment of the present application. As shown in fig. 4, the step S12 includes:
step S41, analyzing to obtain a request type corresponding to the initial access request, wherein the request type comprises a resource request or an interface request;
the step S13 includes:
step S42, inquiring the extension information corresponding to the unique identifier;
step S43, the target resource address corresponding to the resource request or the target interface address corresponding to the interface request is queried from the extended information.
For example, in an initial access request received by Portal, the initial address includes: and/ui/extension/< med.group >/< med.simplename >/< med.version >, based on the "ui" therein, the request type of the initial access request can be determined as a resource request. If the initial address in the initial access request includes: and/api/extension/< kid.group >/< kid.simplename >/< kid.version >, the request type of the initial access request can be determined to be an interface request based on the api therein. And after inquiring corresponding extended information in the database based on the unique identifier, inquiring a target address corresponding to the request type from the extended information.
In the above embodiment, the front-end application program does not need to know the actual deployment address of the interface element, and the Portal obtains the static resource or the API interface data of the interface element from the corresponding target server according to the request type in the initial access request by using the same initial address regardless of the initial access request for the static resource and the API interface data. Therefore, the front-end application program can load the interface element and call the API interface corresponding to the interface element through Portal after the interface element is loaded. Therefore, for the front-end application program, the static resources and the API interface data of the interface elements can be accessed only according to the interface element identification, the data request of the deployed interface elements is simpler, the data request is prevented from being limited by cross-domain access of a browser, the internal architecture information of the application program is prevented from being exposed, and the safety of the application program is improved.
In another embodiment, for an interface element newly developed by a developer, the interface element can also be registered to Portal after the static resource and the interface data are deployed to a corresponding resource server. The method further comprises the following steps:
step a1, acquiring element extension information and interface extension information corresponding to the first interface element.
Wherein the first interface element inserted into the second interface element is defined as a custom element, and the insertion position of the first interface element in the second interface element is inserted into the custom element tag.
The static resources corresponding to the first interface elements are packaged into script files, and the script files are deployed to a resource server; the unique identifier corresponding to the first interface element and the target resource address of the script file deployed in the resource server are used as element extension information, and the target interface address of the interface server corresponding to the first interface element is used as interface extension information.
Step a2, the element extension information and the interface extension information are sent to a database as the extension information corresponding to the first interface element, and the extension information is stored in the database in an object storage mode.
The second interface element may be a UI frame of a front-end application (website, page, etc.). A plurality of slots may be included in an interface element. The first interface element to be inserted may also include one or more slots into which other interface elements may be inserted.
Thus, through the steps a1 and a2, for interface elements developed by different teams, after the static resources of the interface elements are deployed to the resource server or the interface data are deployed to the interface server, the target addresses of the static resources or the interface data of the interface elements in the resource server are stored in the database through the public background server in an extended information manner. After the registration of the newly developed interface element is completed on the Portal, the subsequent front-end application program can inquire the static resource or the interface data corresponding to the interface element by the Portal according to the unique identifier of the interface element.
The following describes an interface data processing method provided by an embodiment of the present invention.
Fig. 5 is a flowchart of an interface data processing method according to an embodiment of the present application. As shown in fig. 5, the method is applied to a front-end application program, and comprises the following steps:
step S51, an initial access request corresponding to the first interface element is generated, where the initial access request includes the unique identifier and the initial address corresponding to the first interface element.
In this case, the initial address is not an actual address to be accessed, but a virtual URL address of the same domain name is used. The initial address is used to query a public backend server (Portal) for the actual target address corresponding to the interface element.
Step S52, the initial access request is sent to a public background server, the public background server queries a target address corresponding to the unique identifier according to the initial access request, replaces the initial address in the initial access request with the target address to obtain a target access request, sends the target access request to a target server corresponding to the target address, and receives accessed data fed back by the target server based on the target access request.
And step S53, displaying the first interface element according to the accessed data forwarded by the public background server.
Optionally, the front-end application may generate an access request for a static resource or API interface data, where the step S51 includes: when a loading request for a functional component corresponding to a first interface element is received, generating an initial access request for requesting a static resource corresponding to the first interface element; or when receiving an operation request for the first interface element, generating an initial access request for requesting the interface data corresponding to the first interface element.
Alternatively, the requesting static resource or API interface data may be differentiated by adding a "ui" or "API" to the initial access request.
Optionally, when the first interface element is disposed inside the second interface element, the first interface element is defined as a custom element, and a custom element tag is inserted into an insertion position of the first interface element inside the second interface element.
Fig. 6 is a flowchart of an interface data processing method according to an embodiment of the present application. As shown in fig. 6, for the front-end application, when the received accessed data includes a static resource corresponding to the first interface element, the step S53 includes:
step S61, running a script file containing static resources in the accessed data to obtain rendering parameters corresponding to the custom elements;
the rendering parameters are parameters required for rendering the first interface element, such as a style, a color, text, and the like of the first interface element.
Step S62, searching a custom element label corresponding to the first interface element;
and step S63, rendering the custom element with the rendering parameters to an insertion position corresponding to the custom element tag so as to display the first interface element.
In this embodiment, after receiving the accessed data, the front-end application runs the Javascript code therein, and completes definition of the custom through the obtained rendering parameter, and since a custom tag has been inserted into the slot of the second element, the custom element with the rendering parameter can be rendered into the slot according to the tag, thereby displaying the first interface element.
The following are embodiments of the apparatus of the present application that may be used to perform embodiments of the method of the present application.
Fig. 7 is a block diagram of an interface data processing apparatus provided in an embodiment of the present application, which may be implemented as part of or all of an electronic device through software, hardware, or a combination of the two. As shown in fig. 7, the interface data processing apparatus is applied to Portal, and includes:
a receiving module 81, configured to receive an initial access request from a front-end application, where the initial access request includes an initial address corresponding to a first interface element;
the analyzing module 82 is configured to analyze the initial access request to obtain a unique identifier corresponding to the first interface element;
the query module 83 is configured to query a target address corresponding to the first interface element based on the unique identifier;
a replacing module 84, configured to replace an initial address in the initial access request with a target address, so as to obtain a target access request;
a sending module 85, configured to send a target access request to a target server corresponding to the target address, where the target server queries and obtains accessed data based on the target access request; and forwarding the accessed data fed back by the target server to the front-end application program.
Fig. 8 is a block diagram of an interface data processing apparatus according to another embodiment of the present application, which may be implemented as part of or all of an electronic device through software, hardware, or a combination of the two. As shown in fig. 8, the interface data processing apparatus is applied to a front-end application, and includes:
the generating module 91 is configured to generate an initial access request corresponding to a first interface element, where the initial access request includes an initial address of the first interface element, and the first interface element is arranged inside a second interface element;
the sending module 92 is configured to send the initial access request to a public backend server, where the public backend server queries a target address corresponding to the first interface element according to the initial access request, replaces the initial address in the initial access request with the target address to obtain a target access request, sends the target access request to a target server corresponding to the target address, and receives accessed data fed back by the target server based on the target access request;
and the display module 93 is configured to display the first interface element according to the accessed data forwarded by the public backend server.
Fig. 9 is a block diagram of an interface data processing system according to an embodiment of the present application, and as shown in fig. 10, the system includes: a front-end application 101, a common backend server 102, and a target server 103.
The front-end application program 101 is configured to generate an initial access request corresponding to the first interface element, where the initial access request includes an initial address of the first interface element; an initial access request is sent to common backend server 102.
The public background server 102 is used for analyzing the initial access request to obtain a unique identifier corresponding to the first interface element; querying a target address corresponding to the first interface element based on the unique identifier; replacing the initial address in the initial access request with a target address to obtain a target access request; and sending the target access request to the target server 103 corresponding to the target address.
And the target server 103 is used for obtaining the accessed data based on the target access request query.
And the public background server 102 is used for forwarding the accessed data fed back by the target server 103 to the front-end application program 101.
And the front-end application 101 is used for displaying the first interface element according to the accessed data.
The entire flow of the interface data processing will be described in detail below.
The front-end application is a browser and comprises a UI frame, and one or more UI slots are arranged in the UI frame. When accessing the link of a certain functional module in the UI framework, the UI framework starts to load the UI component corresponding to the functional module, and the loading process is as follows:
step A1, the browser obtains the object information corresponding to the UI component, such as object type kind;
step A2, the browser sends a request to Portal service according to group, simpleName and version of object type kind and bundlePath of interface element, and the initial address is/ui/extension/< kind.group >/< kind.simpleName >/< kind.version >/bundlePat h;
step A3, Portal looks up corresponding object from database according to group, simpleName and version information in request, to obtain the destination address URL of the static resource of UI component, and transmits the request to the resource server corresponding to the destination address URL, and the resource server providing the static resource file returns the static resource file;
step A4, after the browser receives the content of the static resource file, operating the Javascript code therein to complete the definition of the custom;
step A5, because the browser inserts a custom label in the UI slot in advance, the browser renders the UI component after obtaining the static resource file;
step A6, when the UI component is used or initialized, the browser sends a request to Portal, at this time, the request path prefix is/API/extension/< kined.group >/< kined.simpleName >/< kined.version >, Portal looks up the object corresponding to the object type kind from the database according to group, simpleName and version information in the request, obtains the destination address URL actually providing the API interface data, forwards the request to the interface server corresponding to the destination address URL, and the interface server actually providing the API service returns a response.
According to the embodiment of the application, the interface elements which are independently deployed can be dynamically loaded in the front-end application program, the front-end function of one functional module can be independently developed, deployed, operated and maintained, the coupling degree among different functional modules is greatly reduced, and the cooperation cost among development teams is reduced.
The access request forwarding mechanism in the embodiment of the application forwards the static resource and the back-end API request through Portal in a unified manner, so that the resource and service which are independently deployed and accessed through independent URLs can be exposed to the browser through the same domain name, the limitation of cross-domain access of the browser is avoided, and the internal architecture information of the website is also avoided from being exposed.
According to the method and the device, the object storage model is adopted, and besides the data required by the storage extension mechanism, a flexible and universal data persistence storage capacity is provided, so that respective data storage layers do not need to be developed when the application program is developed, and the development complexity of the application program is greatly simplified.
An embodiment of the present application further provides an electronic device, as shown in fig. 10, the electronic device may include: the system comprises a processor 1501, a communication interface 1502, a memory 1503 and a communication bus 1504, wherein the processor 1501, the communication interface 1502 and the memory 1503 complete communication with each other through the communication bus 1504.
A memory 1503 for storing a computer program;
the processor 1501, when executing the computer program stored in the memory 1503, implements the steps of the method embodiments described below.
The communication bus mentioned in the electronic device may be a Peripheral component interconnect (pci) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The communication bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown, but this does not mean that there is only one bus or one type of bus.
The communication interface is used for communication between the electronic equipment and other equipment.
The Memory may include a Random Access Memory (RAM) or a Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the processor.
The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic device, discrete hardware component.
The present application also provides a computer-readable storage medium having stored thereon a computer program which, when being executed by a processor, carries out the steps of the method embodiments described below.
It should be noted that, for the above-mentioned apparatus, electronic device and computer-readable storage medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiments.
It is further noted that, herein, relational terms such as "first" and "second," and the like, may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The foregoing are merely exemplary embodiments of the present invention, which enable those skilled in the art to understand or practice the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims (11)
1. An interface data processing method is characterized by comprising the following steps:
receiving an initial access request from a front-end application program, wherein the initial access request comprises an initial address corresponding to a first interface element;
analyzing the initial access request to obtain a unique identifier corresponding to the first interface element;
querying a target address corresponding to the first interface element based on the unique identifier;
replacing the initial address in the initial access request with the target address to obtain a target access request;
sending the target access request to a target server corresponding to the target address, and inquiring by the target server based on the target access request to obtain accessed data;
and forwarding the accessed data fed back by the target server to the front-end application program.
2. The method of claim 1, wherein the unique identifier comprises object information corresponding to the first interface element;
the analyzing the initial access request to obtain the unique identifier corresponding to the first interface element includes:
analyzing the initial address to obtain attribute information corresponding to the first interface element;
obtaining object information corresponding to the first interface element based on the attribute information;
the querying of the target address corresponding to the first interface element based on the unique identifier includes:
and inquiring the extended information corresponding to the object information, and obtaining the target address from the extended information, wherein the extended information is stored in a database in an object storage mode.
3. The method of claim 1, wherein the parsing the initial access request to obtain a unique identifier corresponding to the first interface element comprises:
analyzing to obtain a request type corresponding to the initial access request, wherein the request type comprises a resource request or an interface request;
the querying of the target address corresponding to the first interface element based on the unique identifier includes:
inquiring the extension information corresponding to the unique identification;
and inquiring a target resource address corresponding to the resource request or a target interface address corresponding to the interface request from the extended information.
4. An interface data processing method is characterized by comprising the following steps:
generating an initial access request corresponding to a first interface element, wherein the initial access request comprises a unique identifier and an initial address corresponding to the first interface element;
sending the initial access request to a public background server, inquiring a target address corresponding to the unique identifier by the public background server according to the initial access request, replacing the initial address in the initial access request with the target address to obtain a target access request, sending the target access request to a target server corresponding to the target address, and receiving accessed data fed back by the target server based on the target access request;
and displaying the first interface element according to the accessed data forwarded by the public background server.
5. The method of claim 4, wherein the generating an initial access request corresponding to the first interface element comprises:
when a loading request for a functional component corresponding to the first interface element is received, generating an initial access request for requesting a static resource corresponding to the first interface element;
or the like, or, alternatively,
when an operation request for the first interface element is received, an initial access request for requesting interface data corresponding to the first interface element is generated.
6. The method of claim 5, wherein when the first interface element is disposed inside a second interface element, the first interface element is defined as a custom element, and a custom element tag is inserted inside the second interface element at an insertion position of the first interface element;
when the received accessed data includes the static resource corresponding to the first interface element, the displaying the first interface element according to the accessed data forwarded by the public backend server includes:
running a script file containing the static resource in the accessed data to obtain a rendering parameter corresponding to the custom element;
searching a self-defined element tag corresponding to the first interface element;
and rendering the custom element with the rendering parameters to an insertion position corresponding to the custom element tag so as to display the first interface element.
7. An interface data processing apparatus, comprising:
the system comprises a receiving module, a sending module and a processing module, wherein the receiving module is used for receiving an initial access request from a front-end application program, and the initial access request comprises an initial address corresponding to a first interface element;
the analysis module is used for analyzing the initial access request to obtain a unique identifier corresponding to the first interface element;
the query module is used for querying a target address corresponding to the first interface element based on the unique identifier;
the replacing module is used for replacing the initial address in the initial access request with the target address to obtain a target access request;
the sending module is used for sending the target access request to a target server corresponding to the target address, and the target server inquires to obtain accessed data based on the target access request; and forwarding the accessed data fed back by the target server to the front-end application program.
8. An interface data processing apparatus, comprising:
the system comprises a generating module, a sending module and a processing module, wherein the generating module is used for generating an initial access request corresponding to a first interface element, the initial access request comprises an initial address of the first interface element, and the first interface element is arranged in a second interface element;
the sending module is used for sending the initial access request to a public background server, the background server inquires a target address corresponding to the first interface element according to the initial access request, replaces the initial address in the initial access request with the target address to obtain a target access request, sends the target access request to a target server corresponding to the target address, and receives accessed data fed back by the target server based on the target access request;
and the display module is used for displaying the first interface element according to the accessed data forwarded by the public background server.
9. An interface data processing system, comprising: a front-end application program, a public background server and a target server;
the front-end application program is used for generating an initial access request corresponding to the first interface element, and the initial access request comprises an initial address of the first interface element; sending the initial access request to a public backend server;
the public background server is used for analyzing the initial access request to obtain a unique identifier corresponding to the first interface element; querying a target address corresponding to the first interface element based on the unique identifier; replacing the initial address in the initial access request with the target address to obtain a target access request; sending the target access request to a target server corresponding to the target address;
the target server is used for inquiring to obtain accessed data based on the target access request;
the public background server is used for forwarding the accessed data fed back by the target server to the front-end application program;
and the front-end application program is used for displaying the first interface element according to the accessed data.
10. An electronic device, comprising: the system comprises a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory complete mutual communication through the communication bus;
the memory is used for storing a computer program;
the processor, when executing the computer program, implementing the method steps of any of claims 1-6.
11. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the method steps of any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110341279.XA CN112925998B (en) | 2021-03-30 | 2021-03-30 | Interface data processing method, device and system, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110341279.XA CN112925998B (en) | 2021-03-30 | 2021-03-30 | Interface data processing method, device and system, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112925998A true CN112925998A (en) | 2021-06-08 |
| CN112925998B CN112925998B (en) | 2023-07-25 |
Family
ID=76176566
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110341279.XA Active CN112925998B (en) | 2021-03-30 | 2021-03-30 | Interface data processing method, device and system, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112925998B (en) |
Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5999941A (en) * | 1997-11-25 | 1999-12-07 | Micron Electronics, Inc. | Database access using active server pages |
| JP2008033386A (en) * | 2006-07-26 | 2008-02-14 | Vip Partners Llc | Information processing provision system |
| CN102624729A (en) * | 2012-03-12 | 2012-08-01 | 北京星网锐捷网络技术有限公司 | Web authentication method, device and system |
| CN104516885A (en) * | 2013-09-26 | 2015-04-15 | 腾讯科技（深圳）有限公司 | Implementation method and device of browse program double-kernel assembly |
| CN105229633A (en) * | 2013-03-13 | 2016-01-06 | 萨勒斯福斯通讯有限公司 | For realizing system, method and apparatus disclosed in data upload, process and predicted query API |
| CN107451162A (en) * | 2016-06-01 | 2017-12-08 | 广州市动景计算机科技有限公司 | Network resource accession equipment, mixing apparatus and method |
| CN108717435A (en) * | 2018-05-16 | 2018-10-30 | 腾讯科技（深圳）有限公司 | Webpage loading method, information processing method, computer equipment and storage medium |
| US20180365024A1 (en) * | 2017-06-14 | 2018-12-20 | The Toronto-Dominion Bank | Dynamic modification of displayed interface elements based on contextual data |
| US20190102465A1 (en) * | 2017-09-29 | 2019-04-04 | Ca, Inc. | Api query extension |
| CN110187983A (en) * | 2019-05-24 | 2019-08-30 | 北京奇艺世纪科技有限公司 | A kind of remote invocation method, device and electronic equipment |
| CN111026491A (en) * | 2019-12-10 | 2020-04-17 | 北京小米移动软件有限公司 | Interface display method and device, electronic equipment, server and storage medium |
| CN111478935A (en) * | 2019-12-16 | 2020-07-31 | 马上消费金融股份有限公司 | Resource access method, internetwork connecting device, system and device |
| CN111866124A (en) * | 2020-07-17 | 2020-10-30 | 北京金山云网络技术有限公司 | Method, device, server and machine-readable storage medium for accessing webpage |
-
2021
- 2021-03-30 CN CN202110341279.XA patent/CN112925998B/en active Active
Patent Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5999941A (en) * | 1997-11-25 | 1999-12-07 | Micron Electronics, Inc. | Database access using active server pages |
| JP2008033386A (en) * | 2006-07-26 | 2008-02-14 | Vip Partners Llc | Information processing provision system |
| CN102624729A (en) * | 2012-03-12 | 2012-08-01 | 北京星网锐捷网络技术有限公司 | Web authentication method, device and system |
| CN105229633A (en) * | 2013-03-13 | 2016-01-06 | 萨勒斯福斯通讯有限公司 | For realizing system, method and apparatus disclosed in data upload, process and predicted query API |
| CN104516885A (en) * | 2013-09-26 | 2015-04-15 | 腾讯科技（深圳）有限公司 | Implementation method and device of browse program double-kernel assembly |
| CN107451162A (en) * | 2016-06-01 | 2017-12-08 | 广州市动景计算机科技有限公司 | Network resource accession equipment, mixing apparatus and method |
| US20180365024A1 (en) * | 2017-06-14 | 2018-12-20 | The Toronto-Dominion Bank | Dynamic modification of displayed interface elements based on contextual data |
| US20190102465A1 (en) * | 2017-09-29 | 2019-04-04 | Ca, Inc. | Api query extension |
| CN108717435A (en) * | 2018-05-16 | 2018-10-30 | 腾讯科技（深圳）有限公司 | Webpage loading method, information processing method, computer equipment and storage medium |
| CN110187983A (en) * | 2019-05-24 | 2019-08-30 | 北京奇艺世纪科技有限公司 | A kind of remote invocation method, device and electronic equipment |
| CN111026491A (en) * | 2019-12-10 | 2020-04-17 | 北京小米移动软件有限公司 | Interface display method and device, electronic equipment, server and storage medium |
| CN111478935A (en) * | 2019-12-16 | 2020-07-31 | 马上消费金融股份有限公司 | Resource access method, internetwork connecting device, system and device |
| CN111866124A (en) * | 2020-07-17 | 2020-10-30 | 北京金山云网络技术有限公司 | Method, device, server and machine-readable storage medium for accessing webpage |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112925998B (en) | 2023-07-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9729499B2 (en) | Browser and method for domain name resolution by the same | |
| WO2016177250A1 (en) | Client page rendering method and apparatus | |
| JP4270992B2 (en) | Information processing apparatus, information processing method, information processing program, service providing apparatus, service providing method, service providing program, and recording medium | |
| CN103064663B (en) | The generation of browser plug-in, issue, loading and update method and system | |
| US8543713B2 (en) | Computing environment arranged to support predetermined URL patterns | |
| US20100131594A1 (en) | Web page access method and server | |
| US20090282333A1 (en) | System and method to permit language independence for web interfaces | |
| US7509422B2 (en) | System and method for locating web services | |
| CN111988171B (en) | Method, proxy server and system for calling SOAP Web service based on RESTful style request | |
| CN102647482A (en) | Method and system for accessing website | |
| CN105337787A (en) | Multi-server monitoring method, device and system | |
| EP2648388B1 (en) | Method, system, and device for displaying page | |
| CN103873918A (en) | Picture processing method, device and terminal | |
| CN111651703B (en) | Page jump method and device, electronic equipment and readable storage medium | |
| CN111147616B (en) | Resource acquisition method and device, electronic equipment and storage medium | |
| CN105516333A (en) | Interactive method and system based on webpage | |
| CN114416075A (en) | Service processing method and device | |
| KR101511267B1 (en) | Method and system for searchable Web services | |
| CN111680247B (en) | Local calling method, device and equipment of webpage character strings and storage medium | |
| CN112947900A (en) | Web application development method and device, server and development terminal | |
| CN112925998B (en) | Interface data processing method, device and system, electronic equipment and storage medium | |
| CN101772196A (en) | Method and system for processing message sent by mobile terminal and acting server | |
| US20200167133A1 (en) | Web service mashup orchestrator | |
| CN102799642B (en) | The display packing of web page contents and device | |
| US11157588B2 (en) | Interface self-service method, and a device, a computer system and a storage medium for implementing the same |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |