CN108681454A - A kind of webpage visualization component development method - Google Patents
A kind of webpage visualization component development method Download PDFInfo
- Publication number
- CN108681454A CN108681454A CN201810503281.0A CN201810503281A CN108681454A CN 108681454 A CN108681454 A CN 108681454A CN 201810503281 A CN201810503281 A CN 201810503281A CN 108681454 A CN108681454 A CN 108681454A
- Authority
- CN
- China
- Prior art keywords
- component
- webpage
- layout
- visualization
- visualizes
- 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
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/38—Creation or generation of source code for implementing user interfaces
Abstract
The present invention provides a kind of webpage visualization component development method, includes the following steps：S1, web page display extraction assembly；S2 visualizes Component encapsulating, forms webpage component resource library；S3, component visualization are nested；S4, dialog box are shown attribute and are configured with data source property；S5 generates web page code；S6 carries out web page display.The present invention reduces development difficulty, increases flexibility and the autgmentability of webpage development by visualizing component development mode；Improve developer's efficiency；Component resource library is built simultaneously, is realized the durability of webpage component resource, is reduced development cost.
Description
Technical field
The present invention relates to computer realms more particularly to a kind of webpage to visualize component development method.
Background technology
Currently, being based on front end webpage development process, it is typically based on front end frame, then by being carried out on this frame
Then hand-coding carries out page development, and seldom formulate a set of front end development specifications, causes to write out between different people
Code is difficult to unification, does not utilize web page code later maintenance.The web page code developed in one project, in another project development
In be difficult to reuse, even if utilize, the mode also changed again merely by Code copying, be susceptible to code omission, change
Difficult situation is moved, demand shift causes showing interface to change, can not quickly respond, needs to turn into line code manually.
It is low to will ultimately result in development efficiency, is unfavorable for later maintenance and autgmentability.
Invention content
It is an object of the invention to solve the problems of the above-mentioned prior art, a kind of webpage visualization component development is provided
Method.
A kind of webpage visualization component development method, includes the following steps：
S1, web page display extraction assembly；
S2 visualizes Component encapsulating, forms webpage component resource library；
S3, component visualization are nested；
S4, dialog box are shown attribute and are configured with data source property；
S5 generates web page code；
S6 carries out web page display.
Further, webpage as described above visualizes component development method, the component described in S1 include layout component,
Component exhibiting, displaying and layout combine component；
It is the interface really shown on webpage, such as calendar, table that the component exhibiting, which refers to,；
Layout component is to determine that component position on webpage is put, and is generally no longer shown on webpage, including grid
Layout, table-layout；
Displaying with to be laid out combine component be both to be shown on webpage, can also the position placed on webpage of component,
Contain grid layout including panel.
Further, webpage as described above visualizes component development method, and Component encapsulating step packet is visualized described in S2
It includes：The S1 component codes extracted are packaged into XML tag；By the corresponding XML tag of component code, relevant JS and CSS and figure
The packing of piece resource is packaged into visualization component, and visualization component is put into webpage component resource library.
Further, webpage as described above visualizes component development method, and S3 components visualization nesting includes：To layout
Component carry out webpage erect-position, then will displaying component be put into layout component in, displaying component again can nesting layout component, such layer
Layer is nested, forms final visualization webpage.
Further, webpage as described above visualizes component development method, and S4 includes：It is related to carry out component web page display
Attribute configuration；Carry out component event handling attribute configuration；Carry out component data attribute configuration.
Further, webpage as described above visualizes component development method, and webpage component resource library includes：Including
Basic component, combined member, business component；
Basic webpage component is fine granularity webpage component, and functional characteristic is relatively simple, including calendar, drop-down menu；
Combination webpage component is basic webpage Component composition formation, facilitates webpage rapid shaping, less actual development group
Synthesis this, including the list of panel, with Tab pages of table；
Business webpage component is the component that there is certain business meaning to also have, and poor universality is often customized according to a certain scene
's；It include the login component containing user name, user password.
The beneficial effects of the present invention are：By visualizing component development mode, development difficulty is reduced, webpage is increased
The flexibility of exploitation and autgmentability；Improve developer's efficiency；Component resource library is built simultaneously, realizes webpage component money
The durability in source, reduces development cost.
Description of the drawings
Fig. 1 is the step flow chart of the present invention；
Fig. 2 is the middle-level figure of the present invention；
Fig. 3 is that flow chart of steps is used in the present invention.
Specific implementation mode
To make the object, technical solutions and advantages of the present invention clearer, the technical solution below in the present invention carries out clear
Chu is fully described by, it is clear that described embodiments are some of the embodiments of the present invention, instead of all the embodiments.It is based on
Embodiment in the present invention, those of ordinary skill in the art are obtained every other without creative efforts
Embodiment shall fall within the protection scope of the present invention.
As shown in Figure 1, the present invention provides a kind of webpage visualization component development method, comprise the steps of：
S1, web page display extraction assembly；
S2 visualizes Component encapsulating, forms webpage component resource library；
S3, component visualization are nested；
S4, dialog box are shown attribute and are configured with data source property；
S5 generates web page code；
S6 carries out web page display.
Preferably, the component described in S1 includes layout component, component exhibiting, displaying and layout combine component.
Preferably, it includes that the component code that S1 is extracted is packaged into XML marks that Component encapsulating committed step is visualized described in S2
Label；The packing of the corresponding XML tag of component code, relevant JS and the resources such as CSS and picture is packaged into visualization component, it can
It is put into webpage component resource library depending on changing component.Webpage component resource library described in S2 includes mainly basic webpage component, group
Close webpage component, several classes of business webpage component.Basic webpage component is fine granularity webpage component, and functional characteristic is relatively simple, such as
Calendar, drop-down menu；Combination webpage component is basic webpage Component composition formation, facilitates webpage rapid shaping, less reality
Exploitation is combined into this, the list such as panel, the table with Tab pages；Business webpage component is that there is certain business meaning to also have
Component, poor universality, often according to a certain scene customization, such as also user name, user password login component.
Preferably, the nested committed step of component visualization is that layout component carries out webpage occupy-place in S3, then will show structure
Part is put into layout combined member, and displaying component nested can be laid out combined member again, nested layer by layer in this way, form final visualization
Webpage.
Preferably, the dialog box in S4 includes following configuration：
1) configuration of component web page display association attributes, such as height, width are carried out；
2) component event handling attribute configuration is carried out, event, value change event are such as clicked；
3) component data attribute configuration is carried out, as table needs display data background request address；
Preferably, main influence web page display size, color and position etc. are configured described in 1).
Preferably, the main dynamic interaction ability for influencing webpage is configured described in 2).
Preferably, main influence webpage dynamic data source is configured described in 3).
Embodiment：
A kind of webpage visualization component development method, comprises the steps of：
S1, web page display extraction assembly；Component includes：Component exhibiting, layout component, displaying and layout combine component.Exhibition
Show that component is mainly the interface really shown on webpage, such as calendar, table；Layout component mainly determines component in webpage
Upper position is put, and is generally no longer shown on webpage, such as grid layout, table-layout.Show is with layout combine component
Both be shown on webpage, can also the position placed on webpage of component, as panel contains grid layout.
S2, visualization encapsulation, forms webpage component resource library；Visualization encapsulation is mainly by component exhibiting, layout component
It is packaged into visualization component to the corresponding code of layout combine component, related JS and CSS and picture resource uniform packing, realizes component
Dragging automatically generates related web page component code and resource associations.Webpage component resource library includes mainly basic webpage component, group
Close webpage component, several classes of business webpage component.Basic webpage component is fine granularity webpage component, and functional characteristic is relatively simple, such as
Calendar, drop-down menu；Combination webpage component is basic webpage Component composition formation, facilitates webpage rapid shaping, less reality
Exploitation is combined into this, the list such as panel, the table with Tab pages；Business webpage component is that there is certain business meaning to also have
Component, poor universality, often according to a certain scene customization, such as also user name, user password login component.
S3, component visualization are nested；Committed step is that layout component carries out webpage erect-position, and displaying component is then put into cloth
In office's component, displaying component again can nested layout component, it is nested layer by layer in this way, formed and finally visualize webpage.
S4, dialog box is shown, event, data attribute configure；Dialog box includes following configuration：Carry out component webpage exhibition
Show that association attributes configure, such as height, width；Component event handling attribute configuration is carried out, event, value change event are such as clicked；Into
Row component data attribute configuration, as table needs display data background request address；
S5 generates web page code.
S6 carries out web page display.
Entire hierarchical structure and effect are as follows, specific as shown in Fig. 2：
Infrastructure component layer：It is the web page display that some have a single function including basic layout component and basic component exhibiting.It is main
Material is provided for Custom component and combine component layer.
Combine component layer：Including being laid out combine component, shows combine component, be infrastructure component combination, beginning to use can be with
Reduce deployment cost, development efficiency higher.Predominantly webpage component resource layer provides material.
Webpage component resource library：Including basic component, combined member, business component etc., be the component resource that exploitation uses
Collection, component type are abundant.
Webpage visual editor layer：Including component rendering, structure attribute configuration, data source binding, event handling, logic
Operation compiles, deployment, and developer mainly can be achieved component in this layer and pull, and carries out component and visualize rendering, attribute
Configuration, dynamic event processing, the web page code for ultimately generating needs.
Client layer：Mainly developer's layer, is used for webpage visual editor layer operation.
Exploitation occupation mode detailed process comprises the steps of, specific as shown in Fig. 3：
1) new webpage establishes a new web page file；
2) type of webpage chooses mobile phone web pages, PC webpages etc., is regarded according to the type Auto-matching visual editor of selection
Figure；
3) component is chosen, and is required according to webpage, suitable component is selected in component resource library；
If 4) component for not having exploitation to need in component base, need to carry out Self-defining Structure；
5) Self-defining Structure is chosen according to function and has code components or self-defined JS realizations；
6) Component encapsulating is visualized, by the Resource Encapsulations such as web page code, correlation JS, CSS at visualization component.
7) it is put into webpage component base, the component of encapsulation is put into according to component base classification in corresponding catalogue.
8) component pulls, and the component of needs, dragging is chosen to be put into editing machine, and component is carried out in editing machine and visualizes exhibition
Show.
9) attribute configuration carries out component and shows attribute configuration, such as height, width, color.
10) data source configures, and component data source backstage address configuration is carried out, such as form requests URL.
11) correlation JS script paths are bound in event handling, realize that page dynamic is handled in script.
12) it compiles, dispose, realize the generation of final web page code.
13) browsing accesses, and carries out web interface displaying.
Finally it should be noted that：The above embodiments are merely illustrative of the technical solutions of the present invention, rather than its limitations；Although
Present invention has been described in detail with reference to the aforementioned embodiments, it will be understood by those of ordinary skill in the art that：It still may be used
With technical scheme described in the above embodiments is modified or equivalent replacement of some of the technical features；
And these modifications or replacements, various embodiments of the present invention technical solution that it does not separate the essence of the corresponding technical solution spirit and
Range.
Claims (6)
1. a kind of webpage visualizes component development method, which is characterized in that include the following steps：
S1, web page display extraction assembly；
S2 visualizes Component encapsulating, forms webpage component resource library；
S3, component visualization are nested；
S4, dialog box are shown attribute and are configured with data source property；
S5 generates web page code；
S6 carries out web page display.
2. webpage according to claim 1 visualizes component development method, which is characterized in that the component described in S1 includes
Layout component, component exhibiting, displaying and layout combine component；
It is the interface really shown on webpage, such as calendar, table that the component exhibiting, which refers to,；
Layout component is to determine that component position on webpage is put, and is generally no longer shown on webpage, including grid layout,
Table-layout；
Displaying with to be laid out combine component be both to be shown on webpage, can also the position placed on webpage of component, including
Panel contains grid layout.
3. webpage according to claim 1 visualizes component development method, which is characterized in that visualize component envelope described in S2
Filling step includes：The S1 component codes extracted are packaged into XML tag；By the corresponding XML tag of component code, relevant JS with
CSS and picture resource packing are packaged into visualization component, and visualization component is put into webpage component resource library.
4. webpage according to claim 1 visualizes component development method, which is characterized in that the nested packet of S3 components visualization
It includes：Webpage erect-position is carried out to layout component, then displaying component is put into layout component, displaying component again can nested set of layouts
Part, it is nested layer by layer in this way, form final visualization webpage.
5. webpage according to claim 1 visualizes component development method, which is characterized in that S4 includes：Carry out component net
Page displaying association attributes configuration；Carry out component event handling attribute configuration；Carry out component data attribute configuration.
6. webpage according to claim 3 visualizes component development method, which is characterized in that webpage component resource library
Including：Including basic component, combined member, business component；
Basic webpage component is fine granularity webpage component, and functional characteristic is relatively simple, including calendar, drop-down menu；
Combination webpage component is basic webpage Component composition formation, and webpage rapid shaping, less actual development is facilitated to be combined into
This, including the list of panel, with Tab pages of table；
Business webpage component is the component that there is certain business meaning to also have, poor universality, often according to the customization of a certain scene；Packet
Include the login component containing user name, user password.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810503281.0A CN108681454A (en) | 2018-05-23 | 2018-05-23 | A kind of webpage visualization component development method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810503281.0A CN108681454A (en) | 2018-05-23 | 2018-05-23 | A kind of webpage visualization component development method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108681454A true CN108681454A (en) | 2018-10-19 |
Family
ID=63807842
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810503281.0A Pending CN108681454A (en) | 2018-05-23 | 2018-05-23 | A kind of webpage visualization component development method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108681454A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109739497A (en) * | 2018-12-06 | 2019-05-10 | 深圳市中农网有限公司 | Page development method, apparatus, computer equipment and storage medium |
| CN109739492A (en) * | 2019-01-09 | 2019-05-10 | 武汉瓯越网视有限公司 | A kind of method, terminal, equipment and medium generating scripted code |
| CN109918607A (en) * | 2019-03-20 | 2019-06-21 | 杭州网易再顾科技有限公司 | Page building method and device, medium and calculating equipment |
| CN110796744A (en) * | 2019-11-07 | 2020-02-14 | 成都淞幸科技有限责任公司 | Three-dimensional online assembly method |
| CN111399812A (en) * | 2020-04-07 | 2020-07-10 | 杭州指令集智能科技有限公司 | Component construction method and device, development framework and equipment |
| CN111949266A (en) * | 2020-07-23 | 2020-11-17 | 上海硬通网络科技有限公司 | Webpage generation method and device and electronic equipment |
| CN113626030A (en) * | 2021-06-28 | 2021-11-09 | 大唐互联科技(武汉)有限公司 | Method and system for quickly building data visualization large screen |
| CN116110500A (en) * | 2023-04-07 | 2023-05-12 | 深圳人体密码基因科技有限公司 | Multi-disease gene difference visualization method and device based on high-throughput sequencing data |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5999174A (en) * | 1997-07-02 | 1999-12-07 | At&T Corporation | Reusable sparing cell software component for a graphical user interface |
| CN101158896A (en) * | 2007-08-31 | 2008-04-09 | 南京联创科技股份有限公司 | Service assemblage based on MVC and method for page moulding development WEB platform |
| CN102495735A (en) * | 2011-12-14 | 2012-06-13 | 方正国际软件有限公司 | Web end UI (user interface) component application frame system |
| CN102681841A (en) * | 2012-02-01 | 2012-09-19 | 中兴通讯（香港）有限公司 | Method and system for developing mobile phone application |
| CN105740377A (en) * | 2016-01-27 | 2016-07-06 | 北京铭万智达科技有限公司 | Web page template production visualization method and web page visualization production apparatus |
| CN106909361A (en) * | 2015-12-23 | 2017-06-30 | 任子行网络技术股份有限公司 | Web development approaches and device based on masterplate engine |
| CN107273120A (en) * | 2017-06-01 | 2017-10-20 | 山东若谷信息技术有限公司 | A kind of method and system of fast construction mobile phone mobile applications |
-
2018
- 2018-05-23 CN CN201810503281.0A patent/CN108681454A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5999174A (en) * | 1997-07-02 | 1999-12-07 | At&T Corporation | Reusable sparing cell software component for a graphical user interface |
| CN101158896A (en) * | 2007-08-31 | 2008-04-09 | 南京联创科技股份有限公司 | Service assemblage based on MVC and method for page moulding development WEB platform |
| CN102495735A (en) * | 2011-12-14 | 2012-06-13 | 方正国际软件有限公司 | Web end UI (user interface) component application frame system |
| CN102681841A (en) * | 2012-02-01 | 2012-09-19 | 中兴通讯（香港）有限公司 | Method and system for developing mobile phone application |
| CN106909361A (en) * | 2015-12-23 | 2017-06-30 | 任子行网络技术股份有限公司 | Web development approaches and device based on masterplate engine |
| CN105740377A (en) * | 2016-01-27 | 2016-07-06 | 北京铭万智达科技有限公司 | Web page template production visualization method and web page visualization production apparatus |
| CN107273120A (en) * | 2017-06-01 | 2017-10-20 | 山东若谷信息技术有限公司 | A kind of method and system of fast construction mobile phone mobile applications |
Non-Patent Citations (1)
| Title |
|---|
| 刘元勇: "基于XML构件模型的组装技术研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109739497A (en) * | 2018-12-06 | 2019-05-10 | 深圳市中农网有限公司 | Page development method, apparatus, computer equipment and storage medium |
| CN109739492A (en) * | 2019-01-09 | 2019-05-10 | 武汉瓯越网视有限公司 | A kind of method, terminal, equipment and medium generating scripted code |
| CN109739492B (en) * | 2019-01-09 | 2022-06-17 | 武汉瓯越网视有限公司 | Method, terminal, equipment and medium for generating script code |
| CN109918607A (en) * | 2019-03-20 | 2019-06-21 | 杭州网易再顾科技有限公司 | Page building method and device, medium and calculating equipment |
| CN110796744A (en) * | 2019-11-07 | 2020-02-14 | 成都淞幸科技有限责任公司 | Three-dimensional online assembly method |
| CN111399812A (en) * | 2020-04-07 | 2020-07-10 | 杭州指令集智能科技有限公司 | Component construction method and device, development framework and equipment |
| CN111399812B (en) * | 2020-04-07 | 2022-04-19 | 杭州指令集智能科技有限公司 | Component construction method and device, development framework and equipment |
| CN111949266A (en) * | 2020-07-23 | 2020-11-17 | 上海硬通网络科技有限公司 | Webpage generation method and device and electronic equipment |
| CN113626030A (en) * | 2021-06-28 | 2021-11-09 | 大唐互联科技(武汉)有限公司 | Method and system for quickly building data visualization large screen |
| CN116110500A (en) * | 2023-04-07 | 2023-05-12 | 深圳人体密码基因科技有限公司 | Multi-disease gene difference visualization method and device based on high-throughput sequencing data |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108681454A (en) | A kind of webpage visualization component development method | |
| US11042691B2 (en) | Editing electronic documents | |
| CN110489116B (en) | Page rendering method and device and computer storage medium | |
| KR101456506B1 (en) | An authoring tool for web applications and the authoring method thereof | |
| US20120066601A1 (en) | Content configuration for device platforms | |
| US20120066304A1 (en) | Content configuration for device platforms | |
| US20120089933A1 (en) | Content configuration for device platforms | |
| CN101308489B (en) | Electronic table statement type size variable list | |
| CN103677789A (en) | Table data displaying method and system based on GRID assembly | |
| KR101760777B1 (en) | System of Building Responsive Website And Method there-of | |
| CN104216691A (en) | Application creating method and device | |
| KR20090056506A (en) | Rich content creation system and method thereof, and media that can record computer program for method thereof | |
| CN111752899B (en) | Environment report generation method and device, electronic equipment and storage medium | |
| CN114035773A (en) | Configuration-based low-code form development method, system and device | |
| CN102637406B (en) | LED (light emitting diode) display design system and method | |
| CN103631865A (en) | Webpage generating method and device | |
| CN108259620A (en) | A kind of advertisement editor and method for previewing, intelligent terminal, system and storage device | |
| CN113032708A (en) | Code-free Web development system | |
| US11868598B2 (en) | Generating and modifying content using data structures | |
| CN105786522A (en) | WEB (World Wide Web) front-end universal component unit based on Node. js platform | |
| US20230196652A1 (en) | A three-dimensional image player capable of real-time interaction | |
| KR101519381B1 (en) | Apparatus and method for making web application using html5 | |
| CN101710971A (en) | Method and device for generating page | |
| CN110795067A (en) | Demand prototype reusable method | |
| US8037015B2 (en) | Flexible interface using scalable vector graphics with metalevel palette |
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: 20181019 |
|
| RJ01 | Rejection of invention patent application after publication |