CN114417215A

CN114417215A - Designer and page design method

Info

Publication number: CN114417215A
Application number: CN202111674106.6A
Authority: CN
Inventors: 李孟冬; 陈今斌
Original assignee: Tianwen Digital Media Technology Beijing Co ltd
Current assignee: Tianwen Digital Media Technology Beijing Co ltd
Priority date: 2021-12-31
Filing date: 2021-12-31
Publication date: 2022-04-29

Abstract

The application provides a designer and a page design method, and relates to the technical field of internet. The designer comprises a display module, a display module and a display module, wherein the display module is used for providing a display area, the display area comprises a component template area, a page view editing area and a configuration area, a component and a template are displayed in the component template area, and the component and the template can be dragged to the page view editing area; the interface module is used for calling data from a data source; and the processing module is used for binding the components and/or the templates and corresponding data in a bidirectional mode. In this way, fast development of custom page content and sites can be achieved.

Description

Designer and page design method

Technical Field

The application relates to the technical field of internet, in particular to a designer and a page design method.

Background

Currently, two methods for developing web site pages include: one is to build a website product using the open source public Content Management System (CMS); still another is an enterprise self-research site content management system.

The open source CMS station building products are mature in function, simple and easy to use, but lack of customized functions in the industry, weak in product expansion capability and high in secondary development cost; the self-research site content management system of the enterprise has strong customized expansion capability but insufficient template resources, and for some enterprises in non-internet industries, the system is slightly difficult to use and operate, so that the site configuration capability of the self-research site content management system of the enterprise is relatively limited, and the development cost is relatively high.

Disclosure of Invention

In order to realize the rapid development of self-defined page content and sites, the application provides a designer and a page design method.

In a first aspect of the present application, there is provided a designer, comprising:

the display module is used for providing a display area, the display area comprises an assembly template area, a page view editing area and a configuration area, an assembly and a template are displayed in the assembly template area, and the assembly and the template can be dragged to the page view editing area;

the interface module is used for calling data from a data source;

and the processing module is used for binding the components and/or the templates and corresponding data in a bidirectional mode.

By adopting the scheme, a designer can quickly and flexibly arrange the page by simply dragging, so that the page development difficulty is reduced, and the synchronous change of data displayed by the component is realized when the data in the data source is changed by adopting a mode of bidirectionally binding the data with the component and the template; or when the data displayed by the component changes, the data in the data source synchronously changes.

Optionally, the processing module is specifically configured to: configuring a monitoring function and realizing bidirectional binding between the component and/or the template and corresponding data through the monitoring function; the monitoring function is used for monitoring data displayed in the components in the page view and data in the data source; when the data displayed in the component changes, updating the data in the data source bound with the component; when the data in the data source changes, the data displayed in the component bound with the data source is updated.

Optionally, the processing module is further configured to configure default static data of the component and display a default data format of the default static data.

Optionally, the processing module is further configured to filter a format of data obtained from a data source, and convert the format of the data into the default data format.

Optionally, the processing module is further configured to declare a global variable, where common data required by different components is stored in the global variable.

Optionally, the processing module is further configured to configure a polling time, where the polling time is an interval time for requesting data from a data source.

Optionally, the processing module is further configured to determine whether the same component exists in the page view editing area; if so, the post-loaded component uses the rendering data when the component was first loaded.

Optionally, the processing module is specifically configured to: acquiring a DOM structure of the component; comparing whether the ID of the nodes at the same level in the DOM structure is the same; if so, the two components are the same component.

In a second aspect of the present application, a method of page design is provided. The method comprises the following steps:

dragging the components or templates in the component template area to a page view editing area; acquiring data from a data source; and binding the components and/or the templates with corresponding data in a bidirectional mode.

Optionally, the method further includes: configuring a monitoring function and realizing bidirectional binding between the component and/or the template and corresponding data through the monitoring function; the monitoring function is used for monitoring data displayed in the components in the page view and data in the data source; when the data displayed in the component changes, updating the data in the data source bound with the component; when the data in the data source changes, the data displayed in the component bound with the data source is updated.

It should be understood that what is described in this summary section is not intended to limit key or critical features of the embodiments of the application, nor is it intended to limit the scope of the application. Other features of the present application will become apparent from the following description.

Drawings

The above and other features, advantages and aspects of various embodiments of the present application will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. In the drawings, like or similar reference characters designate like or similar elements, and wherein:

FIG. 1 is a block diagram of a page design system in an embodiment of the present application;

FIG. 2 is a block diagram of a designer in an embodiment of the present application;

fig. 3 is a schematic diagram of a user side displayed by a display module in an embodiment of the present application;

FIG. 4 is a diagram of bidirectional binding of component data and global variables in an embodiment of the present application;

FIG. 5 is a diagram of components and API key value mappings in an embodiment of the present application;

FIG. 6 is a diagram illustrating a two-terminal comparison algorithm in the Diff algorithm in an embodiment of the present application;

FIG. 7 is a flowchart of a page design method in an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, 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.

In order to facilitate understanding of the embodiments of the present application, some terms referred to in the embodiments of the present application are first explained.

In the description of the present application, the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc. indicate orientations or positional relationships based on those shown in the drawings, and are only for convenience of describing the present invention and simplifying the description, but do not indicate or imply that the referred device or element must have a specific orientation, be constructed in a specific orientation, and be operated, and thus, should not be construed as limiting the present invention. The terms "first," "second," and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.

With the increase of the information degree of the internet in each industry, most enterprises can establish own professional websites by taking the form of enterprise websites as an important information window for displaying the image of a company.

However, for some non-internet enterprises, establishing a website not only has great development difficulty but also has higher cost, thus increasing the enterprise operation burden; if the open source public CMS products are used, the customization level is low, and therefore, the requirements of enterprises are difficult to meet. This is especially true for schools in the educational industry.

Based on the above technical problem, the embodiment of the present application provides a designer 140, which contains rich components and templates and various data sources 150, and the designer 140 also integrates various functions, so that a designer can complete site development quickly.

Fig. 1 shows a block diagram of a page design system in an embodiment of the present application.

Referring to FIG. 1, the page design system includes a site management module 110 for managing sites, a content management module 120 for managing site content, a component template module 130 for providing component templates, a designer 140 for providing a canvas of a webpage for designing a page, and a data source 150 providing data resources. The site management module 110, the content management module 120, the component template module 130, the designer 140, and the data source 150 are all provided with interfaces, and these five modules communicate through the interfaces.

The site management module 110 is configured to support construction and management of multiple levels of sites, and the site management module 110 includes a site attribute management unit 111, a page management unit 112, and a column management unit 113. It should be noted that a multi-level site refers to a site having multiple sub-sites.

The site attribute management unit 111 is mainly used for site import, site export, site publishing, rights management, access control, site configuration, and site theme switching. The page management unit 112 is used for performing master setting (e.g., common header footer, page template layout), page design, rights management, access control, and the like. The column management unit 113 is used for column import, column export, column sorting and access control, and in the column management unit 113, the column sequence adjustment is realized by dragging the column upper and lower order in the column list, and the functions of column display hiding and navigation display hiding are controlled to display different effects of a page in real time.

The content management module 120 is used for managing content provided for the user to view, such as: news, video, audio, documents, photo collections, hyperlinks, etc. The content management module 120 can edit and typeset the text, provide functions such as format clearing, full selection, draft box, preview, and the like, and also perform operations such as creating, modifying, auditing, publishing, site pushing, and the like on the content.

Component template module 130 is used to provide a variety of components and templates. In the embodiment of the application, the component template module 130 includes a component template library, and the components or templates in the component template library can be classified according to different functions. Among them, component types include, but are not limited to: general components, map components, chart components, text components, interaction components, list components, media components, business components, and the like. Types of templates include, but are not limited to, system templates, site templates, such as: general information details, evaluation scores, questionnaires, form templates, system templates, etc.

In some embodiments, in the component template module 130, a plurality of components can be combined in a customized manner and stored in the component template library to obtain a site template required by a user.

The designer 140 is used for providing specific design for a page by a designer, and the designer realizes component dragging operation and layout of the page through the designer 140, so that the designer can quickly build a one-stop multi-level information site even when approaching zero codes.

FIG. 2 shows a block diagram of designer 140 in an embodiment of the present application. Referring to FIG. 2, designer 140 includes a display module 210 for providing a display area, an interface module 220 for retrieving data from data source 150, and a processing module 230 for bi-directionally binding components and/or templates with corresponding data. It should be noted that the display module 210, the interface module 220, and the processing module 230 all communicate with each other through an interface.

The display module 210, the interface module 220, and the processing module 230 will be described in detail below.

The display areas in the display module 210 include a component template area, a page view editing area, and a configuration area. Fig. 3 is a schematic diagram illustrating a user side displayed by the display module 210 in the embodiment of the present application. Referring to fig. 3, the left area is the module template area; the middle area is a page view editing area; the right area is the configuration area.

The component template area is used to display the components or templates in the component template module 130, and the components or templates in the component template area can be dragged to the page view editing area for layout.

Specifically, the display module 210 communicates with the component template module 130 via an interface, and the component template area is capable of displaying all components and templates stored in the component template library. Referring to fig. 3, in the component template area are also divided a functionality control area and a list area. A function control area is arranged above the component template area; and a list area is arranged below the function control area. The functional control area displays a component control, a template control, a layer control and a block control, and a user switches contents displayed in the list area by clicking the controls. For example, if the user clicks on the component control, the list area will display all the components in the component template library.

In some embodiments, the component and the template are displayed, and at the same time, the function name corresponding to the component or the template is also displayed, so that a user can find the component or the template with a required function conveniently. When a component or template is created or stored, its functional name has been set with the corresponding ID. For example, a component for a pop-up window may be named a pop-up window component.

The page view editing area includes a canvas for the user to design the page. In the design process, a user only needs to drag the component or the template into the canvas, and configuration operation can be carried out on the component or the template.

The user terminals are different, and the dragging modes are different. If the display screen of the user terminal is a touch screen, dragging the component or the template by a user through touch operation; and if the display screen of the user terminal is a non-touch screen, dragging the component or the template by clicking and dragging operations by the user.

Configuration functions displayed by the configuration area include (but are not limited to) site configuration, page configuration, component configuration, debugging configuration, and the like. The property of the component can be configured, the data bound to the component can be managed, and the like in the component configuration, for example, in the property configuration, the name and the ID of the component can be modified, or the component can be resized, and the like.

The display module 210 sets data or data sources to be bound for the components, the interface module 220 retrieves corresponding data from the data source 150, the retrieved data is sent to the processing module 230, and the processing module 230 binds the components and the data and displays the components and the data on the displayed component view.

In some embodiments, the processing module 230 is specifically configured to: configuring a monitoring function and realizing bidirectional binding of the components and/or the templates and corresponding data through the monitoring function; the listening function is used for listening to data displayed in the components in the page view and data in the data source 150; updating data in the data source 150 bound to the component when changes occur to the data displayed in the component; when a change occurs to data in a data source 150, the data displayed in the components bound to the data source 150 is updated.

In this embodiment, two snoop functions are required, a first snoop function for snooping whether the component changes, and a second snoop function for snooping whether the data in the back-end data source 150 changes.

Specifically, the first monitor function needs to be bound with the component and the corresponding data first, after the binding, the first monitor function can acquire the data displayed in the component view and the data in the data source 150 bound with the component, and when the change of the data displayed in the component view is monitored, the first monitor function acquires the data displayed in the component view and sends the data to the data source 150 for synchronous updating. Similarly, the second monitor function also needs to be bound to the component and the corresponding data, except that the second monitor function monitors whether the data in the data source 150 changes, and if the data in the data source 150 changes, the second monitor data obtains the changed data and transmits the changed data to the display module 210, so that the data displayed in the component view is updated synchronously.

The snoop functions used may use different snoop functions depending on the architecture used by the front-end. For example, assuming that the js frame used by the front-end is vue, the first snoop function may use a watch snoop function or the like, and the second snoop function may use an object.

For example, assuming that a frame adopted by the front end is Vue, a fetch function is used to monitor an input box in a page, and when text data in the input box changes, the fetch function updates the back end data corresponding to the text data in the input box to the text data input in the input box.

In some embodiments, the processing module 230 is further configured to declare a global variable having stored therein common data required by different components. In the actual application process, when different components on the same page need to use a common variable, the variable is defined (declared) as a global variable, and when the component is bound with data in two directions, the variable can be bound to the variable only by including the declaration. After the variable is set as the global variable, in the actual request, the variable is requested only once, the variable obtained after the request is stored in the global variable, the front-end browser locally caches the global variable, and when other components need to call the data, the data only needs to be directly called locally.

It should be noted that, if data is set as a global variable, the first monitor function is bound to the component and the data in the corresponding global variable, and if the data displayed in the component view is updated, the data in the global variable is updated synchronously through the monitor function. Similarly, the second monitoring function monitors whether the data in the global variable changes, and if the data in the global variable changes, the data displayed by the component view also changes synchronously.

In some embodiments, the processing module 230 is further configured to configure a polling time, which is an interval between requests for data from the data source 150. Specifically, when a global variable is declared, polling time is configured, and it should be noted that the polling time refers to an interval time for the global variable to poll the back-end data source 150, that is, the global variable will automatically request data in the back-end data source 150 at every interval of the set polling time, if the data in the back-end data source 150 changes, the data stored in the global variable at the front end will be synchronously updated, and when the second monitoring function monitors that the data in the global variable changes, the data displayed in the component view will be synchronously updated.

Illustratively, FIG. 4 shows a diagram of component data bi-directional bindings and global variables. In FIG. 4, both component A and component B need to request the back-end API-1 interface to get the data, then the data is defined as var1 (Global variable 1). In actual request, it is assumed that the component a requests the data first, the front-end site sends the request to the back-end data source 150 through the back-end API-1 interface to call the data, the data source 150 returns the data to the front-end global variable var1 through the API-1 interface for caching, and the component a directly obtains the data in the global variable var1 according to the binding relationship between the component and the data. When component B also needs to obtain this data, it can be obtained directly in global variable var 1.

In this embodiment, the data source 150 further includes a static data source, and the static data source stores therein static data that the component needs to display.

To promote the friendliness of component presentation, in some embodiments, the processing module 230 is further configured to set default static data for the component and display a default data format for the default static data. The specific implementation is various, for example, default static data and default data format may be filled into the component when the component is created. In this embodiment, the default static data is set by binding the component with the default static data in the static database, and when a listening function listening to the page view editing area monitors that a certain component is dragged to the page view editing area, the listening function calls the default static data bound with the component from a static data source.

In some embodiments, the processing module 230 is further configured to filter and convert the format of the data obtained from the data source 150 into a default data format. Specifically, the format of the data retrieved from the back-end data source 150 is converted to the default data format of the component. In this embodiment, a filter function is employed to format convert the format of the data called from the back-end data source 150.

Specifically, a filter function is used to convert the data format called from the back-end data source 150 into a default data format, and mapping between components and API key values, i.e., mapping between the front-end component configuration attributes and the back-end API return interface data format, is implemented as a logic.

By way of example, fig. 5 shows a schematic diagram of components and API key value mapping in an embodiment of the present application. In fig. 5, assuming that the front-end component attribute names are not consistent, the front-end component attribute names are: ID, the name in the data returned by the back end is: name. Then, a filter function is adopted, the data widget to be acquired by the front end is defined as MAP (K, V), that is, when K is ID, V is key in the back end data set, so as to obtain data "205 _ 99396" corresponding to key in the back end data set, thereby realizing mapping between the component and the API key value, and further realizing conversion of the data format.

To improve page loading efficiency, in some embodiments, the processing module 230 is further configured to determine whether the same component exists in the page view editing area; if so, the post-loaded component uses the rendering data when the component was first loaded. Specifically, whether the same components are used in the same page or not is compared, if the same components exist, in the process of loading and rendering, rendering data obtained by requesting rendering of the components for the first time are stored in a video memory of the GPU, and when the components are loaded later, only the rendering data are directly obtained from the video memory, rendering is not needed again, and therefore the loading efficiency of the page is improved.

In some embodiments, the processing module 230 is specifically configured to: acquiring a DOM structure of the component; comparing whether the ID of the nodes at the same level in the DOM structure is the same; if so, the two components are the same component.

It should be noted that two identical components generate similar DOM structures, and different components may have different DOM structures. And a group of nodes at the same level in the DOM structure can be distinguished by a unique ID.

In this embodiment, whether the same components are used on the same page is determined, and the comparison determination is performed by using a Diff algorithm, and the embodiment uses a double-end comparison algorithm in the Diff algorithm, and the double-end comparison is used, so that the number of times of the mobile node can be reduced, and unnecessary performance loss can be reduced. Specifically, fig. 6 shows a schematic diagram of a double-ended comparison algorithm in the Diff algorithm in the embodiment of the present application. Referring to fig. 6, the DOM structures of all components in the page are obtained first, and after the DOM structures are obtained, comparison is performed simultaneously from the start node newStartldx to the end node newenddx of the new node newCh, and from the start node oldStartldx to the end node oldenddx of the old node oldCh, and IDs of a group of nodes in the same hierarchy are compared. It should be noted that the new node newCh refers to a node in the DOM structure of the unrendered component, and the old node oldCh refers to a node in the DOM structure of the rendered component. And if the DOM structures of the two compared components are the same, the two components are the same component. Note that, two nodes located in the same vertical direction in fig. 6 are nodes of the same hierarchy.

Fig. 7 is a flowchart illustrating a page design method in an embodiment of the present application, and referring to fig. 7, the method includes the following steps:

step 710: and dragging the components or templates in the component template area to the page view editing area.

Step 720: data is obtained from a data source 150.

Step 730: and binding the components and/or the templates with the corresponding data in a bidirectional mode.

In some embodiments, the method further comprises: configuring a monitoring function and realizing bidirectional binding of the components and/or the templates and corresponding data through the monitoring function; the listening function is used for listening to data displayed in the components in the page view and data in the data source 150; updating data in the data source 150 bound to the component when changes occur to the data displayed in the component; when a change occurs to data in a data source 150, the data displayed in the components bound to the data source 150 is updated.

It can be clearly understood by those skilled in the art that, for convenience and brevity of description, the process implemented by the described method may refer to the corresponding module working process in the foregoing designer 140 embodiment, and is not described herein again.

The above description is only a preferred embodiment of the application and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the application referred to in the present application is not limited to the embodiments with a particular combination of the above-mentioned features, but also encompasses other embodiments with any combination of the above-mentioned features or their equivalents without departing from the spirit of the application. For example, the above features may be replaced with (but not limited to) features having similar functions as those described in this application.

Claims

1. A designer, comprising:

the interface module is used for calling data from a data source;

2. The designer according to claim 1, wherein the processing module is specifically configured to:

configuring a monitoring function and realizing bidirectional binding between the component and/or the template and corresponding data through the monitoring function;

the monitoring function is used for monitoring data displayed in the components in the page view and data in the data source; when the data displayed in the component changes, updating the data in the data source bound with the component; when the data in the data source changes, the data displayed in the component bound with the data source is updated.

3. The designer according to claim 1, wherein the processing module is further configured to configure default static data for the component and to display a default data format for the default static data.

4. The designer according to claim 3, wherein the processing module is further configured to filter and convert the format of the data obtained from the data source into the default data format.

5. The designer according to claim 1, wherein the processing module is further configured to declare a global variable having common data stored therein that is required by different components.

6. The designer according to claim 1, wherein the processing module is further configured to configure a polling time, the polling time being an interval time between requests for data from a data source.

7. The designer according to claim 1, wherein the processing module is further configured to determine whether the same component exists in the page view editing area; if so, the post-loaded component uses the rendering data when the component was first loaded.

8. The designer according to claim 7, wherein the processing module is specifically configured to:

acquiring a DOM structure of the component;

comparing whether the ID of the nodes at the same level in the DOM structure is the same;

if so, the two components are the same component.

9. A page design method applying the designer according to claims 1 to 8, comprising:

dragging the components or templates in the component template area to a page view editing area;

acquiring data from a data source;

and binding the components and/or the templates with corresponding data in a bidirectional mode.

10. The page design method according to claim 9, further comprising: