CN116860357A - Dynamic adjustment method, equipment and medium for page - Google Patents
Dynamic adjustment method, equipment and medium for page Download PDFInfo
- Publication number
- CN116860357A CN116860357A CN202310896587.8A CN202310896587A CN116860357A CN 116860357 A CN116860357 A CN 116860357A CN 202310896587 A CN202310896587 A CN 202310896587A CN 116860357 A CN116860357 A CN 116860357A
- Authority
- CN
- China
- Prior art keywords
- sub
- component
- components
- json
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 51
- 230000006870 function Effects 0.000 claims abstract description 37
- 238000011161 development Methods 0.000 claims abstract description 21
- 238000013461 design Methods 0.000 claims abstract description 17
- 238000013507 mapping Methods 0.000 claims abstract description 8
- 230000003068 static effect Effects 0.000 claims description 15
- 238000013079 data visualisation Methods 0.000 claims description 6
- 238000004806 packaging method and process Methods 0.000 claims description 6
- 238000003032 molecular docking Methods 0.000 claims description 3
- 238000012360 testing method Methods 0.000 abstract description 7
- 230000018109 developmental process Effects 0.000 description 15
- 238000010586 diagram Methods 0.000 description 10
- 238000004590 computer program Methods 0.000 description 7
- 230000000694 effects Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 238000004519 manufacturing process Methods 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000007726 management method Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000010354 integration Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 238000012356 Product development Methods 0.000 description 1
- 230000002457 bidirectional effect Effects 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000012905 input function Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009517 secondary packaging Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The application discloses a dynamic page adjusting method, equipment and a medium, wherein the method comprises the following steps: generating a file reading script based on the front-end development framework; splitting the page design into a plurality of sub-components, encapsulating and encoding the sub-components into independent components, and defining variables and functions for the sub-components; defining a JSON text format corresponding to the JSON file, and mapping the JSON file and the corresponding sub-component; generating a dynamic loading component and registering the dynamic loading component in a designated module; and acquiring user requirements, and analyzing the designated JSON file through a dynamic loading component to realize dynamic adjustment of the page. Based on a front-end development framework, the JSON file is dynamically converted into a front-end component required by a page, the function page can be dynamically adjusted by utilizing JSON after software is packaged and released, re-development and testing are not needed, a large amount of source code development cost is saved, and the lead time is saved.
Description
Technical Field
The present application relates to the field of computers, and in particular, to a method, an apparatus, and a medium for dynamically adjusting a page.
Background
Along with the development and perfection of industrial software, more and more traditional manufacturing enterprises are gradually advancing the informatization transformation of home factories or production lines, and large-screen industrial software is applied in the production process.
In recent years, the interfaces of web sites and software in the civil Internet field are more attractive and easy to use, the functional integration level is also continuously improved, and the trend is inevitably conducted to the industrial software field. Both software vendors and clients expect the functional interfaces to be more attractive and easy to use, and the demands for highly integrated large screen functions such as large screen signboards, integrated cabins, management and control centers, data integration platforms and the like are significantly increased.
For software developers, the number of clients facing the software developers is huge, and the camping services of the clients can be quite different, so that the requirements on the aspects of functional logic, data sources, display items, index measurement and the like are quite different, the clients generally have personalized preference, and the large screen used by the clients is expected to be capable of fitting the service characteristics on the basis of attractive appearance and easiness.
If the traditional product development logic is used, the product source code is modified every time a customer is added, a brand new functional page is developed for the new customer, and then packaging, testing and final delivery are carried out. This is prone to the following problems:
1. the new functions are costly to develop and test, and lead times are long.
2. The coexistence problem of different custom functions, how to effectively manage custom functions for multiple customers while increasing the number of customers.
Disclosure of Invention
In order to solve the above problems, the present application provides a method for dynamically adjusting a page, including:
generating a file reading script for reading a JSON file in a front-end static folder based on a front-end development framework, and mounting the file reading script into a front-end project;
splitting a page design into a plurality of sub-components, packaging and encoding the sub-components into independent components based on a generated chart component for a docking data visualization chart library, defining variables and functions of the sub-components, and registering the sub-components into a module;
defining a JSON text format corresponding to the JSON file, perfecting the corresponding JSON file based on the JSON text format and the plurality of sub-components split in the page design, and mapping the JSON file and the corresponding sub-components;
generating a dynamic loading component, and registering the dynamic loading component into a designated module, wherein the dynamic loading component is used for dynamically loading the sub-component;
acquiring user requirements, determining a designated sub-component for realizing the user requirements, reading a designated JSON file corresponding to the designated sub-component through the file reading script, and analyzing the designated JSON file through the dynamic loading component to realize dynamic adjustment of pages.
On the other hand, the application also provides a dynamic page adjusting device, which comprises:
at least one processor; the method comprises the steps of,
a memory communicatively coupled to the at least one processor; wherein,,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform operations such as: the page dynamic adjustment method described in the above example.
In another aspect, the present application also provides a non-volatile computer storage medium storing computer-executable instructions configured to: the page dynamic adjustment method described in the above example.
The dynamic adjustment method of the page provided by the application has the following beneficial effects:
based on a front-end development framework, the JSON file is dynamically converted into a front-end component required by a page, the function page can be dynamically adjusted by utilizing JSON after software is packaged and released, re-development and testing are not needed, a large amount of source code development cost is saved, and the lead time is saved. By means of the characteristic that the JSON files are easy to manage and adjust, the hidden trouble of redundancy of multi-version customized functional codes is avoided, one client uses one JSON file package and does not need to be contained in source codes, the source codes are only one set, and the difficulty and cost of multi-client branch maintenance and management are reduced. And because the original component script is directly converted, the iframe technology is not involved, the development cost can be reduced, and the page performance and the user experience can be ensured.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this specification, illustrate embodiments of the application and together with the description serve to explain the application and do not constitute a limitation on the application. In the drawings:
FIG. 1 is a flow chart of a method for dynamically adjusting pages according to an embodiment of the present application;
FIG. 2 is an overall flowchart of a method for dynamically adjusting pages in a scenario provided in an embodiment of the present application;
FIG. 3 is a flowchart of file parsing by a dynamic loading component in one scenario provided in an embodiment of the present application;
fig. 4 is a schematic diagram of a dynamic adjustment device for a page according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be clearly and completely described below with reference to specific embodiments of the present application and corresponding drawings. It will be apparent that the described embodiments are only some, but not all, embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
In the process of customizing and developing the new function of the front end, the code is easy to cause redundancy, the development cost is high, the delivery period is long, even if all types of components are completely abstracted, the multiplexing work is simplified, and the dynamic source code, packaging and testing are still needed until the final delivery is realized when the page is added or modified. For example, a first home page may be developed for client A and a second home page for client B, where additional logic may be developed to control the visibility of multiple custom pages to different users. Because of the coexistence of more page codes, the complexity is improved, the software volume is increased, and the software obtained by the client A actually contains codes customized and developed for the client B, so that redundancy is caused.
Based on this, the technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.
As shown in fig. 1, a method for dynamically adjusting a page according to an embodiment of the present application includes:
s101: based on the front-end development framework, generating a file reading script for reading the JSON file in the front-end static folder, and mounting the file reading script into the front-end project.
Fig. 2 is an overall flowchart of a method for dynamically adjusting pages in a scenario according to an embodiment of the present application, and is explained below with reference to fig. 1 and fig. 2.
The front-end development framework may include an Angular framework through which the software front-end basic functionality is built. The method and the database for constructing the software back end are not limited, the back end is an api interface relative to the front end, the data is mainly obtained in the form of an http request, and the default interface is available. And the front end and the back end are normally communicated by default, the port is open, the problems of cross-domain and ultra-long content request are avoided, and the user login and the basic functions of the system normally operate.
In addition to the Angular framework, front-end development can be often performed by means of iframe and source code development.
For iframe, each time a function page needs to be newly developed, then an effect is achieved by linking different iframes or replacing static page files, the required development workload is large, the iframes have the disadvantages of performance and page refreshing naturally, particularly interfaces with more visual special effects are poor in performance, and user experience is affected.
For source code development, each new functional page needs to be newly developed and used as a new page, codes of all functional pages are contained in a software package, the code management workload is large, the error risk is higher, additional developed functional display control logic is generally needed, the whole development workload is large, and in addition, the code redundancy can increase the software volume.
Based on the method, when the Angular framework is selected, the Angular is provided with the function of dynamically loading the sub-assembly, so that the sub-assembly can be loaded at the designated DOM element position, the performance and the effect can meet the use requirement of the production environment, and a part of development work is omitted. The scheme extracts the common sub-components to code, and develops and appends the common sub-components when the common sub-components are used for new types of sub-components, and the sub-components can be flexibly combined into different functions. I.e., develop a good sub-component template, dynamically render the required sub-components at the target DOM element. The sub-components are provided with information such as positions, sizes and the like, and are orderly distributed in the target DOM. According to practical experience, the form of the large-screen sub-assembly can be summarized into several large categories, and a very individual assembly needs to be independently developed no matter what scheme is used, and the large-screen sub-assembly belongs to special cases. The scheme can save the cost of writing similar sub-components, each sub-component is written once, the sub-components are basically not required to be changed after the test is passed, the components are still arranged in the source code, the attribute parameters of the components are designated, and the like, so that different functions can be pieced together, and then the sub-components are packaged, tested and released, and cannot be modified and adjusted after the test is released. In practice, the custom function is repeated for reasons other than various developments, and the adjustment details are restored back to the nonsensical operations, so that the developer is occupied to modify the source code every time, which is very heavy and time-consuming.
The technology of peripheral plug-in, deployment form, containerization, micro-service and the like can be used based on the requirements of users, the application is not affected, and the front end deployment mode of the nginx is used by default. When the industry-related plug-in is used in the actual software, a browser of the Chrome kernel can be used for browsing the front-end page.
One or more static folders are arranged in the front end, wherein the front ends of JSON files such as css, JSON and the like can be directly accessed, and the default folder name is set as an assembly.
Based on JavaScript programming, a file read script (also called JSON read script as shown in FIG. 2) is generated, and the file read script reads the JSON file in the front-end static folder in the mode of ajax request. The JSON file in the application can be stored in a front-end static folder or a database through a rear end, and if the JSON file is positioned in the database, the JSON file is requested to be read from the rear end when the JSON file cannot be read.
And mounting the file reading script into the front-end project, and leading the file reading script into effect.
S102: splitting the page design into a plurality of sub-components, and based on the generated diagram components for the docking data visualization diagram library, packaging and encoding the sub-components into independent components, defining variables and functions for the sub-components, and registering the sub-components in the module.
For the Angular framework, which can utilize a self-contained front-end routing suite or other feasible method to split the page design, the page design is illustrated in the embodiment of the present application by taking the front-end panel as an example. When the Angular component is created, it is associated to the home page route, and navigation can be opened normally, where the home page is a blank page with no content.
Specifically, based on the design dimension and the function dimension, splitting the target function contained in the page design into a plurality of subassemblies, taking a home sign as an example, wherein the subassemblies comprise at least one of a pie chart, a bar chart, a line chart, a progress bar, a percentage dashboard, a scroll form, a map, a word cloud chart and a three-dimensional model display window. And for sub-components with data input functions, text boxes, options down, checkboxes, time and date selections down, etc. are included.
The universal component based on Echarts is written and generated as a chart component for interfacing a data visualization chart library, and a complete set of configuration parameters prescribed by the official of Echarts can be imported in the chart component. On this basis, echarts often use chart components for secondary packaging, such as a folded-column pie chart component, etc. The other components, such as the video playing component, the 3d showing component and the map component, can be independently developed.
The sub-assembly exposes necessary parameters to facilitate the parameter transmission adjustment assembly.
The subcomponent package is encoded into an independent component, the Echarts class diagram subcomponent is obtained by secondarily packaging a general component, and only necessary parameters are opened, for example, a pie chart component is packaged, background color, array variables, size, events responding to mouse interaction and the like can be extracted as variables, and the style and the characteristics of the component are changed by changing the parameters.
And define the variables and functions in all sub-components as consistent variable names or function names. For example, the titles of all sub-components correspond to the variable title, the component width and height correspond to the variables width and height, the access interface links correspond to the variable api, the event corresponds to the function onInit () after loading is completed, the mouse click event corresponds to onClick (), and so on. Of course, each component may also have its own unique attribute, such as the latitude and longitude of the map component, the form component may involve paging, etc.
And for the bidirectional binding of the component attribute and the variable and the corresponding relation of the component event and the function, the method can be realized based on the basic characteristic of Angular. In addition, a general access method can be written, the back end can be requested to acquire data by giving access url and parameter transmission, and when a new access interface is developed, the returned data format needs to be ensured to be consistent with the previous one, so that the front end code needs to be prevented from being modified.
And determining the sub-components belonging to the same class in the sub-components, and registering the sub-components belonging to the same class in the same module. For example, subcomponents such as a pie chart, a bar chart, a line chart, a progress bar and the like belong to the large screen display function, and the subcomponents are registered in the same module, so that the subcomponents are convenient to import in use.
S103: defining a JSON text format corresponding to the JSON file, perfecting the corresponding JSON file based on the JSON text format and the plurality of sub-components split in the page design, and mapping the JSON file and the corresponding sub-components.
Customizing JSON text writing through a JSON text format, determining the structure and meaning of the JSON file according to a naming specification corresponding to the JSON text format, determining the meaning of the key, for example, in the code writing process, the first layer corresponds to the whole page, the key of the first layer corresponds to certain attributes of the whole page, the child represents each sub-component in the child ns, the title of each sub-component refers to a title to be displayed by the component, the type represents the type of the component, the height represents the height of the component, and the api designates an independent access interface of the sub-component.
And defining a data structure of the JSON file, and defining a mapping relation between a key of the JSON file and information in a home page main component, wherein for example, a 'timer' corresponds to a refreshing frequency and a 'bg' corresponds to the whole home page background. The data structure of the JSON file is specified, and the mapping relation between the key of the JSON file and the sub-component information is specified, for example, the data source of the sub-component corresponds to "data" and the type of the sub-component corresponds to "type".
After the JSON files and the corresponding sub-components are mapped, a mapping relation is established, and different JSON files correspond to different sub-components.
The obtained JSON file can be used as a follow-up template, the number of changes after the first forming and finalizing is not great, and a new key and corresponding code logic are added according to new requirements of the project. By utilizing a visual JSON editing tool or js JSON serialization characteristic, the writing efficiency can be improved. Assuming that the home page reads a static file named index. Json, modifying or replacing this file can change the home page content without moving source code unless there is a new type of sub-component to be developed additionally. Different home page function pages can be obtained by matching different JSON texts.
When the JSON file is perfected, the value of the JSON is perfected according to a customization target, for example, "timer" 5000 represents 5s refreshing data, and "bg" 000000 "represents that the background of the whole page is black.
In addition, if there is a newly added sub-component type, it is appended in the source code and corresponding expansion is done in JSON.
S104: and generating a dynamic loading component, and registering the dynamic loading component into a designated module, wherein the dynamic loading component is used for dynamically loading the sub-component.
The dynamic loading component (also referred to as a core translation component, as shown in fig. 2) may be generated based on Angular, which is registered into a certain module (referred to herein as a designated module). The dynamic loading component can be directly written in the home page first and then needs to be disassembled later.
S105: acquiring user requirements, determining a designated sub-component for realizing the user requirements, reading a designated JSON file corresponding to the designated sub-component through the file reading script, and analyzing the designated JSON file through the dynamic loading component to realize dynamic adjustment of pages.
The user needs to make adjustments to the page design, such as adding or deleting a sub-component. At this time, different JSON files are provided for different clients and are sent out in the front-end static folder of the software package, or the JSON files are modified and replaced by implementation personnel to the site according to the requirements of the clients.
In particular, as shown in FIG. 3, a designated sub-component for fulfilling the user's needs to be determined, the designated sub-component may be one or more. The sub-components and the JSON files have corresponding mapping relations, and the designated JSON files corresponding to the designated sub-components are read through the file reading script.
And determining a dynamic loading component generated based on Angular, calling a function pin of the dynamic loading component, and reading a static file into a JSON character string corresponding to the designated JSON file. The JSON string is deserialized to obtain Object variables (also called component variables as shown in fig. 3), which are named here as panel, and the panel variables are parsed to obtain the information they contain. And the JSON string can be saved to the database, and at this time, the function of importing and saving JSON needs to be developed.
First layer information contained in the page is analyzed and obtained, the first layer information comprises integral attributes of the page design, the integral attributes comprise at least one of integral background, integral title and integral refresh interval, and integral characteristics such as background, title setting, refresh interval setting and the like can be set according to the information.
The second layer information is then parsed to obtain the second layer information, where the second layer information includes sub-component information corresponding to a specified sub-component, and generally should be an array, where the array includes a plurality of element variables (as shown in fig. 3, also referred to as array elements), and each element variable corresponds to a sub-component.
The array is cycled through based on the dynamic loading component generated by Angular. The "type" field is used as a designated field to refer to the type of the sub-component, and the sub-component instance dynamically loads the corresponding sub-component instance through the "type" field, and the sub-component instance can be rendered in a container, and attributes of each element variable are assigned to the corresponding sub-component instance, such as title, height, weight, api, data, and the like. After the full cycle traversal is completed, the page renders all the sub-components.
In one embodiment, aiming at the JSON file, deleting the sub-component elements contained in the JSON file, modifying the corresponding attribute values to obtain a new same-name JSON file, replacing the JSON file in the front-end static folder with the new same-name JSON file, and refreshing the page to obtain a new functional page.
As shown in fig. 4, the embodiment of the present application further provides a device for dynamically adjusting a page, including:
at least one processor; the method comprises the steps of,
a memory communicatively coupled to the at least one processor; wherein,,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform operations such as: the method for dynamically adjusting a page in any of the embodiments described above.
The embodiment of the application also provides a nonvolatile computer storage medium, which stores computer executable instructions, wherein the computer executable instructions are configured to: the method for dynamically adjusting a page in any of the embodiments described above.
The embodiments of the present application are described in a progressive manner, and the same and similar parts of the embodiments are all referred to each other, and each embodiment is mainly described in the differences from the other embodiments. In particular, for the apparatus and medium embodiments, the description is relatively simple, as it is substantially similar to the method embodiments, with reference to the section of the method embodiments being relevant.
The devices and media provided in the embodiments of the present application are in one-to-one correspondence with the methods, so that the devices and media also have similar beneficial technical effects as the corresponding methods, and since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media are not repeated here.
It will be appreciated by those skilled in the art that embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In one typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include volatile memory in a computer-readable medium, random Access Memory (RAM) and/or nonvolatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media.
Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. Computer-readable media, as defined herein, does not include transitory computer-readable media (transmission media), such as modulated data signals and carrier waves.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article or apparatus that comprises the element.
The foregoing is merely exemplary of the present application and is not intended to limit the present application. Various modifications and variations of the present application will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. which come within the spirit and principles of the application are to be included in the scope of the claims of the present application.
Claims (10)
1. A dynamic page adjustment method is characterized by comprising the following steps:
generating a file reading script for reading a JSON file in a front-end static folder based on a front-end development framework, and mounting the file reading script into a front-end project;
splitting a page design into a plurality of sub-components, packaging and encoding the sub-components into independent components based on a generated chart component for a docking data visualization chart library, defining variables and functions of the sub-components, and registering the sub-components into a module;
defining a JSON text format corresponding to the JSON file, perfecting the corresponding JSON file based on the JSON text format and the plurality of sub-components split in the page design, and mapping the JSON file and the corresponding sub-components;
generating a dynamic loading component, and registering the dynamic loading component into a designated module, wherein the dynamic loading component is used for dynamically loading the sub-component;
acquiring user requirements, determining a designated sub-component for realizing the user requirements, reading a designated JSON file corresponding to the designated sub-component through the file reading script, and analyzing the designated JSON file through the dynamic loading component to realize dynamic adjustment of pages.
2. The method according to claim 1, wherein generating a file reading script for reading JSON files in a front-end static folder and mounting the file reading script into a front-end item, in particular comprises:
writing based on JavaScript language, generating a file reading script, and reading a JSON file in a front-end static folder by the file reading script in an ajax request mode;
mounting the file reading script into a front-end project;
if the JSON file is located in the database, when the JSON file cannot be read, requesting to read the JSON file from the rear end.
3. The method of claim 1, wherein splitting the page design into a plurality of sub-components, comprises:
based on design dimension and function dimension, divide into a plurality of subassemblies with the target function that contains in the home page billboard, the home page billboard belongs to page design, the subassembly includes at least one of pie chart, cylindric chart, line graph, progress bar, percentage panel board, roll table, map, word cloud picture, three-dimensional model show window.
4. The method according to claim 1, characterized in that, based on the generated graph components for interfacing the data visualization graph library, the sub-component packages are encoded into independent components, and the sub-components are defined as variables and functions and registered in modules, in particular comprising:
writing and generating a universal component based on Echarts as a chart component for interfacing a data visualization chart library;
encoding the sub-component packages into independent components, and defining variables and functions in all the sub-components as consistent variable names or function names;
and determining the sub-components belonging to the same class in the sub-components, and registering the sub-components belonging to the same class in the same module.
5. The method according to claim 1, wherein parsing the specified JSON file by the dynamic loading component specifically comprises:
determining dynamic loading components generated based on Angular;
invoking a function pin of the dynamic loading component to acquire a JSON character string corresponding to the designated JSON file;
performing deserialization on the JSON character string to obtain an Object variable;
and analyzing the Object variable to acquire the information contained in the Object variable.
6. The method according to claim 5, wherein parsing the Object variable to obtain information contained therein comprises:
analyzing the Object variable to acquire first-layer information contained in the Object variable, wherein the first-layer information comprises integral attributes of the page design, and the integral attributes comprise at least one of integral background, integral title and integral refresh interval;
and analyzing the Object variable to acquire second-layer information contained in the Object variable, wherein the second-layer information comprises sub-component information corresponding to the appointed sub-component.
7. The method of claim 6, wherein parsing the Object variable to obtain the second layer information contained therein, specifically comprises:
based on the dynamic loading component generated by Angular, circularly traversing an array, wherein the array comprises a plurality of element variables, and each element variable corresponds to one sub-component;
and dynamically loading the corresponding sub-component instance through a designated field representing the sub-component type, and assigning the attribute of the element variable to the corresponding sub-component instance.
8. The method according to claim 1, wherein the method further comprises:
aiming at the JSON file, deleting the sub-component elements contained in the JSON file, and modifying the corresponding attribute values to obtain a new JSON file with the same name;
replacing the JSON file in the front-end static folder with the new JSON file with the same name;
and refreshing the page to obtain a new functional page.
9. A dynamic adjustment device for a page, comprising:
at least one processor; the method comprises the steps of,
a memory communicatively coupled to the at least one processor; wherein,,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform operations such as: a method of dynamically adjusting a page as claimed in any one of claims 1 to 8.
10. A non-transitory computer storage medium storing computer-executable instructions, the computer-executable instructions configured to: a method of dynamically adjusting a page as claimed in any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310896587.8A CN116860357A (en) | 2023-07-20 | 2023-07-20 | Dynamic adjustment method, equipment and medium for page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310896587.8A CN116860357A (en) | 2023-07-20 | 2023-07-20 | Dynamic adjustment method, equipment and medium for page |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116860357A true CN116860357A (en) | 2023-10-10 |
Family
ID=88233962
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310896587.8A Pending CN116860357A (en) | 2023-07-20 | 2023-07-20 | Dynamic adjustment method, equipment and medium for page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116860357A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117910438A (en) * | 2024-03-13 | 2024-04-19 | 江苏中威科技软件***有限公司 | Dynamic format file DLF generation device |
-
2023
- 2023-07-20 CN CN202310896587.8A patent/CN116860357A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117910438A (en) * | 2024-03-13 | 2024-04-19 | 江苏中威科技软件***有限公司 | Dynamic format file DLF generation device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105574049B (en) | Page processing method, device and system for mobile application | |
| US7752536B2 (en) | Designating, setting and discovering parameters for spreadsheet documents | |
| CN112463124B (en) | System for realizing one-time design thousand-face display based on metadata model | |
| US8863083B2 (en) | Presenting user interfaces based on messages | |
| CN102360296A (en) | WEB-based online form development tool | |
| CN104111826A (en) | Software project development method and device | |
| WO2016066048A1 (en) | Method, apparatus and system for updating web application | |
| CN114510231A (en) | Application construction method, device, equipment and computer readable storage medium | |
| CN111459501B (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| CN112632437A (en) | Webpage generating method and device and computer readable storage medium | |
| US20110055066A1 (en) | System and Method for Enabling Financial Planning | |
| US20210006515A1 (en) | Conversation-Enabled Document System and Method | |
| US20170039040A1 (en) | Integrated development environment with multiple editors | |
| CN115964038A (en) | Low code development method based on dual-model drive | |
| CN103646023A (en) | Page and control increasing method based on WEB | |
| US20110161325A1 (en) | System, method and computer-readable storage medium for generation and remote content management of compiled files | |
| CN116860357A (en) | Dynamic adjustment method, equipment and medium for page | |
| CN111367514B (en) | Page card development method and device, computing device and storage medium | |
| CN116301856B (en) | Design method, device, equipment and medium of visual form designer | |
| CN112631587B (en) | Interface prototype design method, interface prototype operation method, and storage medium | |
| CN114281463A (en) | Form interface format configuration and interface display method, equipment and medium | |
| CN111858595A (en) | Dynamic configuration method and system for electric power engineering examination record table | |
| US11093572B2 (en) | Hierarchical modeling for network sites | |
| CN111367515B (en) | Page card development method, device, computing equipment and storage medium | |
| CN113703743B (en) | Page configuration method and device, page rendering method, client and server |
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 |