CN113835702A

CN113835702A - Application program interface construction method and device, equipment and medium thereof

Info

Publication number: CN113835702A
Application number: CN202111119900.4A
Authority: CN
Inventors: 杨尚志; 许宏斌
Original assignee: Guangzhou Cubesili Information Technology Co Ltd
Current assignee: Guangzhou Cubesili Information Technology Co Ltd
Priority date: 2021-09-24
Filing date: 2021-09-24
Publication date: 2021-12-24

Abstract

The application discloses an application program interface construction method, a device, equipment and a medium thereof, wherein the method comprises the following steps: responding to an adding event of adding an interface component to a child window nested in a parent window in an interface construction page, inserting the interface component into the child window, and adding an editing block corresponding to the interface component in an added component list area of the parent window; storing the attribute data of the interface component in a shared cache region; monitoring a first updating event of the interface component triggered from the parent window in the shared cache region, acquiring attribute data of the interface component in the shared cache region, and updating the interface component in the child window; and monitoring a second updating event of the interface component triggered from the child window in the shared cache region, acquiring the attribute data of the interface component in the shared cache region, and updating the attribute data in the editing block of the interface component in the parent window. According to the method and the device, the attribute data of the interface component is stored in the shared cache region, so that the data synchronization of the interface component between the parent window and the child window is realized.

Description

Application program interface construction method and device, equipment and medium thereof

Technical Field

The application relates to the technical field of internet, in particular to an application program interface construction method, and further relates to a device, equipment and a nonvolatile storage medium corresponding to the method.

Background

For the existing network page, when a plurality of window pages exist in the network page and cross-window data interaction is required among interface components in the window pages, a common technical scheme is to complete the data interaction among the cross-window interfaces through an event monitoring mechanism.

The event monitoring mechanism generally performs data interaction between interface components of a cross-window page based on PostMessage, when the interface components of the window page need to perform data interaction, a data pushing party transmits a notification to a data receiving party so that the data receiving party monitors the notification to acquire data, performs data update of corresponding interface components, and a window performing data interaction performs data interaction by monitoring the notification transmitted by the other party so as to perform data interaction between the interface components of each window, but the event monitoring mechanism constructed based on the PostMessage has the following problems:

first, if the window page for data update does not trigger the PostMessage to notify the window page of the data receiver in time, or the window page of the data receiver does not monitor the data change of the window page for data update, the data between the associated interfaces of the two parties are inconsistent.

Secondly, the code readability of the PostMessage is low, a large amount of development time is needed when a developer constructs corresponding notification monitoring push links among a plurality of windows to perform data communication, and when an event monitoring mechanism of a network page is wrong, the code with low readability prevents the developer from quickly locating the mistake.

In view of the problems of the data interaction mechanism of the interface component for cross-window data interaction in the existing web page, the applicant has made a corresponding search in consideration of satisfying the needs of more users.

Disclosure of Invention

The application aims to meet the requirements of users and provides an application program interface construction method and a corresponding device, electronic equipment and a nonvolatile storage medium.

In order to realize the purpose of the application, the following technical scheme is adopted:

the application program interface construction method provided by adapting to the purpose of the application comprises the following steps:

responding to an adding event of adding an interface component to a child window nested in a parent window in an interface construction page, inserting the interface component into the child window, and adding an editing block corresponding to the interface component in an added component list area of the parent window for editing attribute data of the interface component;

storing the attribute data of the interface component in a shared cache region, wherein the shared cache region is used for realizing data synchronization of the attribute data of the interface component between the parent window and the child window;

monitoring a first updating event of the interface component in the shared cache region, acquiring the latest attribute data of the interface component in the shared cache region, and updating the interface component in the sub-window, wherein the first updating event is correspondingly triggered by an attribute data modification event in the editing block;

monitoring a second updating event of the interface component in the shared cache region, acquiring the latest attribute data of the interface component in the shared cache region, and updating the attribute data in the editing block of the interface component in the parent window, wherein the second updating event is correspondingly triggered by the editing event of the interface component in the child window.

In a further embodiment, before performing the add event in response to adding an interface component to a child window nested in a parent window within the interface construction page, the method comprises:

responding to a selected instruction of any interface component in a pre-added component list area of a parent window in the interface construction page, wherein the pre-added component list area is constructed according to interface components stored and configured in advance in an interface component library;

and responding to an adding instruction of the interface component pointed by the selected instruction, and triggering and generating the adding event for adding the interface component to the child window nested in the parent window.

sending a request to a service server providing an interface construction page through a built-in browser, and verifying login identity information input by a current operation user;

acquiring the login identity information to verify that the interface construction page returned by the service server is legal;

and analyzing and loading the interface construction page, and starting a parent window pre-configured by the interface construction page and a child window nested in the parent window.

In a further embodiment, the step of triggering the second update event by an edit event of the interface component in the sub-window includes:

displaying an outer outline border of the interface component in a sub-window in response to a selected operation acting on the interface component in the sub-window;

and constructing the corresponding editing event in response to the editing operation acted on the interface component so as to generate the second updating event in response to the editing event.

In a preferred embodiment, the editing operation corresponding to the editing event includes that the interface component is executed with any one of the following operations in the sub-window: plane moving operation, hierarchy adjusting operation, image-text material updating operation and deleting operation.

In a further embodiment, the interface construction page is written based on a hypertext markup language.

An application interface constructing apparatus adapted to the purpose of the present application includes:

the adding event response module is used for responding to an adding event of adding an interface component to a child window nested in a parent window in the interface construction page, inserting the interface component into the child window, and adding an editing block corresponding to the interface component in an added component list area of the parent window so as to edit the attribute data of the interface component;

the shared cache region storage module is used for storing the attribute data of the interface component in a shared cache region, and the shared cache region is used for realizing data synchronization of the attribute data of the interface component between the parent window and the child window;

a first update event monitoring module, configured to monitor a first update event of the interface component in the shared cache region, obtain the latest attribute data of the interface component in the shared cache region, and update the interface component in the child window, where the first update event is triggered by an attribute data modification event in the editing block;

and the second update event monitoring module is used for monitoring a second update event of the interface component in the shared cache region, acquiring the latest attribute data of the interface component in the shared cache region, and updating the attribute data in the editing block of the interface component in the parent window, wherein the second update event is correspondingly triggered by the editing event of the interface component in the child window.

In a further embodiment, the second update event listening module includes:

the selected operation response submodule is used for responding to the selected operation acted on the interface assembly in the sub-window and displaying the outer outline border of the interface assembly in the sub-window;

and the second updating event generation sub-module is used for responding to the editing operation acted on the interface component, constructing the corresponding editing event and generating the second updating event in response to the editing event.

In order to solve the above technical problem, an embodiment of the present invention further provides a computer device, including a memory and a processor, where the memory stores computer readable instructions, and the computer readable instructions, when executed by the processor, cause the processor to execute the steps of the application program interface constructing method.

The present invention also provides a storage medium storing computer-readable instructions, which when executed by one or more processors, cause the one or more processors to perform the steps of the application interface constructing method.

In order to solve the above technical problem, an embodiment of the present invention further provides a computer program product, which includes a computer program and computer instructions, and when the computer program and the computer instructions are executed by a processor, the processor executes the steps of the application program interface constructing method.

Compared with the prior art, the application has the following advantages:

according to the method and the device, cross-window data interaction between interface components of windows in the same page is constructed by a traditional event monitoring mechanism, attribute data between the interfaces are stored by constructing a shared cache region, corresponding attribute data only need to be acquired from the shared cache region between the interfaces of the windows, if one of the interfaces modifies the attribute data of the cross-window interface components, other windows with the interface components only need to acquire the latest attribute data from the shared cache region to update the attribute data of the interface components, notification does not need to be pushed to any party, only the attribute data in the shared cache region need to be monitored, when any attribute data is updated, the corresponding interface components in any party are updated, and the problem that the data of both parties cannot be updated synchronously due to the fact that the notification is not generated in the traditional PostMessage is avoided.

Secondly, when the attribute data of the interface component is subjected to data management by a data management module written based on a Mobx front-end data management language, the shared cache region is also written and constructed according to the Mobx front-end data management language, so that the shared cache region is conveniently constructed, and the data management architecture based on the attribute data of the interface component is constructed, so that the uniformity of the data interaction logic integrity of the attribute data is ensured.

In addition, the application can provide visual page construction service for developers, the graphical user interface of the page is constructed through the interface construction page, and various types of interface components suitable for various terminals are provided in the interface construction page, so that the interaction service provided in the page is constructed conveniently, and the overall efficiency of the interface components in the graphical user interface of the developer development page is improved.

Drawings

The foregoing and/or additional aspects and advantages of the present application will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:

fig. 1 is a schematic diagram of a typical network deployment architecture related to implementing the technical solution of the present application;

FIG. 2 is a schematic flow chart diagram illustrating an exemplary embodiment of a method for application interface construction according to the present application;

FIG. 3 is a schematic diagram of a graphical user interface of the interface construction page of the present application;

FIG. 4 is a logic diagram illustrating data synchronization of attribute data of a shared cache according to the present application;

FIG. 5 is a schematic illustration of an update of a corresponding interface component in a parent window and a child window of an interface build page in response to a first update event according to the present application;

FIG. 6 is a diagram of a property data edit window of the Picture 1 interface component A-501 of FIG. 5;

FIG. 7 is a schematic illustration of an update of a corresponding interface component in a parent window and a child window of an interface build page in response to a second update event according to the subject application;

FIG. 8 is a schematic diagram of an edit menu of the present application;

FIG. 9 is a schematic illustration of a graphical user interface for operating a user login window of the subject application;

FIG. 10 is a flowchart illustrating an embodiment of a method for constructing an application interface according to the present application, with the addition of pre-steps;

FIG. 11 is a schematic diagram of a graphical user interface of an interface construction page when an add event is triggered to be generated according to the subject application;

FIG. 12 is a schematic flow chart diagram illustrating an alternative embodiment of a method for application interface construction consistent with the present application with the addition of pre-stages;

FIG. 13 is a flowchart illustrating specific steps of step S14 in FIG. 2;

FIG. 14 is a functional block diagram of an exemplary embodiment of an application interface construction apparatus of the present application;

fig. 15 is a block diagram of a basic structure of a computer device according to an embodiment of the present application.

Detailed Description

Reference will now be made in detail to embodiments of the present application, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are exemplary only for the purpose of explaining the present application and are not to be construed as limiting the present application.

As used herein, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will be further understood that the terms "comprises" and/or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof. It will be understood that when an element is referred to as being "connected" or "coupled" to another element, it can be directly connected or coupled to the other element or intervening elements may also be present. Further, "connected" or "coupled" as used herein may include wirelessly connected or wirelessly coupled. As used herein, the term "and/or" includes all or any element and all combinations of one or more of the associated listed items.

It will be understood by those within the art that, unless otherwise defined, all terms (including 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. It will be further understood that terms, such as those defined in commonly used dictionaries, should be interpreted as having a meaning that is consistent with their meaning in the context of the prior art and will not be interpreted in an idealized or overly formal sense unless expressly so defined herein.

As will be appreciated by those skilled in the art, "client," "terminal," and "terminal device" as used herein include both devices that are wireless signal receivers, which are devices having only wireless signal receivers without transmit capability, and devices that are receive and transmit hardware, which have receive and transmit hardware capable of two-way communication over a two-way communication link. Such a device may include: cellular or other communication devices such as personal computers, tablets, etc. having single or multi-line displays or cellular or other communication devices without multi-line displays; PCS (Personal Communications Service), which may combine voice, data processing, facsimile and/or data communication capabilities; a PDA (Personal Digital Assistant), which may include a radio frequency receiver, a pager, internet/intranet access, a web browser, a notepad, a calendar and/or a GPS (Global Positioning System) receiver; a conventional laptop and/or palmtop computer or other device having and/or including a radio frequency receiver. As used herein, a "client," "terminal device" can be portable, transportable, installed in a vehicle (aeronautical, maritime, and/or land-based), or situated and/or configured to operate locally and/or in a distributed fashion at any other location(s) on earth and/or in space. The "client", "terminal Device" used herein may also be a communication terminal, a web terminal, a music/video playing terminal, such as a PDA, an MID (Mobile Internet Device) and/or a Mobile phone with music/video playing function, and may also be a smart tv, a set-top box, and the like.

The hardware referred to by the names "server", "client", "service node", etc. is essentially an electronic device with the performance of a personal computer, and is a hardware device having necessary components disclosed by the von neumann principle such as a central processing unit (including an arithmetic unit and a controller), a memory, an input device, an output device, etc., a computer program is stored in the memory, and the central processing unit calls a program stored in an external memory into the internal memory to run, executes instructions in the program, and interacts with the input and output devices, thereby completing a specific function.

It should be noted that the concept of "server" as referred to in this application can be extended to the case of a server cluster. According to the network deployment principle understood by those skilled in the art, the servers should be logically divided, and in physical space, the servers may be independent from each other but can be called through an interface, or may be integrated into one physical computer or a set of computer clusters. Those skilled in the art will appreciate this variation and should not be so limited as to restrict the implementation of the network deployment of the present application.

Referring to fig. 1, the hardware basis required for implementing the related art embodiments of the present application may be deployed according to the architecture shown in the figure. The server 80 is deployed at the cloud end, and serves as a business server, and is responsible for further connecting to a related data server and other servers providing related support, so as to form a logically associated server cluster to provide services for related terminal devices, such as a smart phone 81 and a personal computer 82 shown in the figure, or a third-party server (not shown in the figure). Both the smart phone and the personal computer can access the internet through a known network access mode, and establish a data communication link with the cloud server 80 so as to run a terminal application program related to the service provided by the server.

For the server, the application program is usually constructed as a service process, and a corresponding program interface is opened for remote call of the application program running on various terminal devices.

The application program refers to an application program running on a server or a terminal device, the application program implements the related technical scheme of the application in a programming mode, a program code of the application program can be saved in a nonvolatile storage medium which can be identified by a computer in a form of a computer executable instruction, and is called into a memory by a central processing unit to run, and the related device of the application is constructed by running the application program on the computer.

The live broadcast room is a video chat room realized by means of an internet technology, generally has an audio and video broadcast control function and comprises a main broadcast user and audience users, wherein the audience users can comprise registered users registered in a platform or unregistered tourist users; either registered users who are interested in the anchor user or registered or unregistered users who are not interested in the anchor user. The interaction between the anchor user and the audience user can be realized through known online interaction modes such as voice, video, characters and the like, generally, the anchor user performs programs for the audience user in the form of audio and video streams, and economic transaction behaviors can also be generated in the interaction process. Of course, the application form of the live broadcast room is not limited to online entertainment, and can be popularized to other relevant scenes, such as an educational training scene, a video conference scene, a product recommendation and sale scene, and any other scene needing similar interaction.

The person skilled in the art will know this: although the various methods of the present application are described based on the same concept so as to be common to each other, they may be independently performed unless otherwise specified. In the same way, for each embodiment disclosed in the present application, it is proposed based on the same inventive concept, and therefore, concepts of the same expression and concepts of which expressions are different but are appropriately changed only for convenience should be equally understood.

Referring to fig. 2, in an exemplary embodiment, an application interface constructing method of the present application includes the following steps:

step S11, in response to an addition event for adding an interface component to a child window nested in a parent window in the interface construction page, inserting the interface component into the child window, and adding an editing block corresponding to the interface component in the added component list area of the parent window, so as to edit attribute data of the interface component:

and the current application responds to the adding event of the child window nested in the parent window in the interface construction page, determines an interface component corresponding to the adding event so as to insert the interface component into the child window, and adds the editing block of the interface component in the added component list area of the parent window so as to edit the attribute data of the interface component in the added component list through the editing block.

The interface construction page is used for constructing a graphical user interface of a page output in an application program of a terminal, the graphical user interface is constructed by a plurality of interface components added through a parent window, the parent window adds one or more interface components into a child window through the addition event, the editing blocks of the interface components are added into the added component list area, so that the attribute data of the interface components are edited, correspondingly, the interface components can be edited through the child window, and the attribute data corresponding to the interface components can be edited.

The adding event is generally generated by selecting an adding instruction of any interface component in the interface components provided by the parent window, so that the current application responds to the adding event and inserts the interface component corresponding to the event into the child window for displaying, specifically, the current application triggers the adding event pointing to the interface component by responding to the adding instruction of the selected interface component in the pre-adding component list area of the parent window so as to insert the interface component into the child window for displaying, the interface component in the pre-adding component list area is a pre-configured interface component, the current application acquires the interface component in a pre-configured interface component library and outputs the interface components to the pre-adding interface component so as to provide the pre-configured interface component through the pre-adding component list area, the development time of repeatedly developing common interface components by developers is saved, the interface components with corresponding functions are provided for the developers to be customized, and the overall development efficiency of the graphical user interface of the page is improved.

The interface component is generally used for constructing a graphical user interface of a page to provide corresponding type functions and services for a user using the page, for example, the types of the interface component include: the system comprises a graphic interface component, an interface component for outputting and displaying corresponding pictures and texts in a graphical user interface, a list interface component, an interface component for outputting characteristic information of any object such as sales information of commodities or grade information of users in an ascending or descending order, or an interface component such as a live broadcast stream output interface component for outputting live broadcast streams in a live broadcast room.

The attribute data of the interface component is used for controlling a visual output mode and an interactive mode of a graphical user interface of a page constructed by the interface component in a sub-window, for example, a display level, a display size, a display position, a graphic video material, a page jump address and the like of the interface component in the graphical user interface, and the attribute data of the interface component generally comprises any one or more items of information such as level information, display size information, display position information, a local acquisition address of the graphic video material, a network acquisition address or a page jump address and the like, and is currently used for outputting the attribute data of the interface component to an editing block of the interface component in the added component list area so as to edit any one or more items of information in the attribute data of the interface component through the editing block.

The added component list area is used for displaying an interface component inserted into the sub-window, so that the interface component inserted into the sub-window is selected through the added component list area, the attribute data of the interface component is edited through the editing block of the interface component, for example, the interface component is edited through the editing block of the interface component to output the displayed attribute data such as graphic video material or hierarchy information, the interface component is controlled to visually output in a graphical user interface of a page constructed by the sub-window, or a page adding address of the interface component is edited, and a page jumped after the interface component is touched is controlled.

After the interface component is inserted into the sub-window by the current application, the attribute data of the interface component is stored in the shared buffer area, so that the visual output mode of the interface component in the sub-window is updated synchronously after the editing of the attribute data of the interface component is performed through the editing block of the interface component, and the attribute data in the editing block to which the interface component belongs is updated synchronously after the editing of the interface component through the sub-window is performed.

In one embodiment, before a current application loads the interface construction page through a built-in browser, login identity information input by an operating user who currently performs interface construction is pushed to a service server to trigger the service server to verify the login identity information, after the login identity information passes the verification, the current application acquires the interface construction page returned by the service server, analyzes and loads the interface construction page, starts a parent window preconfigured in the interface construction page and a child window nested in the parent window, and allows the operating user to perform graphical user interface construction of a corresponding page, so that the security of the interface construction page is improved, and an illegal user is prevented from tampering interface components in a graphical user interface of any page through the page.

Referring to fig. 3, fig. 3 is a schematic diagram of a graphical user interface of the interface configuration page, the added component list area 309 is shown in the parent window, the added component list area 309 is output to show the added interface components in the child window, for example, a list 1 interface component 307, which is an interface component 306 displayed in the child window, and the pre-added component list area 301 is shown in the parent window, a plurality of pre-configured interface components are shown in the pre-added component list area 301, and the interface components of each terminal type, such as a general interface component, a computer interface component, and a mobile device interface component, are shown, and the interface component of each terminal type provides an interface component suitable for the corresponding device, for example, the interface component of the mobile device provides a picture interface component for outputting picture materials, a navigation interface component for outputting navigation bars, a list interface component for outputting lists, and the like, correspondingly, the child window nested in the output parent window in the interface construction page is used for outputting the interface component selected and added through the pre-added component list area 301, so as to trigger the addition event of the selected and added interface component, so that the interface component is currently inserted into the child window for output display in response to the addition event, an editing block corresponding to the interface component is added in the added component list area 309 for editing the attribute data of the interface component, and the displayed graphical user interface 305 is output in the child window for the currently constructed graphical user interface in the interface construction page.

The graphical user interfaces of the parent window and the child window in the interface construction page are generally pages written based on hypertext markup languages such as I frame, correspondingly, the interface components are generally constructed based on other front-end framework languages such as read, and the attribute data of the interface components are generally managed by data management modules constructed based on other front-end data management languages such as Mobx.

Step S12, storing the attribute data of the interface component in a shared cache region, where the shared cache region is used to implement data synchronization between the parent window and the child window with respect to the attribute data of the interface component:

after the current application inserts the interface component into the sub-window for output display, the attribute data of the interface component is stored in the shared cache region, so that the sub-window can conveniently acquire the attribute data of the interface component from the shared cache region, the attribute data of the interface component in the sub-window is initialized, and the visual output mode and the interactive mode of the graphical user interface of the interface component in the sub-window are initialized according to the attribute data of the interface component in the shared cache region.

The attribute data of the interface component inserted into the child window by the current application is stored in the shared cache region to achieve data synchronization between the parent window and the child window about the attribute data of the interface component, specifically, the current application monitors the attribute data of each interface component stored in the shared cache region in real time, when the current application monitors that the update event of any one of the child window or the parent window performs update of the attribute data of any interface component, the attribute data updated in the shared cache region is obtained, the attribute data of the corresponding interface component in the parent window or the child window is updated, for example, when the parent window generates an update event by triggering update of the attribute data of the interface component through the edit block of one interface component in the added component list region, the current application monitors the update event, and acquiring attribute data of the interface component corresponding to the update event in the shared cache region, and updating the attribute data of the interface component in the sub-window, namely updating a visual output mode or an interactive mode of the interface component in the sub-window.

It can be understood that, regarding the attribute data of all the interface components in the added component list area in the parent window and the attribute data of all the interface components in the child window, the attribute data of each interface component of both sides are acquired into the shared cache area, and when the attribute data of the interface components in the shared cache area is updated (the update of the attribute data is generally triggered by the update event of the parent window or the child window), the attribute data of the corresponding interface component in one of the interface components (i.e., the one not triggering the generation of the update event) is updated, so as to implement data synchronization of the attribute data of all the interface components in the parent window and the child window.

Specifically, referring to fig. 4, fig. 4 is a logic diagram of data synchronization of attribute data of the shared cache region, when an arbitrary interface component is selected through a pre-added component list region in a parent window to insert the interface component into a child window, the current application stores the attribute data of the interface component into the shared cache region, so that the parent window and the child window acquire the attribute data from the cache shared region to perform initialization processing of the interface component, when the parent window updates the attribute data of the interface component through an editing block of the interface component in the added component list region to trigger generation of a first update event, the current application responds to the first update event to acquire the latest attribute data of the interface component from the shared cache region, and updates a visualization mode or an interaction mode of the interface component in the child window, correspondingly, after the added interface component is edited through the child window to trigger generation of a second update event, the current application will respond to the second update event to obtain the latest attribute data of the interface component from the shared cache region, and update the editing block of the interface component in the added component list region in the parent window.

Further, the attribute data of any interface component stored in the shared cache area may be used by other interface components that have been added to the sub-window, for example, the attribute data of the ranking interface component used for outputting the user ranking information, including the user ranking information, is stored in the shared cache area, and the user ranking information may be obtained from the shared cache area by the ranking interface component used for outputting the ranking of the current user in the platform, so as to rank, through the user ranking information, the ranking in the ranking list displayed in the ranking list interface component by the user corresponding to the information.

In one embodiment, when the attribute data of the interface component is data management of a data management module written based on a Mobx front-end data management language, the shared cache region is also written and constructed according to the Mobx front-end data management language, compared with the passing data synchronization mode of realizing a parent window and a child window based on a PostMessage, when the data synchronization is carried out by the data synchronization mode realized by the shared cache region, the notification does not need to be pushed to any party, only the attribute data in the shared cache region needs to be monitored, when any attribute data is updated, the corresponding interface component in any party is updated, the problem that the data of two parties cannot be synchronized and updated due to the fact that the conventional PostMessage is not generated is solved, the readability of the notification pushed by the conventional PostMessage is poor, the data synchronization is carried out only by constructing the shared cache region, and complex notification interaction logic does not need to be developed for the two parties is solved, effectively improving the development efficiency.

Step S13, monitoring a first update event of the interface component in the shared cache region, acquiring the latest attribute data of the interface component in the shared cache region, and updating the interface component in the sub-window, where the first update event is triggered by an attribute data modification event in the editing block:

the current application monitors the first update event aiming at any interface component in the shared cache region in real time, the first update event is generally triggered correspondingly through an attribute data modification event in an editing block of any interface component in the added component list region in a parent window, after the attribute data modification event is triggered, the attribute data of the interface component corresponding to the attribute data modification event in the shared cache region is updated, so that the current application is triggered to respond to the first update event, the latest attribute data in the interface component for data updating is obtained, and the visual output mode and the interactive mode of the interface component in the child window are updated correspondingly.

Specifically, referring to fig. 5 and 6, with regard to the specific implementation of generating and updating the corresponding interface component in the sub-window by triggering the first update event, by touching an editing control a-501 of an editing block of the picture 1 interface component in fig. 5-a, attribute data of the picture 1 interface component is modified, the picture 1 interface component a-502 is a current visual output mode of the picture 1 interface component in the sub-window, after touching the editing control a-501, the interface construction page shows the attribute data editing window of the picture 1 interface component shown in fig. 6, in the attribute data editing window, a local acquisition address or a network acquisition address of a picture material of the picture 1 interface component can be modified by touching a browsing control 601 to modify a picture displayed by the component in sub-touch, or modifying the size of the component to modify the display size of the picture 1 interface component in the sub-window, or modifying the position and the level of the component to modify the display position and the display level of the picture 1 interface component in the sub-window, and the like, that is, the modified data are the attribute data of the picture 1 interface component, when any data is modified, for example, the component size of the picture 1 interface component is set to be "width: 2cm height: after 6 cm', correspondingly modifying corresponding attribute data of the picture 1 interface component in the shared cache region, triggering and generating the first updating event pointing to the picture 1 interface component, wherein the current application monitors the first event updating event, and obtains the attribute data of the picture 1 interface component from the shared cache region according to the event, so as to update the picture 1 interface component A-502 of the child window in fig. 5-A to the picture 1 interface component B-501 of the child window in fig. 5-B.

Step S14, monitoring a second update event of the interface component in the shared cache region, acquiring the latest attribute data of the interface component in the shared cache region, updating the attribute data in the editing block of the interface component in the parent window, where the second update event is triggered by the editing event of the interface component in the child window:

the current application monitors the second update event aiming at any interface component in the shared cache region in real time, wherein the second update event is generally generated by triggering after an editing event for editing the interface component added in the child window is carried out, so as to update the attribute data of the interface component corresponding to the editing event in the shared cache region, so as to trigger the current application to respond to the second update event, obtain the latest attribute data in the interface component for data updating, and correspondingly update the attribute data in the editing block of the interface component in the parent window.

The editing event is an event generated by selecting the interface component added in the sub-window and performing editing operation on the selected interface component, the editing operation generally comprises plane moving operation for moving the display position of the interface component in the sub-window, hierarchy adjusting operation for adjusting the display hierarchy of the interface component in the sub-window, editing operation for updating the image-text material output by the interface component in the sub-window, deleting operation for deleting the interface component from the sub-window and other editing operations of the visual output mode or the active mode of other editing interface components in the sub-window, and when any editing operation is executed, the editing operation is triggered to generate the corresponding editing event so as to correspondingly modify the attribute data of the interface component corresponding to the editing event in the shared cache region and further trigger the second updating event, so that the current application monitors the second updating event, and acquiring the attribute data of the corresponding interface component modified by the editing and editing, and correspondingly updating the attribute data in the editing block of the interface component in the parent window.

Specifically, referring to fig. 6 to 8, fig. 7-a is a schematic diagram illustrating a picture 1 interface component a-701 selected through a sub-window, as shown in the figure, after the picture 1 interface component a-701 is selected, a frame of the picture 1 interface component a-701 displays an outer frame, and the outer frame can be used to perform an editing operation such as a plane moving operation or a display size adjusting operation on the picture 1 interface component a-701, or a right mouse button click or a long touch operation is used to display an editing menu shown in fig. 8 at a position near the selected picture 1 interface component a-701, and the editing operation displayed in the editing menu shown in fig. 8 is used to trigger generation of the second update event and corresponding modification of the attribute data in the editing situation of the interface component, executing copy editing operation, paste editing operation, adjustment level editing operation or hyperlink editing operation on the picture 1 interface component, so as to edit the visual output mode and interactive mode of the picture 1 interface component a-701 in the child window, for example, after the outer outline border is displayed through the border of the picture 1 interface component a-701 of the child window in fig. 7-a, performing the editing operation of adjusting the component size of the picture 1 interface component a-701 to the component size of the picture 1 interface component B-701 of the child window in fig. 7-B, triggering generation of the editing event of the picture 1 interface component, performing modification of a second update event of the component size data and the component position data in the attribute data of the picture 1 interface component in the shared buffer, and monitoring the second update event by the current application, acquiring the component size data and the component position data in the attribute data of the picture 1 interface component B-701 to update the attribute data in the editing block of the picture 1 interface component in the added component list area of the parent window, i.e. correspondingly updating the data corresponding to the component size and the component position in the picture 1 interface component shown in fig. 6.

It can be understood that the application of the method can provide visual page construction service for developers, the construction of the graphical user interface of the page is performed through the interface construction page, and various types of interface components suitable for various terminals are provided in the interface construction page, so as to facilitate the construction of the interactive service provided in the page, so as to improve the overall efficiency of various interface components in the graphical user interface of the developer development page, and the attribute data of the interface components added in the child window of the interface construction page is stored into the shared cache region, so as to synchronize the attribute data of any added interface components in the parent window and the child window, compared with the data synchronization mode of monitoring and pushing notifications such as traditional PostMessage, the shared cache region has stronger adaptability, does not need complicated data interaction logic, and only needs to monitor the changed attribute data in the shared cache region and perform data synchronization of both sides, the problem that the updated associated data in both sides of data association cannot be updated in real time due to the fact that the notification is not pushed in real time or monitored in real time in the traditional data synchronization mode of the simple push notification is solved, the shared cache region is conveniently constructed, the shared cache region is constructed based on the data management framework of the attribute data of the interface component, and the uniformity of the data interaction logic of the attribute data is guaranteed.

The above exemplary embodiments and variations thereof fully disclose the embodiments of the application interface construction method of the present application, but many variations of the method can be deduced by transforming and augmenting some technical means, and other embodiments are briefly described as follows:

fig. 3, 9 and 10, in this embodiment, before executing the add event of adding the interface component to the child window nested in the parent window in the interface construction page in response to the response, an implementation of verifying login identity information of an operation user operating the interface construction page is specifically implemented as follows:

step S08, sending a request to a service server providing an interface configuration page through a built-in browser, verifying login identity information input by a currently operating user:

and the current application sends a request through a built-in browser like a service server providing the interface construction page so as to drive the service server to verify the login identity information input by the current operation user.

The login identity information is generally obtained from a login window of an operation user, when the operation user opens the current application, the current application outputs the login window of the operation user, so that the user can input user account information and user password information through the login window of the operation user, when the user inputs the user account information and the user password information and submits the user account information and the user password information, the current application obtains the user account information and the user password information and packages the user account information and the user password information into the login identity information, a request which cannot be used for logging in the identity information is pushed to the service server, and the service server can respond to the request to verify the login identity information contained in the request.

Specifically, please refer to fig. 9 of the window, where fig. 9 is a schematic diagram of a graphical user interface of the operation user login window, an operation user inputs user account information in a user account input box 901 and user password information in a user password input box 902 through the operation user login window, and after the operation user submits the user account information and the user password information input by the operation user through a touch login control 903, the current application packages the user account information and the user password information into the login identity information of the operation user, and pushes a request including the login identity information to the service server to drive the service server to verify the login identity information.

Step S09, obtaining the interface construction page returned by the service server when the login identity information is verified to be legal;

and when the service server verifies that the login identity information is legal, pushing the interface construction page to a built-in browser of the current application program so that the built-in browser can acquire the interface construction page to analyze and load.

Step S10, parsing and loading the interface construction page, and starting a parent window preconfigured on the interface construction page and a child window nested in the parent window:

and the current application analyzes and loads the acquired interface construction page, starts the added component list area and the pre-added component list area in the parent window configured in advance by the interface construction page, and simultaneously starts the child window of the feedback complete set.

Referring to fig. 3, after the current application obtains the interface construction page, the parent window configured in advance in the interface construction page as shown in fig. 3 and the editing block of the added component list area 309 and each interface component in the parent window are started, the pre-configured interface components of the pre-added component list area 301 and each terminal are loaded and displayed, and the child window nested in the parent window and each interface component added thereto are loaded and displayed.

In this embodiment, after the login identity information of the operating user is verified, the interface construction page corresponding to the operating user and the related parent window and child window are pushed to the current application, so that the security of the current application is ensured, and the corresponding interface components in the parent window and the child window of the operating user are prevented from being attacked and tampered.

Referring to fig. 11 and 12, before the adding event of the interface component to the child window nested in the parent window in the interface construction page is executed in the embodiment, which is the trigger generation of the adding event, the specific implementation steps are as follows:

step S09', in response to a selected instruction of any interface component in the pre-added component list area acting on the parent window in the interface construction page, the pre-added component list area is constructed according to interface components pre-stored and configured in the interface component library:

the current application responds to the selected instruction of any pre-configured interface component in the pre-submitted component list of the parent window in the interface construction page to determine the interface component pointed to by the selected instruction.

The interface components which are displayed in the pre-added component list and are suitable for the pre-configuration of the corresponding terminal are generally obtained into the interface component library, and a plurality of pre-configured interface components are stored in the interface component library in advance, so that the interface components are output to the pre-added component list area by the current application and are selected by a developer to be added into the sub-window.

Referring to fig. 11, the pre-add component list area is shown in fig. 11-a, and has interface components applicable to multiple terminal types, for example, a general interface component applicable to a computer and a mobile terminal, a computer interface component applicable to a computer, and a mobile terminal interface component applicable to a mobile terminal, where the terminal types generally include interface components of multiple corresponding types, for example, the mobile terminal interface components include a picture interface component, a navigation interface component, a list interface component, and a button interface component as shown in the figure, so that a developer can select a corresponding interface component to add to a sub-window for a custom operation, when a certain interface component is selected from the pre-add component list area, a selection instruction directed to the interface component is triggered to generate, after the mobile device interface component a-1101 as shown in the figure is selected, the current application sets the mobile device interface component a-1101 to a selected entirety and a dark state as shown, and the leaderboard interface component a-1102 is also selected, and the current application also sets the leaderboard interface component a-1102 to the selected entirety and the dark state as shown, thereby indicating that the leaderboard interface component a-1102 of the mobile device interface component a-1101 has been selected.

Step S10', in response to the add instruction of the interface component pointed by the selected instruction, triggering generation of the add event for adding the interface component to the child window nested in the parent window:

specifically, referring to fig. 11, as mentioned above, the adding event of the interface component added to the child window of the parent window is triggered and generated by the current application in response to the adding instruction of the interface component pointed by the selected instruction, and after the adding control a-1103 is touched, the adding event that the list interface component a-1102 is added to the child window shown in the figure is generated in the pre-added component list area in fig. 11-a, so that the current application responds to the adding event and adds the list interface component a-1102 to the child window shown in the figure, that is, as shown in fig. 11-B, the list interface component B-1101 is added to the child window for output and display, and meanwhile, the listing interface component B-1102 is added to the added component list area in the parent window Edit block B-1102.

In this embodiment, an implementation of generating the addition event is explained, and an operation user selects to add a pre-configured interface component to generate the addition event through a pre-addition component list area in a parent window, so as to drive the current application to insert the interface component corresponding to the addition event into a child window, and add an editing block of the interface component in an added component list area of the parent window.

Fig. 7, fig. 8 and fig. 13, the step of triggering the second update event by the edit event of the interface component in the sub-window includes:

step S141, in response to the selected operation applied to the interface component in the sub-window, displaying an outer outline border of the interface component in the sub-window:

the current application responds to the selected operation acting on the interface component, the outer outline border of the selected interface component is displayed in the sub-window, the interface component is represented to be selected in the sub-window, and the outer outline border of the interface component can be used for adjusting the component size and the component position of the interface component.

Referring to fig. 7, the picture 1 interface component a-701 in fig. 7-a is the selected interface component, the outer periphery of the picture 1 interface component a-701 displays the outer contour frame to which the selected interface component belongs, and the user can adjust the component size and the component position of the picture 1 interface component a-701 through the outer contour frame.

Step S142, in response to the editing operation applied to the interface component, constructing the corresponding editing event to generate the second update event in response to the editing event:

and responding to the editing operation of the selected interface component in the sub-window to construct the editing event formed by the editing, and further responding to the editing event to generate the corresponding second updating event.

Specifically, as shown in fig. 7 and 8, a plane moving operation or a display size adjusting operation may be performed on the picture 1 interface component a-701 through an outer outline frame of the picture 1 interface component a-701 in fig. 7-a, or the picture 1 interface component a-701 is clicked by a right mouse button, an editing menu shown in fig. 8 is invoked in addition to the picture 1 interface component a-701, so as to perform editing operations such as a hierarchy condition operation, an image and text updating operation, or a deleting operation on the picture 1 interface component a-701, and further generate the editing event corresponding to the corresponding editing operation, so as to construct the editing event and generate the second updating event, so as to correspondingly modify the attribute event of the picture 1 interface component a-701 in the shared buffer, so as to be currently used for monitoring the second updating event, and acquiring the latest attribute data of the picture 1 interface component A-701 in the shared cache region, and updating the attribute data in the editing block of the picture 1 interface component A-701 in the added component list region in the parent window.

In this embodiment, the second update event is generated by an operation user performing an editing operation on the added interface component through the child window, and is triggered to respond to the second update event, obtain the attribute event, which has been modified by the editing operation, in the corresponding interface component in the shared cache region, update the attribute data in the editing block of the interface component in the parent window, and further synchronize the attribute data of the corresponding interface components in the child window and the parent window.

Further, an application program interface constructing apparatus of the present application can be constructed by functionalizing the steps in the methods disclosed in the above embodiments, according to this idea, please refer to fig. 14, wherein in an exemplary embodiment, the apparatus includes: an add event response module 11, configured to respond to an add event of adding an interface component to a child window nested in a parent window in an interface construction page, insert the interface component in the child window, and add an editing block corresponding to the interface component in an added component list area of the parent window, so as to edit attribute data of the interface component; a shared cache region storage module 12, configured to store the attribute data of the interface component in a shared cache region, where the shared cache region is used to implement data synchronization between the parent window and the child window regarding the attribute data of the interface component; a first update event monitoring module 13, configured to monitor a first update event of the interface component in the shared cache region, obtain the latest attribute data of the interface component in the shared cache region, and update the interface component in the sub-window, where the first update event is triggered by an attribute data modification event in the editing block; a second update event monitoring module 14, configured to monitor a second update event of the interface component in the shared cache region, obtain the latest attribute data of the interface component in the shared cache region, and update the attribute data in the editing block of the interface component in the parent window, where the second update event is triggered by the editing event of the interface component in the child window.

In one embodiment, the second update event listening module 14 includes: the selected operation response submodule is used for responding to the selected operation acted on the interface assembly in the sub-window and displaying the outer outline border of the interface assembly in the sub-window; and the second updating event generation sub-module is used for responding to the editing operation acted on the interface component, constructing the corresponding editing event and generating the second updating event in response to the editing event.

In order to solve the above technical problem, an embodiment of the present application further provides a computer device, configured to run a computer program implemented according to the application program interface construction method. Referring to fig. 15, fig. 15 is a block diagram of a basic structure of a computer device according to the present embodiment.

As shown in fig. 15, the internal structure of the computer device is schematically illustrated. The computer device includes a processor, a non-volatile storage medium, a memory, and a network interface connected by a system bus. The non-volatile storage medium of the computer device stores an operating system, a database and computer readable instructions, the database can store control information sequences, and the computer readable instructions can enable a processor to realize an application program interface construction method when being executed by the processor. The processor of the computer device is used for providing calculation and control capability and supporting the operation of the whole computer device. The memory of the computer device may have stored therein computer readable instructions that, when executed by the processor, may cause the processor to perform a method of application interface construction. The network interface of the computer device is used for connecting and communicating with the terminal. Those skilled in the art will appreciate that the architecture shown in fig. 15 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.

In this embodiment, the processor is configured to execute specific functions of each module/sub-module in the application interface configuration apparatus of the present application, and the memory stores program codes and various types of data required for executing the modules. The network interface is used for data transmission to and from a user terminal or a server. The memory in this embodiment stores program codes and data necessary for executing all modules/submodules in the application interface configuration device, and the server can call the program codes and data of the server to execute the functions of all the submodules.

The present application further provides a non-volatile storage medium, wherein the application program interface constructing method is written as a computer program and stored in the storage medium in the form of computer readable instructions, and when the computer readable instructions are executed by one or more processors, the execution of the program in a computer is meant, so that the one or more processors execute the steps of the application program interface constructing method according to any one of the above embodiments.

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 a computer program, which can be stored in a computer-readable storage medium, and can include the processes of the embodiments of the methods described above when the computer program is executed. 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).

To sum up, the application stores the attribute data between the interfaces by constructing the shared cache region, only the corresponding attribute data needs to be acquired from the shared cache region between the interfaces of the windows, if one party modifies the attribute data of the interface component across the windows, the other windows with the interface component only need to acquire the latest attribute data from the shared cache region to update the attribute data of the interface component, the notification does not need to be pushed to any party, only the attribute data in the shared cache region needs to be monitored, and when any attribute data is updated, the corresponding interface component in any party is updated, so that the problem that the data of the two parties cannot be updated synchronously due to the fact that the notification is not generated in the conventional PostMessage is prevented.

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 explicitly stated 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.

Those of skill in the art will appreciate that the various operations, methods, steps in the processes, acts, or solutions discussed in this application can be interchanged, modified, combined, or eliminated. Further, other steps, measures, or schemes in various operations, methods, or flows that have been discussed in this application can be alternated, altered, rearranged, broken down, combined, or deleted. Further, steps, measures, schemes in the prior art having various operations, methods, procedures disclosed in the present application may also be alternated, modified, rearranged, decomposed, combined, or deleted.

The foregoing is only a partial embodiment of the present application, and it should be noted that, for those skilled in the art, several modifications and decorations can be made without departing from the principle of the present application, and these modifications and decorations should also be regarded as the protection scope of the present application.

Claims

1. An application program interface construction method is characterized by comprising the following steps:

2. The method of claim 1, wherein prior to performing the add event in response to adding an interface component to a child window nested by a parent window within an interface construction page, comprising:

3. The method of claim 1, wherein prior to performing the add event in response to adding an interface component to a child window nested by a parent window within an interface construction page, comprising:

4. The method according to claim 1, wherein the step of triggering the second update event by an edit event of the interface component in the sub-window comprises:

5. The method according to claim 4, wherein the editing operation corresponding to the editing event includes an operation that the interface component is executed in any one of the following in the sub-window: plane moving operation, hierarchy adjusting operation, image-text material updating operation and deleting operation.

6. The method according to any one of claims 1 to 5, wherein the interface construction page is written based on a hypertext markup language.

7. An application interface construction apparatus, comprising:

8. An electronic device comprising a central processor and a memory, wherein the central processor is configured to invoke execution of a computer program stored in the memory to perform the steps of the method according to any one of claims 1 to 7.

9. A non-volatile storage medium, characterized in that it stores, in the form of computer-readable instructions, a computer program implemented according to the method of any one of claims 1 to 7, which, when invoked by a computer, performs the steps comprised by the method.

10. A computer program product comprising computer program/instructions, characterized in that the computer program/instructions, when executed by a processor, implement the steps of the method of any one of claims 1 to 7.