CN113821749A - Page generation method based on JS real-time analysis and computer - Google Patents
Page generation method based on JS real-time analysis and computerDownload PDFInfo
- Publication number
- CN113821749A CN113821749ACN202111168817.6ACN202111168817ACN113821749ACN 113821749 ACN113821749 ACN 113821749ACN 202111168817 ACN202111168817 ACN 202111168817ACN 113821749 ACN113821749 ACN 113821749A
- Authority
- CN
- China
- Prior art keywords
- page
- data source
- visual
- mapping model
- json
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9535—Search customisation based on user profiles and personalisation
- 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)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
Description
Technical Field
The invention relates to the technical field of page generation, in particular to a method and a computer for generating a page based on JS real-time analysis.
Background
The visualized page is a file organized according to an HTML format, and when the page is accessed through a browser, the visualized page appears in the form of an HTML format visualized page, which may include information such as graphics, text, data, and the like. In the prior art, before a visual page is accessed and displayed through a browser, a page configuration is converted into an HTML file through a page generation unit; exporting the HTML file generated by the page generating unit to the local through a page exporting unit to form an executable web program; and finally, deploying the Web program to a server, and enabling a user to run the Web program through a browser to generate a visual page. The process steps are complicated, the page updating efficiency is low, namely, when the page configuration content is modified, the browser end cannot be updated in real time, and the requirements of the medical industry on the real-time, efficient, simple and convenient service of the page cannot be met.
Disclosure of Invention
Based on the technical problems, the invention aims to provide a page generation method based on JS real-time analysis and a computer, so as to achieve the purposes of simplifying the page generation steps, improving the page updating efficiency, meeting the real-time, efficient, simple and convenient service requirements of the medical industry on page generation and improving the user experience.
The embodiment of the invention provides a webpage generation method based on JS real-time analysis, which is used for generating a visual webpage and is characterized in that the visual webpage comprises format content and data content, and the webpage generation method comprises the following steps:
acquiring the ID of the visual page;
acquiring a Json program package of the visual page according to the visual page ID;
analyzing the Json program package of the visual page in real time through the JS language to obtain a page component of the visual page and a configuration data source bound with the page component;
rendering and generating the format content according to the page component and the Json program package of the visual page;
acquiring the data content according to the configuration data source bound with the page component;
and loading the data content into the page component bound with the configuration data source to generate the visual page.
Preferably, the Json program package of the visual page is generated by a page configuration system, and comprises the page components and attribute configuration, wherein,
the page component comprises a preset component and/or a user configuration component and is used for forming the format content of the visual page;
the attribute configuration comprises a display style and an event, wherein the display style is used for setting the format content of the visual page, and the event comprises the binding of the page component and the configuration data source and is used for setting the data content of the visual page.
Preferably, the Json package of the visualization page further comprises a mapping model, the mapping model comprises the configuration data source, the query data source and a mapping relation, wherein,
the configuration data source is a data source obtained by mapping through the mapping model;
the query data source comprises one or more of a service system database, a data table and a field;
and the mapping relation binds the configuration data source and the query data source and sends the query data of the query data source to the configuration data source.
Preferably, the method for generating the format content by rendering according to the page component and the result of the Json program package real-time parsing of the visualization page includes:
analyzing and acquiring the display style in the attribute configuration of the visual page in the Json program package of the visual page in real time through JS language;
analyzing and acquiring the position layout of the page components in the Json program package of the visual page in real time through a JS language;
analyzing and acquiring the display style in the attribute configuration of the page component in the Json program package of the visual page in real time through JS language;
rendering and generating the format content of the visual page according to the display style aiming at the visual page, the page component, the position layout of the page component and the display style aiming at the page component.
Preferably, the method for obtaining the data content according to the configuration data source bound to the page component includes:
acquiring the corresponding mapping model according to the configuration data source bound with the page component;
acquiring the query data source according to the configuration data source and the mapping model bound with the page component;
sending the query data in the query data source to the configuration data source via the mapping relationship in the mapping model;
and directly generating the data content from the query data sent to the configuration data source, or generating the data content through function processing.
Preferably, each mapping model corresponds to a segment of a mapping model Json program statement and corresponds to a mapping model ID, the mapping model ID is used for identifying the mapping model, and the mapping model Json program statement and/or the mapping model ID are contained in the Json package of the visualization page.
Preferably, the mapping model Json program statement includes the mapping model ID and is used to describe and identify the mapping model, and the mapping model Json program statement is included in the visualization page Json program package.
Preferably, the method for obtaining the query data source according to the configuration data source bound to the page component and the mapping model includes:
analyzing the Json program statements of the mapping model in the Json program package of the visual page in real time through JS language to obtain all the mapping relations in the mapping model;
and searching and acquiring the corresponding query data source in all the mapping relations according to the configuration data source bound with the page component.
Preferably, the method for obtaining the query data source according to the configuration data source bound to the page component and the mapping model includes:
analyzing the Json program package of the visual page in real time through JS language to obtain the ID of the mapping model;
acquiring a Json program statement of the mapping model through the ID of the mapping model;
analyzing Json program statements of the mapping model in real time through JS language to obtain all the mapping relations in the mapping model;
and searching and acquiring the corresponding query data source in all the mapping relations according to the configuration data source bound with the page component.
In order to solve the foregoing technical problem, an embodiment of the present invention further provides a computer, including a memory, a processor, and a computer program that is stored in the memory and is executable on the processor, where the computer program executed by the processor includes any one of the above-mentioned page generation methods based on JS real-time parsing.
Compared with the prior art, the technical scheme of the embodiment of the invention has the following beneficial effects:
by acquiring the ID of the visual page and then directly acquiring the Json program package of the visual page, the complex process that a page configuration system needs to generate an HTML file independently firstly, then the HTML file is exported to the local and finally an executable web program is formed in the prior art is omitted; this application is because JS language is real-time to be analyzed visual page Json procedure package, real-time generation visual page can acquire latest visual page Json procedure package in real time when the page configuration content is revised, analyzes in real time and generates latest visual page configuration content, acquires and show multiple data in real time, when improving page update efficiency, has richened visual page content, can satisfy the medical industry and generate real-time, high-efficient, simple and convenient business demand to the page.
Drawings
FIG. 1 is a schematic flowchart illustrating a method for generating a page based on JS real-time parsing in an embodiment;
FIG. 2 is a schematic diagram illustrating an embodiment of a process for generating content in a visual page format based on JS real-time parsing rendering;
FIG. 3 is a schematic diagram illustrating an embodiment of a process for obtaining data content of the visualized page based on JS real-time parsing;
FIG. 4 is a schematic diagram illustrating a process of obtaining a query data source of the data content based on JS real-time parsing in one embodiment;
fig. 5 is a schematic flow chart of querying a data source to obtain data content based on JS real-time parsing in another embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
Fig. 1 is a schematic flowchart of a page generation method based on JS real-time parsing in an embodiment. The method is used for generating a visualization page, as one embodiment, the visualization page includes format content and data content, as shown in fig. 1, and the page generation method includes:
step S101: acquiring the ID of the visual page;
step S102: acquiring a Json program package of the visual page according to the visual page ID;
step S103: analyzing the Json program package of the visual page in real time through the JS language to obtain a page component of the visual page and a configuration data source bound with the page component;
step S104: rendering and generating the format content according to the page component and the Json program package of the visual page;
step S105: acquiring the data content according to the configuration data source bound with the page component;
step S106: and loading the data content into the page component bound with the configuration data source to generate the visual page.
Specifically, the visualized page generated by the JS real-time analysis-based page generation method not only includes format contents such as pictures, characters, text boxes, labels, buttons, colors, backgrounds, display proportions, but also includes data contents such as patient diagnosis and treatment data, patient real-time diagnosis data, and patient diagnosis statistical data. The visualization page is composed of one Json program package of the visualization page and corresponds to at least 1 ID of the visualization page.
In step S101, a server address for storing the visual page and the visual page ID are input in an address bar of a browser, and a link operation is performed, so that the browser can obtain the visual page ID; or firstly enabling the browser to access a corresponding server, inputting the visual page ID in a corresponding search box, and performing search operation, or enabling the browser to acquire the visual page ID. Of course, other operation modes may be used as long as the browser or the client can accurately obtain the visualized page ID.
In step S102, after the browser obtains the visualization page ID, the browser sends the visualization page ID to a corresponding server that stores the visualization page, and then the server obtains the visualization page Json package according to the visualization page ID and sends the obtained visualization page Json package to the browser.
In step S103, after the visual page Json package is received by the browser, the visual page Json package is analyzed in real time through a JS language, and a page component of the visual page and a configuration data source bound to the page component, which are included in the visual page Json package, are obtained. Currently, main browsers such as IE, Chrome and home and abroad support JS, the JS is JavaScript, is a transliteration script language, is a dynamic type, weak type, prototype-based language, and is a browser built-in support type. Its interpreter is called the JavaScript engine and is part of the browser. Therefore, after the browser obtains the Json program package of the visual page, the Json program package of the visual page can be analyzed in real time, page components forming the visual page format content such as pictures, characters, text boxes, labels, buttons and the like, and a configuration data source which provides the visual page data content and is bound with the page components are obtained.
In step S104, the browser parses, in real time, the page components such as pictures, characters, text boxes, tags, buttons, and the like, which are acquired by the Json package of the visual page, and parses, in real time, other format contents such as colors, backgrounds, display ratios, and the like, which are acquired by the Json package of the visual page, and renders, by a rendering engine built in the browser itself, the format contents of the visual page, and generates, in real time, an HTML file of the visual page, and displays the visual page. When the browser rendering engine renders and generates the visual page format content, the browser may perform uniform rendering and generation after analyzing the visual page Json program package and acquiring all the page components and analysis results; the Json program package of the visual page can be analyzed to obtain the page components and the analysis result, and the visual page format content can be generated by rendering, so that real-time analysis of the Json program package of the visual page is really realized, and the visual page format content is generated in real time.
In step S105, the browser sends the configuration data source bound to the page component, acquired in step S103, to the server, and the server acquires the data content of the visual page according to the configuration data source bound to the page component.
In step S106, the server sends the acquired data content of the visualization page to the browser, and the browser loads the data content in the page component bound to the configuration data source to generate a complete visualization page.
According to the arrangement, the visual page ID is obtained, and then the Json program package of the visual page is directly obtained, so that the complex process that in the prior art, a page configuration system needs to generate an HTML file independently firstly, then the HTML file is exported to the local, and finally a program capable of running a web is formed is omitted; through JS language real-time analysis the visual page Json program package generates in real time the visual page can acquire the latest visual page Json program package in real time when the page configuration content is modified, and the latest visual page configuration content is analyzed and generated in real time to acquire and display various data in real time.
Further, the Json program package of the visual page is generated by a page configuration system, and comprises the page components and attribute configuration, wherein,
the page component comprises a preset component and/or a user configuration component and is used for forming the format content of the visual page;
the attribute configuration comprises a display style and an event, wherein the display style is used for setting the format content of the visual page, and the event comprises the binding of the page component and the configuration data source and is used for setting the data content of the visual page.
Specifically, the page configuration system is configured to configure the visualization page and finally generate the Json package of the visualization page, and the page configuration system includes:
the visual design interface module is used for visually configuring the visual page and comprises a page component submodule, a design page submodule and an attribute configuration submodule;
the page component submodule comprises a plurality of page components, and one or more of the page components are selected to form the format content of the visual page; the design page sub-module comprises a design page, and the design page is used for displaying page components and display styles of the visual page; the attribute configuration submodule comprises an attribute configuration interface, and the attribute configuration interface is used for configuring a display style and an event of a visual page;
wherein the design page is a base template of the visualization page; the page component is one of format contents arranged on the basic template, and the display style in the attribute configuration is other format contents of the visual page. The property configuration interface can perform property configuration for the design page independently, for example, configure display styles of the design page, such as a background color and a display scale, and also perform property configuration for the page component independently, for example, configure display styles of the page component independently, or configure contents of the page component independently by setting events, such as a data acquisition path, a data processing mode, a data presentation format, and the like, to generate data contents in the page component, so as to bind the page component with the configuration data source, or configure the display styles and events of the design page and/or the page component simultaneously.
And the Json generation module is used for analyzing the visual page format content and the data content such as the page components, the attribute configuration and the like configured in the visual design interface module to generate a Json program package of the visual page, and the Json program package corresponds to at least one visual page ID.
Further, the page component includes a preset component and/or a user configuration component, where the preset component is a component preset by the page configuration system, and the user configuration component is a component generated by the page configuration system.
Specifically, the visualization page configured by the user through the visualization design interface module can be saved as the visualization page when saved, and a corresponding visualization page Json program package is generated and corresponds to the corresponding visualization page ID; the page component can also be saved as the user configuration component, and is saved in the page component submodule as one of the page components; the visual page can be saved as the user configuration component and the visual page, so that diversified configuration requirements of users can be met, and repeated configuration of the users can be reduced. By setting the user configuration component, a user can quickly develop a large number of page functions suitable for own services, and the workload is reduced.
Furthermore, the user configuration component comprises a shared component and/or a non-shared component, and when the shared component is modified, all visualization pages for configuring the shared component are modified correspondingly; and when the unshared component is modified, all the visual pages for configuring the unshared component are not modified.
Further, as an embodiment, the Json package further includes a mapping model, the mapping model including the configuration data source, the query data source, and the mapping relationship, wherein,
the configuration data source is a data source obtained by mapping through the mapping model;
the query data source comprises one or more of a service system database, a data table and a field;
and the mapping relation binds the configuration data source and the query data source and sends the query data of the query data source to the configuration data source.
Specifically, in the event in the visualized page Json package, the configuration data source bound to the page component may be a direct data source that directly stores business data, such as each business system database of a hospital or the clinical data center database, or may be a mapping data source obtained by mapping the direct data source through a mapping model. The mapping model comprises a configuration data source which can be directly bound with the page component, a query data source which directly stores all service data and provides query data according to a data acquisition instruction, and a mapping relation which binds the configuration data source with the query data source and sends the query data of the query data source to the configuration data source. The query data source not only includes the business system database or the clinical data center database, but also includes each data table stored in the database, and each field in each data table, that is, the query data source includes any one or more combinations of the business system database, the data table, and the field.
Through setting up the mapping model, will the configuration data source with the inquiry data source passes through mapping relation binds mutually, works as the browser is based on JS language real-time analysis visual page Json procedure package generates when the visual page, through the server will be saved in different format attributes of different business systems, different inquiry data sources inquiry data send to corresponding configuration data source, and then generate data content in the appointed page subassembly of visual page can keep apart medical information system and page configuration system, both can simplify the configuration of page data content, reduces the volume of visual page Json procedure package improves JS real-time analysis visual page Json procedure package's speed improves page generation efficiency. Meanwhile, the relative stability of the visual page can be kept, the data content of the visual page can be updated in real time, when one or more query data source names or data formats in the service system database, the data table and the field are changed, the Json program package of the visual page does not need to be modified and generated again, the latest service data content can be obtained by the visual page in real time only by modifying the mapping relation in the mapping model according to conditions, and the requirement of the medical industry on efficient and simple service generation of the page can be met.
Fig. 2 is a schematic flowchart of an embodiment of a process of generating formatted content of the visualization page based on JS real-time parsing rendering, and as an embodiment, in step S104, a method of generating the formatted content based on real-time parsing of the page component and the Json package of the visualization page is rendered, as shown in fig. 2, the method includes:
step S201: analyzing and acquiring the display style in the attribute configuration of the visual page in the Json program package of the visual page in real time through JS language;
step S202: analyzing and acquiring the position layout of the page components in the Json program package of the visual page in real time through a JS language;
step S203: analyzing and acquiring the display style in the attribute configuration of the page component in the Json program package of the visual page in real time through JS language;
step S204: rendering and generating the format content of the visual page according to the display style aiming at the visual page, the page component, the position layout of the page component and the display style aiming at the page component.
Specifically, in step S201, a page display style, such as a background color, a display scale, and the like, for the visual page in the Json package of the visual page is obtained through JS language real-time parsing.
In step S202, obtaining the following position layouts of the page components in the Json package of the visual page through JS language real-time parsing: the picture as a page component is placed at the top in the visual page, the page component of the text box is placed on the left below the picture, the page component of the label is placed on the right side of the text box, and the page component of the editable form is placed below the text box and the label. Thereby obtaining the specific position of all the page components in the visual page.
In step S203, the display style of the page component in the Json package of the visual page, such as the display size and the background color of the picture, the text box, and the editable table, and the display style of the page component such as the display size, the background color, and the display character of the tag, are obtained through JS language real-time parsing.
In step S204, the format content of the visualization page is rendered and generated according to the display style for the visualization page, the page component, the position layout of the page component, and the display style for the page component. For example, the visualized page is displayed according to a screen ratio of 1:1 and automatically adapted to the size of a client display screen, the page background is white, other page components are displayed according to a fixed ratio with the page, the font color is black, the background color is light blue, and the format content of the visualized page is generated by rendering according to the specific position obtained in step S202.
According to the setting, the Json program package of the visual page can be analyzed in real time in the JS language to generate the visual page, firstly, the Json program package is quickly and accurately generated, the format content of the visual page is loaded independently, the data content of the visual page is prevented from waiting for a long time, the problem that the generation speed of the visual page is low and the user experience is poor is solved, the speed and the accuracy of page generation are improved, and the user experience is improved.
Fig. 3 is a schematic flowchart illustrating an embodiment of a process for acquiring data content of a visualized page based on JS real-time parsing, where as an embodiment, in step S105, a method for acquiring the data content according to the configuration data source bound to the page component is shown in fig. 3, and includes:
step S301: acquiring the corresponding mapping model according to the configuration data source bound with the page component;
step S302: acquiring the query data source according to the configuration data source and the mapping model bound with the page component;
step S303: sending the query data in the query data source to the configuration data source via the mapping relationship in the mapping model;
step S304: and directly generating the data content from the query data sent to the configuration data source, or generating the data content through function processing.
Specifically, in step S301, for example, as described above, the editable form page component in the visualization page is bound to the patient name, age, and sex fields in the outpatient service/emergency treatment data table in the configuration data source, that is, the Json package of the visualization page is analyzed in real time by JS, the patient name, age, and sex fields in the outpatient service/emergency treatment data table are obtained as the configuration data source bound to the page component, and then the mapping model a corresponding to the outpatient service/emergency treatment data table is obtained according to the above fields.
In step S302, the mapping model a uses the outpatient/emergency treatment data table as a configuration data source, uses the outpatient/emergency treatment registration table of the outpatient/emergency treatment registration subsystem in the Hospital management Information System (referred to as Hospital Information System, HIS System) of version 2.0 of company a as a query data source, and has a mapping relationship that fields and field data are in one-to-one correspondence; that is, all fields of the clinic/emergency registration form are included in the mapping model, for example, the mapping model also includes the fields of identification number, contact number, registration time and the like in addition to the fields of patient name, age and gender. In this step, the server obtains the patient name, age, and sex fields in the clinic/emergency number list as the query data source bound to the page component according to the patient name, age, and sex fields bound to the editable form and all the field information in the clinic/emergency patient data list in the mapping model a.
In step S303, the query data in the patient name, age, and sex fields of the outpatient/emergency treatment patient data table is sent to the patient name, age, and sex fields of the outpatient/emergency treatment patient data table according to the mapping relationship that the patient name, age, and sex fields of the outpatient/emergency treatment patient data table in the mapping model a are equal to the patient name, age, and sex fields of the outpatient/emergency treatment patient data table in a one-to-one correspondence manner.
In step S304, the data in the fields of the name, age and sex of the patient sent to the outpatient service/emergency treatment data table may be directly used as the data content in the editable form of the visualization page, or the data in the fields of the name, age and sex of the patient sent to the outpatient service/emergency treatment data table may be subjected to a filtering function to filter the data of the patient with the age of less than 60 years out as the data content in the editable form of the visualization page.
By means of the arrangement, the medical information system and the page configuration system can be isolated, the configuration of page data content can be simplified, the size of the Json program package of the visual page is reduced, the speed of analyzing the Json program package of the visual page in real time by JS is increased, the page generation efficiency is improved, meanwhile, the relative stability of the visual page can be kept, the latest business data content can be obtained by the visual page in real time, and the high-efficiency, simple and convenient business requirements of the medical industry on page generation can be met.
As an embodiment, each mapping model corresponds to a segment of a mapping model Json program statement and corresponds to a mapping model ID, the mapping model Json program statement is used to describe the mapping model, the mapping model ID is used to identify the mapping model, and the mapping model Json program statement and/or the mapping model ID are included in the visualization page Json package.
Specifically, a mapping model includes a plurality of mapping tables, each table includes a plurality of data, so that storing the mapping model completely in the Json package would make the Json package become huge and complex in data size, which is not beneficial to storing, nor is it beneficial to the browser to parse the Json package in real time based on JS language, which reduces the real-time generation efficiency of the visualization page, and therefore, in this embodiment, each mapping model corresponds to a mapping model Json program statement, which is used to describe the structure of the mapping model, for example, describe that the mapping model includes several mapping tables, the storage locations and the storage contents of the mapping tables, and the volume of the Json package is reduced by storing the mapping model Json program statement in the Json package, network transmission efficiency is improved, the acquisition time of the Json program package of the visual page is shortened, and JS language real-time analysis is favorably improved, and the speed and the efficiency of generating the visual page by the Json program package of the visual page are improved.
Furthermore, one section of the Json program statement of the mapping model is adopted to describe the structure of the mapping model, but not other formats, for example, an XML format is adopted to describe the mapping model, JSON is a lightweight data exchange format, a text format completely independent of a programming language is adopted to store and represent data, the hierarchical structure is simple and clear, the JSON is easy to read and write by people, and meanwhile, the JSON is easy to analyze and generate by a machine, the network transmission efficiency is improved more effectively, the speed and the efficiency of analyzing the Json program package of the visual page in real time by the JS language to generate the visual page are improved more favorably, and in the aspect of effective data rate, the JSON has higher efficiency as a data package format for transmission, so that the ratio of effective data volume to total data package is greatly improved, and the transmission pressure of a network is reduced under the condition of the same data flow. Therefore, the structure of the mapping model is described by adopting a Json program statement of the mapping model instead of other formats, and the business requirements of the medical industry on generating real-time, efficient, simple and convenient pages can be better met.
In this embodiment, each mapping model corresponds to a segment of a Json program statement of the mapping model, and also corresponds to a mapping model ID, where the mapping model ID is used to identify the mapping model. Through inciting somebody to action mapping model ID include in the Json procedure package of visualization page, can make the volume of the Json procedure package of visualization page is littleer, and JS language analyzes in real time the speed of the Json procedure package of visualization page is faster, and the speed and the efficiency of generating visualization page are also higher.
As an embodiment, the mapping model Json program statement includes the mapping model ID for describing and identifying the mapping model, and the mapping model Json program statement is included in the Json package of the visualization page.
Specifically, the mapping model ID is added into the Json program statement of the mapping model, so that the Json program statement of the mapping model can describe the mapping model more comprehensively, each mapping model represented by the Json program statement of the mapping model can be identified more clearly, the Json program statement of the mapping model can be analyzed in real time by a JS language conveniently, the Json program statement of the mapping model can be rapidly obtained, and the real-time generation speed and efficiency of the visual page can be further improved.
Fig. 4 is a schematic flowchart illustrating an embodiment of obtaining a query data source of the data content based on JS real-time parsing, and as an embodiment, in step S302, a method for obtaining the query data source according to the configuration data source bound to the page component and the mapping model, as shown in fig. 4, includes:
step S401: analyzing the Json program statements of the mapping model in the Json program package of the visual page in real time through JS language to obtain all the mapping relations in the mapping model;
step S402: and searching and acquiring the corresponding query data source in all the mapping relations according to the configuration data source bound with the page component.
Specifically, when the Json program package of the visual page comprises the Json program statement of the mapping model, the Json program statement of the mapping model is analyzed in real time through a JS language, so that the overall structure of the mapping model can be obtained, and all the mapping relations in the mapping model are further obtained; and then searching and acquiring the corresponding query data source bound with the page component in all the mapping relations in the mapping model according to the configuration data source bound with the page component. And then acquiring query data through a server, generating the data content of the visual page, sending the data content to a corresponding page component in the visual page of the browser, and forming the final visual page together with the format content of the visual page.
Fig. 5 is a schematic flowchart of another embodiment of a process of acquiring a query data source of data content based on JS real-time parsing, where as another embodiment, in step S302, a method for acquiring the query data source according to the configuration data source bound to the page component and the mapping model, as shown in fig. 5, includes:
step S501: analyzing the Json program package of the visual page in real time through JS language to obtain the ID of the mapping model;
step S502: acquiring a Json program statement of the mapping model through the ID of the mapping model;
step S503: analyzing Json program statements of the mapping model in real time through JS language to obtain all the mapping relations in the mapping model;
step S504: and searching and acquiring the corresponding query data source in all the mapping relations according to the configuration data source bound with the page component.
Specifically, when the Json program package of the visual page contains the mapping model ID, the Json program package of the visual page is analyzed in real time through a JS language to obtain the mapping model ID, the mapping model ID is sent to a server, so that the server can obtain Json program statements of the mapping model through the Json program package of the visual page, the Json program statements of the mapping model can be analyzed in real time through the JS language to obtain the overall structure of the mapping model, and then all the mapping relations in the mapping model are obtained; and then searching and acquiring the corresponding query data source bound with the page component in all the mapping relations in the mapping model according to the configuration data source bound with the page component. And then acquiring the query data through a server, generating the data content of the visual page, sending the data content to a browser in a corresponding page component in the visual page, and forming the final visual page together with the format content of the visual page.
In summary, the Json program package of the visual page is directly obtained by obtaining the ID of the visual page, so that the complex process that in the prior art, a page configuration system needs to independently generate an HTML file first, then the HTML file is exported to the local, and finally an executable web program is formed is omitted; this application is because JS language is real-time to be analyzed visual page Json procedure package, real-time generation visual page can acquire latest visual page Json procedure package in real time when the page configuration content is revised, analyzes in real time and generates latest visual page configuration content, acquires and show multiple data in real time, when improving page update efficiency, has richened visual page content, can satisfy the medical industry and generate real-time, high-efficient, simple and convenient business demand to the page.
The embodiment of the invention also provides a computer, which comprises a memory, a processor and a computer program which is stored on the memory and can be run on the processor, wherein the computer program run by the processor of the computer comprises the method for generating the page based on the JS real-time analysis, which is provided by any one of the embodiments. For details, reference may be made to the above-mentioned embodiments of the page generation method, which are not described herein again.
The above-described embodiments are merely illustrative, and those skilled in the art can select some or all of them to achieve the purpose of the solution of the present embodiment according to actual needs. Although the present invention is disclosed above, the present invention is not limited thereto. Any person skilled in the art can still modify or easily conceive of changes in the technical solutions described in the foregoing embodiments or equivalent substitutions of some technical features within the technical scope disclosed by the present disclosure; such modifications, changes or substitutions do not depart from the spirit and scope of the embodiments of the present invention, and should be construed as being included therein. Therefore, the protection scope of the present disclosure shall be subject to the protection scope of the claims.
Claims (10)
1. A webpage generation method based on JS real-time analysis is used for generating a visual webpage, and is characterized in that the visual webpage comprises format content and data content, and the webpage generation method comprises the following steps:
acquiring the ID of the visual page;
acquiring a Json program package of the visual page according to the visual page ID;
analyzing the Json program package of the visual page in real time through the JS language to obtain a page component of the visual page and a configuration data source bound with the page component;
rendering and generating the format content according to the page component and the Json program package of the visual page;
acquiring the data content according to the configuration data source bound with the page component;
and loading the data content into the page component bound with the configuration data source to generate the visual page.
2. The method for generating a page based on JS real-time parsing as recited in claim 1, wherein the Json package of the visualized page is generated by a page configuration system, comprising the page components and attribute configuration, wherein,
the page component comprises a preset component and/or a user configuration component and is used for forming the format content of the visual page;
the attribute configuration comprises a display style and an event, wherein the display style is used for setting the format content of the visual page, and the event comprises the binding of the page component and the configuration data source and is used for setting the data content of the visual page.
3. The method of claim 2, wherein the Json package further comprises a mapping model, the mapping model comprises the configuration data source, the query data source and the mapping relationship, wherein,
the configuration data source is a data source obtained by mapping through the mapping model;
the query data source comprises one or more of a service system database, a data table and a field;
and the mapping relation binds the configuration data source and the query data source and sends the query data of the query data source to the configuration data source.
4. The method for generating the page based on the JS real-time parsing as claimed in claim 2, wherein the method for generating the formatted content by rendering according to the page components and the real-time parsing result of the Json package of the visual page comprises:
analyzing and acquiring the display style in the attribute configuration of the visual page in the Json program package of the visual page in real time through JS language;
analyzing and acquiring the position layout of the page components in the Json program package of the visual page in real time through a JS language;
analyzing and acquiring the display style in the attribute configuration of the page component in the Json program package of the visual page in real time through JS language;
rendering and generating the format content of the visual page according to the display style aiming at the visual page, the page component, the position layout of the page component and the display style aiming at the page component.
5. The method for generating the page based on the JS real-time resolution as claimed in claim 3, wherein the method for obtaining the data content according to the configuration data source bound to the page component comprises:
acquiring the corresponding mapping model according to the configuration data source bound with the page component;
acquiring the query data source according to the configuration data source and the mapping model bound with the page component;
sending the query data in the query data source to the configuration data source via the mapping relationship in the mapping model;
and directly generating the data content from the query data sent to the configuration data source, or generating the data content through function processing.
6. The method for generating the page based on the JS real-time parsing as claimed in claim 5, wherein each mapping model corresponds to a mapping model Json program statement and a mapping model ID, the mapping model Json program statement is used for describing the mapping model, the mapping model ID is used for identifying the mapping model, and the mapping model Json program statement and/or the mapping model ID are/is included in the Json package of the visualization page.
7. The method for generating a page based on JS real-time parsing of claim 6, wherein the mapping model Json program statement includes the mapping model ID for describing and identifying the mapping model, and the mapping model Json program statement is included in the Json package of the visualization page.
8. The method for generating the page based on the JS real-time parsing as claimed in claim 6, wherein the step of obtaining the query data source according to the configuration data source and the mapping model bound to the page component includes:
analyzing the Json program statements of the mapping model in the Json program package of the visual page in real time through JS language to obtain all the mapping relations in the mapping model;
and searching and acquiring the corresponding query data source in all the mapping relations according to the configuration data source bound with the page component.
9. The method for generating the page based on the JS real-time parsing as claimed in claim 6, wherein the step of obtaining the query data source according to the configuration data source and the mapping model bound to the page component includes:
analyzing the Json program package of the visual page in real time through JS language to obtain the ID of the mapping model;
acquiring a Json program statement of the mapping model through the ID of the mapping model;
analyzing Json program statements of the mapping model in real time through JS language to obtain all the mapping relations in the mapping model;
and searching and acquiring the corresponding query data source in all the mapping relations according to the configuration data source bound with the page component.
10. A computer comprising a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the computer program executed by the processor executes any one of the JS real-time resolution based page generation methods of claims 1-9 when executed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111168817.6ACN113821749B (en) | 2021-09-30 | 2021-09-30 | Page generation method and computer based on JS real-time analysis |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111168817.6ACN113821749B (en) | 2021-09-30 | 2021-09-30 | Page generation method and computer based on JS real-time analysis |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113821749Atrue CN113821749A (en) | 2021-12-21 |
| CN113821749B CN113821749B (en) | 2023-09-01 |
Family
ID=78916225
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111168817.6AActiveCN113821749B (en) | 2021-09-30 | 2021-09-30 | Page generation method and computer based on JS real-time analysis |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113821749B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114443108A (en)* | 2022-01-28 | 2022-05-06 | 中国建设银行股份有限公司 | Page updating method, device, equipment, medium and computer program product |
| TWI861945B (en)* | 2022-06-28 | 2024-11-11 | 韓商韓領有限公司 | Page information providing method, electronic device for the same and non-transitory computer-readable storage medium |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150026477A1 (en)* | 2013-07-19 | 2015-01-22 | Twilio, Inc. | System and method for delivering application content |
| CN107273122A (en)* | 2017-06-07 | 2017-10-20 | 深圳市卓讯信息技术有限公司 | Based on decoupling mechanism can iteration set up operation system method and its terminal |
| CN107451296A (en)* | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| CN108279880A (en)* | 2018-01-26 | 2018-07-13 | 长春玖佰软件技术有限公司 | A kind of configuration method of enterprise's application framework |
| CN109634598A (en)* | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | A kind of page display method, device, equipment and storage medium |
| CN109992589A (en)* | 2019-04-11 | 2019-07-09 | 北京启迪区块链科技发展有限公司 | Method, apparatus, server and the medium of SQL statement are generated based on visual page |
| CN110764762A (en)* | 2018-07-25 | 2020-02-07 | 上海柯林布瑞信息技术有限公司 | Page forming method and device, computer readable storage medium and terminal |
| CN111352682A (en)* | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | Page rendering method, device, server and readable storage medium |
| CN113031928A (en)* | 2021-03-30 | 2021-06-25 | 广州虎牙科技有限公司 | Web system generation method and device, electronic equipment and computer readable storage medium |
| CN113419728A (en)* | 2021-06-22 | 2021-09-21 | 康键信息技术（深圳）有限公司 | Marketing page building method, marketing page building device, marketing page building equipment and storage medium |
- 2021
- 2021-09-30CNCN202111168817.6Apatent/CN113821749B/enactiveActive
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150026477A1 (en)* | 2013-07-19 | 2015-01-22 | Twilio, Inc. | System and method for delivering application content |
| CN107273122A (en)* | 2017-06-07 | 2017-10-20 | 深圳市卓讯信息技术有限公司 | Based on decoupling mechanism can iteration set up operation system method and its terminal |
| CN107451296A (en)* | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| CN108279880A (en)* | 2018-01-26 | 2018-07-13 | 长春玖佰软件技术有限公司 | A kind of configuration method of enterprise's application framework |
| CN110764762A (en)* | 2018-07-25 | 2020-02-07 | 上海柯林布瑞信息技术有限公司 | Page forming method and device, computer readable storage medium and terminal |
| CN109634598A (en)* | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | A kind of page display method, device, equipment and storage medium |
| CN111352682A (en)* | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | Page rendering method, device, server and readable storage medium |
| CN109992589A (en)* | 2019-04-11 | 2019-07-09 | 北京启迪区块链科技发展有限公司 | Method, apparatus, server and the medium of SQL statement are generated based on visual page |
| CN113031928A (en)* | 2021-03-30 | 2021-06-25 | 广州虎牙科技有限公司 | Web system generation method and device, electronic equipment and computer readable storage medium |
| CN113419728A (en)* | 2021-06-22 | 2021-09-21 | 康键信息技术（深圳）有限公司 | Marketing page building method, marketing page building device, marketing page building equipment and storage medium |
Non-Patent Citations (3)
| Title |
|---|
| PUMPKIN_XIAOXUAN: "小程序的全局配置 app.json、页面配置", pages 1, Retrieved from the Internet <URL:https://blog.csdn.net/Pumpkin_xiaoXuan/article/details/118860471>* |
| YING YUAN: "Python-based Design and Implementation of Meteorological Data Acquisition", 《2019 3RD SCIENTIFIC CONFERENCE ON MECHATRONICS ENGINEERING AND COMPUTER SCIENCE(SCMC 2019)》, pages 91 - 95* |
| 彭珂: "微生物组学数据服务平台设计与实现", 《中国优秀硕士学位论文全文数据库 (信息科技辑)》, pages 138 - 754* |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114443108A (en)* | 2022-01-28 | 2022-05-06 | 中国建设银行股份有限公司 | Page updating method, device, equipment, medium and computer program product |
| TWI861945B (en)* | 2022-06-28 | 2024-11-11 | 韓商韓領有限公司 | Page information providing method, electronic device for the same and non-transitory computer-readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113821749B (en) | 2023-09-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10325392B2 (en) | Content replacement system using visual design object models | |
| CN106933722B (en) | Webpage application monitoring method, server and system | |
| US7246326B2 (en) | System and procedure for providing a user interface display | |
| CN113095995B (en) | Webpage watermark adding method and device, electronic equipment and storage medium | |
| KR20150079867A (en) | Html5-protocol-based webpage presentation method and device | |
| CN109710250B (en) | Visualization engine system and method for constructing user interface | |
| US20100169794A1 (en) | Collaborative development of visualization dashboards | |
| CN113821749B (en) | Page generation method and computer based on JS real-time analysis | |
| CN104317570B (en) | The apparatus and method of dynamic analysis Web applications | |
| CN111291533B (en) | Sentence segment to be displayed display method and device, computer equipment and storage medium | |
| CN112306594A (en) | Rendering method and device based on mobile terminal and storage medium | |
| CN108170409B (en) | Development method and system of WEB front-end control | |
| CN111651696B (en) | Product label customizing method and device, computer storage medium and electronic equipment | |
| CN112966481B (en) | Data form display method and device | |
| CN109582580B (en) | System, method and apparatus for debugging pages | |
| CN107391175B (en) | Control data configuration method and computer readable storage medium | |
| CN112287255B (en) | Page construction method and device, computing equipment and computer readable storage medium | |
| CN114443033A (en) | Page framework display method and device, electronic equipment and storage medium | |
| CN113687827A (en) | Data list generation method, device and equipment based on widget and storage medium | |
| CN116009863B (en) | Front-end page rendering method, device and storage medium | |
| CN118193723A (en) | Text parsing method, system, electronic equipment and storage medium | |
| US20120260161A1 (en) | Method for classifying and organizing content in related web pages and freely reconstructing and displaying the content | |
| US10529100B2 (en) | Interaction-driven format for graph visualization | |
| CN117493633A (en) | Hierarchical structure display method, device and equipment of Internet of things system and storage medium | |
| CN111858595B (en) | Dynamic configuration method and system for electric power engineering examination record table |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |