CN112241257A - Active page development system and method based on component composition - Google Patents
Active page development system and method based on component composition Download PDFInfo
- Publication number
- CN112241257A CN112241257A CN202011032141.3A CN202011032141A CN112241257A CN 112241257 A CN112241257 A CN 112241257A CN 202011032141 A CN202011032141 A CN 202011032141A CN 112241257 A CN112241257 A CN 112241257A
- Authority
- CN
- China
- Prior art keywords
- component
- module
- editor
- page
- editing
- 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 19
- 238000009877 rendering Methods 0.000 claims abstract description 8
- 230000000694 effects Effects 0.000 claims description 15
- 230000000712 assembly Effects 0.000 claims description 6
- 238000000429 assembly Methods 0.000 claims description 6
- 230000003068 static effect Effects 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 description 3
- 238000010276 construction Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
Images
Classifications
-
- 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/37—Compiler construction; Parser generation
-
- 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/34—Graphical or visual programming
-
- 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)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses an active page development system and method based on component composition, wherein the active page development method based on component composition comprises a data source and an editor, the editor acquires data from the data source, the editor comprises a basic component module, a combined component module, an attribute editing module, an event editing module, a state management module and a renderer module, the basic component module is used for generating page basic elements, the combined component module is used for combining and using all components, the attribute editing module is used for editing component attributes, the event editing module is used for editing event occurrence of a total component, the state management module is used for modifying component states, and the renderer module is used for rendering text fields into components. By simplifying the development process, the deployment process is removed, the occupation of developers is reduced, and the aim of reducing the enterprise cost is fulfilled.
Description
Technical Field
The invention relates to the technical field of networks, in particular to a system and a method for developing an active page based on component composition.
Background
The existing page development mode uses a programming technology of fixed codes, and deploys a page to a server through steps of writing, compiling, deploying and the like. The user may open the corresponding page by accessing a particular network address.
The movable pages have the characteristics of large quantity, short period and uniform form, so that more manpower of developers is required to be occupied, and the cost is increased.
Disclosure of Invention
The invention aims to provide an active page development system based on component composition, which can simplify the development process.
The invention provides a system for developing an active page based on component composition, which comprises: the editor obtains data from the data source, and comprises a basic component module, a combined component module, an attribute editing module, an event editing module, a state management module and a renderer module, wherein the basic component module is used for generating page basic elements, the combined component module is used for combining and using all components, the attribute editing module is used for editing component attributes, the event editing module is used for editing event occurrence of the overall component, the state management module is used for modifying component states, and the renderer module is used for rendering text fields into the components.
Further, the editors comprise a common editor or/and an H5(H5 advertisement) editor, wherein the common editor can acquire data from a data source and upload and store the data to the data source; the H5 editor can only get data and cannot upload saved data.
Further, the basic elements of the page comprise characters, pictures, long pictures, picture carousels, rectangular borders, embedded iframes, buttons, rich text, popup windows and list containers.
Further, the combination component module comprises a form component and a function component; wherein the form component comprises: a text box, multiple lines of text; the functional components include: music, music player, data acquisition, countdown.
Further, the component attributes include: current page style, page size, H5 full screen open condition, and whether picture length presses saved option.
Further, the event editing module comprises a component hierarchy and a middle editing panel; and the user can drag the component from the left component library to the editing panel in the middle part to set the component event.
Furthermore, the renderer module comprises a static component and a dynamic component, and is used for rendering the text forming component, so that the components form a page to adjust the light and shadow effect, and the page is more gorgeous or real.
Further, the active page development system is implemented using a visualized page building interface.
The invention also provides a method for developing the activity page by using the activity page development system, which comprises the following steps: and a plurality of assemblies are formed by utilizing a basic assembly module, a combined assembly module, an attribute editing module, an event editing module and a state management module, the assemblies are all rendered to the positions corresponding to the pages by utilizing a renderer module to be combined into a complete page, and the editor acquires data from the data source.
Further, the editor comprises a common editor, and the common editor acquires data from the data source and uploads the stored data to the data source.
The active page development system and method based on component composition can solve the problem that too much developer occupation is caused by repeated active pages. By simplifying the development process, the deployment process is removed, the occupation of developers is reduced, and the aim of reducing the enterprise cost is fulfilled.
Drawings
FIG. 1 is a block diagram of an active page development system based on component composition according to an embodiment of the present invention;
fig. 2 is an interface diagram of an activity page development system based on component composition according to an embodiment of the present invention.
Detailed Description
The following detailed description of embodiments of the present invention is provided in connection with the accompanying drawings and examples. The following examples are intended to illustrate the invention but are not intended to limit the scope of the invention.
As shown in fig. 1, in this embodiment, an active page development system based on component composition includes a data source and an editor, where the editor obtains data from the data source, and the editor includes a basic component module, a combined component module, an attribute editing module, an event editing module, a state management module, and a renderer module, where the basic component module is used to generate basic elements of a page, the combined component module is used to combine and use components, the attribute editing module is used to edit component attributes, the event editing module is used to edit event occurrences of an overall component, the state management module is used to modify component states, and the renderer module is used to render text fields into components.
In an embodiment, the active page development system includes: the editor comprises a common editor and an H5 editor (only one of the editors can be arranged), the common editor can acquire data from a data source and upload and store the data to the data source; the H5 editor can only get data and cannot upload saved data.
In an embodiment, the active page development system includes: the page basic elements comprise characters, pictures, long pictures, picture carousel, rectangular borders, embedded iframes, buttons, rich texts, popup windows and list containers.
In an embodiment, the active page development system includes: the combined component module comprises a form component and a functional component; wherein the form component comprises: a text box, multiple lines of text; the functional components include: music, music player, data acquisition, countdown.
In an embodiment, the active page development system includes: the component attributes include: current page style, page size, H5 full screen open condition, and whether picture length presses saved option.
In an embodiment, the active page development system includes: the event editing module comprises a component hierarchy and a middle editing panel; and the user can drag the component from the left component library to the editing panel in the middle part to set the component event.
In an embodiment, the active page development system includes: the state management module is characterized in that the state of the component can be converted.
In an embodiment, the active page development system includes: the renderer module comprises a static component and a dynamic component and is used for rendering a text forming component, so that the components form a page to adjust the light and shadow effect, and the page is more gorgeous or real.
The activity page development method using the activity page development system comprises the following steps: and a plurality of assemblies are formed by utilizing a basic assembly module, a combined assembly module, an attribute editing module, an event editing module and a state management module, the assemblies are all rendered to the positions corresponding to the pages by utilizing a renderer module to be combined into a complete page, and the editor acquires data from the data source.
In an embodiment, the editor includes a general editor, and the general editor acquires data from a data source and uploads saved data to the data source.
Specifically, the active page development system may include the steps of:
1. and (3) generating the whole structure of the page by using a visual page building interface and a code-free mode.
2. JSON (JavaScript Object Notation) is used as a structure of a text description page in a lightweight data exchange format, so that the aim of coupling data and the page is fulfilled.
3. And rendering the corresponding field into a corresponding component through the analysis of the JSON format text.
4. And rendering all the components to the corresponding positions of the page, and combining the components into a complete page.
As shown in fig. 2, the state of saving and saving the current edit in the upper control bar can be clicked, the data can be saved to the data source, the effect of previewing the current page in the upper control bar is clicked, the release in the upper control bar is clicked, the configuration saved currently is released to the corresponding website, and the user can see the edited page by accessing the corresponding website.
The editor allows the user to drag the component from the left side component library to the middle editing panel. In addition, a specific component is selected, and the page/component attribute configuration panel on the right side configures corresponding attributes.
The component library comprises a basic component module and a combined component module, the component library comprises a basic component, a form component and a functional component, and the basic component comprises: characters, pictures, long pictures, picture carousel, rectangular frame, embedded iframe, button, rich text, popup, list container, etc., the form subassembly includes: a text box and a plurality of lines of text, the functional components including: music, music player, data acquisition, time.
In summary, the active page development system composed of components provided by the above embodiments uses a visual page construction interface, so that page construction can be separated from developers, and anyone can construct a page through the visual interface. The page data is generalized by using a method for saving the JSON format text. By adopting dynamic loading of page layout data, the functions of removing the deployment process and reducing the deployment time can be achieved. The problem of too much developer occupation caused by repeated activity pages is solved. By simplifying the development process, the deployment process is removed, the occupation of developers is reduced, the purpose of reducing the enterprise cost is achieved, and the user experience is improved.
As used herein, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, including not only those elements listed, but also other elements not expressly listed.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.
Claims (10)
1. The active page development system based on component composition is characterized by comprising a data source and an editor, wherein the editor acquires data from the data source, the editor comprises a basic component module, a combined component module, an attribute editing module, an event editing module, a state management module and a renderer module, the basic component module is used for generating page basic elements, the combined component module is used for combining and using all components, the attribute editing module is used for editing component attributes, the event editing module is used for editing event occurrence of overall components, the state management module is used for modifying component states, and the renderer module is used for rendering text fields into components.
2. The activity page development system of claim 1, comprising: the editor comprises a common editor or/and an H5 editor, and the common editor can acquire data from a data source and upload and store the data to the data source; the H5 editor can only get data and cannot upload saved data.
3. The active page development system of claim 1, wherein the page base elements include text, pictures, long figures, picture carousels, rectangular borders, inline iframes, buttons, rich text, pop-ups, list containers.
4. The activity page development system of claim 1, wherein the composition component module comprises a form component and a function component; wherein the form component comprises: a text box, multiple lines of text; the functional components include: music, music player, data acquisition, countdown.
5. The activity page development system of claim 1, wherein the component properties comprise: current page style, page size, H5 full screen open condition, and whether picture length presses saved option.
6. The activity page development system of claim 1, wherein the event editing module comprises a component hierarchy and a middle editing panel; and the user can drag the component from the left component library to the editing panel in the middle part to set the component event.
7. The active page development system of claim 1, wherein the renderer module comprises a static component and a dynamic component for rendering the text composition component, such that the components compose a page to adjust the light and shadow effect, such that the page is more gorgeous or realistic.
8. The active page development system according to any one of claims 1 to 7, wherein the active page development system is implemented using a visualized page building interface.
9. An active page development method using the active page development system according to any one of claims 1 to 8, comprising: and a plurality of assemblies are formed by utilizing a basic assembly module, a combined assembly module, an attribute editing module, an event editing module and a state management module, the assemblies are all rendered to the positions corresponding to the pages by utilizing a renderer module to be combined into a complete page, and the editor acquires data from the data source.
10. The method for developing an activity page of claim 9 wherein the editor comprises a generic editor, the generic editor obtaining data from a data source and uploading saved data to the data source.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011032141.3A CN112241257A (en) | 2020-09-27 | 2020-09-27 | Active page development system and method based on component composition |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011032141.3A CN112241257A (en) | 2020-09-27 | 2020-09-27 | Active page development system and method based on component composition |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112241257A true CN112241257A (en) | 2021-01-19 |
Family
ID=74171713
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011032141.3A Pending CN112241257A (en) | 2020-09-27 | 2020-09-27 | Active page development system and method based on component composition |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112241257A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110400196A (en) * | 2019-06-20 | 2019-11-01 | 北京奇艺世纪科技有限公司 | A kind of page processing method, device and computer readable storage medium |
| CN110442336A (en) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | A kind of web development methods and device, storage medium and electronic equipment |
| CN111176643A (en) * | 2019-12-24 | 2020-05-19 | 厦门市美亚柏科信息股份有限公司 | Method for generating subsystem home page and computer readable storage medium |
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
| CN111475161A (en) * | 2019-01-24 | 2020-07-31 | 华为技术有限公司 | Method, device and equipment for accessing component |
-
2020
- 2020-09-27 CN CN202011032141.3A patent/CN112241257A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111475161A (en) * | 2019-01-24 | 2020-07-31 | 华为技术有限公司 | Method, device and equipment for accessing component |
| CN110400196A (en) * | 2019-06-20 | 2019-11-01 | 北京奇艺世纪科技有限公司 | A kind of page processing method, device and computer readable storage medium |
| CN110442336A (en) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | A kind of web development methods and device, storage medium and electronic equipment |
| CN111176643A (en) * | 2019-12-24 | 2020-05-19 | 厦门市美亚柏科信息股份有限公司 | Method for generating subsystem home page and computer readable storage medium |
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111552473B (en) | Application processing method, device and equipment | |
| CN107704243B (en) | Front-end interface construction method and device, computer equipment and storage medium | |
| CN109918607B (en) | Page construction method and device, medium and computing equipment | |
| CN109062567B (en) | B/S structure-based information management system rapid development platform | |
| CN106873991B (en) | Page generation method and device | |
| US20170169481A1 (en) | Internet-based display material system and internet-based display material producing method | |
| CN102135873B (en) | A kind of method and apparatus creating user interface | |
| CN111221530B (en) | Mobile terminal Web application interface construction method, web application interface and operation method thereof | |
| CN104798067B (en) | Dictionary system and dictionary call method | |
| CN110096276A (en) | Source of houses displayed page configuration method, equipment, storage medium and device | |
| CN112052416A (en) | Method and device for displaying image elements | |
| CN109960773A (en) | Page animation method, apparatus, equipment and storage medium based on HTML5 | |
| Fay et al. | Engineering Production-Grade Shiny Apps | |
| KR102143196B1 (en) | Mobile terminal, advertisement produced method using the same | |
| CN112241257A (en) | Active page development system and method based on component composition | |
| Toth | Technology for trainers | |
| CN113705177A (en) | Manuscript input method and device based on integrated manuscript writing environment and computer equipment | |
| CN113190509A (en) | Animation processing method and device, electronic equipment and computer readable storage medium | |
| Yicheng | Development of a blog system using CodeIgniter framework | |
| Damasceno et al. | Authoring hypervideos learning objects | |
| CHEN | Developing a corporate website for anlu aima electric bicycle shop | |
| Le | A react responsive web application managing offers and configurations of projects | |
| CN114817797A (en) | Floor page configuration method and device, storage medium and computer equipment | |
| WO2008139469A1 (en) | Method and device for accessing data in signage systems | |
| Brand et al. | The TYPO3 Guidebook |
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 |
Application publication date: 20210119 |
|
| RJ01 | Rejection of invention patent application after publication |