Multi-module display method for realizing multi-scene self-definition in single page

Abstract

The invention provides a multi-module display method for realizing self-definition of multiple scenes in a single page, which comprises the following steps of: S1, defining multiple scenes which comprise unique codes of the scenes and names of the scenes; s2, defining a module library, wherein the module library comprises a unique code of a module, a module name, a module example diagram, a scene list to which the module belongs, a CSS style sheet class name of the module and a module data source; s3, entering a user-defined configuration page, and performing user-defined setting on current scene page configuration; s4, generating a new page for previewing according to the page layout mode of the preview area and the configuration of the module example diagram, and after previewing is completed, clicking an exit button to return to the custom configuration page; s5, storing a user-defined configuration result of the current scene; and S6, going to the stored page, reading a current scene configuration result, and displaying a page layout mode and a module example diagram according to user configuration. According to the method, display of different layouts of the page and display diversification of the same module of different scenes are realized, and the module is flexibly reused.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development, and in particular to a multi-module display method for realizing multi-scene customization in a single page. Background Art

[0002] In the field of front-end development, multi-module display of multiple scenes in a single page is a very common requirement. The current mainstream solution is the following steps: 1) define multiple scenes; 2) define a list of display modules for each scene; 3) obtain the module list of the current scene in the page and render and display it. However, in the process of implementing the technical solution of the invention in the embodiment of the present application, the inventors of the present application found that the above technology has at least the following technical problems: 1) The page layout is fixed and cannot be changed. 2) The list of modules displayed in each scene is fixed, and the module position, module name, and module data source are fixed and cannot be changed. Therefore, although the above commonly used solutions can realize the multi-module display of multiple scenes in a single page, the page layout and content are fixed and cannot be changed, the page flexibility is low, and the page display is single. Summary of the invention

[0003] Purpose of the invention: The purpose of the present invention is to address the deficiencies in the prior art and provide a multi-module display method that realizes customization of multiple scenes in a single page, thereby improving the flexibility and diversity of page display.

[0004] The technical solution provided by the present invention is a multi-module display method for realizing multi-scene customization in a single page, comprising the following steps: S1. Define multiple scenes, including scene unique code, scene name, page layout, referenced module example diagram list and the location where the module example diagram is displayed; S2. Define the module library, which includes the module unique code, module name, module example diagram, module scene list, module CSS style sheet class name, and module data source; S3. Enter the custom configuration page and customize the current scene page configuration. The steps include: S3.1. Set the page layout mode, and finally use the class name of the set page layout mode as the class name of the page, and display the page layout in the preview area; S3.2. Generate a set of candidate modules that can be selected for the current scene according to the scene list field to which the module belongs in the module library, wherein the module name and the module example diagram are displayed in the set of candidate modules; S3.3, monitoring the drag event of the module example image in the module set to be selected, adding the module example image to the preview area through the drag event and placing it in a specific area for display; S3.4, listen to the module example image in the preview area click selection event, rename the module, and set the module data source; listen to the module example image in the preview area delete event, and remove the module example image from the preview area through the delete event; S4. Generate a new page for preview according to the page layout mode of the preview area and the configuration of the module sample diagram. After the preview is completed, click the exit button to return to the custom configuration page; S5. Save the custom configuration result of the current scene; S6. Go to the saved page, read the current scene configuration results, and display the page layout and module example diagram according to the user configuration.

[0005] The technical solution is further limited to pre-defining the default configuration of each scene, including the page layout mode, the list of referenced module example diagrams and the location where the module example diagrams are displayed; when entering the custom configuration page in step S3, the default configuration of the current scene is obtained.

[0006] Furthermore, the page layout mode in the scene setting in step S1 defines five layout modes: 3 columns - large in the middle, 3 columns - large on the left, 3 columns - equal division, 2 columns - large on the left, 2 columns - equal division, and each layout corresponds to a unique CSS style sheet class name: 'layout-three-center', 'layout-three-left', 'layout-three-average', 'layout-two-left', 'layout-two-average'. According to the set page layout mode, the page finally uses the class name of the set layout mode as the class name of the page to achieve a customized layout of the page.

[0007] Furthermore, the CSS style sheet class name of the module in the module library in step S2 is used to control the page height during the configuration of the preview area module in the custom configuration page and to control the height of the module on the actual page, wherein four types of CSS style sheet class names are defined: 'height-one', 'height-two', 'height-three', and 'height-four', with height proportions of 25%, 35%, 62.5%, and 100%, respectively, to achieve module height control.

[0008] Furthermore, in step S3.3, when adding a module example diagram through a drag event, the height of all column positions at the target position is judged, and the height is not allowed to exceed the preview area. The judgment method is: the number of modules in each column does not exceed 3, and it is judged by the length of the modelList data in each column data, that is, modelList.length<= 3, and the total height of the modules in each column modelList shall not exceed 100%.

[0009] Beneficial effects: The present invention proposes a multi-module display method for realizing customization of multiple scenes in a single page. Modules can be selected for display in the current scene module library. The display of page modules is not fixed, and users can customize the configuration. By setting the page layout method, different page layouts can be displayed. At the same time, by adding different modules and setting the display positions of the modules, the diversification of multi-scene module configuration is achieved. Moreover, through the configuration of modules, such as the setting of module names and module data sources, the diversification of the display of the same module in different scenes and the flexible reuse of modules can be achieved. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] Figure 1 It is a flow chart of a multi-module display method for realizing multi-scene customization in a single page provided by the present invention. DETAILED DESCRIPTION

[0011] The technical solution of the present invention is described in detail below with reference to the accompanying drawings, but the protection scope of the present invention is not limited to the embodiments.

[0012] Example 1 The overall idea of ​​the technical solution of the embodiment of the present application is as follows: through the definition of multiple scenes, module libraries, and default configurations for each scene, the default configuration of the current scene is generated by default to ensure that the default configuration is used when the user does not enter the custom configuration page and does not perform custom configuration, thereby completing the display of page modules and page rendering; the user can enter the custom configuration page to perform custom configuration, complete the diversified configuration of page layout and module settings, save the configuration results, and enter the page to achieve multi-scene user-customized page effects.

[0013] A multi-module display method for realizing multi-scenario customization in a single page includes the following steps: S1. Define multiple scenes (SceneSettings), including the scene unique code, scene name, page layout method, referenced module example image list and the location where the module example image is displayed.

[0014] Among them, the page layout mode defines five layout modes: 3 columns - large in the middle, 3 columns - large on the left, 3 columns - equal division, 2 columns - large on the left, 2 columns - equal division, each layout corresponds to a unique CSS style sheet class name (LayoutClassName): 'layout-three-center', 'layout-three-left', 'layout-three-average', 'layout-two-left', 'layout-two-average'. According to the set page layout mode, the page finally uses the class name of the set layout mode as the class name of the page to achieve a custom layout of the page.

[0015] S2. Define the module library (ModelSettings), which includes the module's unique code, module name, module example diagram, module scene list, module's CSS style sheet class name, and module data source.

[0016] Predefine the default configuration (SceneDefConfig) of each scene, including the page layout, the list of referenced module examples, and the location where the module examples are displayed. That is, define the sceneDefConfig folder, in which there are js files named with unique coding corresponding to each scene, which store the default configuration data of the current scene.

[0017] The CSS style sheet class name of the module in the module library is used to control the page height during the module configuration process in the preview area of ​​the custom configuration page, as well as the height control of the module on the actual page. Four types of CSS style sheet class names (ModelClassName) are defined: 'height-one', 'height-two', 'height-three', 'height-four', with height proportions of 25%, 35%, 62.5%, and 100% respectively, to achieve module height control.

[0018] Filter the scene list of the modules in the module library (ModelSettings) to select the module library belonging to the current scene (CurSceneModelList).

[0019] S3. Enter the custom configuration page. When entering the custom configuration page, obtain the default configuration of the current scene.

[0020] To customize the current scene page configuration, the steps include: S3.1. Set the page layout mode, and finally use the class name of the set page layout mode as the class name of the page, and display the page layout in the preview area.

[0021] S3.2. Generate a set of candidate modules that can be selected for the current scene according to the scene list field to which the module belongs in the module library, wherein the module name and module example diagram are displayed in the set of candidate modules.

[0022] S3.3. Listen to the drag event of the module example image in the module set to be selected, add the module example image to the preview area through the drag event and place it in a specific area for display.

[0023] When adding a module sample diagram through a drag event, the height of all columns at the target position is judged, and the height is not allowed to exceed the preview area. The judgment method is: the number of modules in each column does not exceed 3, and it is judged by the length of the modelList data in each column, that is, modelList.length<= 3, and the total height of the modules in each column modelList shall not exceed 100%.

[0024] S3.4. Listen to the module example image in the preview area for click selection events, rename the module, and set the module data source; listen to the module example image in the preview area for deletion events, and remove the module example image from the preview area through the deletion events.

[0025] S4. Generate a new page for preview according to the page layout mode of the preview area and the configuration of the module sample diagram. After the preview is completed, click the exit button to return to the custom configuration page.

[0026] S5. Save the customized configuration result of the current scene.

[0027] S6. Go to the saved page, read the current scene configuration results, and display the page layout and module example diagram according to the user configuration.

[0028] After the user-defined configuration is saved, it is saved to the current scene's custom configuration result (CurSceneResultConfig). If no user-defined configuration is performed, the default configuration in the js file of the current scene in the sceneDefConfig folder is obtained and saved to the current scene's custom configuration result (CurSceneResultConfig).

[0029] In this embodiment, the scheme for realizing multi-scenario user-defined page effects through module configuration includes: S1. Define multiple scenes. In the embodiment, SceneSettings is defined as {sceneA: {sceneCode: 'sceneA', sceneName: 'sceneA'}, sceneB: {sceneCode: 'sceneB', sceneName: 'sceneB'}}; S2. Define the module library. In the embodiment, ModelSettings is defined as [{modelCode:'modelA',modelName:'Module A',modelUrl:' / images / modelA.png',modelScenes:['sceneA'],modelClassName:'height-three',modelData:{}}, {modelCode:'modelB',modelName:'Module B',modelUrl:' / images / modelB.png',modelScenes:['sceneB'],modelClassName:'height-two',modelData:{}}, {modelCode:'modelC',modelName:'Module C',modelUrl:' / images / modelC.png',modelScenes:['sceneA','sceneB'],modelClassName:'height-four',modelData:{}}]; S3. Define the default configuration for each scene. That is, the sceneDefConfig folder contains sceneA.js and sceneB.js files, where sceneA.js is configured as follows: { className: 'layout-two-left', config:[{className:'left',modelList:[configuration data of modelA]},{className:'center',modelList:[configuration data of modelC]}] }; S4. Enter the custom configuration page and read the page configuration of the current scene; The step S4 comprises: S4.1. Obtain the page configuration of the current scene. In the embodiment, the current scene is scene A; S4.2. If the page configuration of the current scene cannot be obtained, the page configuration of the current scene is generated and saved using the defined scene default configuration, that is, CurSceneResultConfig is undefined. At this time, CurSceneResultConfig needs to be saved as the default configuration of sceneA.js; S5. Customize the current scene page configuration; The step S5 comprises: S5.1. You can restore the current scene page configuration to the defined scene default configuration, and save CurSceneResultConfig as the default configuration of sceneA.js; S5.2. The current scene page configuration can be customized; S5.3. Set the page layout mode. This solution defaults to defining five layout modes: three-column - large in the middle, three-column - large on the left, three-column - equal, two-column - large on the left, two-column - equal. Each layout corresponds to a unique CSS style sheet class name: 'layout-three-center', 'layout-three-left', 'layout-three-average', 'layout-two-left', 'layout-two-average'. According to the set page layout mode, the page finally uses the class name of the set layout mode as the class name of the page to achieve the custom layout of the page; S5.4. Generate the current scene module library: Generate a module library available for the current scene according to the module belonging scene list field. The module library displays the module name and the module example diagram. That is, at this time, CurSceneModelList is filtered out according to the modules in modelScenes in ModelSettings that contain'scenesA' to obtain the module library of the current scene containing module A and module C, that is, [{modelCode:'modelA',modelName:'Module A',modelUrl:' / images / modelA.png', modelScenes: ['sceneA'], modelClassName: 'height-three',modelData:{}}, {modelCode:'modelC',modelName:'Module C',modelUrl:' / images / modelC.png',modelScenes:['sceneA','sceneB'],modelClassName: 'height-four',modelData:{}}]; S5.5. Generate the preview area: The preview area is laid out according to the set layout mode, which defaults to 'layout-two-left'. By setting it to two-column - equal, the preview area style is changed to 'layout-two-average'. At this time, the preview area changes from two columns with module A wide and module C narrow to two columns with module A and module C having equal widths; S5.6, Configuration of preview area modules: Delete module C, drag module C to module A, add it to the left column, module A height 62.5%, module C height 100%, the sum of the heights exceeds 100%, adding module C to the left fails and gives a prompt "the current column can no longer accommodate a new module"; select module A, rename it to module AA and set the data source of module AA. Finally, the left data is modelName of modelA in modelList, change it to 'module AA' and modify the modelData field of module AA. The right data modelList is an empty array, that is, { className: 'layout-two-left', config:[{className:'left',modelList:[configuration data of modelA]},{className:'center',modelList:[]}] }; S6. Preview the customized configuration result of the current scene page: the page is divided into two columns with the same width, the left column displays the module name as module AA and displays the latest data according to the modified data source, and the right column is empty; S7, saving the current scene custom configuration result, and saving the current custom result to CurSceneResultConfig; S8. Go to the page, read CurSceneResultConfig, and implement the default configuration of the left and right columns according to the user-defined configuration: the left column is large and displays module A, and the right column is small and displays module C. The page is changed to be divided into left and right columns with the same width. The module name displayed in the left column is module AA and displays the latest data according to the modified data source. The right column is empty, and finally the user-defined page effect is achieved.

[0030] As described above, although the present invention has been shown and described with reference to specific preferred embodiments, it should not be construed as limiting the present invention itself. Various changes in form and details may be made without departing from the spirit and scope of the present invention as defined in the appended claims.

Claims

1. A multi-module display method for realizing multi-scene customization in a single page, characterized in that: The steps include: S1. Define multiple scenes, including scene unique code, scene name, page layout, referenced module example diagram list and the location where the module example diagram is displayed; S2. Define the module library, which includes the module unique code, module name, module example diagram, module scene list, module CSS style sheet class name, and module data source; S3. Enter the custom configuration page and customize the current scene page configuration. The steps include: S3.

1. Set the page layout mode, and finally use the class name of the set page layout mode as the class name of the page, and display the page layout in the preview area; S3.

2. Generate a set of candidate modules that can be selected for the current scene according to the scene list field to which the module belongs in the module library, wherein the module name and module example diagram are displayed in the set of candidate modules; S3.3, monitoring the drag event of the module example image in the module set to be selected, adding the module example image to the preview area through the drag event and placing it in a specific area for display; S3.4, listen to the module example image in the preview area click selection event, rename the module, and set the module data source; listen to the module example image in the preview area delete event, and remove the module example image from the preview area through the delete event; S4. Generate a new page for preview according to the page layout of the preview area and the configuration of the module sample diagram. After the preview is completed, click the exit button to return to the custom configuration page. S5. Save the custom configuration result of the current scene; S6. Go to the saved page, read the current scene configuration results, and display the page layout and module example diagram according to the user configuration.

2. According to claim 1, a multi-module display method for realizing multi-scene customization in a single page is characterized in that: The default configuration of each scene is predefined, including the page layout mode, the list of referenced module example diagrams, and the location where the module example diagrams are displayed; when entering the custom configuration page in step S3, the default configuration of the current scene is obtained.

3. According to claim 1, a multi-module display method for realizing multi-scene customization in a single page is characterized in that: The page layout mode in the scene setting described in step S1 defines five layout modes: 3 columns - large in the middle, 3 columns - large on the left, 3 columns - equal division, 2 columns - large on the left, and 2 columns - equal division. Each layout corresponds to a unique CSS style sheet class name: 'layout-three-center', 'layout-three-left', 'layout-three-average', 'layout-two-left', and 'layout-two-average'. According to the set page layout mode, the page finally uses the class name of the set layout mode as the class name of the page to achieve a custom layout of the page.

4. According to claim 1, a multi-module display method for realizing multi-scene customization in a single page is characterized in that: The CSS style sheet class name of the module in the module library in step S2 is used to control the page height during the configuration of the preview area module in the custom configuration page and the height control of the module on the actual page. Four types of CSS style sheet class names are defined: 'height-one', 'height-two', 'height-three', and 'height-four', with height proportions of 25%, 35%, 62.5%, and 100% respectively, to achieve module height control.

5. According to claim 3, a multi-module display method for realizing multi-scene customization in a single page is characterized in that: In step S3.3, when adding a module example diagram through a drag event, the height of all column positions at the target position is judged, and the height is not allowed to exceed the preview area. The judgment method is: the number of modules in each column does not exceed 3, and it is judged by the length of the modelList data in each column data, that is, modelList.length <= 3, and the total height of the modules in each column modelList shall not exceed 100%.

Images