Front-end query page generation method, query method, electronic device, and storage medium

Abstract

The present application discloses a method for generating a front-end query page, a query method, an electronic device, and a storage medium. The generation method includes: by defining a grammar, configuring a grammar library, the grammar library includes a query condition tag and a query result tag; according to the page development requirements, parsing the query condition tag to obtain the query condition of the page and parsing the query result tag to obtain the query result of the page; according to the combination of the query condition and the query result, generating a custom page of the front-end query page. The present application realizes the automatic generation of the front-end query page. The present application can be used for front-end query page development projects in the financial field.

Description

Technical Field

[0001] The present application relates to the technical field of front-end query page development, and in particular to a front-end query page generation method, a query method, an electronic device, and a storage medium. Background Art

[0002] Query pages are common in Java Web application systems. Usually, the query page front end is developed using HTML and JavaScript, and back-end personnel can also do some simple development using related technologies.

[0003] Among the related technologies, front-end technologies have derived front-end frameworks such as Vue and Angular. These technologies have improved customer experience, but also brought certain learning costs. For some programmers who are not familiar with the business, they cannot get started in a short period of time. Especially when the project is urgent, the role of programmers cannot be brought into play. Summary of the invention

[0004] The embodiment of the present application provides: A method for generating a front-end query page, a query method, an electronic device, and a storage medium to improve development efficiency and simplify the front-end query process.

[0005] The present application embodiment adopts the following technical solutions:

[0006] In a first aspect, an embodiment of the present application provides a method for generating a front-end query page, wherein the method comprises:

[0007] By defining the grammar, a grammar library is configured, wherein the grammar library includes a query condition tag and a query result tag;

[0008] According to the page development requirements, the query condition tag is parsed to obtain the query condition of the page and the query result tag is parsed to obtain the query result of the page;

[0009] A custom page of the front-end query page is generated according to a combination of the query condition and the query result.

[0010] In some embodiments, the method further comprises:

[0011] In the case where the custom page needs to be loaded, identifying from cache data whether the current page has been loaded;

[0012] If the custom page is not loaded or the cache is expired, the custom page is reloaded, and if the custom page exists in the cache data, the cache content is returned;

[0013] During the process of reloading the custom page, determining the relevant query interface according to the mapping interface stored in the grammar library;

[0014] Get the input parameters of the interface method through reflection technology;

[0015] By identifying custom annotations, get the attributes used as query conditions;

[0016] Inject the acquired name and type information of the attribute of the query condition into the custom template engine, and generate the front-end result code according to the return value type of the relevant query interface;

[0017] After the front-end result code is loaded on the custom page, it is stored in cache data.

[0018] In some embodiments, parsing the query condition tag to obtain the query condition of the page and parsing the query result tag to obtain the query result of the page according to the page development requirements includes:

[0019] By identifying the query field annotation of the customized query page, the query condition tag is identified as a page query condition;

[0020] By identifying the query result field of the customized query page, the query result tag is identified as the query result of the page.

[0021] In some embodiments, the grammar library is obtained by defining the grammar and configuring the grammar library, and the grammar library includes query condition tags and query result tags, including:

[0022] By defining the grammar, the meta tags in the grammar library are configured;

[0023] The meta tags are combined to form a query general tag component, which includes query conditions and query results. The query conditions include at least one of the following form elements depending on the data type: a text input box, a time control, a drop-down box, and a query reset button. The query results include a customized display based on the type of the query result, and a paginated display based on the query result data set.

[0024] In a second aspect, an embodiment of the present application further provides a method for querying a front-end query page, wherein a back-end server is applied, and the method includes:

[0025] Receive a query request from a front-end query page, where the query request carries at least a request path and a request type;

[0026] In response to the request path and the request type, determining whether a custom page needs to be loaded;

[0027] If it is determined that the custom page needs to be loaded, the query condition tag and the query result tag in the custom page are parsed respectively and then the custom page is loaded and stored in the cache data. The query condition tag and the query result tag are configured in the grammar library by defining grammar.

[0028] In some embodiments, parsing the query condition tag and the query result tag in the custom page includes:

[0029] Obtaining the value of the request path according to the request parameters, wherein the value includes the path and name of the custom page;

[0030] By parsing the custom page, a query condition information field, a query result information field and page style information are obtained, wherein the query condition information field and the query result information field are generated by configuring the definition grammar into the grammar library, and the page style information includes a preset query page template style;

[0031] By parsing the custom page, the configured query interface is processed to obtain query result information.

[0032] In some embodiments, the query condition tag and the query result tag are configured into a grammar library by defining a grammar, including:

[0033] Define code snippets of related tags through any one or more front-end technologies such as HTML, JavaScript, Vue, and Angular;

[0034] The code snippet is encapsulated into a custom tag including query conditions and query results through the FreeMarker module.

[0035] In a third aspect, an embodiment of the present application further provides a front-end query page generation device, wherein the device comprises:

[0036] A configuration module, configured to obtain a grammar library by defining a grammar, wherein the grammar library includes a query condition tag and a query result tag;

[0037] A parsing module, used to parse the query condition tag to obtain the query condition of the page and parse the query result tag to obtain the query result of the page according to the page development requirements;

[0038] A generation module is used to generate a custom page of the front-end query page according to a combination of the query condition and the query result.

[0039] In a fourth aspect, an embodiment of the present application further provides an electronic device, comprising: a processor; and a memory arranged to store computer executable instructions, wherein the executable instructions, when executed, cause the processor to perform the above method.

[0040] In a fifth aspect, an embodiment of the present application further provides a computer-readable storage medium, which stores one or more programs. When the one or more programs are executed by an electronic device including multiple application programs, the electronic device executes the above method.

[0041] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects: First, by defining the grammar, a grammar library is configured. Then, according to the page development requirements, the query condition tag is parsed to obtain the query condition of the page and the query result tag is parsed to obtain the query result of the page. Finally, based on the combination of the query condition and the query result, a custom page of the front-end query page is generated. Through the above method, the logic of the query page with relatively high versatility is abstracted, and a custom label template is established, which reduces the difficulty of native front-end technology development, facilitates programmers who are not familiar with the business to quickly get started, and increases development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0043] Figure 1 A schematic diagram of a flow chart of a method for generating a front-end query page in an embodiment of the present application;

[0044] Figure 2 A schematic diagram of the flow of a query method for a front-end query page in an embodiment of the present application;

[0045] Figure 3 A schematic diagram of the syntax definition and parsing execution process in the method for generating a front-end query page in an embodiment of the present application;

[0046] Figure 4 A schematic diagram of the principle of parsing and execution in the method for generating a front-end query page in an embodiment of the present application;

[0047] Figure 5 A schematic diagram of the flow of parsing and execution in the method for generating a front-end query page in an embodiment of the present application;

[0048] Figure 6 This is a schematic diagram of the structure of a device for generating a front-end query page in an embodiment of the present application;

[0049] Figure 7This is a schematic diagram of the structure of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION

[0050] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0051] The technical terms involved in the embodiments of this application are as follows:

[0052] JSP: Java Server Pages, a dynamic web page development technology. It uses JSP tags to insert Java code into HTML web pages. Tags usually start with <% and end with %>.

[0053] FreeMarker: A template engine, that is, a general tool for generating output text (HTML pages, emails, configuration files, source code, etc.) based on templates and data to be changed.

[0054] Vue: A progressive JavaScript framework for building user interfaces.

[0055] Angular: A front-end framework for building user interfaces.

[0056] The technical solutions provided by various embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0057] The present application embodiment provides a method for generating a front-end query page, such as Figure 1 As shown, a schematic flow chart of a method for generating a front-end query page in an embodiment of the present application is provided, and the method at least includes the following steps S110 to S130:

[0058] Step S110, by defining the grammar, a grammar library is configured, and the grammar library includes a query condition tag and a query result tag.

[0059] By defining a special tag syntax library, developers can directly use the tags in the syntax library to design custom pages, and then parse and execute the program to generate the front-end page.

[0060] like Figure 3As shown, during the specific implementation, a set of tag languages ​​called SimPage was customized through the template engine, in which the front-end personnel combined HTML, JavaScript, Vue, Angular and other front-end technologies to define the code snippets of related tags, and the back-end personnel used FreeMarker to encapsulate the code snippets into custom tags.

[0061] The SimPage tag in the embodiment of the present application includes two parts, namely, the query condition and the query result. The definition of the SimPage tag is to first define the meta tags, and then combine these meta tags to form a query general tag component.

[0062] It can be understood that the query conditions are divided into form elements such as text input boxes, time controls, drop-down boxes, and query reset buttons according to different data types. The query result is a result display page, which is customized according to the type of result and displayed in pages according to the result data set.

[0063] When page developers (programmers) develop pages by applying the SimPage language, they only need to use the tags in the tag library. When using SimPage tags to develop query pages, developers (programmers) only need to declare the backend query interface corresponding to the current query page. The program will automatically identify the query elements and result sets of the query page during the parsing and execution process, and will generate the corresponding front-end page after parsing and execution.

[0064] Step S120: according to the page development requirements, the query condition tag is parsed to obtain the query condition of the page and the query result tag is parsed to obtain the query result of the page.

[0065] By parsing the query condition tags and query result tags determined by the page development requirements, the corresponding query conditions and query results can be obtained.

[0066] The parsing execution process is to translate the page written by SimPage in the embodiment of the present application into a common front-end page and return it to the browser. In the SimPage parsing program, a set of annotations is customized.

[0067] like Figure 3 As shown, in the query interface, the parameter bean in the method defaults to the query domain of the query page. By adding the SimPage query condition annotation to the attribute in the parameter class, it will be automatically identified as the page query condition. The return value of the interface method defaults to the query result domain of the query page. Adding the result annotation to the attribute in the return type class will control the query result of the page. It can be understood that the parameter bean is only an example and is not used to limit the scope of protection of this application.

[0068] Step S130, generating a custom page of the front-end query page according to a combination of the query condition and the query result.

[0069] After the combination of the query conditions and the query results is injected into the customized template engine to generate the customized page of the front-end query page.

[0070] When loading a custom page, according to the mapping interface declared in the SimPage in the embodiment of the present application, the relevant query interface will be found, and the input parameters of the interface method will be obtained through reflection technology. By identifying the custom annotations, the attributes used as query conditions are obtained, and the names and type information of the attributes of the query conditions are obtained and injected into the custom template engine. Then, the front-end result code is automatically generated according to the return value type of the relevant query interface. After loading the custom page, it is stored in the cache for subsequent access. Return the loaded page to the front-end. Specifically, Figure 4 shown.

[0071] It can be understood that the above-mentioned reflection technology and annotation technology are conventional technical means used by those skilled in the art and will not be described in detail in the embodiments of the present application.

[0072] Through the above method, the template engine is combined with Java reflection, annotation and other technologies to automatically generate the front-end pages that need to be manually developed through the program. By encapsulating the complex and professional programming language logic of the front end into simple and clear tags, the back-end personnel can use these tags to write pages, which can reduce the focus on specific front-end technologies and improve development efficiency. For those who are not familiar with front-end development technology, they can quickly get started with the development of a complete function, which is convenient for development and debugging, and can make full use of the technical resources in the project, which can better improve the development efficiency of the program.

[0073] Through the above method, using a custom tag library, you can support custom form elements and result display. By adding query condition annotations and result annotations to the attributes in the parameter class, you can support the definition and update of query conditions and return results without adding tedious development work.

[0074] In addition, when the above method is executed, the query conditions can be obtained by identifying the annotations, loaded into the template engine to generate a query page, and the newly added query conditions or results can be automatically identified and automatically modified synchronously without the need for redevelopment.

[0075] In one embodiment of the present application, the method also includes: when it is necessary to load the custom page, identifying from the cache data whether the current page has been loaded; if not loaded or the cache has expired, reloading the custom page, and returning the cache content if the custom page exists in the cache data; in the process of reloading the custom page, determining the relevant query interface according to the mapping interface stored in the syntax library; obtaining the input parameters of the interface method through reflection technology; obtaining the attributes used as query conditions by identifying custom annotations; injecting the name and type information of the attributes of the query conditions obtained into the custom template engine, and generating a front-end result code according to the return value type of the relevant query interface; after loading the front-end result code into the custom page, storing it in the cache data.

[0076] Take the SimPage provided in the embodiment of this application as an example to illustrate:

[0077] When loading a custom page, the relevant query interface will be found according to the mapping interface declared in SimPage. The input parameters of the interface method are obtained through reflection technology. The attributes used as query conditions are obtained by identifying custom annotations. After obtaining the name and type information of the attribute of the query condition, it is injected into the custom template engine, and then the front-end result code is automatically generated according to the return value type of the relevant query interface.

[0078] In one embodiment of the present application, according to the page development requirements, parsing the query condition tag to obtain the query condition of the page and parsing the query result tag to obtain the query result of the page include: identifying the query condition tag as the page query condition by identifying the query field annotation of the custom query page; identifying the query result tag as the query result of the page by identifying the query result field of the custom query page.

[0079] Take the SimPage provided in the embodiment of this application as an example to illustrate:

[0080] The parsing execution process is to translate the page written by SimPage into a common front-end page and return it to the browser. In the SimPage parser, a set of annotations are customized. In the query interface, the parameter bean in the method defaults to the query domain of the query page. By adding SimPage query condition annotations to the attributes in the parameter class, it will be automatically recognized as the page query condition. The return value of the interface method defaults to the query result domain of the query page. Adding result annotations to the attributes in the return type class will control the query results of the page.

[0081] In one embodiment of the present application, the syntax library is obtained by defining the syntax, and the syntax library includes query condition tags and query result tags, including: by defining the syntax, meta tags in the syntax library are obtained; the meta tags are combined to form a query general tag component, and the query general tag component includes query conditions and query results. The query conditions include at least one of the following form elements depending on the data type: a text input box, a time control, a drop-down box, and a query reset button. The query results include a customized display according to the type of query results, and paginated display according to the query result data set.

[0082] Take the SimPage tag language provided in the embodiment of this application as an example for explanation:

[0083] Front-end personnel combine HTML, JavaScript, Vue, Angular and other front-end technologies to define code snippets of related tags, and back-end personnel use FreeMarker to encapsulate code snippets into custom tags.

[0084] The SimPage tag consists of two parts, namely the query conditions and the query results. The query conditions are divided into form elements such as text input boxes, time controls, drop-down boxes, and query reset buttons according to different data types. The query result is a result display page, which is customized according to the type of result and displayed in pages according to the result data set. The definition of the SimPage tag is to define the meta tags first, and then combine these meta tags to form a query general tag component. The pseudo code is as follows:

[0085] <#macro sp_list maps defVal>

[0086] --Front-end code snippet

[0087] <#list maps? keys as key>

[0088] <#--key value-->

[0089] ${key}

[0090] <#--Get value based on key value-->

[0091] ${map[key]}

[0092] < / #list>

[0093] < / #macro>

[0094] When page developers develop pages by applying the SimPage language, they only need to use the tags in the tag library. When using SimPage tags to develop query pages, developers only need to declare the backend query interface corresponding to the current query page. The program will automatically identify the query elements and result sets of the query page during the parsing and execution process, and will generate the corresponding front-end page after parsing and execution.

[0095] like Figure 2 As shown, in an embodiment of the present application, a method for querying a front-end query page is also provided, wherein a back-end server is applied, and the method includes:

[0096] Step S210: receiving a query request of a front-end query page, wherein the query request carries at least a request path and a request type.

[0097] When the user enters the query page through page operation, the client sends an interface request to the background server. The request information includes RequestURL, RequestMethod request method and other information. RequestURL is the request path, including the request interface path, request parameter information, etc. RequestMethod is the request type.

[0098] It should be noted that HTTP requests include but are not limited to GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS, and TRACE, and GET requests and POST requests are commonly used.

[0099] Step S220: In response to the request path and the request type, determine whether a custom page needs to be loaded.

[0100] The backend server receives the request information, parses the request address, and determines whether to load the custom template page (hereinafter collectively referred to as the simpage template page) based on the template path parameter modelpath. If the request parameter modelpath does not exist or is empty, it will be processed normally and the response information will be returned. Otherwise, the simpage template page will be loaded, and the cache will be used to identify whether the current page has been loaded. If there is a page in the cache, the cache content will be returned. If it is not loaded or the cache has expired, the page will be reloaded.

[0101] Step S230, if it is determined that the custom page needs to be loaded, the query condition tag and the query result tag in the custom page are parsed respectively, and then the custom page is loaded and stored in the cache data. The query condition tag and the query result tag are configured in the grammar library by defining grammar.

[0102] By loading the simpage template page, identify from the cache whether the current page has been loaded. If there is a page in the cache, return the cache content. If it is not loaded or the cache has expired, reload the page.

[0103] In one embodiment of the present application, parsing the query condition tag and the query result tag in the custom page includes: obtaining the value of the request path according to the request parameters, the value including the path and name of the custom page; obtaining the query condition information field, the query result information field and the page style information by parsing the custom page, the query condition information field and the query result information field being generated by configuring the syntax library using the defined syntax, and the page style information including a preset query page template style; processing the configured query interface by parsing the custom page to obtain the query result information.

[0104] like Figure 5 As shown, the specific page loading process is that the backend parses the request parameters, obtains the value of the variable modelpath from the request parameters, and the value is the path and name of the custom page template. The backend parses the simpage template file to obtain the query conditions and query result set. The simpage template file contains three parts: query condition information field, query result information field and page style information. The page style information is a fixed query page template style. The query condition information field and the query result information field are both written in the simpage tag syntax. The following is an example of a query information tag:

[0105]

[0106] Among them, simQuery is a custom tag defined by FreeMarker and is used to query interface information. reqInfo is the request information field for the front-end query function to call the back-end service. / apis / api / interface / path is the path information for calling the back-end query interface. reqField is the interface request field information field, including type, range, name, sub-items and other information.

[0107] It should be noted that in simpage syntax, in order to simplify front-end development, when the query conditions are exactly the same as the interface request parameters, the request field information as a whole can use reqField as the request field identifier, and the backend server obtains the specific request information through reflection. In actual development, the request fields can also be listed one by one through simpage custom tag syntax. Similarly, the query result field can also use resField as the response field identifier, and the backend obtains the interface return value type through reflection to generate the front-end result code.

[0108] The following is an example of a query result label:

[0109]

[0110]

[0111] Among them, resInfo is the response information field of the front-end query function calling the back-end service, / apis / api / interface / path is the back-end path information of the front-end query interface calling, and resField is the interface response field information field, including type, range, name, sub-items and other information.

[0112] The backend server parses the simpage page and processes the query interface configured in the simpage page, obtains the attributes and quantity of the query conditions through reflection, obtains the name of the query conditions by identifying annotations, and stores the interface information in the map according to the definition of the tag library. The display result information is obtained according to the interface return value type, and then assembled and injected into the template engine. During injection, it checks whether the variable parameters are empty and assigns default values ​​to empty values ​​to avoid the problem of throwing exceptions when no value is assigned. At the same time, the style declared in the SimPage page is injected into the template engine, and the generation of the static page is completed by calling the process() method of the FreeMarker template file parsing class. After the html page is generated, it is added to the cache with the template path as the key and the html content as the value, and the expiration time is set. Finally, the page is returned to the browser.

[0113] Preferably, for services deployed in a cluster, after the page and backend development are completed, they need to be deployed to each node server, and the page request backend path address is changed to the corresponding network equipment manufacturer address. When loaded for the first time, the page is added to the redis cache and synchronized with other nodes in the cluster.

[0114] In one embodiment of the present application, the query condition tag and the query result tag are configured into a grammar library by defining grammar, including: defining code snippets of related tags through any one or more front-end technologies of HTML, JavaScript, Vue, and Angular; and encapsulating the code snippets into custom tags containing query conditions and query results through the FreeMarker module.

[0115] In the embodiment of the present application, a tag language called SimPage is customized through the template engine, in which the front-end personnel combine HTML, JavaScript, Vue, Angular and other front-end technologies to define the code snippets of related tags, and the back-end personnel use FreeMarker to encapsulate the code snippets into custom tags.

[0116] The SimPage tag mainly consists of two parts, namely query conditions and query results. The query conditions are divided into form elements such as text input boxes, time controls, drop-down boxes, and query reset buttons according to different data types. The query result is a result display page, which is customized according to the type of result and displayed in pages according to the result data set. FreeMarker is a template engine, that is, a general tool for generating output text based on templates and data to be changed.

[0117] First, based on the query page information elements, define the simpage tag language template, and the developer defines the template page based on the tag template. Define the query condition annotation based on the page query information elements. Then define the query result annotation based on the page query result display elements. Finally, based on the query condition annotation definition and query result annotation, generate the page through FreeMarker.

[0118] The present application embodiment also provides a front-end query page generating device 600, such as Figure 6 As shown, a schematic diagram of the structure of a front-end query page generating device in an embodiment of the present application is provided, wherein the front-end query page generating device 600 at least includes: a configuration module 610, a parsing module 620 and a generating module 630, wherein:

[0119] In one embodiment of the present application, the configuration module 610 is specifically used to: configure a grammar library by defining grammar, and the grammar library includes a query condition tag and a query result tag.

[0120] By defining a special tag syntax library, developers can directly use the tags in the syntax library to design custom pages, and then parse and execute the program to generate the front-end page.

[0121] like Figure 3 As shown, during the specific implementation, a set of tag languages ​​called SimPage was customized through the template engine, in which the front-end personnel combined HTML, JavaScript, Vue, Angular and other front-end technologies to define the code snippets of related tags, and the back-end personnel used FreeMarker to encapsulate the code snippets into custom tags.

[0122] The SimPage tag in the embodiment of the present application includes two parts, namely, the query condition and the query result. The definition of the SimPage tag is to first define the meta tags, and then combine these meta tags to form a query general tag component.

[0123] It can be understood that the query conditions are divided into form elements such as text input boxes, time controls, drop-down boxes, and query reset buttons according to different data types. The query result is a result display page, which is customized according to the type of result and displayed in pages according to the result data set.

[0124] When page developers develop pages by applying the SimPage language, they only need to use the tags in the tag library. When using SimPage tags to develop query pages, developers only need to declare the backend query interface corresponding to the current query page. The program will automatically identify the query elements and result sets of the query page during the parsing and execution process, and will generate the corresponding front-end page after parsing and execution.

[0125] In one embodiment of the present application, the parsing module 620 is specifically used to: parse the query condition tag to obtain the query condition of the page and parse the query result tag to obtain the query result of the page according to the page development requirements.

[0126] By parsing the query condition tags and query result tags determined by the page development requirements, the corresponding query conditions and query results can be obtained.

[0127] The parsing execution process is to translate the page written by SimPage in the embodiment of the present application into a common front-end page and return it to the browser. In the SimPage parsing program, a set of annotations is customized.

[0128] like Figure 3 As shown in the figure, in the query interface, the parameter bean in the method defaults to the query domain of the query page. By adding the SimPage query condition annotation to the attribute in the parameter class, it will be automatically recognized as the page query condition. The return value of the interface method defaults to the query result domain of the query page. Adding the result annotation to the attribute in the return type class will control the query result of the page.

[0129] In one embodiment of the present application, the generating module 630 is specifically used to generate a custom page of the front-end query page according to a combination of the query condition and the query result.

[0130] After the combination of the query conditions and the query results is injected into the customized template engine to generate the customized page of the front-end query page.

[0131] When loading a custom page, according to the mapping interface declared in the SimPage in the embodiment of the present application, the relevant query interface will be found, and the input parameters of the method will be obtained through reflection technology. By identifying the custom annotations, the attributes used as query conditions are obtained, and the names and type information of the attributes of the query conditions are obtained and injected into the custom template engine. Then, the front-end result code is automatically generated according to the return value type of the relevant query interface. After loading the custom page, it is stored in the cache for subsequent access. Return the loaded page to the front-end. Specifically, Figure 4 shown.

[0132] It can be understood that the above-mentioned front-end query page generating device can implement each step of the front-end query page generating method provided in the above-mentioned embodiment. The relevant explanations about the front-end query page generating method are applicable to the front-end query page generating device and will not be repeated here.

[0133] Figure 7 This is a schematic diagram of the structure of an electronic device according to an embodiment of the present application. Figure 7 At the hardware level, the electronic device includes a processor, and optionally also includes an internal bus, a network interface, and a memory. The memory may include a memory, such as a high-speed random access memory (RAM), and may also include a non-volatile memory (non-volatile memory), such as at least one disk storage. Of course, the electronic device may also include hardware required for other services.

[0134] The processor, network interface and memory can be interconnected through an internal bus, which can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 7 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0135] The memory is used to store the program. Specifically, the program may include a program code, and the program code includes a computer operation instruction. The memory may include a memory and a non-volatile memory, and provides instructions and data to the processor.

[0136] The processor reads the corresponding computer program from the non-volatile memory into the memory and then runs it, forming a front-end query page generation device at the logical level. The processor executes the program stored in the memory and is specifically used to perform the following operations:

[0137] By defining the grammar, a grammar library is configured, wherein the grammar library includes a query condition tag and a query result tag;

[0138] According to the page development requirements, the query condition tag is parsed to obtain the query condition of the page and the query result tag is parsed to obtain the query result of the page;

[0139] A custom page of the front-end query page is generated according to a combination of the query condition and the query result.

[0140] The above application Figure 1 The method performed by the front-end query page generation device disclosed in the illustrated embodiment can be applied to a processor or implemented by a processor. The processor may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by an integrated logic circuit of hardware in the processor or an instruction in the form of software. The above processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in the embodiments of the present application can be directly embodied as a hardware decoding processor for execution, or a combination of hardware and software modules in the decoding processor for execution. The software module can be located in a storage medium mature in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0141] The electronic device may also perform Figure 1 The method executed by the front-end query page generation device in the Figure 1The functions of the illustrated embodiment will not be described in detail in the embodiments of the present application.

[0142] The present application also provides a computer-readable storage medium, which stores one or more programs, wherein the one or more programs include instructions, which, when executed by an electronic device including multiple application programs, enable the electronic device to execute Figure 1 The method executed by the front-end query page generation device in the embodiment shown is specifically used to execute:

[0143] By defining the grammar, a grammar library is configured, wherein the grammar library includes a query condition tag and a query result tag;

[0144] According to the page development requirements, the query condition tag is parsed to obtain the query condition of the page and the query result tag is parsed to obtain the query result of the page;

[0145] A custom page of the front-end query page is generated according to a combination of the query condition and the query result.

[0146] The electronic device may also perform Figure 2 The method for executing the front-end query page query device in the Figure 2 The functions of the illustrated embodiment will not be described in detail in the embodiments of the present application.

[0147] The present application also provides a computer-readable storage medium, which stores one or more programs, wherein the one or more programs include instructions, which, when executed by an electronic device including multiple application programs, enable the electronic device to execute Figure 1 The method executed by the front-end query page query device in the embodiment shown is specifically used to execute:

[0148] Receive a query request from a front-end query page, where the query request carries at least a request path and a request type;

[0149] In response to the request path and the request type, determining whether a custom page needs to be loaded;

[0150] If it is determined that the custom page needs to be loaded, the query condition tag and the query result tag in the custom page are parsed respectively and then the custom page is loaded and stored in the cache data. The query condition tag and the query result tag are configured in the grammar library by defining grammar.

[0151] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0152] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0153] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0154] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0155] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0156] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0157] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0158] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0159] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0160] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for generating a front-end query page, wherein: The method comprises: By defining the grammar, the configuration obtains the grammar library, which includes the query condition tag and the query result tag; the grammar library is obtained by defining a special tag grammar library SimPage, the tag of the SimPage includes the query condition and the query result, the tag definition of the SimPage is to define the meta tag first, and then combine these meta tags to form a query general tag component, and the parsing execution process is to translate the page written by the SimPage into a general front-end page and return it to the browser; The syntax library is configured by defining the syntax, and the syntax library includes query condition tags and query result tags, including: By defining the grammar, the meta tags in the grammar library are configured; Combining the meta tags to form a query general tag component, wherein the query general tag component includes a query condition and a query result; According to the page development requirements, the query condition tag is parsed to obtain the query condition of the page and the query result tag is parsed to obtain the query result of the page; According to the page development requirements, parsing the query condition tag to obtain the query condition of the page and parsing the query result tag to obtain the query result of the page include: By identifying the query field annotation of the customized query page, the query condition tag is identified as a page query condition; By identifying the query result field of the customized query page, the query result tag is identified as the query result of the page; Generate a custom page of the front-end query page according to a combination of the query condition and the query result; The method further comprises: In the case where the custom page needs to be loaded, identifying from cache data whether the current page has been loaded; If the custom page is not loaded or the cache is expired, the custom page is reloaded, and if the custom page exists in the cache data, the cache content is returned; During the process of reloading the custom page, determining the relevant query interface according to the mapping interface stored in the grammar library; Get the input parameters of the interface method; Get the attributes used as query conditions; Inject the acquired name and type information of the attribute of the query condition into the custom template engine, and generate the front-end result code according to the return value type of the relevant query interface; After the front-end result code is loaded on the custom page, it is stored in cache data.

2. A method for querying a front-end query page, wherein: Applying the backend server, the method includes: The front-end query page is obtained by adopting the method for generating the front-end query page as claimed in claim 1; Receive a query request from a front-end query page, where the query request carries at least a request path and a request type; In response to the request path and the request type, determining whether a custom page needs to be loaded; If it is determined that the custom page needs to be loaded, the query condition tag and the query result tag in the custom page are parsed respectively and then the custom page is loaded and stored in the cache data. The query condition tag and the query result tag are configured in the grammar library by defining grammar.

3. The method of claim 2, wherein: Parsing the query condition tags and query result tags in the custom page includes: Obtaining the value of the request path according to the request parameters, wherein the value includes the path and name of the custom page; By parsing the custom page, a query condition information field, a query result information field and page style information are obtained, wherein the query condition information field and the query result information field are generated by configuring the definition grammar into the grammar library, and the page style information includes a preset query page template style; By parsing the custom page, the configured query interface is processed to obtain query result information.

4. The method of claim 2, wherein: The query condition tag and the query result tag are configured in the grammar library by defining grammar, including: Define code snippets of related tags through any one or more front-end technologies such as HTML, JavaScript, Vue, and Angular; The code snippet is encapsulated into a custom tag including query conditions and query results through the FreeMarker module.

5. A front-end query page generation device, wherein: The device comprises: A configuration module is used to define a grammar and configure a grammar library, wherein the grammar library includes a query condition tag and a query result tag; the grammar library is obtained by defining a special tag grammar library SimPage, wherein the tag of the SimPage includes the query condition and the query result, wherein the tag definition of the SimPage is to first define a meta tag, and then combine these meta tags to form a query general tag component, and the parsing execution process is to translate the page written by the SimPage into a general front-end page and return it to the browser; The syntax library is configured by defining the syntax, and the syntax library includes query condition tags and query result tags, including: By defining the grammar, the meta tags in the grammar library are configured; Combining the meta tags to form a query general tag component, wherein the query general tag component includes a query condition and a query result; A parsing module, used to parse the query condition tag to obtain the query condition of the page and parse the query result tag to obtain the query result of the page according to the page development requirements; According to the page development requirements, parsing the query condition tag to obtain the query condition of the page and parsing the query result tag to obtain the query result of the page include: By identifying the query field annotation of the customized query page, the query condition tag is identified as a page query condition; By identifying the query result field of the customized query page, the query result tag is identified as the query result of the page; A generation module, used to generate a custom page of the front-end query page according to a combination of the query condition and the query result; In the case where the custom page needs to be loaded, identifying from cache data whether the current page has been loaded; If the custom page is not loaded or the cache is expired, the custom page is reloaded, and if the custom page exists in the cache data, the cache content is returned; During the process of reloading the custom page, determining the relevant query interface according to the mapping interface stored in the grammar library; Get the input parameters of the interface method; Get the attributes used as query conditions; Inject the acquired name and type information of the attribute of the query condition into the custom template engine, and generate the front-end result code according to the return value type of the relevant query interface; After the front-end result code is loaded on the custom page, it is stored in cache data.

6. An electronic device comprising: processor; as well as A memory arranged to store computer executable instructions, which, when executed, cause the processor to perform the method of claim 1 and / or any one of claims 2 to 4.

7. A computer-readable storage medium storing one or more programs, which, when executed by an electronic device including a plurality of application programs, enables the electronic device to execute the method of claim 1 and / or any one of the methods of claims 2 to 4.

Images