CN112051994A - Visual component information processing and page visual design method and device - Google Patents
Visual component information processing and page visual design method and device Download PDFInfo
- Publication number
- CN112051994A CN112051994A CN201910490700.6A CN201910490700A CN112051994A CN 112051994 A CN112051994 A CN 112051994A CN 201910490700 A CN201910490700 A CN 201910490700A CN 112051994 A CN112051994 A CN 112051994A
- Authority
- CN
- China
- Prior art keywords
- file
- component
- cdn
- prototype
- 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.)
- Granted
Links
- 238000013461 design Methods 0.000 title claims abstract description 123
- 230000000007 visual effect Effects 0.000 title claims abstract description 116
- 238000000034 method Methods 0.000 title claims abstract description 54
- 230000010365 information processing Effects 0.000 title claims abstract description 18
- 238000011161 development Methods 0.000 claims abstract description 16
- 238000012800 visualization Methods 0.000 claims description 55
- 238000010276 construction Methods 0.000 claims description 9
- 238000003672 processing method Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 6
- 238000009877 rendering Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000002035 prolonged effect Effects 0.000 description 3
- 230000001360 synchronised effect Effects 0.000 description 3
- 238000012938 design process Methods 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000004904 shortening 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/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)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The embodiment of the application discloses a visual component information processing and page visual design method and device, wherein the method comprises the following steps: the server receives the component identification submitted by the component development client and the associated basic file; respectively and independently constructing basic files corresponding to different components, and issuing the basic files to a Content Delivery Network (CDN) for storage; and storing the storage address information of the basic files associated with the component identifiers in the CDN respectively, so that after a page visual design request is received, the storage address information associated with the components required by the page is provided to a designer for visual design of the page. By the embodiment of the application, the content amount issued to the client script can be reduced, so that the client loading speed is increased, and the delay is shortened.
Description
Technical Field
The application relates to the technical field of page visualization design, in particular to a method and a device for information processing and page visualization design of a visualization component.
Background
The visual page design tool has the greatest characteristic of zero code visual design mode, so that a page designer can design and develop a page like drawing without any coding and support responsive page design.
In the conventional page visualization design field, it is usually required to develop a plurality of view components (for example, each button, input box, etc. may be referred to as a component) in advance, and then, through actions such as selection, dragging, etc. of a specific view component, complete the visualization design of a page. Among them, a component supporting a visual design may generally include a View file (View), a proto-type file (proto-type), and in some cases there may also be a proto-View file (proto-type View).
Wherein, View file (View) is a code file used for rendering components in a non-visual designer in visual design;
a visualization design Prototype (Prototype) file, which is a file used in visualization design to describe which configurations are supported by a visualization design component in the visualization design; such as the underlying properties of the UI component, whether the component can be selected, dragged, etc. in the visual design view;
prototype view file (PrototypeView), a code file used in visual design to render components in a visual designer.
In the prior art, the two (or three) files are usually built locally by the designer (the process of building the source code of the component into executable code in the browser), and the two (or three) files are built into the local file by the script builder and are provided for loading and calling at the initialization time of the visualization designer. After the design is completed, a file in DSL (domain-specific language, which refers to a computer language that is focused on a certain application program domain) format is generated. The DSL file is description information, and is mainly used to describe attribute information such as the position and size of a specific component in a page. And then, issuing the built executable file and the DSL file to a script of the client for analyzing the client and generating a UI view.
However, because the volume of the executable file corresponding to the prototype view file, the prototype file, and the like is often large, in the prior art, the content issued to the client script is very large, and the problems of slow loading, high delay, and the like easily occur under the condition of bad network conditions.
Disclosure of Invention
The application provides a visual component information processing and page visual design method and device, which can reduce the content amount issued to a client script, thereby improving the client loading speed and shortening the delay.
The application provides the following scheme:
a visualization component information processing method comprises the following steps:
the server receives the component identification submitted by the component development client and the associated basic file;
respectively and independently constructing basic files corresponding to different components, and issuing the basic files to a Content Delivery Network (CDN) for storage;
and storing the storage address information of the basic files associated with the component identifiers in the CDN respectively, so that after a page visual design request is received, the storage address information associated with the components required by the page is provided for a designer to carry out visual design on the page.
A page visualization design method comprises the following steps:
determining a component list required by a page to be designed based on a visual designer of a webpage;
requesting to obtain the storage address information of the basic file associated with the component in the component list on the CDN from a server side;
and loading a basic file of the required component from the CDN according to the storage address information so as to carry out page visual design.
A visualization component information processing method comprises the following steps:
the server receives a component identifier submitted by a component development client and an associated basic file, wherein the basic file comprises a view file and an original file;
respectively and independently constructing different component associated view files and prototype files;
the constructed prototype file is released to a Content Delivery Network (CDN) for storage, and after the storage address information of the prototype file in the CDN is added to the view file, the view file is stored as a local resource file of a server side;
after receiving a page visual design request, providing a view file associated with a component required by a page to be designed to a designer according to a local resource file, so that the designer can obtain a storage address of the prototype file in the CDN through the view file, and obtain the prototype executable file in a mode of loading from the CDN for visual design of the page.
A page visualization design method comprises the following steps:
determining a component list required by a page to be designed based on a visual designer of a webpage;
loading view files related to the components in the component list from the local resource files;
obtaining storage address information of the associated prototype file on the CDN from the view file;
and loading the prototype file from the CDN according to the storage address information so as to carry out page visual design.
A page visualization design method comprises the following steps:
determining a component resource file required by a page to be designed based on a visual designer of a webpage;
acquiring a view file in the component resource file and storage address information associated with the view file;
loading the prototype file and the prototype view file according to the storage address information;
and assembling the view file, the prototype file and the prototype view file into a visual design component to carry out page visual design.
A visual component information processing apparatus comprising:
the basic file receiving unit is used for receiving the component identification submitted by the component development client and the associated basic file;
the construction and delivery unit is used for independently constructing the basic files corresponding to the different components and delivering the basic files to the content delivery network CDN for storage;
and the address information storage unit is used for storing the storage address information of the basic file associated with the component identifier in the CDN respectively, and is used for providing the storage address information associated with the component required by the page to a designer after receiving a page visual design request so as to perform visual design of the page.
A page visualization design apparatus, comprising:
the component list determining unit is used for determining a component list required by a page to be designed based on a visual designer of a webpage;
an address information obtaining unit, configured to obtain, from a server, storage address information of a base file associated with a component in the component list on the CDN;
and the loading unit is used for loading the basic file of the required component from the CDN according to the storage address information so as to carry out page visual design.
A visual component information processing apparatus comprising:
the receiving unit is used for receiving the component identification submitted by the component development client and the associated basic file, wherein the basic file comprises a view file and a prototype file;
the construction unit is used for independently constructing the different component associated view files and the prototype file respectively;
the delivery unit is used for delivering the constructed prototype file to a Content Delivery Network (CDN) for storage, adding storage address information of the prototype file in the CDN to the view file, and then storing the view file as a local resource file of a server side;
the file providing unit is used for providing a view file associated with a component required by a page to be designed to a designer according to a local resource file after receiving a page visual design request, so that the designer can obtain a storage address of the prototype file in the CDN through the view file, and obtain the prototype executable file in a mode of loading from the CDN for carrying out visual design on the page.
A page visualization design apparatus, comprising:
the component list determining unit is used for determining a component list required by a page to be designed based on a visual designer of a webpage;
the first loading unit is used for loading the view file associated with the component in the component list from the local resource file;
an address information obtaining unit, configured to obtain, from the view file, storage address information of an associated prototype file on the CDN;
and the second loading unit is used for loading the prototype file from the CDN according to the storage address information so as to carry out page visual design.
A page visualization design apparatus, comprising:
the resource file determining unit is used for determining a component resource file required by a page to be designed based on a visual designer of a webpage;
a view file information obtaining unit, configured to obtain a view file in the component resource file, and storage address information associated with the view file;
the loading unit is used for loading the prototype file and the prototype view file according to the storage address information;
and the assembling unit is used for assembling the view file, the prototype file and the prototype view file into a visual design component so as to carry out page visual design.
According to the specific embodiments provided herein, the present application discloses the following technical effects:
through the embodiment of the application, the basic files are built at the cloud end, so that the basic files corresponding to different components can be dispersed on a plurality of servers in the CDN, the full loading of the whole component package is avoided when the basic files are used for carrying out page visual design, the basic files are loaded as required, the component size under the environment that a visual designer is used for generating the DSL rendering component is reduced, the loading time of the components under the environment can be prolonged, the content specifically issued to a client script is reduced, the loading speed of the client is increased, the delay is shortened, and the user experience of the application generated by the user through the visual designer is indirectly improved.
In addition, in this solution, since the basic components of different components are not built into one component package, if a certain component needs to update the basic file, the updated basic file may be directly rebuilt, and then the original basic file associated with the component stored in the CDN may be replaced. If one component class includes multiple components, when the base file associated with one target component needs to be updated, only the base file associated with the target component needs to be reconstructed and updated into the CDN, and the user can directly obtain the updated base file, and the base files of other components do not change, so that efficiency is improved, and it is not necessary to reconstruct and regenerate the component packages for each component in the entire component package.
Of course, it is not necessary for any product to achieve all of the above-described advantages at the same time for the practice of the present application.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings without creative efforts.
FIG. 1 is a schematic diagram of a system architecture provided by an embodiment of the present application;
FIG. 2 is a flow chart of a first method provided by an embodiment of the present application;
FIG. 3 is a flow chart of a second method provided by embodiments of the present application;
FIG. 4 is a flow chart of a third method provided by embodiments of the present application;
FIG. 5 is a flow chart of a fourth method provided by embodiments of the present application;
FIG. 6 is a flow chart of a fifth method provided by embodiments of the present application;
FIG. 7 is a schematic diagram of a first apparatus provided by an embodiment of the present application;
FIG. 8 is a schematic diagram of a second apparatus provided by an embodiment of the present application;
FIG. 9 is a schematic diagram of a third apparatus provided by an embodiment of the present application;
FIG. 10 is a schematic diagram of a fourth apparatus provided by an embodiment of the present application;
fig. 11 is a schematic diagram of a fifth apparatus provided in the embodiments of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments that can be derived from the embodiments given herein by a person of ordinary skill in the art are intended to be within the scope of the present disclosure.
It should be noted that, during the implementation of the present application, the inventor of the present application finds that, in the prior art, when designing a page visualization, component resources are usually provided to designers in the form of a component package (bundle), and such a component package in the prior art is usually common, that is, multiple different page designers can use the same component package to design a page visualization. Therefore, when developing a component package, the requirements of a plurality of different designers when developing different pages are generally considered, and all components that may be used when various different pages are visually designed are packaged into one component package for use in the pages. This may result in a component package (bundle) that may typically include a very large number of components, e.g., 30 or more components. The specific component package is generated by packaging the view files, prototype files and the like corresponding to the components after the view files, the prototype files and the like are built locally at the server. And each time when the designer designs the page, the designer needs to load the component package in full, and then utilizes the specific component resources therein to carry out page visual design. Therefore, after the design is completed, the script published to the client also includes the full file content in the component package. However, when a certain page is specifically designed visually, only part of components in the component package may be needed, so that the component package is fully loaded, and the full files in the component package are all issued to the client side script, so that the client side needs to load a large amount of file contents corresponding to the components unrelated to the current page when the script is loaded.
In the embodiment of the application, a way of performing server-side local construction on various files related to a component is not adopted, but a way of performing cloud-side construction is adopted, so that different files (view files, prototype files and the like) related to the same component can be constructed independently and issued to a Content Delivery Network (CDN) for storage. When the page visual design is carried out, a visual designer based on Web pages such as Web can be provided, a designer user can enter a designer page in a mode of logging in the Web page and provide a component list required by the page to be designed for a service end, the service end can return a storage address of a specific associated file in the CDN, and then the designer can add the file associated with a carrier body from the CDN to realize the visual design of the page. In this way, because the view file and the prototype file associated with the component are separately constructed and delivered to the CDN network, the component-associated file can be loaded as needed, rather than being loaded in full, during the process of performing the page visualization design. Therefore, when each page is designed, only the view file, the prototype file and the like related to the components required in the page are dynamically loaded as required, and therefore after the design is finally completed, the view file, the prototype file and the like are released to the content of the client script without containing the related content of the components unrelated to the current page, so that the volume of the script content can be reduced, and the loading efficiency can be improved. In other words, in the embodiment of the application, the designer can dynamically load the related component resource file which is only needed in the designer environment, so that the component volume in the environment of generating the DSL rendering component by using the visual designer is saved, the loading time of the component in the environment is prolonged, and the user experience of the application generated by using the visual designer by the user is indirectly improved.
In addition, in the process of page visualization design or after the design is completed, the requirement for updating the components may be involved, and at this time, the view file, the prototype file, and the like associated with the components need to be modified. However, in a conventional scheme, for example, 30 components constitute a bundle, if a component needs to be changed, a developer managing the 30 components needs to be notified after the change to reconstruct and release a file corresponding to the 30 components, and update the component package. However, the total construction is costly, time consuming and laborious. In the embodiment of the application, since the file corresponding to each component can be independently constructed and delivered to the CDN network, a user can directly enjoy the update by only letting a developer of the component to be modified to re-deliver the new version to the CDN, thereby realizing the capability of dynamically loading the prototype file and the prototype view file of the visually designed component, thereby improving efficiency and reducing cost.
In particular, as shown in fig. 1, the present invention may be particularly related to the improvement of the component development and construction process, and the improvement of the process of visually designing a page using a component. In particular implementation, a component developer may develop components supporting visualization application design on a computer device thereof, where each component may correspond to multiple base files, and may include a View file (View), a PrototypeView file (PrototypeView), and a prototypefile (prototypetype), for example. Then, the basic file corresponding to the specifically developed component may be submitted to a server, where the server may construct the basic file corresponding to different components, and then deliver the basic file to the CDN for storage, and in addition, the server may store information of the specific component identifier and the storage address of the basic file in the CDN. When a specific designer user needs to perform page visual design, the user can log in the server through a Web page and the like, and can submit a component identification information list required by a specific page to be designed to the server. The server may return the storage address of the base file corresponding to the component in the specific list in the CDN to the designer (may run on the server), and then the designer may load, through the storage address, the base file (the built executable file) corresponding to the component required by the current page to be designed as needed, and then may complete the design of the page using the base files.
The following describes in detail specific implementations provided in embodiments of the present application.
Example one
First, the embodiment provides a visual component information processing method, which mainly introduces a processing mode of a server in a component development process. Specifically, referring to fig. 2, the method may specifically include:
s201: the server receives the component identification submitted by the component development client and the associated basic file;
in specific implementation, after the component developer completes development of a specific component on the computer device of the component developer, the associated basic file can be submitted to the server. Wherein, for a component, the base file mainly comprises a view file, a prototype file, and in some cases also comprises a view prototype file. Since multiple components may be generally required in the process of designing the page visualization, a developer may correspondingly develop the multiple components, and the server receives component identifications corresponding to the multiple components and related basic files.
S202: respectively and independently constructing basic files corresponding to different components, and issuing the basic files to a Content Delivery Network (CDN) for storage;
in the embodiment of the application, after receiving the view file and the prototype file corresponding to the specific component, the server does not construct all the basic files corresponding to the multiple components locally to the server to generate a component package, but first independently constructs the basic files of different components, and then delivers the basic files to the CDN for independent storage. Therefore, the constructed basic files corresponding to the components can be dispersed in a plurality of different servers and are not bound together forcibly, and thus, a basis is provided for realizing the loading of the components as required in the specific design process.
S203: and storing the storage address information of the basic files associated with the component identifiers in the CDN respectively, so that after a page visual design request is received, the storage address information associated with the components required by the page is provided to a designer, and the visual design of the page is facilitated.
After the delivery of the specifically constructed basic file is completed, the storage address information of the basic file associated with the component identifier in the CDN may also be saved. Therefore, when a page design request is specifically received, a component list required by a specific page can be determined, and then a storage address of a basic file associated with a component in the component list in the CDN is returned to the designer, so that the designer can add the basic file corresponding to the component required by a carrier body in the CDN, and then visual design of the specific page is completed locally at a server.
In specific implementation, the basic file of the same component at least includes a view file and a prototype file; when the base file of the same component is constructed, the view file and the prototype file of the same base file may be constructed together, or the view file and the prototype file may be independently constructed and respectively delivered to the CDN for storage. For the latter, the specifically stored storage address information may include storage address information of the view file and the prototype file associated with the component identifier in the CDN respectively.
In addition, in a specific implementation, the base file may further include a prototype view file, and in this case, the prototype view file may be further constructed and delivered to the CDN. At this time, declaration information may also be provided in the view file, where the declaration information includes storage address information of the prototype view file in the CDN. In this way, after loading a view file of a certain component, if it is found that declaration information related to the view prototype file is included, the view prototype file may also be loaded from the CDN according to a specific storage address, so as to perform visual design of a page.
Specifically, when the base file is loaded from the CDN, the base file may be loaded asynchronously.
Through the specific technical scheme provided by the embodiment of the application, the basic files are built at the cloud end, so that the basic files corresponding to different components can be dispersed on a plurality of servers in the CDN, the full loading of the whole component package is avoided when the basic files are used for carrying out page visual design, the loading is carried out as required, the component size under the environment that a visual designer is used for generating the DSL rendering component is reduced, the loading time of the component under the environment is prolonged, and the user experience of the application generated by the user through the visual designer is indirectly improved.
In addition, in this solution, since the basic components of different components are not built into one component package, if a certain component needs to update the basic file, the updated basic file may be directly rebuilt, and then the original basic file associated with the component stored in the CDN may be replaced. If one component class includes multiple components, when the base file associated with one target component needs to be updated, only the base file associated with the target component needs to be reconstructed and updated into the CDN, and the user can directly obtain the updated base file, and the base files of other components do not change, so that efficiency is improved, and it is not necessary to reconstruct and regenerate the component packages for each component in the entire component package.
Example two
The second embodiment corresponds to the first embodiment, and provides a page visualization design method from the perspective of a specific Web client in a specific page visualization design process, referring to fig. 3, where the method may specifically include:
s301: determining a component list required by a page to be designed based on a visual designer of a webpage;
in this embodiment of the application, a specific designer may be implemented based on Web pages such as Web pages, that is, when a certain page needs to be visually designed, a designer user may access the Web page for performing the page visual design through a browser and the like, and functions such as calling of the visual designer deployed in a server and the like may be implemented in the Web page, so as to implement the page visual design based on the cloud designer. In a specific implementation, a component list required by the page to be designed may be determined first, where the component list may be obtained in various ways, for example, a designer may select from a full amount of component lists, or may specify in advance, and so on.
S302: requesting to obtain the storage address information of the basic file associated with the component in the component list on the CDN from a server side;
after the specific required component list is determined, a request may be initiated to the server in multiple ways, for example, in one way, a request may be made to the server through a browser to obtain storage address information of a base file associated with a component in the component list on the CDN. The server may be the server where the server for storing the storage address information of the specific basic file described in the first embodiment is located, and in the specific implementation, the visualization designer may also be run in the server.
S303: and loading a basic file of the required component from the CDN according to the storage address information so as to carry out page visual design.
After the specific storage address information is obtained, the basic file of the required component can be loaded from the CDN for page visualization design. That is to say, in the embodiment of the application, the base file corresponding to the component can be loaded to the local server where the designer is located according to actual needs, and then the visual design of the page is completed in the cloud. In specific implementation, the visualization designer may locally initialize a component repository at the server, start the relevant loading module, and complete the above-mentioned process of obtaining the storage address information and specifically loading the base file, where the base file may be specifically loaded into the component repository.
The basic files comprise view files and prototype files, and are independently constructed and then respectively released to the CDN; at this time, the view file and the prototype file of the required component may be loaded from the CDN, respectively.
In addition, if the view file also declares the storage address information of an original view file, the original view file is loaded from the CDN according to the storage address for page visualization design.
Under the condition that different basic files of the same component are independently constructed and delivered to the CDN network, the view file, the prototype view file and the like can be recombined into a visual component for visual design after the specific basic files are loaded from the CDN according to the requirements of page visual design.
In a specific implementation, as shown in fig. 1, the base file of the required component may be loaded from the CDN in an asynchronous loading manner.
EXAMPLE III
In the first and second embodiments, the base file associated with the component is constructed in the cloud and then all the base file is delivered to the CDN for storage, but in the embodiment of the present application, the view file may be stored locally at the server, and the prototype file, the prototype view file, and the like are delivered to the CDN for storage. In this way, when the page visualization design is specifically performed, the view file of the required component can be directly loaded from the server-side local resource file, and the prototype file of the required component and the prototype view file (if any) can be asynchronously loaded from the CDN. Specifically, the third embodiment provides a visualization component information processing method from the perspective of the server, and referring to fig. 4, the method may specifically include:
s401: the server receives a component identifier submitted by a component development client and an associated basic file, wherein the basic file comprises a view file and an original file;
s402: respectively and independently constructing different component associated view files and prototype files;
in this embodiment, not only the base files corresponding to different components are independently constructed, but also the view file and the prototype file associated with the same component may be independently constructed.
S403: the constructed prototype file is released to a Content Delivery Network (CDN) for storage, and after the storage address information of the prototype file in the CDN is added to the view file, the view file is stored as a local resource file of a server side;
after the construction is completed, the prototype file may be delivered to the CDN for storage, and the storage address information of the prototype file in the CDN is added to the view file, and then the view file may be stored as a local resource file local to the server. That is, the specific view file may be stored locally at the server to become a local resource file, and the prototype file may be delivered to the CDN network.
S404: after receiving a page visual design request, providing a view file associated with a component required by a page to be designed to a designer according to a local resource file, so that the designer can obtain a storage address of the prototype file in the CDN through the view file, and obtain the prototype executable file in a mode of loading from the CDN for visual design of the page.
Specifically, after receiving a specific visual design request, the designer may directly provide a view file associated with a component required by the page to be designed from the local resource file to the designer, and the designer may load the prototype file from the CDN to implement visual design of the specific page.
In addition, if the file associated with the component identifier further includes an original view file, the original view file is constructed and delivered to the CDN, and declaration information is provided in the view file, where the declaration information includes storage address information of the original view file in the CDN.
During specific implementation, a synchronous loading mode can be adopted in the local loading process from the server side, and an asynchronous loading mode can be adopted in the process of loading the prototype file from the CDN, so that the combination of synchronous and asynchronous loading can be realized, and the efficiency can be improved.
Example four
The fourth embodiment corresponds to the third embodiment, and from the perspective of a specific visualization designer, a page visualization design method is provided, and referring to fig. 5, the method may specifically include:
s501: determining a component list required by a page to be designed based on a visual designer of a webpage;
s502: loading view files related to the components in the component list from the local resource files;
in specific implementation, synchronous loading of view files associated with components in the component list can be realized from local resource files associated with the server through the browser.
S503: obtaining storage address information of the associated prototype file on the CDN from the view file;
s504: and loading the prototype file from the CDN according to the storage address information so as to carry out page visual design.
In a specific implementation, the prototype file may be asynchronously loaded from the CDN.
If the view file also declares the storage address information of an original view file in the CDN, the original view file may be loaded from the CDN according to the storage address for page visualization design.
EXAMPLE five
The fifth embodiment of the present application provides a page visualization design method from another angle, referring to fig. 6, where the method specifically may include:
s601: determining a component resource file required by a page to be designed based on a visual designer of a webpage;
the concept of the component resource file described in this embodiment and the base file described in the previous embodiments may be the same.
S602: acquiring a view file in the component resource file and storage address information associated with the view file;
s603: loading the prototype file and the prototype view file according to the storage address information;
s604: and assembling the view file, the prototype file and the prototype view file into a visual design component to carry out page visual design.
The storage address information includes an address of the prototype file and an address of the prototype view file package on the CDN.
Specifically, when the prototype file and the prototype view file are loaded, the prototype file and the prototype view file can be loaded through the asynchronous module loader according to the storage address information.
Specifically, when determining the component resource file required by the page to be designed, the component repository may be initialized and the local component resource file may be loaded based on the visual designer of the web page.
For the parts of the foregoing embodiments that are not described in detail, reference may be made to the descriptions of other embodiments, which are not described herein again.
Corresponding to the first embodiment, an embodiment of the present application further provides a visualization component information processing apparatus, and referring to fig. 7, the apparatus may include:
a basic file receiving unit 701, configured to receive a component identifier and an associated basic file, which are submitted by a component development client;
a constructing and delivering unit 702, configured to independently construct the basic files corresponding to the different components, and deliver the basic files to the content delivery network CDN for storage;
an address information saving unit 703 is configured to save storage address information of the base file associated with the component identifier in the CDN, respectively, so as to provide the storage address information associated with the component required by the page to the designer after receiving the page visual design request, so as to perform visual design on the page.
Wherein the base file comprises a view file and a prototype file;
when basic files of the same component are constructed, independently constructing a video file and a prototype file respectively, and releasing the video file and the prototype file to the CDN for storage respectively;
the stored storage address information includes storage address information of the view file and the prototype file associated with the component identifier in the CDN respectively.
In a specific implementation, the apparatus may further include:
and if the base file associated with the component identifier further includes an prototype view file, the prototype view file is constructed and released to the CDN, and declaration information is provided in the view file, where the declaration information includes storage address information of the prototype view file in the CDN.
An update file obtaining unit, configured to obtain an updated base file associated with a target component after receiving a request for updating the base file associated with the target component;
and the reconstruction unit is used for reconstructing the updated basic file and replacing the original basic file related to the component stored in the CDN.
Wherein the reconstruction unit may specifically be configured to: if a plurality of components are included in one component class, only the base file associated with a target component needs to be reconstructed and updated to the CDN when the base file associated with the target component needs to be updated.
Corresponding to the second embodiment, an embodiment of the present application further provides a page visualization design apparatus, referring to fig. 8, the apparatus may include:
a component list determining unit 801, configured to determine a component list required by a page to be designed based on a visual designer of a web page;
an address information obtaining unit 802, configured to obtain, from a server, storage address information of a base file associated with a component in the component list on the CDN;
a loading unit 803, configured to load a basic file of a required component from the CDN according to the storage address information, so as to perform page visualization design.
The basic files comprise view files and prototype files, and are independently constructed and then respectively released to the CDN;
the loading unit may specifically be configured to:
and respectively loading a view file and a prototype file of the required component from the CDN.
In a specific implementation, the apparatus may further include:
and the prototype view file loading unit is used for loading the prototype view file from the CDN according to the storage address if the view file also declares the storage address information of the prototype view file, so as to be used for page visualization design.
Specifically, the loading unit may be specifically configured to:
and loading the basic file of the required component from the CDN in an asynchronous loading mode.
Corresponding to the embodiment, the embodiment of the present application further provides a visualized component information processing apparatus, and referring to fig. 9, the apparatus may include:
a receiving unit 901, configured to receive a component identifier and an associated basic file submitted by a component development client, where the basic file includes a view file and a prototype file;
a constructing unit 902, configured to separately construct different component-associated view files and prototype files;
a publishing unit 903, configured to publish the constructed prototype file to a content delivery network CDN for storage, add storage address information of the prototype file in the CDN to the view file, and store the view file as a local resource file local to a server;
the file providing unit 904 is configured to, after receiving a page visualization design request, provide, according to a local resource file, a view file associated with a component required by a page to be designed to a designer, so that the designer obtains, through the view file, a storage address of the prototype file in the CDN, and obtains, through loading from the CDN, the prototype executable file for performing page visualization design.
If the file associated with the component identifier further includes an prototype view file, the prototype view file is constructed and released to the CDN, and declaration information is provided in the view file, where the declaration information includes storage address information of the prototype view file in the CDN.
Corresponding to the fourth embodiment, the embodiment of the present application further provides a page visualization design apparatus, referring to fig. 10, the apparatus may include:
a component list determining unit 1001 configured to determine a component list required by a page to be designed based on a visual designer of a web page;
a first loading unit 1002, configured to load a view file associated with a component in the component list from a local resource file;
an address information obtaining unit 1003, configured to obtain, from the view file, storage address information of an associated prototype file on the CDN;
a second loading unit 1004, configured to load the prototype file from the CDN according to the storage address information, so as to perform page visualization design.
Specifically, the first loading unit may be specifically configured to: synchronously loading view files related to the components in the component list from the local resource files through the browser;
the second loading unit may specifically be configured to: asynchronously loading the prototype file from the CDN.
In addition, the apparatus may further include:
and the prototype view file loading unit is used for loading the prototype view file from the CDN according to the storage address if the view file also declares the storage address information of the prototype view file in the CDN, so as to perform page visualization design.
Corresponding to the fifth embodiment, an embodiment of the present application further provides a page visualization design apparatus, referring to fig. 11, the apparatus may include:
a resource file determining unit 1101, configured to determine, based on a visual designer of a web page, a component resource file required by a page to be designed;
a view file information obtaining unit 1102, configured to obtain a view file in the component resource file and storage address information associated with the view file;
a loading unit 1103, configured to load the prototype file and the prototype view file according to the storage address information;
and an assembling unit 1104, configured to assemble the view file, the prototype file, and the prototype view file into a visual design component for page visual design.
The storage address information includes an address of the prototype file and an address of the prototype view file package on the CDN.
The loading unit may specifically be configured to: and loading the prototype file and the prototype view file according to the storage address information through an asynchronous module loader.
The resource file determining unit may specifically be configured to:
and initializing a component warehouse and loading a local component resource file by using the visual designer based on the webpage.
From the above description of the embodiments, it is clear to those skilled in the art that the present application can be implemented by software plus necessary general hardware platform. Based on such understanding, the technical solutions of the present application may be essentially or partially implemented in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method according to the embodiments or some parts of the embodiments of the present application.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, the system or system embodiments are substantially similar to the method embodiments and therefore are described in a relatively simple manner, and reference may be made to some of the descriptions of the method embodiments for related points. The above-described system and system embodiments are only illustrative, wherein the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
The method and the device for information processing and page visualization design of the visualization component provided by the application are introduced in detail, specific examples are applied in the method to explain the principle and the implementation mode of the application, and the description of the embodiments is only used for helping to understand the method and the core idea of the application; meanwhile, for a person skilled in the art, according to the idea of the present application, the specific embodiments and the application range may be changed. In view of the above, the description should not be taken as limiting the application.
Claims (23)
1. A visual component information processing method is characterized by comprising the following steps:
the server receives the component identification submitted by the component development client and the associated basic file;
respectively and independently constructing basic files corresponding to different components, and issuing the basic files to a Content Delivery Network (CDN) for storage;
and storing the storage address information of the basic files associated with the component identifiers in the CDN respectively, so that after a page visual design request is received, the storage address information associated with the components required by the page is provided for a designer to carry out visual design on the page.
2. The method of claim 1,
the base file comprises a view file and a prototype file;
when basic files of the same component are constructed, independently constructing a video file and a prototype file respectively, and releasing the video file and the prototype file to the CDN for storage respectively;
the stored storage address information includes storage address information of the view file and the prototype file associated with the component identifier in the CDN respectively.
3. The method of claim 2, further comprising:
if the basic file associated with the component identifier further includes an original view file, the original view file is constructed and released to the CDN, and declaration information is provided in the view file, wherein the declaration information includes storage address information of the original view file in the CDN.
4. The method of claim 1,
after a request for updating the basic file associated with the target component is received, acquiring the updated basic file associated with the target component;
and after the updated basic file is reconstructed, replacing the original basic file related to the component stored in the CDN.
5. The method of claim 4,
if a plurality of components are included in one component class, only the base file associated with a target component needs to be reconstructed and updated to the CDN when the base file associated with the target component needs to be updated.
6. A page visualization design method is characterized by comprising the following steps:
determining a component list required by a page to be designed based on a visual designer of a webpage;
requesting to obtain the storage address information of the basic file associated with the component in the component list on the CDN from a server side;
and loading a basic file of the required component from the CDN according to the storage address information so as to carry out page visual design.
7. The method of claim 6,
the basic files comprise view files and prototype files, and are independently constructed and then respectively released to the CDN;
the loading of the base file of the required component from the CDN includes:
and respectively loading a view file and a prototype file of the required component from the CDN.
8. The method of claim 7, further comprising:
and if the view file also declares the storage address information of the prototype view file, loading the prototype view file from the CDN according to the storage address for page visualization design.
9. The method of claim 6,
the loading the basic file of the required component from the CDN according to the storage address information includes:
and loading the basic file of the required component from the CDN in an asynchronous loading mode.
10. A visual component information processing method is characterized by comprising the following steps:
the server receives a component identifier submitted by a component development client and an associated basic file, wherein the basic file comprises a view file and an original file;
respectively and independently constructing different component associated view files and prototype files;
the constructed prototype file is released to a Content Delivery Network (CDN) for storage, and after the storage address information of the prototype file in the CDN is added to the view file, the view file is stored as a local resource file of a server side;
after receiving a page visual design request, providing a view file associated with a component required by a page to be designed to a designer according to a local resource file, so that the designer can obtain a storage address of the prototype file in the CDN through the view file, and obtain the prototype executable file in a mode of loading from the CDN for visual design of the page.
11. The method of claim 10,
if the file associated with the component identifier further includes an original view file, the original view file is constructed and released to the CDN, and declaration information is provided in the view file, wherein the declaration information includes storage address information of the original view file in the CDN.
12. A page visualization design method is characterized by comprising the following steps:
determining a component list required by a page to be designed based on a visual designer of a webpage;
loading view files related to the components in the component list from the local resource files;
obtaining storage address information of the associated prototype file on the CDN from the view file;
and loading the prototype file from the CDN according to the storage address information so as to carry out page visual design.
13. The method of claim 12, wherein loading the view file associated with the component in the component list from the local resource file comprises:
synchronously loading view files related to the components in the component list from the local resource files through the browser;
the loading the prototype file from the CDN includes:
asynchronously loading the prototype file from the CDN.
14. The method of claim 12, further comprising:
and if the view file also declares the storage address information of an original view file in the CDN, loading the original view file from the CDN according to the storage address for page visual design.
15. A page visualization design method is characterized by comprising the following steps:
determining a component resource file required by a page to be designed based on a visual designer of a webpage;
acquiring a view file in the component resource file and storage address information associated with the view file;
loading the prototype file and the prototype view file according to the storage address information;
and assembling the view file, the prototype file and the prototype view file into a visual design component to carry out page visual design.
16. The method of claim 15,
the storage address information includes addresses of the prototype file and the prototype view file package on the CDN.
17. The method of claim 15,
loading the prototype file and the prototype view file according to the storage address information, wherein the loading comprises the following steps:
and loading the prototype file and the prototype view file according to the storage address information through an asynchronous module loader.
18. The method of claim 15, wherein determining component resource files required for the page to be designed based on the visual designer of the web page comprises:
and initializing a component warehouse and loading a local component resource file by using the visual designer based on the webpage.
19. A visual component information processing apparatus characterized by comprising:
the basic file receiving unit is used for receiving the component identification submitted by the component development client and the associated basic file;
the construction and delivery unit is used for independently constructing the basic files corresponding to the different components and delivering the basic files to the content delivery network CDN for storage;
and the address information storage unit is used for storing the storage address information of the basic file associated with the component identifier in the CDN respectively, and is used for providing the storage address information associated with the component required by the page to a designer after receiving a page visual design request so as to perform visual design of the page.
20. A page visualization design apparatus, comprising:
the component list determining unit is used for determining a component list required by a page to be designed based on a visual designer of a webpage;
an address information obtaining unit, configured to obtain, from a server, storage address information of a base file associated with a component in the component list on the CDN;
and the loading unit is used for loading the basic file of the required component from the CDN according to the storage address information so as to carry out page visual design.
21. A visual component information processing apparatus characterized by comprising:
the receiving unit is used for receiving the component identification submitted by the component development client and the associated basic file, wherein the basic file comprises a view file and a prototype file;
the construction unit is used for independently constructing the different component associated view files and the prototype file respectively;
the delivery unit is used for delivering the constructed prototype file to a Content Delivery Network (CDN) for storage, adding storage address information of the prototype file in the CDN to the view file, and then storing the view file as a local resource file of a server side;
the file providing unit is used for providing a view file associated with a component required by a page to be designed to a designer according to a local resource file after receiving a page visual design request, so that the designer can obtain a storage address of the prototype file in the CDN through the view file, and obtain the prototype executable file in a mode of loading from the CDN for carrying out visual design on the page.
22. A page visualization design apparatus, comprising:
the component list determining unit is used for determining a component list required by a page to be designed based on a visual designer of a webpage;
the first loading unit is used for loading the view file associated with the component in the component list from the local resource file;
an address information obtaining unit, configured to obtain, from the view file, storage address information of an associated prototype file on the CDN;
and the second loading unit is used for loading the prototype file from the CDN according to the storage address information so as to carry out page visual design.
23. A page visualization design apparatus, comprising:
the resource file determining unit is used for determining a component resource file required by a page to be designed based on a visual designer of a webpage;
a view file information obtaining unit, configured to obtain a view file in the component resource file, and storage address information associated with the view file;
the loading unit is used for loading the prototype file and the prototype view file according to the storage address information;
and the assembling unit is used for assembling the view file, the prototype file and the prototype view file into a visual design component so as to carry out page visual design.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910490700.6A CN112051994B (en) | 2019-06-06 | 2019-06-06 | Visual component information processing and page visual design method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910490700.6A CN112051994B (en) | 2019-06-06 | 2019-06-06 | Visual component information processing and page visual design method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112051994A true CN112051994A (en) | 2020-12-08 |
| CN112051994B CN112051994B (en) | 2024-06-18 |
Family
ID=73609438
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910490700.6A Active CN112051994B (en) | 2019-06-06 | 2019-06-06 | Visual component information processing and page visual design method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112051994B (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112433784A (en) * | 2020-12-10 | 2021-03-02 | 东莞市盟大塑化科技有限公司 | Page loading method, device, equipment and storage medium |
| CN112540763A (en) * | 2020-12-24 | 2021-03-23 | 贵阳货车帮科技有限公司 | Front-end page generation method and device, platform equipment and storage medium |
| CN113342765A (en) * | 2021-06-22 | 2021-09-03 | 山东浪潮通软信息科技有限公司 | Service unit updating method, system and computer equipment |
| CN113703743A (en) * | 2021-08-30 | 2021-11-26 | 北京房江湖科技有限公司 | Page configuration method and device, page rendering method, client and server |
| CN114489613A (en) * | 2021-12-22 | 2022-05-13 | 阿里巴巴（中国）有限公司 | Program development assisting method and device and electronic equipment |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103885788A (en) * | 2014-04-14 | 2014-06-25 | 焦点科技股份有限公司 | Dynamic WEB 3D virtual reality scene construction method and system based on model componentization |
| US20160062963A1 (en) * | 2014-08-26 | 2016-03-03 | Adobe Systems Incorporated | Synchronizing DOM Element References |
| CN105574049A (en) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | Page processing method, device and system of mobile applications |
| CN107370791A (en) * | 2017-06-23 | 2017-11-21 | 微梦创科网络科技（中国）有限公司 | The method and system of filename in automatic synchronization renewal content distributing network |
| CN107451296A (en) * | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| US20180081638A1 (en) * | 2016-09-16 | 2018-03-22 | Powell Software Sas | Collaborative development of a web-based service |
| CN108255847A (en) * | 2016-12-28 | 2018-07-06 | 腾讯科技（深圳）有限公司 | Page generation method and device |
| CN109299422A (en) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | Visualize page authoring method, system, equipment and storage medium |
| CN109614568A (en) * | 2018-12-07 | 2019-04-12 | 微梦创科网络科技（中国）有限公司 | A kind of page generation method and device |
-
2019
- 2019-06-06 CN CN201910490700.6A patent/CN112051994B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103885788A (en) * | 2014-04-14 | 2014-06-25 | 焦点科技股份有限公司 | Dynamic WEB 3D virtual reality scene construction method and system based on model componentization |
| US20160062963A1 (en) * | 2014-08-26 | 2016-03-03 | Adobe Systems Incorporated | Synchronizing DOM Element References |
| CN105574049A (en) * | 2014-10-30 | 2016-05-11 | 阿里巴巴集团控股有限公司 | Page processing method, device and system of mobile applications |
| US20180081638A1 (en) * | 2016-09-16 | 2018-03-22 | Powell Software Sas | Collaborative development of a web-based service |
| CN108255847A (en) * | 2016-12-28 | 2018-07-06 | 腾讯科技（深圳）有限公司 | Page generation method and device |
| CN107370791A (en) * | 2017-06-23 | 2017-11-21 | 微梦创科网络科技（中国）有限公司 | The method and system of filename in automatic synchronization renewal content distributing network |
| CN107451296A (en) * | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| CN109299422A (en) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | Visualize page authoring method, system, equipment and storage medium |
| CN109614568A (en) * | 2018-12-07 | 2019-04-12 | 微梦创科网络科技（中国）有限公司 | A kind of page generation method and device |
Non-Patent Citations (1)
| Title |
|---|
| 刘一田;刘士进;: "可视化Web设计器", 计算机系统应用, no. 10 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112433784A (en) * | 2020-12-10 | 2021-03-02 | 东莞市盟大塑化科技有限公司 | Page loading method, device, equipment and storage medium |
| CN112540763A (en) * | 2020-12-24 | 2021-03-23 | 贵阳货车帮科技有限公司 | Front-end page generation method and device, platform equipment and storage medium |
| CN113342765A (en) * | 2021-06-22 | 2021-09-03 | 山东浪潮通软信息科技有限公司 | Service unit updating method, system and computer equipment |
| CN113703743A (en) * | 2021-08-30 | 2021-11-26 | 北京房江湖科技有限公司 | Page configuration method and device, page rendering method, client and server |
| CN113703743B (en) * | 2021-08-30 | 2023-12-26 | 贝壳找房(北京)科技有限公司 | Page configuration method and device, page rendering method, client and server |
| CN114489613A (en) * | 2021-12-22 | 2022-05-13 | 阿里巴巴（中国）有限公司 | Program development assisting method and device and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112051994B (en) | 2024-06-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112051994A (en) | Visual component information processing and page visual design method and device | |
| JP6997253B2 (en) | Web page rendering methods, equipment, electronics, storage media and programs | |
| WO2020119485A1 (en) | Page display method and device, apparatus, and storage medium | |
| US10318318B2 (en) | Extending user interface of a web console | |
| CN102934104B (en) | Web site implementation by mapping expression evaluation | |
| US20120030577A1 (en) | System and method for data-driven web page navigation control | |
| US8930824B2 (en) | Facilitating propagation of user interface patterns or themes | |
| CN104572114A (en) | Binding device, application updating device and method and application | |
| US10942715B2 (en) | Composable context menus | |
| CN104423948B (en) | Automatized script operation method and device | |
| CN111026634A (en) | Interface automation test system, method, device and storage medium | |
| CN105573734A (en) | Method and device for providing SDK file | |
| US20230418835A1 (en) | Systems and methods for presenting web application content | |
| US10949176B2 (en) | Automatic view generation based on annotations | |
| CN115202729A (en) | Container service-based mirror image generation method, device, equipment and medium | |
| US9244706B2 (en) | Command line shell command generation based on schema | |
| CN117873597A (en) | Method and system for realizing API arrangement through visual configuration mode | |
| KR20210091327A (en) | Batch processing method, apparatus, electronic device and readable storage medium of applet | |
| CN104461893A (en) | Data processing method and data processing device | |
| CN116521285A (en) | Application trial method and device, electronic equipment and storage medium | |
| Hallie et al. | Learning Patterns: Patterns for building powerful web apps with vanilla JavaScript and React | |
| Himschoot et al. | Single-Page Applications and Routing | |
| Whitesell et al. | Pro Microservices in .NET 6 | |
| Ma et al. | State-driven and brick-based mobile mashup | |
| CN113254019A (en) | Method and device for registering front-end data stream state file |
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 | ||
| GR01 | Patent grant |