CN112650492A - Rendering method, system and related device of Web page - Google Patents

Rendering method, system and related device of Web page Download PDF

Info

Publication number
CN112650492A
CN112650492A CN202011553377.1A CN202011553377A CN112650492A CN 112650492 A CN112650492 A CN 112650492A CN 202011553377 A CN202011553377 A CN 202011553377A CN 112650492 A CN112650492 A CN 112650492A
Authority
CN
China
Prior art keywords
rendering
web page
schema
object data
configuration information
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
Application number
CN202011553377.1A
Other languages
Chinese (zh)
Inventor
许慧
甘宜鹏
郭宝亮
李倩
张文健
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
CVIC Software Engineering Co Ltd
Original Assignee
CVIC Software Engineering Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by CVIC Software Engineering Co Ltd filed Critical CVIC Software Engineering Co Ltd
Priority to CN202011553377.1A priority Critical patent/CN112650492A/en
Publication of CN112650492A publication Critical patent/CN112650492A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/71Version control; Configuration management
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements 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/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Computer Security & Cryptography (AREA)
  • Document Processing Apparatus (AREA)

Abstract

The application provides a rendering method of a Web page, which comprises the following steps: receiving a rendering request; calling a Schema editor configuration form designer according to the rendering request to generate json object data; reading the json object data to obtain Schema configuration information; and displaying a corresponding Web page according to the Schema configuration information contained in the json object data. According to the method and the device, the business system object is packaged, so that the generation and modification of the Web page are not dependent on hard coding, but are realized through front-end visual json schema configuration, and in addition, the modification record of the json schema also retains the version, so that the modification condition of the page can be examined. The application also provides a rendering system of the Web page, a computer readable storage medium and an electronic device, which have the beneficial effects.

Description

Rendering method, system and related device of Web page
Technical Field
The present application relates to the field of data processing, and in particular, to a method, a system, and a related device for rendering a Web page.
Background
The generation of the page realized by the original platform system is completed based on a jsp or html technology, and the method has a plurality of defects, for example, the display name, the display logic, the check relation and the like of the page field in the system are all written into the jsp or html in a hard coding mode, and if the field or the check relation is required to be added, deleted, modified and the like, the source code is required to be modified manually.
Disclosure of Invention
The application aims to provide a rendering method, a rendering system, a computer readable storage medium and electronic equipment for a Web page, which can quickly realize rendering of the Web page.
In order to solve the technical problem, the application provides a rendering method of a Web page, and the specific technical scheme is as follows:
receiving a rendering request;
calling a Schema editor configuration form designer according to the rendering request to generate json object data;
and displaying a corresponding Web page according to the Schema configuration information contained in the json object data.
Optionally, invoking a Schema editor configuration form designer according to the rendering request includes:
determining a corresponding page template according to the rendering request;
and calling a Schema editor to configure the form designer in the page template.
Optionally, invoking a Schema editor configuration form designer according to the rendering request, and generating json object data includes:
confirming page configuration information in the rendering request;
calling a Schema editor configuration form designer according to the page configuration information;
and saving the content of the form designer to obtain the json object data.
Optionally, displaying a corresponding Web page according to Schema configuration information included in the json object data includes:
resolving the Schema configuration information into fields, and rendering each field by using a field resolver to obtain a UI component; wherein the UI component is based on an ant design framework;
and integrating the UI components to obtain the Web page.
Optionally, when the corresponding Web page is displayed according to the Schema configuration information included in the json object data, the method further includes:
judging whether the number of tab labels is 1 or not;
and if so, not displaying the tab.
Optionally, rendering each field by using a field parser, and before obtaining the UI component, the method further includes:
modifying the source code of the jsonschema editing component to support the ant design framework.
The present application further provides a rendering system for a Web page, including:
a request receiving module for receiving a rendering request;
the form configuration module is used for calling a Schema editor to configure a form designer according to the rendering request and generating json object data;
and the page rendering module is used for displaying the corresponding Web page according to the Schema configuration information contained in the json object data.
Optionally, the form configuration module includes:
a confirming unit, configured to confirm the page configuration information in the rendering request;
the configuration unit is used for calling a Schema editor configuration form designer according to the page configuration information;
and the storage unit is used for storing the content of the form designer to obtain the json object data.
The present application also provides a computer-readable storage medium having stored thereon a computer program which, when being executed by a processor, carries out the steps of the method as set forth above.
The present application further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the method described above when calling the computer program in the memory.
The application provides a rendering method of a Web page, which comprises the following steps: receiving a rendering request; calling a Schema editor configuration form designer according to the rendering request to generate json object data; reading the json object data to obtain Schema configuration information; and displaying a corresponding Web page according to the Schema configuration information contained in the json object data.
According to the method and the device, the Web page is rendered based on the json object data and the Schema configuration information, so that the generation and modification of the Web page are not dependent on hard coding and can be realized through front-end visual json Schema configuration.
The application also provides a rendering system of the Web page, a computer readable storage medium and an electronic device, which have the beneficial effects and are not repeated herein.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
Fig. 1 is a flowchart of a rendering method for a Web page according to an embodiment of the present application;
FIG. 2 is a schematic diagram illustrating a configuration flow of a form designer according to an embodiment of the present application;
fig. 3 is a schematic structural diagram of a rendering system for a Web page according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
Referring to fig. 1, fig. 1 is a flowchart of a rendering method for a Web page according to an embodiment of the present application, where the method includes:
s101: receiving a rendering request;
the step aims to receive a rendering request, wherein the rendering request can originate from an external device or a terminal, and an action event can be taken as a trigger condition and is regarded as the rendering request. For example, when form data included in a Web page is filled with data, the Web page needs to be refreshed again, or the data filling process can be regarded as a process of issuing a rendering request.
The content of the rendering request is not limited, and may be only one request data, and the data required for actual rendering may be transmitted separately in the form of a data packet or the like after the rendering request, or the browser may automatically request the data required for rendering from the background or the front end. The rendering request may also contain relevant data that the Web page needs to display, including altered data content, format, type, and so forth.
S102: calling a Schema editor configuration form designer according to the rendering request to generate json object data;
this step is directed to configuring the form designer to obtain json object data. No matter whether the rendering request contains data or not, a mapping relation needs to be established with the rendering request in the step, namely the json data obtained in the step has a mapping relation with the rendering request, so that a system log is generated or tracing is performed when the system log is abnormal. It should be noted that, the present application is not only directed to a Web page in the form of a form, but the Web page is regarded as a form, that is, each display area can be regarded as cell content in the form. In particular, for a Web page to be filled with data, the filling box itself is a cell. The application aims to configure the form designer by using the Schema editor, namely to configure the position, format and type of each cell in the Web page. The position of the cell, that is, the position of each cell on the Web page, refers to the display format of the content in the cell, and the type refers to the type of the cell, and may include a selection box and a drop-down box, so that the user can select to fill in the content of the cell, etc.
As a preferred implementation of this step, the form designer may be configured using a page template when performing this step. Namely, a corresponding page template is determined according to the rendering request, and then a Schema editor is called to configure a form designer in the page template. The default page template in this embodiment is a Web page template configured in advance, and the page template may have multiple templates according to different uses and types of the Web, so as to meet rendering requirements of different Web pages. For example, the page template may include a query template and a maintenance template, the query template may include query conditions, field names, query lists, etc., and the maintenance template may include fields, buttons, etc., i.e., different page templates may be adapted according to their application requirements and contain different contents.
Whether a page template is adopted or not, the Web page is configured through the form designer without directly editing and modifying the Web source code, and the configuration is realized through a front-end schema, even through a front-end visual json schema. For the content modification and editing of the Web page, the modification of hard codes is abandoned, and the efficiency of the editing and the modifying of the Web page is improved. If the page template is adopted, namely the page template of the adaptive form designer, the rendering efficiency of the Web page can be further improved.
Further, on the basis of the step, when the Schema editor is called to configure the form designer, the current version can be configured, and when the json object data containing the Schema configuration information is obtained, the Schema editor is used to configure the current version information. The content and form of the current version information are not particularly limited, and the version information may include time, version number, and other information for distinguishing the versions. The modification to the Web page between versions can then be determined based on the version information corresponding to the Web page. It should be noted that configuring the current version information may be a default operation when configuring the form designer, i.e., default to configuring the current version information when performing this step.
S103: and displaying a corresponding Web page according to the Schema configuration information contained in the json object data.
Since the form designer has been configured in step S102, that is, all the contents of the Web page have been configured, this step is intended to display the corresponding Web page.
Preferably, when the step is executed, the Schema configuration information may be parsed into fields, each field is rendered by using a field parser to obtain UI components, and then each part of the UI components is integrated to obtain a Web page. . The UI component is a UI component based on an ant design framework. And optimizing a common act-jsonschema-form rendering component, and displaying the form as an ant design form from a native html form by modifying a source code of the jsonschema editing component to support the ant design frame, so that the generated Web page has a better effect.
According to the method and the device for modifying the webpage, the webpage is rendered based on the json object data and the Schema configuration information, so that the generation and modification of the webpage do not depend on hard coding and can be realized through front-end visual json Schema configuration.
Based on the foregoing embodiment, as a preselected embodiment, when the step of invoking the Schema editor to configure the form designer is executed if the rendering request does not include only the request information, referring to fig. 2, and fig. 2 is a schematic configuration flow diagram of the form designer provided in the embodiment of the present application, the following steps may be adopted:
s201: confirming page configuration information in the rendering request;
s202: calling a Schema editor configuration form designer according to the page configuration information;
s203: and saving the content of the form designer to obtain json object data.
In this embodiment, the page configuration information in the rendering request is determined first, and a Schema editor configuration form designer is called based on the page configuration information. The page configuration information may be similar or identical to the content in the page template in the above embodiments, that is, information such as the position, format, and type of each cell in the Web page. At this time, the form designer may be configured for the page configuration information in the rendering request, and the page template described in the previous embodiment may also be adjusted and modified according to the page configuration information. The content of the form designer includes Schema configuration information, and is generally output in json format data, namely json object data.
In this embodiment, a specific implementation process of the rendering request in the previous embodiment if the rendering request includes the actual page configuration information is described, and on the basis of this embodiment, the rendering request may further include other information related to Web generation, which should also be within the protection scope of this application.
Based on the foregoing embodiment, as a preselected embodiment, when the executing step displays the corresponding Web page according to the Schema configuration information included in the json object data, the number of tab may be determined according to the number of tab to determine the tab included in the generated Web page.
Specifically, whether the number of tab tabs is 1 or not may be determined, and if the number of tab tabs is 1, the tab tabs are not displayed.
Since the generated Web page may include a plurality of pieces of table content, when configuring the form designer, each piece of table content is usually set as a tab, that is, a Web page may include a plurality of tab tabs, and if the Web page includes only one tab, the current tab may be displayed on the Web page at this time. However, if the Web page includes a plurality of tab tabs, it is usually necessary to display the tab on the Web page.
By judging the number of tab labels, the tab labels can be prevented from being displayed when the number of tab labels is only 1, the rendering load of the Web page is reduced, and the rendering beautification effect of the Web page is enhanced.
The rendering system of the Web page provided by the embodiment of the present application is introduced below, and the rendering system described below and the rendering method of the Web page described above may be referred to correspondingly.
Referring to fig. 3, fig. 3 is a schematic structural diagram of a rendering system for a Web page provided in an embodiment of the present application, and the present application further provides a rendering system for a Web page, including:
a request receiving module 100 for receiving a rendering request;
the form configuration module 200 is configured to invoke a Schema editor to configure a form designer according to the rendering request, and generate json object data;
and the page rendering module 300 is configured to display a corresponding Web page according to the Schema configuration information included in the json object data.
Based on the above embodiment, as a preferred embodiment, the form configuration module 200 includes:
a confirming unit, configured to confirm the page configuration information in the rendering request;
the configuration unit is used for calling a Schema editor configuration form designer according to the page configuration information;
and the storage unit is used for storing the content of the form designer to obtain the json object data.
Based on the above embodiment, as a preferred embodiment, the form configuration module 200 includes:
the template configuration unit is used for determining a corresponding page template according to the rendering request;
and the template application unit is used for calling the Schema editor to configure the form designer in the page template.
Based on the above embodiment, as a preferred embodiment, the page rendering module 300 includes:
the UI configuration unit is used for analyzing the Schema configuration information into fields and rendering each field by using a field analyzer to obtain a UI component; integrating the UI components to obtain the Web page; wherein, the UI component is based on an ant design framework.
Based on the above embodiment, as a preferred embodiment, the method further includes:
the tab judging module is used for judging whether the tab number is 1; and if so, not displaying the tab.
Based on the above embodiment, as a preferred embodiment, the method further includes:
and the component configuration module is used for modifying the source code of the jsonschema editing component so as to support the ant design framework.
The present application also provides a computer readable storage medium having stored thereon a computer program which, when executed, may implement the steps provided by the above-described embodiments. The storage medium may include: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
The application further provides an electronic device, which may include a memory and a processor, where the memory stores a computer program, and the processor may implement the steps provided by the foregoing embodiments when calling the computer program in the memory. Of course, the electronic device may also include various network interfaces, power supplies, and the like.
The embodiments are described in a progressive manner in the specification, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other. For the system provided by the embodiment, the description is relatively simple because the system corresponds to the method provided by the embodiment, and the relevant points can be referred to the method part for description.
The principles and embodiments of the present application are explained herein using specific examples, which are provided only to help understand the method and the core idea of the present application. It should be noted that, for those skilled in the art, it is possible to make several improvements and modifications to the present application without departing from the principle of the present application, and such improvements and modifications also fall within the scope of the claims of the present application.
It is further noted that, in the present specification, relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, 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 an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.

Claims (10)

1. A rendering method of a Web page, comprising:
receiving a rendering request;
calling a Schema editor configuration form designer according to the rendering request to generate json object data;
and displaying a corresponding Web page according to the Schema configuration information contained in the json object data.
2. The rendering method of claim 1, wherein invoking a Schema editor configuration form designer according to the rendering request comprises:
determining a corresponding page template according to the rendering request;
and calling a Schema editor to configure the form designer in the page template.
3. The rendering method of claim 1, wherein invoking a Schema editor configuration form designer according to the rendering request to generate json object data comprises:
confirming page configuration information in the rendering request;
calling a Schema editor configuration form designer according to the page configuration information;
and saving the content of the form designer to obtain the json object data.
4. The rendering method according to claim 2, wherein displaying the corresponding Web page according to Schema configuration information included in the json object data comprises:
resolving the Schema configuration information into fields, and rendering each field by using a field resolver to obtain a UI component; wherein the UI component is based on an ant design framework;
and integrating the UI components to obtain the Web page.
5. The rendering method according to any one of claims 1 to 4, wherein when displaying the corresponding Web page according to Schema configuration information included in the json object data, the method further includes:
judging whether the number of tab labels is 1 or not;
and if so, not displaying the tab.
6. The rendering method according to claim 4, wherein rendering each of the fields by using a field parser further comprises, before obtaining the UI component:
modifying the source code of the jsonschema editing component to support the ant design framework.
7. A system for rendering a Web page, comprising:
a request receiving module for receiving a rendering request;
the form configuration module is used for calling a Schema editor to configure a form designer according to the rendering request and generating json object data;
and the page rendering module is used for displaying the corresponding Web page according to the Schema configuration information contained in the json object data.
8. The rendering system of claim 1, wherein the form configuration module comprises:
a confirming unit, configured to confirm the page configuration information in the rendering request;
the configuration unit is used for calling a Schema editor configuration form designer according to the page configuration information;
and the storage unit is used for storing the content of the form designer to obtain the json object data.
9. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method for rendering a Web page according to any one of claims 1 to 6.
10. An electronic device, characterized in that it comprises a memory in which a computer program is stored and a processor which, when it calls the computer program in the memory, implements the steps of the rendering method of a Web page according to any one of claims 1 to 6.
CN202011553377.1A 2020-12-24 2020-12-24 Rendering method, system and related device of Web page Pending CN112650492A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011553377.1A CN112650492A (en) 2020-12-24 2020-12-24 Rendering method, system and related device of Web page

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011553377.1A CN112650492A (en) 2020-12-24 2020-12-24 Rendering method, system and related device of Web page

Publications (1)

Publication Number Publication Date
CN112650492A true CN112650492A (en) 2021-04-13

Family

ID=75362690

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011553377.1A Pending CN112650492A (en) 2020-12-24 2020-12-24 Rendering method, system and related device of Web page

Country Status (1)

Country Link
CN (1) CN112650492A (en)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114741079A (en) * 2022-04-14 2022-07-12 上海携宁计算机科技股份有限公司 Software development method, platform, electronic device and computer-readable storage medium
CN115113947A (en) * 2022-06-27 2022-09-27 浙江惠瀜网络科技有限公司 Configuration method of process engine, terminal equipment and computer readable storage medium

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106775725A (en) * 2016-12-19 2017-05-31 网易(杭州)网络有限公司 A kind of visual configuration edit methods and device
CN109597661A (en) * 2018-10-26 2019-04-09 阿里巴巴集团控股有限公司 A kind of service function configuration method and device
CN111930378A (en) * 2020-08-11 2020-11-13 上海亿锎智能科技有限公司 Method, device and system for realizing Web end project form designer

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106775725A (en) * 2016-12-19 2017-05-31 网易(杭州)网络有限公司 A kind of visual configuration edit methods and device
CN109597661A (en) * 2018-10-26 2019-04-09 阿里巴巴集团控股有限公司 A kind of service function configuration method and device
CN111930378A (en) * 2020-08-11 2020-11-13 上海亿锎智能科技有限公司 Method, device and system for realizing Web end project form designer

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
FATERIDDLE: "FormRender 开源第二弹:一站式表单解决方案", pages 1 - 15, Retrieved from the Internet <URL:https://juejin.cn/post/6870316361726787591> *
李琳等主编: "《网页设计与制作》", 31 August 2020, 大连海事大学出版社, pages: 295 - 296 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114741079A (en) * 2022-04-14 2022-07-12 上海携宁计算机科技股份有限公司 Software development method, platform, electronic device and computer-readable storage medium
CN115113947A (en) * 2022-06-27 2022-09-27 浙江惠瀜网络科技有限公司 Configuration method of process engine, terminal equipment and computer readable storage medium

Similar Documents

Publication Publication Date Title
US10726195B2 (en) Filtered stylesheets
CN110705237B (en) Automatic document generation method, data processing device and storage medium
CN106354483B (en) Data processing method and device and electronic equipment
CN110941950B (en) Interface document generation method, device, server and storage medium
CN112650492A (en) Rendering method, system and related device of Web page
CN108170409B (en) Development method and system of WEB front-end control
CN112632936A (en) Electronic form generation method, system and related device
CN106776800B (en) Page generation method, device and system for AngularJS framework
CN115268908A (en) Method, device, equipment and storage medium for self-defining configuration page
CN114816404A (en) Method and device for dynamically rendering view page, computer equipment and storage medium
CN113407877B (en) Configurable web form implementation method
CN112799670B (en) Method and system for unified multi-terminal logic development
CN112463261B (en) Interface calling method, device, electronic equipment, medium and product
CN116301813B (en) Low-code platform development method and system
CN112783494A (en) Automatic skeleton screen generation method and device and application page updating method and device
CN111124924A (en) API (application program interface) deployment method and device, electronic equipment and storage medium
CN107977459B (en) Report generation method and device
CN103885988B (en) Export method and device, the content output system of content
CN110727458A (en) Method and device for switching page template settings through background management
CN115061690A (en) Automatic code generation method and device
CN115577689A (en) Table component generation method, device, equipment and medium
CN102637290A (en) Operating system based on browser and compiling method
CN108228688B (en) Template generation method, system and server based on XBRL
CN114760365B (en) Data extraction method and device and electronic equipment
CN112541327A (en) Data reading method and device, electronic equipment and storage medium

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