Method and system for generating page based on visual configuration

Abstract

The invention provides a method and system for generating a page based on visual configuration, and the method is applied to a front-end development tool, and comprises the following steps: responding to a newly-added operation of a front-end page, and popping up a context menu; the context menu displays a plurality of configuration page options, the configuration page options are determined by page types corresponding to the newly-added operation, different configuration page options correspond to different scene templates, and the scene templates are customized according to business requirements of the target business; in response to a selection operation of the configuration page option, popping up a configuration page; function implementation codes of the components on the configuration page are stored in a page script corresponding to the configuration page; the configuration page is determined according to the target business, and the page script is associated with business data of the target business; based on the visual configuration operation of the configuration page, the content of the page script is adjusted, and the problems of low efficiency, high cost, difficulty in later maintenance and the like in the development process of a credit business platform in the related technology are solved.

Description

Technical Field

[0001] This application relates to the technical field of front-end page development, and particularly to a method and system for generating pages based on visual configuration. Background Art

[0002] Due to the numerous management functions, the new-generation credit business platform involves a large number of pages, resulting in a huge workload for front-end development. The platform includes functions of multiple centers such as system management, quick query, portal management, permission management, process center, customer center, rating center, quota center, credit-granting center, contract center, loan disbursement center, post-loan center, accounting center, statistical query, decision engine, intelligent configuration, intelligent control, product center, and intelligent report. For example, in system management, the platform provides pages such as application management, API management, and log retrieval for operations such as managing and configuring applications, viewing and testing APIs, and retrieving logs; in the customer center, it includes pages such as individual customer management, corporate customer management, and group customer management, supporting functions such as creating, maintaining, querying customer information, and importing external data. These rich management functions and corresponding page designs fully demonstrate the complexity and comprehensiveness of the new-generation credit business platform, and also highlight the necessity of optimizing and improving the platform management efficiency through technical means.

[0003] Traditional manual development methods are not only time-consuming and laborious, but also prone to errors, thus reducing the overall development efficiency. Since a large number of front-end developers are required to develop these pages, the development cost is relatively high. This includes personnel costs, time costs, and other related costs that may arise, such as training costs, equipment costs, etc. A large amount of manual code not only increases the complexity of development, but also makes the subsequent maintenance work difficult. Once the page needs to be modified or updated, a large amount of code may need to be modified, which is not only time-consuming but also error-prone. Taking the plan management page in the credit management system as an example, this page involves data interaction with multiple business modules and complex business rules. The plan management page needs to interact with multiple modules such as quota management, customer information management, and credit approval to ensure the accuracy and rationality of the credit plan. At the same time, this page also needs to follow strict business rules, such as credit quota limits, customer credit rating requirements, etc. When adjusting the credit business process or adding new credit business links, the drawbacks of this highly coupled page design are revealed. Since the code of the plan management page is closely related to multiple business modules, any adjustment of the business process or addition of new business links may lead to a large amount of modification to the code of this page. This not only increases the development cost because a large number of front-end developers need to invest time and effort in code refactoring, but also may introduce new errors and risks, affecting the stability and security of the credit business platform. This development mode that relies on a large number of front-end developers also limits the flexibility and scalability of the credit business platform. In a rapidly changing market environment, it is often necessary to quickly respond to changes in business requirements, but the existing technology makes this response slow and expensive. Therefore, it can be clearly recognized that high development cost is an important problem existing in the existing credit business platform. Summary of the Invention

[0004] This application aims to solve at least one of the technical problems in the related art to some extent.

[0005] To this end, the first object of this application is to propose a method for generating pages based on visual configuration to improve development efficiency, reduce development costs and maintenance costs, and solve the problems of low efficiency, high costs, and difficult subsequent maintenance encountered in the development process of the related art credit business platform.

[0006] The second object of this application is to propose a system for generating pages based on visual configuration.

[0007] The third object of this application is to propose an electronic device.

[0008] The fourth object of this application is to propose a computer-readable storage medium.

[0009] The fifth object of this application is to propose a computer program product.

[0010] To achieve the above object, an embodiment of the first aspect of this application proposes a method for generating a page based on visual configuration. The method is applied to a front-end development tool and includes the following steps:

[0011] In response to an addition operation on the front-end page, a context menu is popped up; the context menu displays a plurality of configuration page options, and the configuration page options are determined by the page type corresponding to the addition operation. Different configuration page options correspond to different scenario templates, and the scenario templates are customized according to the business requirements of the target business;

[0012] In response to a selection operation on the configuration page option, a configuration page is popped up; the function implementation code of the components on the configuration page is stored in the page script corresponding to the configuration page; the configuration page is determined according to the target business, and the page script is associated with the business data of the target business;

[0013] Based on the visual configuration operation of the configuration page, the content of the page script is adjusted;

[0014] Based on the page script, the front-end page is generated.

[0015] To achieve the above object, an embodiment of the second aspect of this application proposes a system for generating a page based on visual configuration. The device is configured in a front-end development tool, and the device includes:

[0016] A template response module, configured to pop up a context menu in response to an addition operation on the front-end page; the context menu displays a plurality of configuration page options, and the configuration page options are determined by the page type corresponding to the addition operation. Different configuration page options correspond to different scenario templates, and the scenario templates are customized according to the business requirements of the target business;

[0017] A page processing module, configured to pop up a configuration page in response to a selection operation on the configuration page option; the function implementation code of the components on the configuration page is stored in the page script corresponding to the configuration page; the configuration page is determined according to the target business, and the page script is associated with the business data of the target business;

[0018] A page configuration module, configured to adjust the content of the page script based on the visual configuration operation of the configuration page;

[0019] A page generation module, configured to generate the front-end page based on the page script.

[0020] To achieve the above object, an embodiment of the third aspect of the present application provides an electronic device, including: a processor, and a memory communicatively connected to the processor; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory to implement the method described in the first aspect.

[0021] To achieve the above object, an embodiment of the fourth aspect of the present application provides a computer-readable storage medium storing computer-executable instructions, which are used to implement the method described in the first aspect when executed by a processor.

[0022] To achieve the above object, an embodiment of the fifth aspect of the present application provides a computer program product including a computer program, which implements the method described in the first aspect when executed by a processor.

[0023] The method, apparatus, electronic device, and storage medium for generating a page based on visual configuration provided by the present application can significantly improve the development efficiency through a visual configuration page and a corresponding page script, without the need to write a large amount of code; it can also greatly reduce the dependence on front-end developers, thereby reducing the development cost; because the use of the tool reduces the development difficulty, enabling some non-professional developers to participate in page development, further saving labor costs; the pages generated by the visual configuration tool usually have better structural and modular characteristics, which makes the subsequent maintenance work simpler and more efficient, because the tool usually provides an intuitive interface and easy-to-understand operation methods, enabling maintainers to locate problems and fix them more quickly; it solves the problems of low efficiency, high cost, and difficult subsequent maintenance encountered in the development of the target business.

[0024] Additional aspects and advantages of the present application will be partially given in the following description, partially become apparent from the following description, or be understood through the practice of the present application. Description of the Drawings

[0025] The above and / or additional aspects and advantages of the present application will become apparent and easy to understand from the following description of the embodiments in conjunction with the drawings, where:

[0026] Figure 1 It is a schematic flowchart of a method for generating a page based on visual configuration provided by an embodiment of the present application;

[0027] Figure 2 It is an example diagram of an intelligent form list page provided by an embodiment of the present application;

[0028] Figure 3 It is a schematic flowchart of a method for generating a page based on visual configuration provided by another embodiment of the present application;

[0029] Figure 4 Schematic flowchart of a method for generating a page based on visual configuration provided by another embodiment of this application;

[0030] Figure 5 Example diagram of an intelligent field coding management page provided by an embodiment of this application;

[0031] Figure 6 Example diagram of a business model list page provided by an embodiment of this application;

[0032] Figure 7 Example diagram of a query configuration page provided by an embodiment of this application;

[0033] Figure 8 Another example diagram of a query configuration page provided by an embodiment of this application;

[0034] Figure 9 Another example diagram of a query configuration page provided by an embodiment of this application;

[0035] Figure 10 Example diagram of a form configuration page provided by an embodiment of this application;

[0036] Figure 11 Example diagram of a label navigation configuration page provided by an embodiment of this application;

[0037] Figure 12 Schematic flowchart of a method for generating a page based on visual configuration provided by another embodiment of this application;

[0038] Figure 13 Block diagram of a system for generating a page based on visual configuration provided by an embodiment of this application;

[0039] Figure 14 Block diagram of an electronic device provided by an embodiment of this application. Detailed implementation manners

[0040] The embodiments of the present application will be described in detail below. The examples of the embodiments are shown in the accompanying drawings, where the same or similar reference numerals denote the same or similar elements or elements with the same or similar functions from beginning to end. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to explain the present application, but should not be construed as a limitation to the present application.

[0041] The method, apparatus, and device for generating a page based on visual configuration according to the embodiments of the present application will be described below with reference to the accompanying drawings.

[0042] Figure 1Schematic flowchart of a method for generating a page based on visual configuration provided by an embodiment of the present application.

[0043] It should be noted that the execution subject of the method for generating a page based on visual configuration in the embodiment of the present application is the system for generating a page based on visual configuration in the embodiment of the present application. The system for generating a page based on visual configuration can be configured in an electronic device so that the electronic device can execute the function of generating a page based on visual configuration.

[0044] It should be noted that the method for generating a page based on visual configuration in the present application is applied to a front-end development tool.

[0045] As Figure 1 shown, the method for generating a page based on visual configuration includes the following steps:

[0046] Step 101, in response to an add operation on the front-end page, a context menu is popped up; the context menu displays multiple configuration page options. The configuration page options are determined by the page type corresponding to the add operation, and different configuration page options correspond to different scenario templates. The scenario templates are customized according to the business requirements of the target business.

[0047] In the embodiment of the present application, the scenario templates are customized according to the business requirements of the target business, which can provide better business matching and user experience. For example, for the credit business, it may include page design requirements such as list pages, wizard pages, add pages, reports, charts, etc. According to this requirement, scenario templates such as list pages, wizard pages, add pages, forms, reports, charts, etc. are customized. The scenario templates provide pre-built business logics and interface designs, that is, they provide pre-built components and logics, reduce duplicate codes and redundant logics, improve the maintainability of the codes, and developers only need to make minor adjustments to use them, shortening the development cycle. In addition, although the scenario templates provide pre-built business logics and interface designs, they also support secondary development and customization to meet more complex business requirements. The scenario templates provide standardized development processes and component libraries, reduce the technical barriers between members of the development team, and promote team collaboration.

[0048] Exemplarily, taking the generation of intelligent forms as an example, the front-end development tool in this embodiment comprehensively manages all forms through the intelligent form list page. As Figure 2 shown, it supports operations such as addition, editing, preview, enabling / disabling, design, downloading code, and deletion. Right-click on the add button to pop up a context menu to select the configuration page corresponding to the form type to be generated. Different form types correspond to different configuration pages, that is, different form types correspond to different scenario templates.

[0049] Step 102: In response to the selection operation of the configuration page option, a configuration page is popped up; the function implementation code of the components on the configuration page is stored in the page script corresponding to the configuration page; the configuration page is determined according to the target business, and the page script is associated with the business data of the target business.

[0050] In this embodiment, after selecting the corresponding page configuration option, the corresponding configuration page is popped up. The function implementation code of the components on the configuration page is stored in the page script corresponding to the configuration page. After the configuration is completed, the configuration information is stored in the page script.

[0051] Compared with the prior art, after dragging and dropping a component, it is still necessary to write the corresponding code for the component. In this embodiment, the function implementation code of the component is built into the front-end development tool, which reduces the time for manually writing code, significantly improves the development efficiency, and lowers the development threshold.

[0052] As an implementation method, to build the function implementation code of the component into the front-end development tool, it is first necessary to determine the type and requirements of the component. According to the functional requirements of the credit business platform, clarify the specific functions of the required components, such as form components, query components, chart display components, etc. Then create the component. In the front-end development tool, use the component creation function provided by the framework to generate the corresponding component template according to the specifications and requirements of the component. Write the component code. Based on the component template, write the implementation code of the component according to the specific business requirements, including the logical processing, data binding, event handling, etc. of the component. Component debugging: Through simulating different business scenarios, conduct functional tests on the component to ensure that it meets the business requirements and fix possible bugs. Building the component into the front-end development tool is mainly to reduce the time for manually writing code, and more importantly, to improve the development efficiency. By building commonly used and targeted components, developers can directly call these components without having to write from scratch every time, thus greatly accelerating the development speed. To better manage the component code, use a version control system to manage the code of the component. By recording the change history of the code, the modification process of each component can be clearly traced, which is convenient for team collaboration and code maintenance. When it is necessary to modify or update the component, the relevant code can be quickly located and corresponding adjustments can be made, further reducing the code maintenance cost. By building the function implementation code of the component into the front-end development tool and combining it with the version control system for management, it can not only improve the development efficiency, but also reduce the code maintenance cost, providing strong support for the rapid iteration and continuous optimization of the credit business platform.

[0053] Step 103: Based on the visual configuration operation of the configuration page, adjust the content of the page script.

[0054] In this embodiment, the user can perform configurations on this configuration page. For example, select fields, buttons, data sorting methods, etc. Correspondingly adjust the content of the page script according to the configuration operations. After the configuration is completed, the configuration information is stored in the page script.

[0055] It should be noted that the front-end development tool of the embodiments of this application implements each front-end page and the page script corresponding to each front-end page according to the target business scenario. When adjusting the content of the page script, it is necessary to determine the adjustment requirements, determine the adjustment target according to the adjustment requirements, and the visual configuration tool can be used to locate the page script and adjust the script content according to the adjustment target. After the adjustment, the content of the page script can be tested and verified, and version management and release can be carried out after passing the verification. Among them, when determining the adjustment requirements, it is necessary to analyze the business changes. For example, when the credit business process is adjusted or new business links are added, it is necessary to clarify which page script content needs to be adjusted. For example, if the plan management page needs to be modified due to changes in the business process, it is necessary to determine whether it is the part interacting with modules such as quota management, customer information management, and credit approval, or the business rules followed (such as credit quota limits, customer credit rating requirements) that need to be adjusted. According to the business changes, determine the expected effect after the adjustment of the page script, such as ensuring the accuracy and rationality of the credit plan, or meeting the requirements of the new business logic, and determine the adjustment target. Use the visual configuration tool to locate the page script and enter the configuration page. For example, developers enter the configuration page corresponding to the credit business platform. This configuration page should provide a visual interface to display the structure and associated information of the page-related script. Through the visual interface, quickly locate the page script that needs to be adjusted. For example, in the visual configuration tool, the script files and their dependencies are displayed in a tree structure or graphically, and developers can intuitively find the target page script. When adjusting the script content, use the editing function provided by the visual configuration tool for visual editing, and developers can directly modify the content of the page script on the editing interface. For example, for the script interacting with the quota management module, the parameters, formats, etc. of the data interaction can be modified through the visual interface; for the page script related to business rules, the conditional judgment logic, calculation methods, etc. can be adjusted. During the editing process, the visual configuration tool provides a code hint function to help developers quickly enter the correct code syntax and functions. At the same time, real-time verification is carried out to check for logical errors, syntax errors, etc. in the code and give prompt messages to ensure that the adjusted script meets the specifications. After adjusting the content, simulate the business scenario for testing. In the visual configuration tool, a function to simulate different business scenarios is provided. Developers can set various possible business data and operation processes to conduct functional tests on the adjusted page script. For example, simulate the generation of credit plans under different customer credit ratings and check whether the page script can correctly process and generate reasonable results. Ensure that the adjusted page script meets the requirements of the new business logic. For example, verify whether the credit quota limit rules are correctly executed and whether the new business links are smoothly integrated into the page script logic.After verification, the adjusted page script code is managed using a version control system to record the code change history, including the adjusted content, adjustment time, adjustment personnel, etc., to facilitate team collaboration and code maintenance; after testing and verification, the adjusted page script is published to the credit business platform to ensure that the new page script takes effect and realizes the update of business functions. Step 104: Generate a front-end page based on the page script.

[0056] In this embodiment, after the page configuration is completed, the required front-end page can be generated according to the content of the corresponding page script, that is, the page is rendered based on the content of the page script and the code corresponding to the scene template to generate the required front-end page.

[0057] The front-end page of this embodiment includes lists, navigations, forms and wizard pages for PC, iPad, mobile phone, mini-programs, etc., generates a default list of front-end pages and a button with a form, can adjust the button according to business needs, and the generated front-end page can adapt to the screen size and adjust the page layout according to different devices. In order to generate a front-end page that adapts to the screen size of different devices, the page script content needs to contain elements of responsive design. This is usually achieved by using CSS media queries, which can apply different style rules according to the screen size, resolution and other characteristics of the device. For example, you can define a style rule that displays a multi-column layout on a desktop browser and switches to a single-column layout on a mobile phone. In addition, you can also use technologies such as responsive images and font size adjustment to ensure that images and text can also be adaptively adjusted according to the screen size to provide the best visual effects and user experience. Exemplarily, taking the credit application page as an example, the page presents a multi-column layout on a desktop browser, making full use of the large screen space, improving the efficiency of information display and the convenience of user operation. On small-screen devices such as mobile phones, the page automatically switches to a single-column layout to ensure that the information is clear and readable and the operation is within reach. In addition, the images and text on the page also adopt a responsive design, which can be adaptively adjusted according to the screen size. Whether zoomed in or out, they can maintain the best visual effects and user experience, which not only improves the beauty of the page, but also greatly enhances the user's satisfaction.

[0058] In some embodiments, after the front-end page is generated, the Vue file of the front-end page can be downloaded and generated.

[0059] Taking Smart Form as an example, it provides a convenient download function, developers can easily download and generate Vue files. These pre-generated Vue files provide developers with a good starting point, on which they can make custom modifications, thus significantly saving development time and costs. This feature not only speeds up the form development process, but also improves development efficiency, allowing developers to focus more on the implementation of business logic and the optimization of user experience.

[0060] The generated intelligent form can automatically identify the filled content and populate the corresponding fields, automatically verify the validity of the filled content, and provide rich interactive functions such as dragging and clicking, making user operations more convenient.

[0061] By implementing the embodiments of the present application, through the visual configuration page and the corresponding page script, the development efficiency can be significantly improved without writing a large amount of code; the dependence on front-end developers can also be greatly reduced, thereby reducing the development cost; because the use of the tool reduces the development difficulty, enabling some non-professional developers to also participate in the page development, further saving the labor cost; the pages generated by the visual configuration tool usually have better structured and modular characteristics, which makes the subsequent maintenance work simpler and more efficient, because the tool usually provides an intuitive interface and easy-to-understand operation methods, enabling the maintainer to locate problems and fix them more quickly; it solves the problems of low efficiency, high cost, and difficult subsequent maintenance encountered in the development of the target business.

[0062] Based on the above embodiments, the front-end development tool of the present application also provides a dynamic rendering function for the page, which can preview the page to be generated in order to make timely adjustments. After storing the configuration information of the configuration page in the page script corresponding to the front-end page, as Figure 3 shown, the method for generating a page based on visual configuration of the present application may further include the following steps:

[0063] Step 201, in response to a preview operation of the configuration page, obtain the page script corresponding to the front-end page.

[0064] The front-end development tool of this embodiment supports the real-time online preview function. Whenever the developer makes any modification to the interface, the effect can be immediately seen in the preview window without waiting for compilation or refreshing the page. This instant feedback mechanism not only speeds up the iteration speed but also ensures the accuracy of the design effect, avoiding rework caused by poor communication or misunderstanding.

[0065] Step 202, based on the page script, implement the dynamic rendering of the front-end page to preview the front-end page.

[0066] The front-end development tool of this embodiment supports dynamic rendering technology. By integrating powerful data binding and logic processing capabilities, developers can easily implement dynamic interactions and data displays on the page. Whether it is list scrolling, form submission, or complex animation effects, they can all be achieved through simple configuration or a small amount of code, greatly enhancing the flexibility of the page and the user experience.

[0067] The online preview function allows users to view the final rendering effect of the front-end page in real time without leaving the editing interface. This feature greatly facilitates users, enabling them to instantly evaluate whether the page design meets business requirements, including layout rationality, field accuracy, and overall user experience. Through online testing, users can promptly discover and adjust potential problems, ensuring that the page can efficiently and accurately collect the required information in actual applications, thereby optimizing the work process and enhancing business processing efficiency.

[0068] By implementing this embodiment, the front-end development tool, with its core functions such as visual interface configuration, online preview, and dynamic rendering, brings unprecedented convenience and efficiency to front-end development work. It can not only help developers significantly save development time and costs but also improve project quality and accelerate the product launch process. Whether it is a startup, a medium-sized team, or a large institution, all can benefit from it and achieve rapid iteration and continuous optimization of front-end development.

[0069] The configuration page is further described below.

[0070] In some embodiments, the configuration page includes a query configuration page and a form configuration page, and both the query configuration page and the form configuration page include a business model area; as Figure 4 shown, when performing visual configuration through the configuration page, it includes:

[0071] Step 301, in response to a selection operation in the business model area, display the selected business model information stored in the page script in the business model area.

[0072] In some embodiments, all fields involved in the business models related to the target business are managed according to a unified data standard, and each field includes a unique field number standard code value. The correspondence between the field and the field number standard code value is saved through the dictionary encoding function.

[0073] It can be understood that all business models of the target business are designed according to a preset business model specification, and the preset business model specification includes field coding management.

[0074] Exemplarily, there is a gender field on the page, which is bound to this field in the business model. All selections related to gender options on all pages are this male or female field, and the standard is the same; all business models are assembled through number standards. Once the number standard changes, the corresponding fields will change, and each field remains consistent in all pages, whether it is Chinese, field type, the verification method for this field, or the field coding.

[0075] Exemplarily, as Figure 5As shown, the front-end development tool of this embodiment manages the fields of the target business through the page. The data standardization management (i.e., data standardization management) provides a comprehensive dictionary coding function, supporting operations such as addition, import, export, and synchronization. As Figure 6 As shown, the front-end development tool of this embodiment displays and manages business models through a business model list. The business model list page has comprehensive functions, supporting operations such as addition, import, editing, viewing, enabling / disabling, design, code download, and deletion of models, and displaying basic attributes such as coding, name, and affiliated application.

[0076] In some embodiments, the form configuration page includes group configuration.

[0077] Exemplarily, there are multiple types of query configuration pages, such as Figure 7 The single list shown in, the upper and lower tables shown in 8, and the left and right tables shown in 9. As Figure 7 As shown, the business model area can always be displayed on the right side of the page for easy configuration management by developers; after the business model area is loaded, the model information of the selected business model is displayed according to masterModel and subModel in the form script; new business models can be added, and the newly added business models can only be information in subModel. The data in masterModel is generated when the form is created and cannot be modified. The fields in the business model can be displayed through search, and multiple selections can be made for a single business model after search; by selecting multiple fields within the business model, they can be directly imported into the corresponding configuration area, such as the fields in the query configuration or table configuration. The query configuration area can directly drag the business model on the right to manage the query configuration fields, and the query logic of the query configuration adaptively defaults to the query logic according to the field type. According to the model storage code value mapping information associated in the field code value, as shown in Table 1.

[0078] Table 1: Query Logic Information Table of Fields

[0079] Type Is Associated with Code Value Query Logic String Yes EQS String No LIKES Number Ignore EQS Date Ignore EQS Amount Ignore BETWEEN AND

[0080] Step 302, the fields in the query configuration page and the form configuration page are directly dragged in according to the business models displayed in the business model area.

[0081] So as to perform configuration operations on the configuration page based on the business model information in the business model area; the business model information is determined according to the target business.

[0082] In some embodiments, the query configuration page includes a query configuration area, a button configuration area, and a table configuration area. The query configuration area is used to configure query fields, and the query logic of the query fields adapts to the query logic according to the field types of the query fields. The button configuration area includes buttons with various functions, and the buttons on the front-end page are configured by selecting or deselecting them. The table configuration area includes column width adjustment and data sorting method selection.

[0083] As Figure 7 shown, in the configuration page, the button components on the front-end page are configured by selecting or deselecting buttons, and more information of the button pop-up box is configured by clicking the button text. After the button name is modified, the button name in the button configuration is synchronously modified. In the table configuration part, the column width can be modified and adjusted, multiple data sorting options can be selected, the fixed column is in a single-selection mode, multiple statistical columns can be selected, the operation execution column moves the table column "left and right" positions, and the delete button directly deletes this column; according to the model storage code value mapping information associated in the field number code value. As Figure 7 shown, a new intelligent form function for upper and lower table pages is added, which supports button attribute configuration and form preview. The table configuration logic refers to the list parameter interaction.

[0084] Exemplarily, the form configuration page is as Figure 10 shown. The fields in the form configuration can be dragged in by directly dragging and dropping according to the business model, or directly imported in a batch import mode. The batch import is directly imported to the last position of the field. After the field is dragged in, its position can be moved up and down, and the intelligent form supports grouped configuration. In the form configuration, the required input, read-only, and row default are not selected, and the column width is defaulted to 8. The option box type of the code value class is defaulted to a drop-down box. The default value of the date class supports the current time (defined in the front-end similar to ${nowDate}, and parsed and rendered during rendering), and the selected date. The button configuration is consistent with the button configuration in the table, and the field can select the field display type according to Table 2.

[0085] Table 2: Field Display Type Table

[0086]

[0087] In some embodiments, the configuration page further includes a link navigation configuration page, a tree navigation configuration page, a label navigation configuration page, and a wizard configuration page. Exemplarily, such as Figure 11 shown in the label navigation configuration page. Link navigation, tree navigation, label navigation, and wizard are four efficient navigation methods that help users easily browse and locate information, improving user experience and operation convenience.

[0088] The front-end development tool of this embodiment aims to greatly save development time and costs through a rapid development platform, while improving project efficiency and quality. With its powerful visual configuration page, real-time online preview, and dynamic rendering capabilities, front-end development work has become unprecedentedly easy and efficient.

[0089] Through this embodiment in real time, the convenience of front-end page design is improved, thereby improving development efficiency.

[0090] Based on any of the above embodiments, after generating the front-end page, as Figure 12 shown, the method for generating a page based on visual configuration further includes:

[0091] Step 401, after enabling the front-end page, optimize the front-end page to obtain a new version of the front-end page;

[0092] Taking the intelligent form as an example of the front-end page, after the intelligent form design is completed, the user can directly enable the intelligent form without cumbersome subsequent steps. After enabling, through the menu function of the tool, the user can easily configure and display the form page, enabling it to be quickly put into actual use. This process simplifies the entire process from form design to deployment, improves work efficiency, ensures that the form can meet business needs in a timely manner, and provides users with a convenient and efficient information interaction experience. Once the intelligent form is enabled, the tool supports upgrading and optimizing it at any time. After re-design and adjustment, the new version of the form will not affect the normal use of existing businesses.

[0093] Step 402, configure the new version of the front-end page in the menu management system of the front-end development tool.

[0094] Taking the intelligent form as an example, after the design is completed, the user needs to configure the new version in the menu management system so that the new and old versions can be used in parallel to ensure that business continuity is not affected. This flexible version management mechanism provides strong support for the continuous iteration and optimization of the form.

[0095] By implementing this embodiment, it is convenient to optimize and update the front-end page.

[0096] To implement the above embodiments, the present application also proposes a system for generating a page based on visual configuration. The system is configured in the front-end development tool, Figure 13 which is a block diagram of a system for generating a page based on visual configuration provided by an embodiment of the present application. As Figure 13 shown, the system for generating a page based on visual configuration may include: a page generation module 1301 and a page configuration module 1302.

[0097] Among them, the page generation module 1301 is used to pop up a context menu in response to an addition operation on the front-end page; the context menu displays multiple configuration page options, and the configuration page options are determined by the page type corresponding to the addition operation. Different configuration page options correspond to different scenario templates, and the scenario templates are customized according to the business requirements of the target business;

[0098] The page configuration module 1302 is used to pop up a configuration page in response to a selection operation on the configuration page option; the function implementation code of the components on the configuration page is stored in the page script corresponding to the configuration page; the configuration page is determined according to the target business, and the page script is associated with the business data of the target business;

[0099] The page configuration module 1302 is further used to adjust the content of the page script based on the visual configuration operation of the configuration page;

[0100] The page generation module 1301 is further used to generate a front-end page based on the page script.

[0101] Furthermore, in a possible implementation manner of the embodiment of the present application, the page generation module 1301 is further used to obtain the page script corresponding to the front-end page in response to a preview operation on the configuration page;

[0102] Based on the page script, realize the dynamic rendering of the front-end page.

[0103] Furthermore, in a possible implementation manner of the embodiment of the present application, the configuration page includes a query configuration page and a form configuration page, and both the query configuration page and the form configuration page include a business model area; when performing visual configuration through the configuration page, the page configuration module 1302 is used to:

[0104] In response to a selection operation in the business model area, display the selected business model information stored in the page script in the business model area;

[0105] The fields in the query configuration page and the form configuration page are directly dragged in according to the business model displayed in the business model area

[0106] So as to perform configuration operations on the configuration page based on the business model information in the business model area; the business model information is determined according to the target business.

[0107] Furthermore, in a possible implementation manner of the embodiment of the present application, all the fields involved in the business models related to the target business are managed according to a unified data standard, and each field includes a unique field number code value, and the correspondence between the field and the field number code value is saved through the dictionary encoding function.

[0108] Further, in a possible implementation manner of the embodiment of the present application, the query configuration page includes a query configuration area, a button configuration area, and a table configuration area.

[0109] The query configuration area is used to configure query fields, and the query logic of the query fields adapts to the query logic according to the field types of the query fields.

[0110] The button configuration area includes buttons with various functions, and the buttons on the front-end page are configured by selecting or deselecting.

[0111] The table configuration area includes column width adjustment and data sorting method selection.

[0112] Further, in a possible implementation manner of the embodiment of the present application, the form configuration page includes group configuration.

[0113] Further, in a possible implementation manner of the embodiment of the present application, the configuration page includes a link navigation configuration page, a tree navigation configuration page, a label navigation configuration page, and a wizard configuration page.

[0114] Further, in a possible implementation manner of the embodiment of the present application, the page generation module 1301 is further configured to:

[0115] After enabling the front-end page, optimize the front-end page to obtain a new version of the front-end page.

[0116] Configure the new version of the front-end page in the menu management system of the front-end development tool.

[0117] Further, in a possible implementation manner of the embodiment of the present application, the page generation module 1301 is further configured to:

[0118] Download and generate the Vue file of the front-end page.

[0119] It should be noted that the foregoing explanation of the method embodiment for generating a page based on visual configuration also applies to the system for generating a page based on visual configuration in this embodiment, and details are not described herein again.

[0120] To implement the above embodiments, the present application also proposes an electronic device. Please refer to Figure 14 , Figure 14 is a block diagram of the electronic device provided by the embodiment of the present application. As Figure 14 shown, the electronic device 1400 includes: a processor 1401, and a memory 1402 communicatively connected to the processor 1401; the memory 1402 stores computer-executable instructions; the processor 1401 executes the computer-executable instructions stored in the memory to implement the method provided in the foregoing embodiments.

[0121] To implement the above embodiments, the present application further provides a computer-readable storage medium storing computer-executable instructions, which when executed by a processor are used to implement the methods provided in the foregoing embodiments.

[0122] To implement the above embodiments, the present application further provides a computer program product including a computer program, which when executed by a processor implements the methods provided in the foregoing embodiments.

[0123] The collection, storage, use, processing, transmission, provision, and disclosure of the user's personal information involved in the present application all comply with the provisions of relevant laws and regulations and do not violate public order and good customs.

[0124] It should be noted that personal information from users should be collected for legitimate and reasonable purposes and should not be shared or sold outside of these legitimate uses. In addition, such collection / sharing should be carried out after obtaining the informed consent of the user, including but not limited to notifying the user to read the user agreement / user notice and signing an agreement / authorization including authorizing relevant user information before the user uses the function. In addition, any necessary steps should be taken to safeguard and secure access to such personal information data and to ensure that others with access to the personal information data comply with their privacy policies and procedures.

[0125] The present application anticipates providing an implementation scheme for users to selectively block the use or access of personal information data. That is, the present disclosure anticipates providing hardware and / or software to prevent or block access to such personal information data. Once the personal information data is no longer needed, the risk can be minimized by restricting data collection and deleting the data. In addition, when applicable, personal identifiers are removed from such personal information to protect the privacy of the user.

[0126] In the description of the foregoing embodiments, the descriptions referring to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples", etc. mean that the specific features, structures, materials, or characteristics described in connection with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic descriptions of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described can be combined in any one or more embodiments or examples in a suitable manner. In addition, without contradiction, those skilled in the art can combine and combine the different embodiments or examples described in this specification and the features of different embodiments or examples.

[0127] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. Thus, features defined with "first" and "second" may explicitly or implicitly include at least one such feature. In the description of the present application, the meaning of "a plurality" is at least two, such as two, three, etc., unless otherwise specifically defined.

[0128] Any process or method description represented in a flowchart or described otherwise herein may be understood to represent a module, segment, or portion of code including one or more executable instructions for implementing a customized logical function or process. The scope of the preferred embodiments of the present application includes additional implementations, where functions may be executed in a substantially simultaneous manner or in an order opposite to that shown or discussed, according to the functions involved, which should be understood by those skilled in the art to which the embodiments of the present application pertain.

[0129] The logic and / or steps represented in a flowchart or described otherwise herein, for example, may be considered a sequenced list of executable instructions for implementing a logical function and may be embodied specifically in any computer-readable medium for use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, a system including a processor, or other systems that can fetch and execute instructions from the instruction execution system, apparatus, or device. As used in this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of the computer-readable medium include the following: an electrical connection portion having one or more wirings (electronic device), a portable computer diskette (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disc read-only memory (CDROM). Additionally, the computer-readable medium can even be paper or other suitable medium on which the program can be printed, as the program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpretation, or other appropriate processing as necessary, and then stored in a computer memory.

[0130] It should be understood that each part of the present application can be implemented by hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, any one of the following techniques known in the art or a combination thereof can be used: discrete logic circuits with logic gate circuits for implementing logic functions on data signals, application-specific integrated circuits with appropriate combinational logic gate circuits, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0131] Those of ordinary skill in the art can understand that all or part of the steps carried by the method of the above embodiments can be completed by instructing relevant hardware through a program. The program can be stored in a computer-readable storage medium. When the program is executed, it includes one or a combination of the steps of the method embodiments.

[0132] In addition, in each embodiment of the present application, the functional units can be integrated in a processing module, or each unit can exist physically alone, or two or more units can be integrated in a module. The above integrated module can be implemented in the form of hardware or in the form of a software functional module. When the above integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0133] The above-mentioned storage medium can be a read-only memory, a magnetic disk, an optical disc, etc. Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and should not be construed as limiting the present application. Those of ordinary skill in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of the present application.

Claims

1. A method for generating a page based on visual configuration, characterized in that The method is applied to a front-end development tool, and the method includes the following steps: In response to a new operation on a front-end page, a context menu is popped up; the context menu displays a plurality of configuration page options, and the configuration page options are determined by the page type corresponding to the new operation. Different configuration page options correspond to different scenario templates, and the scenario templates are customized according to the business requirements of the target business; In response to a selection operation on the configuration page option, a configuration page is popped up; the function implementation code of the components on the configuration page is stored in the page script corresponding to the configuration page; the configuration page is determined according to the target business, and the page script is associated with the business data of the target business; Based on the visual configuration operation of the configuration page, the content of the page script is adjusted; Based on the page script, the front-end page is generated.

2. The method according to claim 1, characterized in that, After storing the configuration information of the configuration page in the page script corresponding to the front-end page, it includes: In response to a preview operation on the configuration page, the page script corresponding to the front-end page is obtained; Based on the page script, dynamic rendering of the front-end page is realized.

3. The method according to claim 1, characterized in that, The configuration page includes a query configuration page and a form configuration page, and both the query configuration page and the form configuration page include a business model area; when performing visual configuration through the configuration page, it includes: In response to a selection operation in the business model area, the selected business model information stored in the page script is displayed in the business model area; The fields in the query configuration page and the form configuration page are directly dragged in according to the business model displayed in the business model area; so as to perform configuration operations on the configuration page based on the business model information in the business model area; the business model information is determined according to the target business.

4. The method according to claim 1, characterized in that, All the fields involved in the business models related to the target business are managed according to a unified data standard, and each field includes a unique field number code value. The correspondence between the field and the field number code value is saved through a dictionary encoding function.

5. The method according to claim 3, wherein The query configuration page includes a query configuration area, a button configuration area, and a table configuration area, The query configuration area is used to configure query fields, and the query logic of the query fields adapts to the query logic according to the field type of the query fields; The button configuration area includes buttons with various functions, and the buttons on the front-end page are configured by selecting or deselecting; The table configuration area includes column width adjustment and data sorting method selection.

6. The method according to claim 3, wherein The form configuration page includes grouping configuration.

7. The method according to claim 1, characterized in that, The configuration page includes a link navigation configuration page, a tree navigation configuration page, a tab navigation configuration page, and a wizard configuration page.

8. The method according to claim 1, characterized in that After generating the front-end page, it includes: After enabling the front-end page, the front-end page is optimized to obtain a new version of the front-end page; The new version of the front-end page is configured in the menu management system of the front-end development tool.

9. The method according to claim 1, wherein After generating the front-end page, it includes: Download and generate the Vue file of the front-end page.

10. A computer program product, characterized in that, Comprising a computer program which, when executed by a processor, implements the method according to any one of claims 1-9.

Images