CN114489902A - Interface display method, device, equipment and medium - Google Patents
Interface display method, device, equipment and medium Download PDFInfo
- Publication number
- CN114489902A CN114489902A CN202210093043.3A CN202210093043A CN114489902A CN 114489902 A CN114489902 A CN 114489902A CN 202210093043 A CN202210093043 A CN 202210093043A CN 114489902 A CN114489902 A CN 114489902A
- Authority
- CN
- China
- Prior art keywords
- content
- interface
- editing
- code
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 82
- 238000009877 rendering Methods 0.000 claims abstract description 55
- 230000008569 process Effects 0.000 claims abstract description 14
- 238000004590 computer program Methods 0.000 claims description 21
- 238000013515 script Methods 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 11
- 230000009471 action Effects 0.000 claims description 5
- 238000011161 development Methods 0.000 abstract description 16
- 238000005516 engineering process Methods 0.000 abstract description 5
- 230000001360 synchronised effect Effects 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 11
- 238000004891 communication Methods 0.000 description 8
- 230000003287 optical effect Effects 0.000 description 6
- 239000008186 active pharmaceutical agent Substances 0.000 description 3
- 238000002347 injection Methods 0.000 description 2
- 239000007924 injection Substances 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000000873 masking effect Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000012954 risk control Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the disclosure relates to an interface display method, an interface display device, equipment and a medium, wherein the method comprises the following steps: responding to the trigger operation of a target component in a first page, and displaying a code editing interface of the target component in a first area of a second page; acquiring the editing content in the code editing interface and sending the editing content to a server; and receiving a code compiling result returned by the server according to the editing content, and displaying a rendering result in a second area of a second page according to the code compiling result. By adopting the technical scheme, content editing and synchronous display of rendering results corresponding to the edited content are realized at the client side, real-time rendering and preview in the interface development process are realized, the technical problems of long using path, high using cost and high using cost of the interface development scheme in the related technology are solved, and user operation is simplified.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to an interface display method, apparatus, device, and medium.
Background
Front-end interface development is a process of creating a front-end interface and presenting the front-end interface to a user, and various front-end interfaces are generated along with the increasing demands of people on visual effects, interaction functions and the like of the front-end interface. In application building products, developers usually implement development of a custom front-end interface by means of codes.
In the related technology, code editing of a front-end interface is realized locally, a code package is pushed or uploaded to a platform through a tool, application building is carried out through the code package, the interface development scheme is long in using path, and the using cost are high.
Disclosure of Invention
In order to solve the technical problem, the present disclosure provides an interface display method, apparatus, device and medium.
The embodiment of the disclosure provides an interface display method, which comprises the following steps:
responding to the trigger operation of the target component on the first page, and displaying a code editing interface of the target component in a first area of a second page;
acquiring the editing content in the code editing interface and sending the editing content to a server;
and receiving a code compiling result returned by the server according to the editing content, and displaying a rendering result in a second area of the second page according to the code compiling result.
The embodiment of the disclosure also provides another interface display method, which includes:
receiving edit content sent by a client, wherein the edit content is obtained through a code editing interface of a target component displayed in a first area;
compiling according to the editing content to generate a code compiling result;
and sending the code compiling result to a client side so that the client side displays a rendering result in a second area according to the code compiling result.
The embodiment of the present disclosure further provides an interface display device, the device includes:
the first display module is used for responding to the trigger operation of the target component on the first page and displaying a code editing interface of the target component in a first area of a second page;
the sending module is used for acquiring the editing content in the code editing interface and sending the editing content to a server;
and the second display module is used for receiving a code compiling result returned by the server according to the editing content and displaying a rendering result in a second area of the second page according to the code compiling result.
The disclosed embodiment also provides another interface display device, which comprises:
the system comprises a receiving module, a processing module and a display module, wherein the receiving module is used for receiving the editing content sent by a client, and the editing content is obtained through a code editing interface of a target component displayed in a first area;
the building module is used for compiling according to the editing content to generate a code compiling result;
and the sending module is used for sending the code compiling result to a client so that the client can display a rendering result in a second area according to the code compiling result.
An embodiment of the present disclosure further provides an electronic device, which includes: a processor; a memory for storing the processor-executable instructions; the processor is used for reading the executable instructions from the memory and executing the instructions to realize the interface display method provided by the embodiment of the disclosure.
The embodiment of the disclosure also provides a computer-readable storage medium, in which a computer program is stored, and the computer program is used for executing the interface display method provided by the embodiment of the disclosure.
Embodiments of the present disclosure also provide a computer program product, which includes a computer program/instruction, and when the computer program/instruction is executed by a processor, the interface display method provided by the embodiments of the present disclosure is implemented.
Compared with the prior art, the technical scheme provided by the embodiment of the disclosure has the following advantages: according to the interface display scheme provided by the embodiment of the disclosure, in response to the trigger operation of the first page on the target component, the client displays the code editing interface of the target component in the first area of the second page, the client acquires the editing content in the code editing interface, sends the editing content to the server, receives the code compiling result returned by the server according to the editing content, and the client displays the rendering result in the second area of the second page according to the code compiling result. Therefore, the editing of the edited content and the synchronous display of the rendering result corresponding to the edited content are realized on the client side, the real-time rendering and preview in the interface development process are realized, the functions of supporting the code online editing and the real-time preview are provided, the technical problems of long using path, high cost and high using cost of an interface development scheme in the related technology are solved, and the user operation is simplified.
Drawings
The above and other features, advantages and aspects of various embodiments of the present disclosure will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numbers refer to the same or similar elements. It should be understood that the drawings are schematic and that elements and features are not necessarily drawn to scale.
Fig. 1 is a schematic flow chart of an interface display method according to an embodiment of the present disclosure;
fig. 2 is a schematic diagram of a second page provided in the embodiment of the present disclosure;
fig. 3 is a schematic flow chart of another interface display method provided in the embodiment of the present disclosure;
fig. 4 is a schematic flow chart of another interface display method provided in the embodiment of the present disclosure;
fig. 5 is a schematic flow chart of another interface display method provided in the embodiment of the present disclosure;
fig. 6 is a schematic structural diagram of an interface display apparatus according to an embodiment of the present disclosure;
fig. 7 is a schematic structural view of another interface display apparatus provided in the embodiment of the present disclosure;
fig. 8 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure.
Detailed Description
Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the disclosure are for illustration purposes only and are not intended to limit the scope of the disclosure.
The embodiment of the disclosure provides an interface display method, which is described below with reference to specific embodiments.
Fig. 1 is a flowchart of an interface displaying method provided by an embodiment of the present disclosure, where the method may be executed by an interface displaying apparatus, where the apparatus may be implemented by software and/or hardware, and may be generally integrated in an electronic device. As shown in fig. 1, the method includes:
and step 101, responding to the trigger operation of the target component on the first page, and displaying a code editing interface of the target component in a first area of a second page.
The method of the embodiment of the disclosure can be applied to the client.
In the embodiment of the present disclosure, in response to a trigger operation on a target component on a first page, a second page is displayed, where the second page includes a first region and a second region, and the first region and the second region may be arranged in a left-right arrangement, a top-bottom arrangement, and the like, which is not limited herein. And the first area of the second page displays the code editing interface of the target component, the code editing interface can be used for a user to input editing content and display the editing content in the code editing interface, and the second area of the second page displays the target component.
The target component may be a component for interface development, for example, the target component is an HTML (Hyper Text Markup Language) component. The HTML component is a page component supporting customizing of a personalized display interface through HTML grammar, has the characteristics of online editing, real-time preview, light weight and convenience, and can realize page elements in the forms of videos, carousel pictures, search boxes, brilliant characters, display cabinets and the like.
The trigger operation may be implemented in various ways, including but not limited to a click operation, a voice input operation, and a touch operation.
Optionally, before the code editing interface of the target component is displayed in the first area of the second page in response to the triggering operation on the target component in the first page, the target component is created in the first page in response to the selection operation of the target component identifier in the first page. The selection operation includes, but is not limited to, a click operation, a drag operation, and the like. As an example, an option control of a target component may be preset in a first page, in an actual application process, when an operation of dragging the option control of the target component into a preset canvas area of the first page is detected, the target component is created in the first page, further, when a trigger operation of the target component on the first page is detected, an editor interface of the target component is generated, and a code editing interface of the target component is displayed in a first area of the editor interface.
And 102, acquiring the editing content in the code editing interface, and sending the editing content to a server.
In this embodiment, the client acquires the editing content in the code editing interface and sends the editing content to the server. Through the code editing interface, a user can develop a custom interface by using programming languages such as HTML, CSS (Cascading Style Sheets), JavaScript, and the like, wherein editing contents are generated based on editing operations of the user, and the editing operations include, for example, addition operations, deletion operations, modification operations, and the like.
As an example, a time interval is preset, and the client sends the edited content in the code editing interface to the server at the preset time interval, which may be set according to actual needs, for example, the time interval may be set to 1 second. In this example, the client may start timing when sending the editing content, and when detecting that the timing time reaches the preset time interval, the client sends the current editing content in the code editing interface to the server, and starts timing again.
As another example, the edited content may be sent at a preset fixed time, for example, the current system time is matched with the fixed time, and if the current system time is consistent with the fixed time, the client sends the edited content to the server.
Alternatively, taking a browser at the client side as an example, in the case that the browser cannot generate a rendering result according to the editing content rendering by parsing the editing content in this embodiment, the client sends the editing content to the server, so that the server executes the code building step according to the editing content after receiving the editing content. The code construction step comprises the following steps: and the server carries out compiling processing according to the editing content to generate a code compiling result.
And 103, receiving a code compiling result returned by the server according to the editing content, and displaying a rendering result in the second area according to the code compiling result.
In this embodiment, the client receives the code compiling result, generates a rendering result by rendering according to the code compiling result in a rendering manner, and displays the rendering result in the second area, where the rendering result includes an interface preview.
For example, referring to fig. 2, the second page is shown in the figure, the first area includes editing content, the second area includes rendering results, and taking an HTML component as an example, the editing content is used for developing page elements of the carousel image, the client sends the editing content to the server, the server returns a code compiling result, the client renders and generates a preview image of the carousel image according to the code compiling result, and the preview image is displayed in the second area. When the component development is completed and the preview icon meets the user's expectations, the component can be saved and deployed, and the interface development is completed.
According to the technical scheme of the embodiment of the disclosure, the client responds to the trigger operation of the target component on the first page, displays the code editing interface of the target component in the first area of the second page, acquires the editing content in the code editing interface, sends the editing content to the server, receives the code compiling result returned by the server according to the editing content, and displays the rendering result in the second area of the second page according to the code compiling result. Therefore, editing of the edited content and synchronous display of the rendering result corresponding to the edited content are achieved on the client side, real-time rendering and preview in the interface development process are achieved, the method can be applied to online interface development products, the functions of supporting online editing and real-time preview of codes are provided, the technical problems that an interface development scheme in the related technology is long in using path, high in cost and high in using cost are solved, and user operation is simplified.
Based on the above embodiment, there is a problem of security risk in the process of developing the interface based on the component, in this embodiment, in order to ensure the security of interface development, it may be detected whether the edited content includes the tag and the attribute that have the security risk.
Fig. 3 is a schematic flow chart of another interface display method provided in the embodiment of the present disclosure, and as shown in fig. 3, the method includes:
And 302, matching the editing content in the code editing interface with a preset white list, and generating risk prompt information according to a matching result.
In this embodiment, the client matches the edited content in the code editing interface with a preset white list, where the white list includes a first tag and a first attribute, where the first tag and the first attribute are tags and attributes that are not disabled, and the disabled tags and attributes are tags and attributes that have a security risk, for example, tags and attributes that are disabled and can introduce an external JS script into an HTML component, resulting in a security risk are disabled Attributes other than the event attribute, such as onclick/onload/onkeydown/onkeyup.
And when the client detects that the edited content comprises a second label and/or a second attribute, generating risk prompt information according to the second label and/or the second attribute, wherein the first label is different from the second label, and the first attribute is different from the second attribute. In this embodiment, when the client detects that the edited content includes the disabled tag and the disabled attribute, the risk prompt information is generated according to the detected second tag and/or second attribute, and the risk prompt information may be implemented in various manners, including but not limited to highlighting, text prompting, and the like.
In this embodiment, the client detects whether the edited content is changed at preset time intervals, and sends the edited content to the server when detecting that the edited content is changed. For example, if the preset time interval is 1 second, the current first content and the second content recorded in the last second are acquired every second, if the first content is inconsistent with the second content, the current first content is sent to the server, and if the first content is consistent with the second content, the step of detecting the first content in the code editing interface at the current moment and the second content in the code editing interface at the last moment according to the preset time interval is continuously executed. As another example, the client may detect a user editing operation, and send the edited content to the server when a certain time is reached after the user editing operation is detected and the editing operation is stopped.
When the server receives the editing content, compiling is carried out according to the editing content, a code compiling result is generated and returned to the client, so that the client generates a rendering result according to the returned code compiling result, and the effects of code online editing and real-time previewing are achieved.
And step 304, receiving a code compiling result returned by the server according to the editing content, and displaying a rendering result in a second area of the second page according to the code compiling result.
In this embodiment, when detecting that a code compiling result returned by the server includes a problem identifier, the client displays a preset rendering failure occupation bitmap in the second area, where the rendering failure occupation bitmap may be a preset image and is used to indicate that a disabled tag or attribute exists. When the server analyzes the editing content, a third label and/or a third attribute contained in the editing content are/is obtained, and if the content identical to the third label exists in the blacklist, a problem identifier of the target component is generated, or if the content identical to the third attribute exists in the blacklist, the problem identifier of the target component is generated. Optionally, the black list includes disabled tags and attributes, which may be described with reference to the foregoing steps, as an example.
According to the technical scheme of the embodiment of the disclosure, the client matches the editing content in the code editing interface with the preset white list, and if the label and the attribute with the safety risk are detected to exist in the editing content, the risk prompt information is generated at the client side, so that the unsupported label and attribute are displayed more intuitively.
Based on the above embodiments, the following describes an interface display method according to an embodiment of the present disclosure by taking a server as an example.
Fig. 4 is a schematic flow chart of another interface display method provided in the embodiment of the present disclosure, and as shown in fig. 4, the method includes:
The method of the embodiment of the disclosure can be applied to a server.
In this embodiment, the client responds to the trigger operation of the target component on the first page, and displays the code editing interface of the target component in the first area of the second page, so that the client acquires the editing content in the code editing interface and sends the editing content to the server. Among them, it can be a component for interface development, for example, the target component is an HTML component.
And 402, compiling according to the editing content to generate a code compiling result.
In this embodiment, when the server receives the editing content sent by the client, the server executes the code building step. For example, taking a browser of a client as an example, the edited content further includes content for describing data invocation, and the browser cannot generate a rendering result according to the editing content by parsing the edited content.
In one embodiment of the present disclosure, performing compilation processing according to an edited content to generate a code compilation result includes: analyzing the editing content, determining a target SDK (Software Development Kit) to be called, acquiring target data of the platform system according to the target SDK, and performing compiling processing according to the editing content and the target data to generate a code compiling result.
In this embodiment, an interface for performing data communication between the component and the platform system is provided in an SDK manner when the HTML component is developed by injecting the SDK into the platform system. Optionally, the SDK injecting step of the component at runtime includes: the method comprises the steps of responding to an operation request of a target assembly, obtaining an injection interface of the target assembly, transmitting an SDK instance of a platform system to the target assembly through the injection interface, supporting data communication between the assembly and the platform system, including but not limited to adding, deleting, modifying and checking platform data, monitoring change of the platform data, triggering execution of platform operation, triggering execution of platform functions and the like, and obtaining the platform system data through the SDK by a server, so that safety is further improved.
As an example, the editing content includes a description language for obtaining data Y from the platform system X, the server parses the editing content, determines an SDK to be called, obtains the data Y of the platform system X according to the SDK, and then performs compilation processing according to the obtained data Y and the editing content to generate a code compilation result.
And step 403, sending the code compiling result to the client, so that the client displays the rendering result in the second area according to the code compiling result.
In this embodiment, the server sends the code compiling result to the client, the client receives the code compiling result, generates a rendering result by rendering according to the code compiling result in a rendering manner, and displays the rendering result in the second area of the second page, where the rendering result includes an interface preview.
According to the technical scheme of the embodiment of the disclosure, the server receives the editing content sent by the client, compiles according to the editing content to generate a code compiling result, and sends the code compiling result to the client so that the client displays the rendering result in the second area according to the code compiling result.
Based on the above embodiments, in the process of developing an interface based on a component, there are potential safety hazards that risk is brought by a third party library and the like, how to reduce the safety risk, and how to realize component risk control is a problem to be solved urgently.
Fig. 5 is a schematic flow chart of another interface display method provided in the embodiment of the present disclosure, and as shown in fig. 5, the method includes:
In this embodiment, the server receives the editing content sent by the client.
And 502, matching the edited content with a preset blacklist, and generating a problem identifier of the target component under the condition that a matching result meets a preset condition.
In this embodiment, the server parses the edited content, obtains a third tag and/or a third attribute included in the edited content, matches the third tag and/or the third attribute with a preset blacklist, and generates a problem identifier of the target component when there is content in the blacklist that is the same as the third tag, or generates a problem identifier of the target component when there is content in the blacklist that is the same as the third attribute.
The blacklist may include disabled tags and attributes, which are security risk tags and attributes, for example, disabled tags and attributes that can introduce external JS scripts into the HTML component, resulting in a security risk. And when the server detects that the editing content does not comprise the forbidden tags and attributes, normally constructing and storing codes.
In this embodiment, the client displays a preset rendering failure occupation bitmap in a second area of the second page when detecting that a code compiling result returned by the server includes the problem identifier, where the rendering failure occupation bitmap may be a preset image.
In an embodiment of the present disclosure, the server detects the edited content according to the list to be adjusted, determines a global API (Application Programming Interface) to be adjusted from a script tag of the edited content, and performs a masking process on the global API, or rewrites an original API of the global API into a target API, where the target API is in a script scope. The HTML component has the capability of manipulating page elements outside the scope of the HTML component, which results in affecting the page outside the scope of the HTML component. As an example, a first global API is determined from all global APIs corresponding to the script tag according to the list to be masked, the first global API is an unused global API, and further, the first global API is masked; determining a second global API in all global APIs, wherein the second global API is a global API except a first global API in all global APIs, namely the second global API is a used global API, shielding an original API of the second global API through a closure variable, and creating a proxy API of the second global API in a script action domain, so that the API capability provided by the component is only influenced into the component, the code content of the component is ensured not to rewrite the structure, style and behavior of an external page, and the risk of the component is controllable.
In the embodiment of the disclosure, the server matches the editing content with the preset blacklist, when the label or attribute in the editing content exists in the blacklist, a problem identifier is generated to mark the component as a problem component, the client displays the rendering failure occupation bitmap according to the problem identifier during operation, and the client limits part of the label and the attribute to shield the component characteristic with the safety risk, so that the safety of interface development is ensured.
Fig. 6 is a schematic structural diagram of an interface display apparatus provided in an embodiment of the present disclosure, where the interface display apparatus may be implemented by software and/or hardware, and may be generally integrated in an electronic device for interface display. As shown in fig. 6, the interface display apparatus includes: a first display module 61, a sending module 62 and a second display module 63.
The first presentation module 61 is configured to, in response to a trigger operation on a target component on a first page, display a code editing interface of the target component in a first area of a second page.
And a sending module 62, configured to obtain the editing content in the code editing interface, and send the editing content to a server.
And a second display module 63, configured to receive a code compiling result returned by the server according to the editing content, and display a rendering result in a second area of a second page according to the code compiling result.
Fig. 7 is a schematic structural diagram of another interface display device provided in an embodiment of the present disclosure, and as shown in fig. 7, the interface display device includes: a receiving module 71, a building module 72, a sending module 73.
The receiving module 71 is configured to receive the editing content sent by the client, where the editing content is obtained through a code editing interface of the target component displayed in the first area.
And the building module 72 is configured to perform compiling processing according to the editing content to generate a code compiling result.
And the sending module 73 is configured to send the code compiling result to the client, so that the client displays the rendering result in the second area according to the code compiling result.
The interface display device provided by the embodiment of the disclosure can execute the interface display method provided by any embodiment of the disclosure, and has corresponding functional modules and beneficial effects of the execution method.
In order to implement the above embodiments, the present disclosure also provides a computer program product, which includes a computer program/instruction, and when the computer program/instruction is executed by a processor, the computer program/instruction implements the interface display method in the above embodiments.
Fig. 8 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure.
Referring now specifically to fig. 8, a schematic diagram of a structure suitable for implementing an electronic device 800 in embodiments of the present disclosure is shown. The electronic device 800 in the disclosed embodiment may include, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet computer), a PMP (portable multimedia player), a vehicle mounted terminal (e.g., a car navigation terminal), and the like, and a fixed terminal such as a digital TV, a desktop computer, and the like. The electronic device shown in fig. 8 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.
As shown in fig. 8, an electronic device 800 may include a processing means (e.g., central processing unit, graphics processor, etc.) 801 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)802 or a program loaded from a storage means 808 into a Random Access Memory (RAM) 803. In the RAM803, various programs and data necessary for the operation of the electronic apparatus 800 are also stored. The processing apparatus 801, the ROM 802, and the RAM803 are connected to each other by a bus 804. An input/output (I/O) interface 805 is also connected to bus 804.
Generally, the following devices may be connected to the I/O interface 805: input devices 806 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; output devices 807 including, for example, a Liquid Crystal Display (LCD), speakers, vibrators, and the like; storage 808 including, for example, magnetic tape, hard disk, etc.; and a communication device 809. The communication means 809 may allow the electronic device 800 to communicate wirelessly or by wire with other devices to exchange data. While fig. 8 illustrates an electronic device 800 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer readable medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication means 809, or installed from the storage means 808, or installed from the ROM 802. The computer program performs the above-described functions defined in the interface presentation method of the embodiment of the present disclosure when executed by the processing apparatus 801.
It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
In some embodiments, the clients, servers may communicate using any currently known or future developed network Protocol, such as HTTP (HyperText Transfer Protocol), and may interconnect with any form or medium of digital data communication (e.g., a communications network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network.
The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device.
The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: responding to the trigger operation of the target component on the first page, and displaying a code editing interface of the target component in a first area of a second page; acquiring the editing content in the code editing interface and sending the editing content to a server; and receiving a code compiling result returned by the server according to the editing content, and displaying a rendering result in a second area of a second page according to the code compiling result. Or receiving the editing content sent by the client, wherein the editing content is obtained through a code editing interface of the target component displayed in the first area; compiling according to the editing content to generate a code compiling result; and sending the code compiling result to a client side so that the client side displays a rendering result in a second area according to the code compiling result.
Computer program code for carrying out operations for the present disclosure may be written in any combination of one or more programming languages, including but not limited to an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present disclosure may be implemented by software or hardware. Where the name of an element does not in some cases constitute a limitation on the element itself.
The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), systems on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), and the like.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
According to one or more embodiments of the present disclosure, there is provided an interface display method including: responding to the trigger operation of a target component in a first page, and displaying a code editing interface of the target component in a first area of a second page; acquiring the editing content in the code editing interface and sending the editing content to a server; and receiving a code compiling result returned by the server according to the editing content, and displaying a rendering result in a second area of a second page according to the code compiling result.
According to one or more embodiments of the present disclosure, in an interface presentation method provided by the present disclosure, before displaying a code editing interface of a target component in a first area of a second page in response to a trigger operation on the target component in a first page, the method further includes: in response to a target component identification selection operation on a first page, the target component is created in the first page.
According to one or more embodiments of the present disclosure, in an interface presentation method provided by the present disclosure, the displaying a code editing interface of a target component in a first area of a second page in response to a trigger operation on the target component in a first page includes: and responding to the trigger operation of a target component in the first page, and displaying a second page, wherein a first area of the second page displays a code editing interface of the target component, and a second area of the second page displays the target component.
According to one or more embodiments of the present disclosure, in the interface display method provided by the present disclosure, the acquiring the editing content in the code editing interface and sending the editing content to a server includes: detecting first content in the code editing interface at the current moment and second content in the code editing interface at the last moment according to a preset time interval; and when the first content is detected to be inconsistent with the second content, sending the first content to the server.
According to one or more embodiments of the present disclosure, in the interface display method provided by the present disclosure, the displaying a rendering result in a second area of the second page according to the code compiling result includes: and displaying a preset rendering failure occupation bitmap in the second area under the condition that the code compiling result returned by the server is detected to comprise a problem identifier.
According to one or more embodiments of the present disclosure, in an interface display method provided by the present disclosure, edit content in the code editing interface is matched with a preset white list, where the white list includes a first tag and a first attribute; and under the condition that the edited content is detected to comprise a second label and/or a second attribute, generating risk prompt information according to the second label and/or the second attribute, wherein the first label is different from the second label, and the first attribute is different from the second attribute.
According to one or more embodiments of the present disclosure, there is provided an interface display method including: receiving edit content sent by a client, wherein the edit content is obtained through a code editing interface of a target component displayed in a first area; compiling according to the editing content to generate a code compiling result; and sending the code compiling result to a client side so that the client side displays a rendering result in a second area according to the code compiling result.
According to one or more embodiments of the present disclosure, in the interface display method provided by the present disclosure, the compiling process according to the editing content to generate a code compiling result includes: analyzing the editing content to obtain a third label and/or a third attribute contained in the editing content; and matching the third label and/or the third attribute with a preset blacklist, and generating the problem identifier of the target component under the condition that the blacklist has the content which is the same as the third label, or under the condition that the blacklist has the content which is the same as the third attribute.
According to one or more embodiments of the present disclosure, in the interface display method provided by the present disclosure, the compiling process according to the editing content to generate a code compiling result includes: analyzing the editing content, and determining a target software development kit to be called; acquiring target data of a platform system according to the target software development kit; and compiling according to the editing content and the target data to generate the code compiling result.
According to one or more embodiments of the disclosure, in an interface display method provided by the disclosure, the edited content is detected according to a list to be adjusted, and a global application program interface to be adjusted is determined from a script tag of the edited content; and shielding the global application program interface, or rewriting an original application program interface of the global application program interface into a target application program interface, wherein the target application program interface is in a script action domain.
According to one or more embodiments of the present disclosure, there is provided an interface display apparatus including: the first display module is used for responding to the trigger operation of the target component in the first page and displaying a code editing interface of the target component in a first area of a second page; the sending module is used for acquiring the editing content in the code editing interface and sending the editing content to a server; and the second display module is used for receiving a code compiling result returned by the server according to the editing content and displaying a rendering result in a second area of the second page according to the code compiling result.
According to one or more embodiments of the present disclosure, in the interface display apparatus provided by the present disclosure, the sending module is specifically configured to: detecting first content in the code editing interface at the current moment and second content in the code editing interface at the last moment according to a preset time interval; and when the first content is detected to be inconsistent with the second content, sending the first content to the server.
According to one or more embodiments of the present disclosure, in the interface display apparatus provided by the present disclosure, the second display module is specifically configured to: and displaying a preset rendering failure occupation bitmap in the second area under the condition that the code compiling result returned by the server is detected to comprise a problem identifier.
According to one or more embodiments of the present disclosure, the interface display apparatus further includes a prompt module, configured to match editing content in the code editing interface with a preset white list, where the white list includes a first tag and a first attribute; and under the condition that the edited content is detected to comprise a second label and/or a second attribute, generating risk prompt information according to the second label and/or the second attribute, wherein the first label is different from the second label, and the first attribute is different from the second attribute.
According to one or more embodiments of the present disclosure, there is provided an interface display apparatus including: the receiving module is used for receiving the editing content sent by the client, wherein the editing content is obtained through a code editing interface of the target component displayed in the first area; the building module is used for compiling according to the editing content to generate a code compiling result; and the sending module is used for sending the code compiling result to a client so that the client can display a rendering result in a second area according to the code compiling result.
According to one or more embodiments of the present disclosure, in an interface display apparatus provided by the present disclosure, a building module is specifically configured to: analyzing the editing content to obtain a third label and/or a third attribute contained in the editing content; and matching the third label and/or the third attribute with a preset blacklist, and generating a problem identifier of the target component under the condition that the blacklist has the content which is the same as the third label or the blacklist has the content which is the same as the third attribute.
According to one or more embodiments of the present disclosure, in an interface display apparatus provided by the present disclosure, a building module is specifically configured to: analyzing the editing content, and determining a target software development kit to be called; acquiring target data of a platform system according to the target software development kit; and compiling according to the editing content and the target data to generate the code compiling result.
According to one or more embodiments of the present disclosure, the interface display apparatus provided by the present disclosure further includes: the shielding module is used for detecting the edited content according to the list to be adjusted and determining a global application program interface to be adjusted from the script tag of the edited content; and shielding the global application program interface, or rewriting an original application program interface of the global application program interface into a target application program interface, wherein the target application program interface is in a script action domain.
In accordance with one or more embodiments of the present disclosure, there is provided an electronic device including: a processor; a memory for storing the processor-executable instructions; the processor is used for reading the executable instructions from the memory and executing the instructions to realize any interface display method provided by the disclosure.
According to one or more embodiments of the present disclosure, there is provided a computer-readable storage medium storing a computer program for executing any one of the interface presentation methods provided by the present disclosure.
It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order, and/or performed in parallel. Moreover, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.
The term "include" and variations thereof as used herein are open-ended, i.e., "including but not limited to". The term "based on" is "based, at least in part, on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions for other terms will be given in the following description.
It should be noted that the terms "first", "second", and the like in the present disclosure are only used for distinguishing different devices, modules or units, and are not used for limiting the order or interdependence of the functions performed by the devices, modules or units. The modifications referred to in this disclosure as "a", "an", and "the" are illustrative and not restrictive, and it will be understood by those skilled in the art that "one or more" may be used unless the context clearly dictates otherwise.
The names of messages or information exchanged between devices in the embodiments of the present disclosure are for illustrative purposes only, and are not intended to limit the scope of the messages or information.
Claims (15)
1. An interface display method, comprising:
responding to the trigger operation of a target component in a first page, and displaying a code editing interface of the target component in a first area of a second page;
acquiring the editing content in the code editing interface and sending the editing content to a server;
and receiving a code compiling result returned by the server according to the editing content, and displaying a rendering result in a second area of the second page according to the code compiling result.
2. The method of claim 1, wherein prior to displaying the code editing interface of the target component in the first region of the second page in response to the triggering operation of the target component in the first page, the method further comprises:
in response to a target component identification selection operation on a first page, the target component is created in the first page.
3. The method of claim 2, wherein displaying the code editing interface of the target component in the first area of the second page in response to the triggering operation of the target component in the first page comprises:
and responding to the trigger operation of a target component in the first page, and displaying a second page, wherein a first area of the second page displays a code editing interface of the target component, and a second area of the second page displays the target component.
4. The method of claim 1, wherein the obtaining the editing content in the code editing interface and sending the editing content to a server comprises:
detecting first content in the code editing interface at the current moment and second content in the code editing interface at the last moment according to a preset time interval;
and when the first content is detected to be inconsistent with the second content, sending the first content to the server.
5. The method of claim 1, wherein said displaying a rendering result in a second area of the second page according to the code compilation result comprises:
and under the condition that the code compiling result returned by the server is detected to comprise a problem identifier, displaying a preset rendering failure occupation bitmap in a second area of the second page.
6. The method of claim 1, further comprising:
matching the editing content in the code editing interface with a preset white list, wherein the white list comprises a first label and a first attribute;
and generating risk prompt information according to a second label and/or a second attribute when the fact that the edited content comprises the second label and/or the second attribute is detected, wherein the first label is different from the second label, and the first attribute is different from the second attribute.
7. An interface display method, comprising:
receiving edit content sent by a client, wherein the edit content is obtained through a code editing interface of a target component displayed in a first area;
compiling according to the editing content to generate a code compiling result;
and sending the code compiling result to a client side so that the client side displays a rendering result in a second area according to the code compiling result.
8. The method according to claim 7, wherein the compiling process according to the editing content to generate a code compiling result comprises:
analyzing the editing content to obtain a third label and/or a third attribute contained in the editing content;
and matching the third label and/or the third attribute with a preset blacklist, and generating the problem identifier of the target component under the condition that the blacklist has the content which is the same as the third label, or under the condition that the blacklist has the content which is the same as the third attribute.
9. The method according to claim 7, wherein the compiling process according to the editing content to generate a code compiling result comprises:
analyzing the editing content, and determining a target software development kit to be called;
acquiring target data of a platform system according to the target software development kit;
and compiling according to the editing content and the target data to generate the code compiling result.
10. The method of claim 7, further comprising:
detecting the edited content according to the list to be adjusted, and determining a global application program interface to be adjusted from the script tag of the edited content;
and shielding the global application program interface, or rewriting an original application program interface of the global application program interface into a target application program interface, wherein the target application program interface is in a script action domain.
11. An interface display device, comprising:
the first display module is used for responding to the trigger operation of the target component on the first page and displaying a code editing interface of the target component in a first area of a second page;
the sending module is used for acquiring the editing content in the code editing interface and sending the editing content to a server;
and the second display module is used for receiving a code compiling result returned by the server according to the editing content and displaying a rendering result in a second area of the second page according to the code compiling result.
12. An interface display device, comprising:
the system comprises a receiving module, a processing module and a display module, wherein the receiving module is used for receiving the editing content sent by a client, and the editing content is obtained through a code editing interface of a target component displayed in a first area;
the building module is used for compiling according to the editing content to generate a code compiling result;
and the sending module is used for sending the code compiling result to a client so that the client can display a rendering result in a second area according to the code compiling result.
13. An electronic device, characterized in that the electronic device comprises:
a processor;
a memory for storing the processor-executable instructions;
the processor is configured to read the executable instructions from the memory and execute the instructions to implement the interface display method according to any one of claims 1 to 6, or to implement the interface display method according to any one of claims 7 to 10.
14. A computer-readable storage medium, characterized in that the storage medium stores a computer program for executing the interface presentation method of any one of claims 1 to 6 or the interface presentation method of any one of claims 7 to 10.
15. A computer program product, characterized in that the computer program product comprises a computer program/instructions which, when executed by a processor, implements the interface presentation method according to any one of claims 1-6, or implements the interface presentation method according to any one of claims 7-10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210093043.3A CN114489902A (en) | 2022-01-26 | 2022-01-26 | Interface display method, device, equipment and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210093043.3A CN114489902A (en) | 2022-01-26 | 2022-01-26 | Interface display method, device, equipment and medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114489902A true CN114489902A (en) | 2022-05-13 |
Family
ID=81474441
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210093043.3A Pending CN114489902A (en) | 2022-01-26 | 2022-01-26 | Interface display method, device, equipment and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114489902A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2024120480A1 (en) * | 2022-12-09 | 2024-06-13 | 华为技术有限公司 | Device-cloud collaborative content preview method and apparatus |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090055460A1 (en) * | 2007-08-21 | 2009-02-26 | Ryan Hicks | Generated content for editable web pages |
| CN106201489A (en) * | 2016-06-30 | 2016-12-07 | 乐视控股（北京）有限公司 | A kind of page editing method and apparatus |
| US20180139180A1 (en) * | 2016-07-06 | 2018-05-17 | Hiro Media Ltd. | Real-time monitoring of web page code |
-
2022
- 2022-01-26 CN CN202210093043.3A patent/CN114489902A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090055460A1 (en) * | 2007-08-21 | 2009-02-26 | Ryan Hicks | Generated content for editable web pages |
| CN106201489A (en) * | 2016-06-30 | 2016-12-07 | 乐视控股（北京）有限公司 | A kind of page editing method and apparatus |
| US20180139180A1 (en) * | 2016-07-06 | 2018-05-17 | Hiro Media Ltd. | Real-time monitoring of web page code |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2024120480A1 (en) * | 2022-12-09 | 2024-06-13 | 华为技术有限公司 | Device-cloud collaborative content preview method and apparatus |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111274760B (en) | Rich text data processing method and device, electronic equipment and computer storage medium | |
| US10102306B2 (en) | Patching base document object model (DOM) with DOM-differentials to generate high fidelity replay of webpage user interactions | |
| US10880227B2 (en) | Apparatus, hybrid apparatus, and method for network resource access | |
| CN108038134B (en) | Page display method and device, storage medium and electronic equipment | |
| CN106569800B (en) | Front-end interface generation method and device | |
| KR102045602B1 (en) | Live tiles without application-code execution | |
| CN109857506B (en) | Method and device for realizing guide information, electronic equipment and storage medium | |
| CN110020329B (en) | Method, device and system for generating webpage | |
| CN111026490B (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN112684968A (en) | Page display method and device, electronic equipment and computer readable medium | |
| CN110070593B (en) | Method, device, equipment and medium for displaying picture preview information | |
| CN112269959B (en) | Control method and device for display content, readable medium and electronic equipment | |
| CN110780874B (en) | Method and device for generating information | |
| CN109814915B (en) | Parameter configuration method, device, medium and electronic equipment based on lua | |
| CN109492163B (en) | List display recording method and device, terminal equipment and storage medium | |
| CN114489902A (en) | Interface display method, device, equipment and medium | |
| CN109684570A (en) | Web information processing method and device | |
| CN111382039A (en) | Method, device, electronic equipment and storage medium for reporting user behavior event | |
| CN114995690A (en) | Document creation method, device, equipment and storage medium | |
| CN111008050B (en) | Page task execution method, device, terminal and storage medium | |
| CN110442419B (en) | Interface layout method and device for Android application | |
| CN110069186B (en) | Method and equipment for displaying operation interface of application | |
| CN110083407B (en) | Method and device for realizing step bar in applet, electronic equipment and storage medium | |
| CN113220293B (en) | Page display method, page display device, electronic equipment and computer readable medium | |
| CN118069012B (en) | Display interface information configuration method, device, equipment and computer readable medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20220513 |