CN112084446A - Webpage editing method, editor, electronic equipment and readable storage medium - Google Patents
Webpage editing method, editor, electronic equipment and readable storage medium Download PDFInfo
- Publication number
- CN112084446A CN112084446A CN202010822147.4A CN202010822147A CN112084446A CN 112084446 A CN112084446 A CN 112084446A CN 202010822147 A CN202010822147 A CN 202010822147A CN 112084446 A CN112084446 A CN 112084446A
- Authority
- CN
- China
- Prior art keywords
- component
- data information
- module
- editing
- editor
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application relates to the technical field of computers, in particular to a webpage editing method, an editor, electronic equipment and a readable storage medium, wherein the method comprises the steps of establishing a data information component meeting business requirements; associating the data information component to a target UI component; wherein each of the components has a unique ID. The editing scheme related to the application realizes the association of the data interface and the calling of the data information, can support the editing of complex and dynamic activity pages with interactivity, expands the functions of the editor and further improves the utilization rate of the editor.
Description
Technical Field
The present application relates to the field of computer data processing technologies, and in particular, to a web page editing method, an editor, an electronic device, and a readable storage medium.
Background
HTML5, H5 for short, is a language description way to build Web content. HTML5 is the next generation standard for the Internet, a language way to build and present Internet content, is considered one of the core technologies of the Internet, with more interaction and functionality than H4, H5, one of the greatest advantages being the support of multimedia on mobile devices. At present, H5 is applied to active development by directly utilizing a basic language, the period from development to online is too long, if elements on a page, such as a file and a picture, are frequently changed, frequent online is required, and maintenance is not facilitated. While there are many companies currently practicing to develop such a simplistic version of the H5 editor, the simplistic version of the editor does not enable any interaction with the data interface and the back-end activity page.
Disclosure of Invention
The present application aims to solve at least one of the above technical drawbacks. The technical scheme adopted by the application is as follows:
in a first aspect, an embodiment of the present application provides a method for editing a web page, where the method includes:
creating a data information component meeting the business requirements;
associating the data information component to a target UI component;
wherein each of the components has a unique ID.
Optionally, the creating a data information component that meets the business requirement includes:
acquiring and analyzing service requirements;
compiling data information meeting the service requirements according to the analysis result;
and packaging the data information to form a data information component and generating a component ID.
Optionally, associating the data information component to a target UI component comprises:
and the associated attribute is that the target UI component is used for calling data information in the data information component.
Optionally, associating the data information component to a target UI component comprises:
creating a JSON file comprising key values of at least one of the data information components;
and associating the key value of the data information component to a target UI component.
Optionally, the method further comprises:
associating the data information component to a target UI component in response to a UI interface manipulation instruction of a user;
and associating the target UI component of the associated data information component to the UI interface in response to a UI interface manipulation instruction of a user.
Optionally, the method further comprises:
responding to a UI interface manipulation instruction of a user, and editing the UI component; wherein the editing comprises at least one of:
modifying, deleting, adding, adjusting and dragging.
In a second aspect, an embodiment of the present application provides an editing editor, where the editing editor includes a creation module and an association module; wherein the content of the first and second substances,
the creating module is used for creating a data information component meeting the service requirement;
the association module is used for associating the data information component to a target UI component;
wherein each of the components has a unique ID.
Optionally, the editor further includes a reading module, an editing module, a packaging module, and a generating module;
the reading module is used for acquiring and analyzing service requirements;
the editing module is used for compiling data information meeting the business requirements according to the analysis result;
the packaging module is used for packaging the data information to form a data information component;
the generating module is used for generating the component ID identification.
In a third aspect, an embodiment of the present invention provides an electronic device, including a processor and a memory;
the memory is used for storing operation instructions;
and the processor is used for executing the webpage editing method by calling the operation instruction.
In a fourth aspect, a computer-readable storage medium has stored thereon a computer program which, when executed by a processor, implements the method of editing described above.
According to the webpage editing scheme disclosed by the embodiment of the application, a data information component meeting business requirements is created; and associating the data information component to a target UI component, wherein each component has a unique ID identification. The technical scheme provided by the embodiment of the application has the following beneficial effects:
(1) the webpage editing method has the advantages that an editor can quickly generate an operation activity page through visual dragging and pulling activities in webpage editing, time-consuming problems caused by multiple times of development, test and online operation in the prior art are avoided, labor cost is reduced, and online period is shortened.
(2) The method realizes the association of the data interface and the call of the data information on the basis of supporting the editing of the UI component in the system application UI interface, can support the editing of complex and dynamic activity pages with interactivity, expands the functions of an editor and further improves the utilization rate of the editor.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings used in the description of the embodiments of the present application will be briefly described below.
Fig. 1 is a schematic flowchart of a web page editing method according to an embodiment of the present application;
fig. 2 is a schematic structural diagram of a web page editor provided in an embodiment of the present application;
fig. 3 is a schematic structural diagram of an electronic 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 invention.
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. As used herein, the term "and/or" includes all or any element and all combinations of one or more of the associated listed items.
To more clearly describe the technical solutions of the present application, some concepts or definitions that may be involved are described below to assist understanding of the solutions of the present application:
HTML5 has two major features as a web page editor: first, the performance of the Web page is enhanced. Next, a function of a Web application such as a local database is added. When referring broadly to HTML5, we actually refer to a set of combinations of technologies including HTML, CSS, and JavaScript. It is desirable to reduce the browser's need for rich web Application Services (RIAs) that require plug-ins, such as Adobe Flash, Microsoft Silverlight, and Oracle JavaFX, and to provide more standards that effectively enhance web applications.
JSON (JavaScript Object Notation) is a lightweight data exchange format. It stores and represents data in a text format that is completely independent of the programming language, based on a subset of ECMAScript (js specification set by the european computer association). The compact and clear hierarchy makes JSON an ideal data exchange language. The network transmission method is easy to read and write by people, is easy to analyze and generate by machines, and effectively improves the network transmission efficiency.
The following describes the technical solutions of the present application and how to solve the above technical problems with specific embodiments in conjunction with the accompanying drawings. The following several specific embodiments may be combined with each other, and details of the same or similar concepts or processes may not be repeated in some embodiments. Embodiments of the present application will be described below with reference to the accompanying drawings.
To make the purpose, technical solution and advantages of the present application clearer, fig. 1 discloses a flowchart of a web page editing method provided by an embodiment of the present application, and as shown in fig. 1, the web page editing method includes:
s101, creating a data information component meeting business requirements;
in this embodiment of the present application, the creating a data information component that satisfies a business requirement includes:
acquiring and analyzing service requirements;
compiling data information meeting the service requirements according to the analysis result; and packaging the data information to form a data information component and generating a component ID.
In this embodiment, the data information is code information such as data, a data table, or a method flow written according to a service requirement. The ID is identification information that is automatically loaded by the system at the time of creation of each component, and once formed, cannot be modified any more. The ID information can serve as a unique identifier for each component to identify the different components.
In an optional embodiment of the present application, the data information component may be edited in advance and stored in the web page editor before the implementation of the embodiment, or may be edited by the editor in real time according to the received service requirement.
S102, associating the data information component to a target UI component; wherein each of the components has a unique ID. The associated attribute is that the target UI component is used for calling data information in the data information component;
further, the association process includes:
step 1, creating a JSON file comprising a key value of at least one data information component; i.e. the JSON file contains a key-value combination of the individual data information components,
and 2, associating the key value of the data information component to a target UI component. I.e., the value of the data information needed by the H5 engine to select the target UI component in the JSON file, the binding of the data information component to the UI component is completed. The identification of the binding for each component in this process is based on the unique ID of each component.
In an optional embodiment of the present application, the data information components are developed and created based on a web page editor engine, specifically, an H5 web page editor engine, and the IDs of the data information components in a web page active page are used as unique identifiers to be assembled to form a JSON string, which facilitates subsequent analysis by an H5 engine.
In an embodiment of the present application, associating the data information component to the target UI component includes:
associating the data information component to a target UI component in response to a UI interface manipulation instruction of a user; that is, a user drags the data information component to the area range occupied by the target UI component through dragging and pulling interface operation on the UI interface, for example, the user drags a written method flow code text (data information component) to the area occupied by the selected module button (target UI component) in the UI interface or the active page of the web page by using a mouse, thereby realizing the associated binding of the method flow and the module button. Optionally, the area occupied by the component may be formed by performing boundary constraint on each dimension with a certain radius or distance by taking the center of the UI component icon as a center.
In an optional embodiment of the present application, the method further includes associating a target UI component of the associated data information component to the UI interface in response to a UI interface manipulation instruction of the user, and specifically implementing a process of associating the data information component to the target UI component.
In an alternative embodiment of the present application, the method further comprises: responding to a UI interface manipulation instruction of a user, and editing the UI component; wherein the editing comprises at least one of:
modifying, deleting, adding, adjusting and dragging.
The editing process of the UI component in the above embodiment is the same as the editing mode of the current H5 editor for the web page active page, and is not described again.
In all the above embodiments, the method flow in the data information component includes, but is not limited to:
a method for identity authentication when a user logs in; or the like, or, alternatively,
setting a ticker enabling method; or the like, or, alternatively,
a method of sharing configuration information; or the like, or, alternatively,
a method of updating the dynamic list; or the like, or, alternatively,
a method of setting an active page display configuration or state.
Based on the webpage editing method provided by the embodiment, the problem that development activities in the prior art consume manpower and time is solved, and based on the webpage editing method based on the H5 editor provided by the application, an activity operation team can directly configure simple activity pages on line without interference of research and development personnel.
Based on the web page editing method provided by the embodiment shown in fig. 1, fig. 2 shows a web page editor provided by the embodiment of the present application, and as shown in fig. 2, the editor may mainly include a 201 creation module and a 202 association module; wherein the content of the first and second substances,
the 201 creating module is used for creating a data information component meeting the business requirement;
the 202 association module is configured to associate the data information component with a target UI component;
wherein each of the components has a unique ID.
In the embodiment of the present application, the web page editor is an H5 editor.
In an optional embodiment of the present application, the editor further includes a 203 reading module, a 204 editing module, a 205 packaging module, and a 206 generating module;
the reading module is used for acquiring and analyzing service requirements;
the editing module is used for compiling data information meeting the business requirements according to the analysis result;
the packaging module is used for packaging the data information to form a data information component;
the generating module is used for generating the component ID identification.
In an optional embodiment, the 202 association module is further configured to control the target UI component to call data information in the data information component.
In an alternative embodiment, the 201 creation module is further configured to:
creating a JSON file comprising key values of at least one of the data information components;
the 202 associating module is further configured to associate a key value of the data information component to a target UI component.
In an optional embodiment, the 203 reading module is further configured to read a UI interface manipulation instruction of a user;
the 202 association module is further configured to associate the data information component with a target UI component;
the 203 reading module is further configured to read a UI interface manipulation instruction of a user;
the 202 associating module is further configured to associate a target UI component of the associated data information component to a UI interface.
In an optional embodiment, the reading module is further configured to read a UI interface manipulation instruction of a user;
the 204 editing module is used for editing the UI component; wherein the editing comprises at least one of:
modifying, deleting, adding, adjusting and dragging.
It is understood that the above modules of the editing editor in the present embodiment have functions of implementing the corresponding steps of the method in the embodiment shown in fig. 1. The function can be realized by hardware, and can also be realized by executing corresponding software by hardware. The hardware or software includes one or more modules corresponding to the functions described above. The modules can be software and/or hardware, and each module can be implemented independently or by integrating a plurality of modules. For the functional description of each module, reference may be specifically made to the corresponding description of the method in the embodiment shown in fig. 1, and details are not repeated here.
The embodiment of the application provides an electronic device, which comprises a processor and a memory;
a memory for storing operating instructions;
and the processor is used for executing the webpage editing method provided by any embodiment of the application by calling the operation instruction.
As an example, fig. 3 shows a schematic structural diagram of an electronic device to which an embodiment of the present application is applicable, and as shown in fig. 3, the electronic device 2000 includes: a processor 2001 and a memory 2003. Wherein the processor 2001 is coupled to a memory 2003, such as via a bus 2002. Optionally, the electronic device 2000 may also include a transceiver 2004. It should be noted that the transceiver 2004 is not limited to one in practical applications, and the structure of the electronic device 2000 is not limited to the embodiment of the present application.
The processor 2001 is applied to the embodiment of the present application to implement the method shown in the above method embodiment. The transceiver 2004 may include a receiver and a transmitter, and the transceiver 2004 is applied to the embodiments of the present application to implement the functions of the electronic device of the embodiments of the present application to communicate with other devices when executed.
The Processor 2001 may be a CPU (Central Processing Unit), general Processor, DSP (Digital Signal Processor), ASIC (Application Specific Integrated Circuit), FPGA (Field Programmable Gate Array) or other Programmable logic device, transistor logic device, hardware component, or any combination thereof. Which may implement or perform the various illustrative logical blocks, modules, and circuits described in connection with the disclosure. The processor 2001 may also be a combination of computing functions, e.g., comprising one or more microprocessors, DSPs and microprocessors, and the like.
The Memory 2003 may be a ROM (Read Only Memory) or other type of static storage device that can store static information and instructions, a RAM (Random Access Memory) or other type of dynamic storage device that can store information and instructions, an EEPROM (Electrically Erasable Programmable Read Only Memory), a CD-ROM (Compact Disc Read Only Memory) or other optical Disc storage, optical Disc storage (including Compact Disc, laser Disc, optical Disc, digital versatile Disc, blu-ray Disc, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer, but is not limited to these.
Optionally, the memory 2003 is used for storing application program code for performing the disclosed aspects, and is controlled in execution by the processor 2001. The processor 2001 is configured to execute the application program code stored in the memory 2003 to implement the web page editing method provided in any of the embodiments of the present application.
The electronic device provided by the embodiment of the application is applicable to any embodiment of the method, and is not described herein again.
The embodiment of the application provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the computer program implements the web page editing method shown in the above method embodiment.
The computer-readable storage medium provided in the embodiments of the present application is applicable to any of the embodiments of the foregoing method, and is not described herein again.
According to the editing scheme disclosed by the embodiment of the application, a data information component meeting business requirements is created; associating the data information component to a target UI component; wherein each of the components has a unique ID. The editing scheme related to the application realizes the association of the data interface and the calling of the data information, can support the editing of complex and dynamic activity pages with interactivity, expands the functions of the editor and further improves the utilization rate of the editor.
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.
The foregoing is only a partial embodiment of the present invention, and it should be noted that, for those skilled in the art, various modifications and decorations can be made without departing from the principle of the present invention, and these modifications and decorations should also be regarded as the protection scope of the present invention.
Claims (10)
1. A web page editing method applied to a web page editor is characterized by comprising the following steps:
creating a data information component meeting the business requirements;
associating the data information component to a target UI component;
wherein each of the components has a unique ID.
2. The method for web page editing according to claim 1, wherein the creating of the data information component satisfying the business requirement comprises:
acquiring and analyzing service requirements;
compiling data information meeting the service requirements according to the analysis result;
and packaging the data information to form a data information component and generating a component ID.
3. The web page editing method of claim 2, wherein associating the data information component to a target UI component comprises:
and the associated attribute is that the target UI component is used for calling data information in the data information component.
4. The web page editing method of claim 3, wherein associating the data information component to a target UI component comprises:
creating a JSON file comprising key values of at least one of the data information components;
and associating the key value of the data information component to a target UI component.
5. The method for web page editing of claim 4, further comprising:
associating the data information component to a target UI component in response to a UI interface manipulation instruction of a user;
and associating the target UI component of the associated data information component to the UI interface in response to a UI interface manipulation instruction of a user.
6. The method for web page editing of claim 5, further comprising:
responding to a UI interface manipulation instruction of a user, and editing the UI component; wherein the editing comprises at least one of:
modifying, deleting, adding, adjusting and dragging.
7. A web page editor, the editor comprising: a creation module and an association module; wherein the content of the first and second substances,
the creating module is used for creating a data information component meeting the service requirement;
the association module is used for associating the data information component to a target UI component;
wherein each of the components has a unique ID.
8. The web page editor of claim 7 wherein the editor further comprises a reading module, an editing module, a packaging module, and a generating module;
the reading module is used for acquiring and analyzing service requirements;
the editing module is used for compiling data information meeting the business requirements according to the analysis result;
the packaging module is used for packaging the data information to form a data information component;
the generating module is used for generating the component ID identification.
9. An electronic device comprising a processor and a memory;
the memory is used for storing operation instructions;
the processor is used for executing the method of any one of claims 1-6 by calling the operation instruction.
10. A computer-readable storage medium, characterized in that the storage medium has stored thereon a computer program which, when being executed by a processor, carries out the method of any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010822147.4A CN112084446A (en) | 2020-08-16 | 2020-08-16 | Webpage editing method, editor, electronic equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010822147.4A CN112084446A (en) | 2020-08-16 | 2020-08-16 | Webpage editing method, editor, electronic equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112084446A true CN112084446A (en) | 2020-12-15 |
Family
ID=73728606
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010822147.4A Pending CN112084446A (en) | 2020-08-16 | 2020-08-16 | Webpage editing method, editor, electronic equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112084446A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113268238A (en) * | 2021-06-02 | 2021-08-17 | 中信百信银行股份有限公司 | H5 editing method and system for application flow arrangement |
| CN115033228A (en) * | 2022-06-16 | 2022-09-09 | 北京金堤科技有限公司 | Method and device for associating functional components of visual page |
| CN116127926A (en) * | 2023-04-17 | 2023-05-16 | 英创互联(北京)科技有限公司 | Method, device, equipment and medium for generating XSLT file of data body |
-
2020
- 2020-08-16 CN CN202010822147.4A patent/CN112084446A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113268238A (en) * | 2021-06-02 | 2021-08-17 | 中信百信银行股份有限公司 | H5 editing method and system for application flow arrangement |
| CN115033228A (en) * | 2022-06-16 | 2022-09-09 | 北京金堤科技有限公司 | Method and device for associating functional components of visual page |
| CN116127926A (en) * | 2023-04-17 | 2023-05-16 | 英创互联(北京)科技有限公司 | Method, device, equipment and medium for generating XSLT file of data body |
| CN116127926B (en) * | 2023-04-17 | 2023-08-04 | 英创互联(北京)科技有限公司 | Method, device, equipment and medium for generating XSLT file of data body |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10705942B1 (en) | Simulated testing of API | |
| US7870482B2 (en) | Web browser extension for simplified utilization of web services | |
| US9430449B2 (en) | Systems, methods, and media for managing editable previews of webpages | |
| CN112084446A (en) | Webpage editing method, editor, electronic equipment and readable storage medium | |
| WO2021184725A1 (en) | User interface test method and apparatus, storage medium, and computer device | |
| US8983935B2 (en) | Methods for utilizing a javascript emulator in a web content proxy server and devices thereof | |
| CN111045655A (en) | Page rendering method and device, rendering server and storage medium | |
| CN115617327A (en) | Low code page building system, method and computer readable storage medium | |
| TW201732647A (en) | Webpage script loading method and device | |
| CN110020329B (en) | Method, device and system for generating webpage | |
| CN107943465B (en) | Method and device for generating HTML (Hypertext markup language) form | |
| CN113254445B (en) | Real-time data storage method, device, computer equipment and storage medium | |
| US20170010869A1 (en) | Multistage customizing of web-based application in a browser independent of platform and operating system | |
| CN113032708A (en) | Code-free Web development system | |
| CN112711418A (en) | Front-end interface layout method and device for multiple components, electronic equipment and storage medium | |
| CN103530338A (en) | Frame for carrying out page rendering on calculation equipment and page generation method | |
| CN109002282B (en) | Method and device for realizing animation effect in web page development | |
| CN101937335A (en) | Method for generating Widget icon, method for generating Widget summary document and Widget engine | |
| CN112087370A (en) | Method, system, electronic device and computer-readable storage medium for issuing GitHub Issues | |
| US8862984B1 (en) | Data contracts for network page generation code | |
| CN108153745B (en) | Application data calling method and application development system | |
| CN103473106A (en) | Method and system for generating page | |
| US9230022B1 (en) | Customizable result sets for application program interfaces | |
| Inayatullah et al. | Model-based scaffolding code generation for cross-platform applications | |
| CN103970513A (en) | Source data information access method and platform |
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 |