Website rendering method based on JSON Schema data format

Abstract

The present invention discloses a website rendering method based on JSON Schema data format, comprising the following steps: step 1: obtaining a page construction request; step 2: responding to the page construction request, displaying a component selection area, a page preview area and a component attribute modification area in a visual interface based on a React framework, and obtaining a preview view; step 3: using JSON Schema to perform data conversion on the view, and storing the converted JSON Schema data in a database and a theme package; step 4: obtaining a rendering request; step 5: responding to the page rendering request, obtaining corresponding components from the theme package according to theme data and JSON Schema data to combine into data to be rendered; step 6: using Liquid template engine to parse the data to be rendered; step 7: using Nextjs to process the HTML file to be rendered. Thus, non-front-end development can quickly build pages, realize dynamic rendering of website content and structure, and improve website construction efficiency and maintainability.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, and in particular to a website rendering method based on JSON Schema data format. Background Art

[0002] In today's Internet era, website development has become an important means for various industries to display and provide services. Traditional web development usually relies on HTML, CSS and JavaScript, which have developed quite maturely.

[0003] 1. Traditional website architecture includes:

[0004] Front-end technology: including HTML for defining the structure of web pages, CSS for style design, and JavaScript for interactive behaviors and dynamic effects. Front-end code is usually written manually or generated through templates;

[0005] Back-end technology: Various programming languages ​​(such as Java, Python, PHP) are usually used to process business logic and interact with databases; common databases include relational databases (such as MySQL, PostgreSQL) and non-relational databases (such as MongoDB).

[0006] 2. Website functions include:

[0007] Static content display: Traditional websites mainly display content through HTML static pages;

[0008] Dynamic content interaction: Use JavaScript and backend APIs to implement dynamic content updates, such as user submission forms, comment systems, and real-time data display.

[0009] 3. The production process includes:

[0010] Front-end development: Developers need to write HTML, CSS, and JavaScript code to implement page layout, style design, and interactive functions;

[0011] Back-end development: Developers need to write server-side code, process business logic, access the database, and provide API interfaces for front-end calls;

[0012] Data management: Developers need to design database structure, write SQL queries or use ORM framework to perform data operations.

[0013] However, as website functions and content become more complex, traditional web development methods have gradually exposed some shortcomings and deficiencies:

[0014] 1. High maintenance cost: Since the front-end code and the back-end code are tightly coupled, any change in content or function requires modifying the corresponding code, which results in high maintenance cost.

[0015] 2. Poor flexibility: Traditional web development methods are difficult to cope with frequent changes in requirements and the display of dynamic data, and the development cycle is long.

[0016] 3. Coupling between data and presentation layers: The coupling between data and presentation layers makes content management and layout adjustment complicated and inefficient.

[0017] 4. Duplication of work: When developing complex websites, many page structures and components need to be rewritten, increasing the workload of developers.

[0018] 5. Lack of standardized data model: In traditional methods, data structures are often non-standardized, which makes data management and processing complicated. Summary of the invention

[0019] In order to solve one or some technical problems existing in the prior art, the present application proposes a website rendering method, which can realize dynamic rendering of website content and structure, improve development efficiency and maintainability of the website.

[0020] In order to solve the above existing technical problems, the purpose of this application is achieved by adopting the following technical solution: a website rendering method based on JSONSchema data format, comprising the following steps:

[0021] Step 1: Get the page building request;

[0022] Step 2: Respond to the page building request, display the component selection area, page preview area and component attribute modification area in the visual interface based on the React framework, and obtain the preview view, where the component is a single-file HTML template in .liquid format;

[0023] Step 3: Use JSON Schema to perform data conversion on the view, and store the converted JSON Schema data in the database and the theme package;

[0024] Step 4: Get rendering request;

[0025] Step 5: respond to the page rendering request, obtain the theme data and JSON Schema from the database, download the theme package to the local disk and decompress it, and obtain the corresponding components from the theme package according to the theme data and JSON Schema data to combine into the data to be rendered;

[0026] Step 6: Use the Liquid template engine to parse the data to be rendered, pass the component configuration and global configuration to the Liquid template engine, and obtain an HTML file;

[0027] Step 7: Use Nextjs to process the HTML file to be rendered, return the complete page HTML to the client for rendering, and realize dynamic display of the page.

[0028] Preferably, the component selection area in step 2 is used to display the added components, and is used to adjust the order of components, hide components or delete components; the page preview area is used to display the effect of page construction, and the constructed page is embedded in the preview area through Iframe, and PostMessage is used for two-way communication to pass the modified data to the preview view to achieve real-time update; the component property modification area is used to modify component properties; the preview view includes: the order of components after dragging, the results of component hiding or component deletion, component property data and global configuration data.

[0029] Preferably, the steps of using PostMessage to perform two-way communication include:

[0030] Pass the JSON Schema data of all components in the theme package to the component selection area for rendering, implement the component selection and addition function, and achieve decoupling;

[0031] Display different property configurations according to the component selected in the component selection area;

[0032] The view to be rendered is determined based on the selected component and the content after the component attributes are modified.

[0033] Preferably, the step of displaying the page preview area according to the component selected in the component selection area in step 2 includes:

[0034] Obtain a display request for the selected component according to the selected component, and display the component identifier according to the selected component attribute; locate the page preview area according to the selected component information, add visual editing to the page preview area, and drag to add or delete operations when the mouse is hovered over the component;

[0035] The result attribute display request is selected through the component. The component passes the component configuration to Nextjs through the Result API. Nextjs parses the data and passes it to the Liquid template engine. The template engine obtains the component and passes Props to the component. The component processes the view to be rendered according to Props and returns HTML.

[0036] Preferably, the specific steps of step six include:

[0037] According to the component selection area, the selected component data is transmitted to the pre-page preview area through a POST Message;

[0038] The preview area initiates a request to Nextjs. Nextjs obtains the component from the local specified theme package according to the selected component theme information and passes it to the Liquid template engine.

[0039] The Liquid template engine passes the selected component information to the component, which is a Liquid single-file HTML. It performs template parsing to obtain the HTML template to be rendered.

[0040] Preferably, the steps before step seven further include:

[0041] Get the page request and obtain the current domain name subject information based on the access request domain name;

[0042] Respond to page access requests and generate pages based on subject information and JSON Schema data;

[0043] Preview the generated page in the page preview area;

[0044] Based on the component selection area, the page preview area and the component property modification area, the view to be rendered is obtained according to the modified configuration.

[0045] Preferably, the steps before obtaining the rendering request in step 4 include:

[0046] Use the Hooks method of the React framework to encapsulate event data into components and obtain the template component to be displayed;

[0047] Embed the JS script in the form of Script and the CSS script in the form of Link into the component to obtain the displayed component;

[0048] The template component is displayed in the page preview area.

[0049] Preferably, the components all use WEB Component, allowing reusable custom elements to be created and used in web applications.

[0050] Preferably, the theme package is a compressed file ending in .zip format, and the theme package is a component that stores the component selection area and is used to distinguish and load different corresponding constructed pages.

[0051] Compared with the prior art, the present invention has the following beneficial effects:

[0052] The website rendering method based on the JSON Schema data format adopts the above technical solution, performs data conversion on the preview view through JSONSchema, stores the converted JSON Schema data in the database and the theme package, then responds to the page rendering request, obtains the theme data and JSON Schema from the database, downloads the theme package to the local disk and decompresses it, uses Nextjs to process the HTML file to be rendered, and returns the complete page HTML to the client for rendering, so that non-front-end developers can also quickly generate dynamic pages. Through dynamic pages, user experience and interface details can be quickly processed, thereby improving page development efficiency; by performing JSON Schema data conversion on the view to be rendered and storing it, the amount of data that needs to be stored is reduced, storage efficiency is improved, and user experience is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1 It is a schematic diagram of the process of the present invention. DETAILED DESCRIPTION

[0054] Below, the present application is further described in conjunction with the accompanying drawings and specific implementation methods. It should be noted that, under the premise of no conflict, the various embodiments or technical features described below can be arbitrarily combined to form a new embodiment.

[0055] like Figure 1 As shown, the website rendering method based on the JSON Schema data format includes the following steps:

[0056] Step 1: Get the page building request;

[0057] Step 2: Respond to the page building request, display the component selection area, page preview area and component attribute modification area in the visual interface based on the React framework, and obtain the preview view, where the component is a single-file HTML template in .liquid format;

[0058] Step 3: Use JSON Schema to perform data conversion on the view, and store the converted JSON Schema data in the database and the theme package;

[0059] Step 4: Get rendering request;

[0060] Step 5: respond to the page rendering request, obtain the theme data and JSON Schema from the database, download the theme package to the local disk and decompress it, and obtain the corresponding components from the theme package according to the theme data and JSON Schema data to combine into the data to be rendered;

[0061] Step 6: Use the Liquid template engine to parse the data to be rendered, pass the component configuration and global configuration to the Liquid template engine, and obtain an HTML file;

[0062] Step 7: Use Nextjs to process the HTML file to be rendered, return the complete page HTML to the client for rendering, and realize dynamic display of the page.

[0063] The component selection area in step 2 is used to display the added components and is used to adjust the order of components, hide components or delete components; the page preview area is used to display the effect of page construction, and the constructed page is embedded in the preview area through Iframe, and PostMessage is used for two-way communication to pass the modified data to the preview view to achieve real-time update; the component property modification area is used to modify component properties; the preview view includes: the order of components after dragging, the results of component hiding or component deletion, component property data and global configuration data.

[0064] The steps for two-way communication using PostMessage include:

[0065] Pass the JSON Schema data of all components in the theme package to the component selection area for rendering, implement the component selection and addition function, and achieve decoupling;

[0066] Display different property configurations according to the component selected in the component selection area;

[0067] The view to be rendered is determined based on the selected component and the content after the component attributes are modified.

[0068] The steps of displaying the page preview area according to the component selected in the component selection area in step 2 include:

[0069] Obtain a display request for the selected component according to the selected component, and display the component identifier according to the selected component attribute; locate the page preview area according to the selected component information, add visual editing to the page preview area, and drag to add or delete operations when the mouse is hovered over the component;

[0070] The result attribute display request is selected through the component. The component passes the component configuration to Nextjs through the Result API. Nextjs parses the data and passes it to the Liquid template engine. The template engine obtains the component and passes Props to the component. The component processes the view to be rendered according to Props and returns HTML.

[0071] The specific steps of step six include:

[0072] According to the component selection area, the selected component data is transmitted to the pre-page preview area through a POST Message;

[0073] The preview area initiates a request to Nextjs. Nextjs obtains the component from the local specified theme package according to the selected component theme information and passes it to the Liquid template engine.

[0074] The Liquid template engine passes the selected component information to the component, which is a Liquid single-file HTML. It performs template parsing to obtain the HTML template to be rendered.

[0075] The steps before step seven also include:

[0076] Get the page request and obtain the current domain name subject information based on the access request domain name;

[0077] Respond to page access requests and generate pages based on subject information and JSON Schema data;

[0078] Preview the generated page in the page preview area;

[0079] Based on the component selection area, the page preview area and the component property modification area, the view to be rendered is obtained according to the modified configuration.

[0080] The steps before obtaining the rendering request in step 4 include:

[0081] Use the Hooks method of the React framework to encapsulate event data into components and obtain the template component to be displayed;

[0082] Embed the JS script in the form of Script and the CSS script in the form of Link into the component to obtain the displayed component;

[0083] The template component is displayed in the page preview area.

[0084] The components described all use WEB Component, which allows you to create reusable custom elements and use them in web applications.

[0085] The theme package is a compressed file ending in .zip format. The theme package is a component that saves the component selection area and is used to distinguish and load different corresponding built pages.

[0086] For step one, a page generation request sent by a user through a browser is obtained. The user includes but is not limited to front-end developers, product personnel, and operation personnel. The page generation request refers to a request to generate a WEB page.

[0087] For step 2, responding to the page generation request means displaying the component selection area, page preview area and component attribute modification area in the visual interface based on the React framework to generate a preview page; the component in the component selection area is a single-file HTML template in .liquid format, the page preview area is embedded in the preview page through Iframe, the component attribute modification area implements component attribute modification, and PostMessage is used for two-way communication to pass the modified data to the preview page to achieve real-time update;

[0088] The component selection area is an area where template components are displayed for users to drag, sort and select. Components are components that encapsulate HTML elements, layouts, styles, and business logic.

[0089] The page preview area displays the components selected by the user through dragging and dropping, receives the user's modification operations on component properties and positions, and displays the dynamically rendered page.

[0090] The component property modification area is used to display the properties of the preview area components and receive user modifications to the display component property configuration.

[0091] The user submits a view request by entering it in the component selection area and the component property modification area. The front end responds to the request and obtains the view to be rendered. After the user adds the component to the page preview area, the component configuration can be modified in the component property modification area. Each modification will update the view to be rendered and obtain the latest page display result, including adjusting the component position. The operation record array stores the data before each edit. Each edit will store the entire State in the cache for undo and restore.

[0092] The template component selection result contains the component unique ID. The template position data is an array of component ID order, and the position array ID is usually used to update the rendering view order. The template component attribute configuration result is a display of the modified configuration of the template component. Template component hiding and deletion is to update the view to be rendered. Deleting will delete the component and update the view to be rendered. Hiding will add hidden attributes and update the view to be rendered.

[0093] For step 3, the constructed page preview view is converted to JSON Schema, and the converted JSON Schema files of the page component sequence, the modified component configuration, and the global settings are stored in the database and theme package. The JSON Schema page describes specific page components and elements.

[0094] JSON Schame uses a standardized data structure, as shown below:

[0095] [{"name":"name","class":"section","settings":[{"type":"text","id":"title","label":"title","default":"title"}],"blo cks":[{"type":"image","settings":[{"type":"text","id":"title","label":"title","default":"title"}]}],"presets":[]}]

[0096] The above is an example of a component. Settings describes the configuration of the component, and blocks describes the blocks of the component, that is, the sub-elements contained in the current component, which can be called sub-components.

[0097] For step 4, the page rendering request sent by the user's front end is obtained, and the front end sends the page rendering request to the server. The page rendering request is a request to obtain JSON Schema page data to generate page dynamic rendering and preview.

[0098] For step five, the server responds to the page rendering request, downloads the theme package to the local disk and decompresses it, and obtains corresponding components from the theme package according to the theme data and JSON Schema data to combine them into the data to be rendered.

[0099] For step 6, the front end uses the Liquid template engine to convert the configuration in the component into an HTML file, uses the converted HTM file as the target file, parses the data to be rendered, and assembles the components described in the JSON Schema page data. The assembled page data is parsed by the template, and the corresponding component is requested, which is a single file HTML ending in .Liquid format, which contains the HTML template return string format.

[0100] For step seven, Nextjs loops through the element template component array, takes out the element template component in the element template component array for template parsing, converts it into data in Map format, and passes the converted input to the template engine, thereby realizing dynamic rendering and displaying the target HTML file in the editing area, thereby improving development efficiency.

[0101] In the above technical solution, based on the React framework, WEB Component and Liquid template engine, a preview view is obtained from a component formed by a single-file HTML template in .liquid format, component properties are modified through a visual interface, the preview view is converted into JSON Schema data, and the converted data is stored in a database and theme package. We combine the components and layouts of the website into a standardized directory in a single-file HTML template in .liquid format, which is called a theme; Nextjs is used to download the theme package to the local computer, and then the JSON Schema data is converted. The Liquid template engine is used to parse and load the components described in the JSON Schame from the local computer to combine the pages. Finally, the React framework is used for dynamic rendering to obtain the target HTML file for display, so that non-front-end developers can quickly build pages, realize dynamic rendering of website content and structure, and improve website building efficiency and maintainability.

[0102] The front end of this application, that is, the front-end part of the website, runs on the PC (computer) and mobile browsers to display web pages for users to browse. The server side of this application serves the front end, and the service content includes providing resources to the front end and saving front-end data. The domain name of this application can be said to be a synonym for an IP address, but for the sake of easy memory, it is usually named after a segment of easy-to-remember words and ends with .com or .cn. A domain name. The web page of this application, that is, a web page, is a file organized in HTML (Hypertext Markup Language) format on the World Wide Web; when information is queried through the World Wide Web, it appears in the form of an information page, which may include graphics, text, sound and video information.

[0103] The React framework used in this application is a progressive front-end framework for building user interfaces.

[0104] The Script tag in this application is one of the very important tags in HTML and has many uses. It is often used to introduce JavaScript scripts.

[0105] The above-mentioned implementation modes are only preferred implementation modes of the present application and cannot be used to limit the scope of protection of the present application. Any non-substantial changes and substitutions made by technicians in this field on the basis of the present application shall fall within the scope of protection required by the present application.

Claims

1. A website rendering method based on JSON Schema data format, characterized in that: The following steps are involved: Step 1: Get the page building request; Step 2: In response to the page building request, based on the React framework, the component selection area, the page preview area and the component attribute modification area are displayed in the visual interface to obtain a preview view, wherein the component is a single-file HTML template in .liquid format; the component selection area is used to display the added components, and is used to adjust the component order, hide components or delete components; the page preview area is used to display the effect of page building, and the built page is embedded into the preview area through Iframe, and PostMessage is used for two-way communication to pass the modified data to the preview view to achieve real-time update; the component attribute modification area is used to modify component attributes; the preview view includes: the order of components after dragging, the results of component hiding or component deletion, the attribute data of the component and the global configuration data; the step of displaying the page preview area according to the component selected in the component selection area includes: obtaining the selected component display request according to the selected component, and displaying the component identifier according to the selected component attribute; positioning the page preview area according to the selected component information, and adding visual editing to the page preview area, and when the mouse is hovering over the component, you can drag to add and delete operations; through the selection result and display request of the component, the component is displayed through Result The API passes the component configuration to Nextjs, which parses the data and passes it to the Liquid template engine. The template engine obtains the component and passes Props to the component. The component processes the view to be rendered according to Props and returns HTML. The components all use WEB Component, which allows you to create reusable custom elements and use them in web applications. Step 3: Use JSON Schema to perform data conversion on the view, and store the converted JSON Schema data in the database and the theme package; the theme package is a compressed file ending in .zip format, and the theme package is a component that saves the component selection area, which is used to distinguish and load different corresponding built pages; Step 4: Get rendering request; Step 5: respond to the page rendering request, obtain the theme data and JSON Schema from the database, download the theme package to the local disk and decompress it, and obtain the corresponding components from the theme package according to the theme data and JSON Schema data to combine into the data to be rendered; Step 6: Use the Liquid template engine to parse the data to be rendered, pass the component configuration and global configuration to the Liquid template engine, and obtain an HTML file; the specific steps include: passing the selected component data to the page preview area through POSTMessage according to the component selection area; the preview area initiates a request to Nextjs, and Nextjs obtains the component from the local specified theme package according to the selected component theme information and passes it to the Liquid template engine; the Liquid template engine passes the selected component information to the component, which is a Liquid single-file HTML, and performs template parsing to obtain the HTML template to be rendered; Step 7: Use Nextjs to process the HTML file to be rendered, return the complete page HTML to the client for rendering, and realize dynamic display of the page.

2. The website rendering method based on the JSON Schema data format according to claim 1, characterized in that: The steps for two-way communication using PostMessage include: Pass the JSON Schema data of all components in the theme package to the component selection area for rendering, implement the component selection and addition function, and achieve decoupling; Display different property configurations according to the component selected in the component selection area; The view to be rendered is determined based on the selected component and the content after the component attributes are modified.

3. The website rendering method based on JSON Schema data format according to claim 1, characterized in that: The steps before step seven also include: Get the page request and obtain the current domain name subject information based on the access request domain name; Respond to page access requests and generate pages based on subject information and JSON Schema data; Preview the generated page in the page preview area; Based on the component selection area, the page preview area and the component property modification area, the view to be rendered is obtained according to the modified configuration.

4. The website rendering method based on JSON Schema data format according to claim 1, characterized in that: The steps before obtaining the rendering request in step 4 include: Use the Hooks method of the React framework to encapsulate event data into components and obtain the template component to be displayed; Embed the JS script in the form of Script and the CSS script in the form of Link into the component to obtain the displayed component; The template component is displayed in the page preview area.

Images