阅读说明：本技术 基于Web前端开发的日报简表网页设计方法及系统 (Daily report profile webpage design method and system based on Web front-end development ) 是由 高乙菡 刘柳 王利文 于 2021-07-09 设计创作，主要内容包括：本发明公开的一种基于Web前端开发的日报简表网页设计方法,包括：配置一个新网页页面所需要的路由参数；模块化布局网页的工具模块；从组件库中引入组件初步搭建网页架构；发起获取后端数据请求；对获取后端数据进行数据处理和渲染；展示页面内的所有数据。该方法通过模块化开发应用组件,将原有的交互过程拆分到每个页面,解决了页面个性化缺失的问题,提升了开发时效性,实现了后期分页面维护和个性化展示。(The invention discloses a method for designing a daily report profile webpage based on Web front-end development, which comprises the following steps: configuring a routing parameter required by a new webpage page; a tool module for modularly laying out the webpage; introducing a component to initially build a webpage framework from a component library; initiating a request for acquiring backend data; performing data processing and rendering on the acquired back-end data; all data within the page is shown. According to the method, the original interaction process is split into each page through the modular development application components, the problem of personalized page loss is solved, the development timeliness is improved, and later-stage page maintenance and personalized display are realized.)

1. A method for designing a daily report profile webpage based on Web front-end development is characterized by comprising the following steps:

configuring a routing parameter required by a new webpage page;

a tool module for modularly laying out the webpage;

introducing a component to initially build a webpage framework from a component library;

initiating a request for acquiring backend data;

performing data processing and rendering on the acquired back-end data;

all data within the page is shown.

2. The method as claimed in claim 1, wherein said data processing of the acquired backend data specifically comprises: and carrying out structure conversion, rounding and effective field extraction on the back-end data.

3. The method of claim 1, wherein the tool modules comprise a header, a search bar, a toggle bar, and a presentation module.

4. The method of claim 1, wherein the method further comprises: screening time and tissue structures specifically comprises the following steps:

and acquiring the value of the selection frame, requesting to acquire data of corresponding conditions from the back end according to the value of the selection frame, and displaying the acquired data on the webpage.

5. A daily report profile webpage design system developed based on a Web front end is characterized by comprising the following steps: a parameter configuration module, a layout module, a webpage building module, a request initiating module, a processing module and a display module,

the parameter configuration module is used for configuring a routing parameter required by a new webpage page;

the layout module is used for modularly laying out a tool module of the webpage;

the webpage building module is used for introducing a component initial building webpage framework from a component library;

the request initiating module is used for initiating a request for acquiring backend data;

the processing module is used for carrying out data processing and rendering on the acquired back-end data;

the display module is used for displaying all data in a page.

6. The system of claim 5, wherein the processing module comprises a data processing unit for performing structure transformation, rounding and valid field extraction on the obtained backend data, and a rendering unit for rendering with an application program interface built into the component.

7. The system of claim 5, wherein the tool modules include a header, a search bar, a toggle bar, and a presentation module.

8. The system of claim 5, further comprising a filtering module, wherein the filtering module is configured to obtain the data of the corresponding condition according to the value of the selection box and the back-end request according to the value of the selection box, and display the obtained data on the webpage.

9. An intelligent terminal comprising a processor, an input device, an output device and a memory, the processor, the input device, the output device and the memory being interconnected, the memory being adapted to store a computer program, the computer program comprising program instructions, characterized in that the processor is configured to invoke the program instructions to perform the method according to any of claims 1-4.

10. A computer-readable storage medium, characterized in that the computer storage medium stores a computer program comprising program instructions that, when executed by a processor, cause the processor to perform the method according to any of claims 1-4.

Technical Field

The invention relates to the technical field of webpage design, in particular to a method, a system, a terminal and a medium for designing a daily report profile webpage based on Web front-end development.

Background

The existing daily report profile webpage is only displayed in a static form without dynamic effect. In order to improve code reusability and development timeliness, interaction of all the pages of the type is packaged and written together through native JavaScript in the development process, and certain inconvenience is caused to maintenance of a single page in the future. Meanwhile, the method also brings certain limitation to the rich individualization of the content display of the webpage in the future.

Disclosure of Invention

Aiming at the defects in the prior art, the embodiment of the invention provides a method, a system, a terminal and a medium for designing a daily report profile webpage based on Web front-end development, wherein a single page can be independently modified, the development timeliness is improved, and the later-stage paging surface maintenance is realized.

In a first aspect, a method for designing a daily report profile webpage based on Web front-end development provided in an embodiment of the present invention includes:

configuring a routing parameter required by a new webpage page;

a tool module for modularly laying out the webpage;

introducing a component to initially build a webpage framework from a component library;

initiating a request for acquiring backend data;

performing data processing and rendering on the acquired back-end data;

all data within the page is shown.

Optionally, the data processing on the acquired backend data specifically includes: and carrying out structure conversion, rounding and effective field extraction on the back-end data.

Optionally, the tool modules include a header, a search bar, a toggle bar, and a presentation module.

Optionally, the method further comprises: screening time and tissue structures specifically comprises the following steps:

and acquiring the value of the selection frame, requesting to acquire data of corresponding conditions from the back end according to the value of the selection frame, and displaying the acquired data on the webpage.

In a second aspect, an embodiment of the present invention provides a system for designing a daily report profile Web page based on Web front-end development, including: a parameter configuration module, a layout module, a webpage building module, a request initiating module, a processing module and a display module,

the parameter configuration module is used for configuring a routing parameter required by a new webpage page;

the layout module is used for modularly laying out a tool module of the webpage;

the webpage building module is used for introducing a component initial building webpage framework from a component library;

the request initiating module is used for initiating a request for acquiring backend data;

the processing module is used for carrying out data processing and rendering on the acquired back-end data;

the display module is used for displaying all data in a page.

Optionally, the processing module includes a data processing unit and a rendering unit, the data processing unit is configured to perform structure conversion, rounding, and effective field extraction on the obtained backend data, and the rendering unit performs rendering by using an application program interface provided in the component.

Optionally, the tool modules include a header, a search bar, a toggle bar, and a presentation module.

Optionally, the system further includes a screening module, where the screening module is configured to obtain, according to the value of the selection box, data of the corresponding condition according to the value of the selection box and a request from the back end, and display the obtained data on the web page.

In a third aspect, an intelligent terminal provided in an embodiment of the present invention includes a processor, an input device, an output device, and a memory, where the processor, the input device, the output device, and the memory are connected to each other, the memory is used to store a computer program, the computer program includes program instructions, and the processor is configured to call the program instructions to execute the method described in the foregoing embodiment.

In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, in which a computer program is stored, the computer program including program instructions, which, when executed by a processor, cause the processor to execute the method described in the above embodiment.

The invention has the beneficial effects that:

according to the method for designing the daily report profile webpage based on the Web front-end development, the original interaction process is divided into each page through the modularized development application assembly, the problem of personalized missing of the page is solved, the development timeliness is improved, and later-stage page maintenance and personalized display are realized.

The invention provides a daily report profile webpage design system, a terminal and a medium based on Web front-end development, which have the same beneficial effects with the same inventive concept as the daily report profile webpage design method developed at the Web front-end.

Drawings

In order to more clearly illustrate the detailed description of the invention or the technical solutions in the prior art, the drawings that are needed in the detailed description of the invention or the prior art will be briefly described below. Throughout the drawings, like elements or portions are generally identified by like reference numerals. In the drawings, elements or portions are not necessarily drawn to scale.

FIG. 1 is a flow chart illustrating a method for designing a daily profile Web page based on Web front-end development according to a first embodiment of the present invention;

FIG. 2 is a block diagram illustrating a second embodiment of a Web page design system for a daily report profile developed based on a Web front end;

fig. 3 shows a block diagram of an intelligent terminal according to a third embodiment of the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, not all, embodiments of the present invention. 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 invention.

It will be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.

It is also to be understood that the terminology used in the description of the invention herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. As used in the specification of the present invention and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.

It should be further understood that the term "and/or" as used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

As used in this specification and the appended claims, the term "if" may be interpreted contextually as "when", "upon" or "in response to a determination" or "in response to a detection". Similarly, the phrase "if it is determined" or "if a [ described condition or event ] is detected" may be interpreted contextually to mean "upon determining" or "in response to determining" or "upon detecting [ described condition or event ]" or "in response to detecting [ described condition or event ]".

It is to be noted that, unless otherwise specified, technical or scientific terms used herein shall have the ordinary meaning as understood by those skilled in the art to which the invention pertains.

As shown in fig. 1, a flowchart of a method for designing a daily profile Web page based on Web front-end development according to a first embodiment of the present invention is shown, which includes the following steps:

and S1, configuring the routing parameters required for a new web page.

And S2, a tool module for modularly laying out the webpage.

And S3, introducing a component initial building webpage framework from the component library.

S4, initiate a get backend data request.

And S5, performing data processing and rendering on the acquired backend data.

S6, all data within the page is shown.

The method of the embodiment is developed based on technologies such as JavaScript, scss, React, AntDesign, axios and the like. Developing a new page requires configuring related routing parameters, in this embodiment, a act-router-dom routing technology is used to configure the related routing parameters, modular development is performed by using a modular development thinking, and the header, the search bar, the switch bar, the display module and the like of the web page are div-laid. The page displays the data in a form of a table (the page comprises time and organizational structure screening, and supports downloading and uploading functions). And introducing the components such as table, model, button, message and the like in the Ant Design component library to initially build a complete webpage. Ant Design is an enterprise-level front-end Design language and reach-based front-end framework implementation developed and in use by Ant golden garments. Adopting a table component of an Ant Design component library as a technical support of the webpage table; and referencing message, modal and button components in the Ant Design component library to assist in realizing the function display of prompt boxes, buttons and the like of the webpage. Realizing page skipping between single pages through act-router-dom; js is used for realizing the analysis processing of the time in the webpage. And requesting back-end data by using axios, performing data processing on the acquired data through a JavaScript language, and rendering the data to a webpage for display by using a return technology and an API (application program interface) in the module. And further optimizing and modifying the personalized display of the page by adopting the scss front-end language to realize the display of data in the page. The data processing specifically comprises the following steps: and performing structure conversion, rounding, effective field extraction and the like on the back-end data.

The daily report profile webpage method developed based on the Web front end further comprises the step S7: the step S7 is performed after the step S5 and before the step S6 for screening time and tissue structure, and the step S7 specifically includes: and acquiring the value of the selection frame, requesting to acquire data of corresponding conditions from the back end according to the value of the selection frame, and displaying the acquired data on the webpage.

According to the method for designing the daily report profile webpage based on the Web front-end development, the original interaction process is divided into each page through the modularized development application assembly, the problem of personalized missing of the page is solved, the development timeliness is improved, and later-stage page maintenance and personalized display are realized.

In the first embodiment, a method for designing a daily report profile Web page developed based on a Web front end is provided, and correspondingly, a system for designing a daily report profile Web page developed based on a Web front end is also provided. Please refer to fig. 2, which is a block diagram illustrating a second embodiment of a system for designing a daily profile Web page based on Web front-end development according to the present invention. Since the apparatus embodiments are substantially similar to the method embodiments, they are described in a relatively simple manner, and reference may be made to some of the descriptions of the method embodiments for relevant points. The device embodiments described below are merely illustrative.

As shown in fig. 2, a block diagram of a second embodiment of the present invention provides a system for designing a Web page based on a daily profile developed by a Web front end, where the system includes: the system comprises a parameter configuration module, a layout module, a webpage building module, a request initiating module, a processing module and a display module, wherein the parameter configuration module is used for configuring routing parameters required by a new webpage; the layout module is used for modularly laying out a tool module of the webpage; the webpage building module is used for introducing a component initial building webpage framework from a component library; the request initiating module is used for initiating a request for acquiring the back-end data; the processing module is used for carrying out data processing and rendering on the acquired back-end data; the display module is used for displaying all data in the page.

In this embodiment, the processing module includes a data processing unit and a rendering unit, the data processing unit is configured to perform structure conversion, rounding, and effective field extraction on the obtained backend data, and the rendering unit performs rendering by using an application program interface provided in the component.

In this embodiment, the tool modules include a header, a search bar, a toggle bar, and a presentation module.

In this embodiment, the system further includes a screening module, where the screening module is configured to obtain, according to the value of the selection box, data of the corresponding condition from a back-end request according to the value of the selection box, and display the obtained data on a webpage.

According to the Web page design system based on the daily report profile developed by the Web front end, the original interaction process is divided into each page through the modularized development application component, the problem of personalized missing of the page is solved, the development timeliness is improved, and later-stage page maintenance and personalized display are realized.

As shown in fig. 3, a block diagram of an intelligent terminal according to a third embodiment of the present invention is shown, where the terminal includes a processor, an input device, an output device, and a memory, where the processor, the input device, the output device, and the memory are connected to each other, the memory is used to store a computer program, and the computer program includes program instructions, and the processor is configured to call the program instructions to execute the method described in the foregoing embodiment.

It should be understood that in the embodiments of the present invention, the Processor may be a Central Processing Unit (CPU), and the Processor may also be other general purpose processors, Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components, and the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.

The input device may include a touch pad, a fingerprint sensor (for collecting fingerprint information of a user and direction information of the fingerprint), a microphone, etc., and the output device may include a display (LCD, etc.), a speaker, etc.

The memory may include both read-only memory and random access memory, and provides instructions and data to the processor. The portion of memory may also include non-volatile random access memory. For example, the memory may also store device type information.

In a specific implementation, the processor, the input device, and the output device described in the embodiments of the present invention may execute the implementation described in the method embodiments provided in the embodiments of the present invention, and may also execute the implementation described in the system embodiments in the embodiments of the present invention, which is not described herein again.

The invention also provides an embodiment of a computer-readable storage medium, in which a computer program is stored, which computer program comprises program instructions that, when executed by a processor, cause the processor to carry out the method described in the above embodiment.

The computer readable storage medium may be an internal storage unit of the terminal described in the foregoing embodiment, for example, a hard disk or a memory of the terminal. The computer readable storage medium may also be an external storage device of the terminal, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like provided on the terminal. Further, the computer-readable storage medium may also include both an internal storage unit and an external storage device of the terminal. The computer-readable storage medium is used for storing the computer program and other programs and data required by the terminal. The computer readable storage medium may also be used to temporarily store data that has been output or is to be output.

Those of ordinary skill in the art will appreciate that the elements and algorithm steps of the examples described in connection with the embodiments disclosed herein may be embodied in electronic hardware, computer software, or combinations of both, and that the components and steps of the examples have been described in a functional general in the foregoing description for the purpose of illustrating clearly the interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.

It can be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working processes of the terminal and the unit described above may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.

In the several embodiments provided in the present application, it should be understood that the disclosed terminal and method can be implemented in other manners. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may also be an electric, mechanical or other form of connection.

Finally, it should be noted that: the above embodiments are only used to illustrate the technical solution of the present invention, and not to limit the same; while the invention has been described in detail and with reference to the foregoing embodiments, it will be understood by those skilled in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; such modifications and substitutions do not depart from the spirit and scope of the present invention, and they should be construed as being included in the following claims and description.