An application platform generation method and device

Abstract

The application relates to the computer technical field, in particular to an application platform generation method and device, obtaining function code of component configuration for a target application platform, wherein the function code represents a business logic function realized by a component; binding the function code with a determined corresponding component, and displaying the bound component; in response to a selection operation for the displayed component, displaying the selected component in a target development page of the target application platform; in response to a publishing operation triggered for the target development page, generating a page of the target application platform to complete building of the target application platform through the generated page, so that the efficiency of application platform building and development is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to an application platform generation method and device. BACKGROUND

[0002] With more and more function configurations, business data needs to be managed, so it is urgent to provide a convenient and easy-to-use management system platform for related operation teams, but due to the needs and technical limitations of developers of different roles, different requirements are required for the construction of the management system platform, and it is very important to maximize support for different developers to better and faster build the management system platform.

[0003] In related technologies, the method for building a management system platform is mainly divided into pure code development and pure drag-and-drop development, but pure drag-and-drop development is relatively cumbersome, has high operation and learning costs, and is low in efficiency, and high-threshold pure code development is suitable for highly customized development, requires higher professional development technical capabilities, and cannot abstract components for general use to be reused in the next project, which also reduces development efficiency. SUMMARY

[0004] The embodiments of the present application provide an application platform generation method and device to improve the efficiency of building and developing an application platform.

[0005] The specific technical solutions provided by the embodiments of the present application are as follows:

[0006] In one embodiment of the present application, an application platform generation method is provided, comprising:

[0007] obtaining function code configured for components of a target application platform, wherein the function code represents a business logic function implemented by the components;

[0008] binding the function code with the corresponding components determined, and displaying the bound components;

[0009] In response to a selection operation on the displayed components, displaying the selected components in a target development page of the target application platform;

[0010] In response to a publishing operation triggered on the target development page, generating a page of the target application platform to complete the construction of the target application platform through the generated page.

[0011] In another embodiment of the present application, an application platform generation device is provided, comprising:

[0012] The obtaining module is configured to obtain function code configured for components of a target application platform, wherein the function code represents a business logic function implemented by the components;

[0013] a processing module, configured to bind the function code to the determined corresponding component, and display the bound component;

[0014] a first display module, configured to display the selected component in a target development page of the target application platform in response to a selection operation on the displayed component;

[0015] a first generation module, configured to generate a page of the target application platform in response to a publishing operation triggered on the target development page, so as to complete the building of the target application platform through the generated page.

[0016] In another embodiment of the present application, an electronic device is provided, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor implements the steps of any of the above application platform generation methods when executing the program.

[0017] In another embodiment of the present application, a computer readable storage medium is provided, which stores a computer program, and the computer program implements the steps of any of the above application platform generation methods when executed by a processor.

[0018] In the embodiments of the present application, the function code of the component configuration for the target application platform is acquired, wherein the function code represents the business logic function implemented by the component; the function code is bound to the determined corresponding component, and the bound component is displayed, and then in response to a selection operation on the displayed component, the selected component is displayed in a target development page of the target application platform, and in response to a publishing operation triggered on the target development page, a page of the target application platform is generated, so as to complete the building of the target application platform through the generated page. In this way, the function code is imported first, and then bound to the component, and the idea of data configuration and data derivation component is adopted, which can automatically associate, so that the component dragged out by the user is the data component that can be used, reducing the configuration operation of the user and improving the development efficiency of the application platform. BRIEF DESCRIPTION OF DRAWINGS

[0019] Figure 1 The application architecture diagram of the application platform generation method in the embodiments of the present application is shown;

[0020] Figure 2 The flowchart of the application platform generation method in the embodiments of the present application is shown;

[0021] Figure 3 The principle diagram of generating executable code in the embodiments of the present application is shown;

[0022] Figure 4 The framework architecture diagram of the application platform generation method in the embodiments of the present application is shown;

[0023] Figure 5 An operation flowchart generated by an application platform for different users in an embodiment of the present application;

[0024] Figure 6 An interface schematic diagram of a visual arrangement development mode in an embodiment of the present application;

[0025] Figure 7 A page schematic diagram generated based on a visual arrangement development mode in an embodiment of the present application;

[0026] Figure 8 An interface schematic diagram of an online lightweight coding development mode in an embodiment of the present application;

[0027] Figure 9 A principle schematic diagram of a local code development mode in an embodiment of the present application;

[0028] Figure 10 A structure schematic diagram of an application platform generation device in an embodiment of the present application;

[0029] Figure 11 A structure schematic diagram of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION

[0030] The technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative work fall within the scope of the present application.

[0031] For the convenience of understanding the embodiments of the present application, several concepts will be introduced simply below:

[0032] Development platform: represents a software for secondary development, which can be used to implement various business systems. Relevant personnel do not need to write a large amount of code for each business module to implement, but only need to perform some simple configuration, drag and drop, etc. operations to complete the development of the business system, and can quickly implement various reports including the design and production of complex chart reports.

[0033] CURD: a database technology abbreviation, the basic functions of various parameters in project development are CURD, which respectively represent create (Create), update (Update), read (Read) and delete (Delete) operations, and CURD defines the basic atomic operations for processing data.

[0034] Command Line Interface (CLI): represents a tool or application that interacts through the command line. Using CLI can reduce repetitive work, improve development efficiency, and be more standardized.

[0035] Data object: all things can be abstracted into an object, such as a push message, a vote, a house, a car, etc., and the object is finally converted into data for storage, so the data used to store and transmit the object can be called a data object. Currently, typical data object description methods include json, protobuf, jce, etc., which can be used to define arbitrary data objects, such as using json schema to describe a data object in the embodiments of the present application.

[0036] Among them, schema: is the organization and structure of the database, and the schema contains schema objects, which can be tables, columns, data types, views, stored procedures, relationships, primary keys, foreign keys, etc. The database schema can be represented by a visual graph, which shows the database objects and their relationships with each other.

[0037] Schema is a collection of database objects, which includes various objects such as tables, views, stored procedures, indexes, etc. In order to distinguish different collections, different names need to be given to different collections. By default, a user corresponds to a collection, and the schema name of the user is equal to the username, and it is used as the default schema of the user. The schema collection looks like the username.

[0038] Vue: Vue is a progressive framework for building user interfaces. The core of the Vue framework is 1) responsive data binding: when the data changes, the view can be automatically updated, and you don't need to worry about dom operations, but focus on data operations; 2) Composable view components: divide the view into several basic units according to function, and form an inverted component tree by assembling components, which is maintainable, reusable, and testable.

[0039] Vue-cli is a scaffolding tool for single-page application, which can create new application easily and can be used to generate Vue and webpack project template. Vue is a progressive framework for building user interfaces, which can be applied from bottom to top. The core library of Vue only focuses on the view layer, which is easy to use and can be integrated with third-party libraries or existing projects. When combined with modern tool chains and various support libraries, Vue can also provide driving for complex single-page applications.

[0040] Cloud computing: a computing model that distributes computing tasks on a large number of computing resources, so that various application systems can obtain computing power, storage space and information services according to needs. The network that provides resources is called "cloud". The resources in the "cloud" can be expanded infinitely in the eyes of the user, and can be obtained at any time, used on demand, expanded at any time, and paid according to use.

[0041] As a basic capability provider of cloud computing, a cloud computing resource pool (referred to as cloud platform, generally referred to as Infrastructure as a Service (IaaS) platform) is established, and various types of virtual resources are deployed in the resource pool for external customers to choose and use. The cloud computing resource pool mainly includes: computing devices (virtualized machines containing operating systems), storage devices, network devices.

[0042] According to logical function division, the Platform as a Service (PaaS) layer can be deployed on the IaaS layer, and the Software as a Service (SaaS) layer can be deployed on the PaaS layer, or the SaaS can be directly deployed on the IaaS. PaaS is a platform for software running, such as database, web container, etc. SaaS is various business software, such as web portal, SMS massager, etc. Generally speaking, SaaS and PaaS are upper layers relative to IaaS.

[0043] Backend as a Service (BaaS): a new type of cloud service, which aims to provide backend cloud services for mobile and Web applications, including cloud data / file storage, account management, message push, social media integration, etc. BaaS is a vertical cloud service. With the development of mobile Internet, BaaS has also been paid more and more attention. As a new model of application development, it can reduce the cost of developers and make developers focus only on specific development work.

[0044] With more and more function configurations needing to be managed, business data needing to be managed, there is an urgent need for a convenient and easy-to-use management system platform for related operation teams to use. The efficiency requirements for the production of the management system platform are also increasingly demanding, and the number or quality of professional developers needs to be relatively large. However, due to the different demands and technical limitations of different roles of personnel, the requirements for building the management system platform are different. How to maximize the support for the building needs of different developers for the management system platform will be particularly important.

[0045] In the related art, the method for building the management system platform is mainly divided into pure code development and pure drag-and-drop development. However, pure drag-and-drop development is only suitable for some specific scenarios or is used in the absence of professional developers. The configuration is relatively cumbersome, the operation cost and learning cost are high, the efficiency is low, the binding of the User Interface (UI) component and data logic, the design of interaction, etc. are relatively complex, and it is not user-friendly, which reduces the building efficiency. The high threshold pure code development is suitable for highly customized development, which requires higher professional development technical ability, and the component cannot be abstracted and reused in the next project, which also reduces the development efficiency.

[0046] Therefore, in order to solve the above problems, an application platform generation method is provided in the embodiments of the present application. The function code of the component configuration of the target application platform is obtained, wherein the function code represents the business logic function implemented by the component, the function code is bound with the corresponding component determined, and the bound component is displayed. Then, in response to the selection operation of the displayed component, the selected component is displayed in the target development page of the target application platform, and in response to the publishing operation triggered for the target development page, the page of the target application platform is generated, so that the building of the target application platform is completed through the page of the target application platform. In this way, based on the idea of data configuration and data-derived UI component, the data source is determined first, and then the component is bound. The association can be automatically performed, so that the user can drag out the component as a data component that can be used, instead of the way of first dragging the component and then configuring the component. The least configuration can be used to match the most suitable scenario, improve the development flexibility, and improve the development efficiency.

[0047] Referring to Figure 1 FIG. 1 shows an application architecture schematic diagram of the application platform generation method in the embodiments of the present application, which includes a terminal 100 and a server 200.

[0048] The terminal 100 can be any smart device such as a smart phone, a tablet computer, a portable personal computer, a vehicle-mounted computer, a wearable electronic device, and the like. Various application programs can be installed on the terminal 100. For example, in the embodiments of the present application, a development platform can be installed on the terminal 100. Related personnel can perform relevant operations on the development platform to obtain a final target application platform. For example, selection operations, drag operations, online lightweight coding triggering operations, and the like can be performed on components. Pages of the target application platform can be developed.

[0049] The server 200 can provide various network services for the terminal 100. For different application programs, the server 200 can be considered as a corresponding background server. For example, in the embodiments of the present application, the server 200 can provide background data support, interface support, and the like for components. The server 200 can be a server, a server cluster composed of a plurality of servers, or a cloud computing center.

[0050] The terminal 100 and the server 200 can be connected through the Internet to realize communication between each other. Optionally, the Internet uses standard communication technologies, protocols, or a combination of both. The Internet is usually the Internet, but can also be any network, including but not limited to a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), a mobile, wired or wireless network, a private network or a virtual private network of any combination. In some embodiments, technologies and / or formats such as Hyper Text Mark-up Language (HTML), Extensible Markup Language (XML), and the like are used to represent data exchanged through the network. In addition, all or some links can be encrypted using conventional encryption technologies such as Secure Socket Layer (SSL), Transport Layer Security (TLS), Virtual Private Network (VPN), Internet Protocol Security (IPsec), and the like. In other embodiments, custom and / or dedicated data communication technologies can be used instead of or in addition to the above data communication technologies.

[0051] It is worth noting that in the embodiments of the present application, the application platform generation method can be executed on the terminal 100 side or on the server 200 side, and the embodiments of the present application do not limit the application platform generation method, but need to have a developer-oriented interface to present for the developer to perform interface operations, such as dragging components, deleting or configuring components, etc. The server 200 can provide background support in the application platform generation process, such as data protocol conversion, data storage, and other services.

[0052] It is worth noting that the application architecture in the embodiments of the present application is to more clearly illustrate the technical solutions in the embodiments of the present application, and does not constitute a limitation on the technical solutions provided by the embodiments of the present application, and also does not limit the application platform. It can be applied to the construction of various management application platforms. For other application architectures and application scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar problems.

[0053] In various embodiments of the present application, the application platform generation method is applied to Figure 1 The application architecture shown in the figure is used for illustrative description.

[0054] Based on the above embodiments, refer to Figure 2 The application platform generation method flowchart in the embodiments of the present application is shown in the figure, and the method comprises the following steps:

[0055] Step 200: Obtain the function code of the component configuration for the target application platform, wherein the function code represents the business logic function implemented by the component.

[0056] In the related art, the page development of the application platform is to first drag out the UI component and then perform data binding. This way, the developer needs to perform repeated data binding component work, which is low in efficiency and cumbersome. Therefore, in the embodiments of the present application, the idea of data deriving UI component is adopted, that is, the data storage design and structure design are performed first, and then the page of the application platform is back-deriving. Specifically, a data object can be used to implement it. All things can be abstracted as an object, and the object finally needs to be converted into data for storage. The data used to store and transmit the object is called a data object. Therefore, when the application platform has a demand, the data structure of the object has been designed in the background, and the protobuf definition and interface may have been defined. Therefore, only the object needs to be defined on the application platform to describe it, such as using json schema to describe a data object, and generalizing the data storage service.

[0057] Therefore, in this embodiment, functional code can be configured for components. For example, the functional code is JSON schema code. In this embodiment, several possible examples are provided for the process of converting business logic data into JSON schema code. For example, a single-level schema pattern: {"id":"name","type":"string"}. The user also needs to supplement relevant UI component information, such as Chinese name, whether it is read-only, etc. Then the converted schema can be {"id":"name","type":"string","title":"Name","description":"Please fill in your name","display":true","readonly":true}.

[0058] For example, in a nested schema, the original schema is:

[0059] {"id":"A","type":"object","fields":[{"id":"name","type":"string"},…]};

[0060] The schema structure after the user adds relevant information about the UI components is as follows:

[0061] {"id":"A","type":"object","fields":[{"id":"B","type":"string","title":"Name","description":"Please fill in your name","display":true","readonly":true},...]}.

[0062] It also supports infinitely nested structures, for example:

[0063] {"id":"A","type":"object","fields":[{"id":"B","type":"object","fields":[{"id":"C","type":"object"},…]},…]}.

[0064] Thus, in this embodiment of the application, for example, after a user logs into the development platform, they can first drag and drop a super component onto the target development page and import the data source, i.e., the function code. Then, the super component can automatically determine the corresponding component based on the information such as the fields in the configuration code, and bind the function code to the corresponding component, i.e., the component can be given business logic functions.

[0065] Step 210: binding the function code with the determined corresponding component, and displaying the bound component.

[0066] When step 210 is performed, it specifically includes:

[0067] 1) parsing the function code according to the preset protocol format, and determining the type of the field contained in the function code.

[0068] 2) matching the corresponding component according to the type of the field contained in the function code, and binding the function code with the matched component.

[0069] For example, for a storage based on a background service, the service access for the function code can adopt the following methods: 1) automatically exporting a default json schema from the preset protocol; 2) the default json schema can only know whether the field is a string, a number or an array, and cannot accurately restore it into a form, so it is necessary to manually configure which component is used for each field; 3) configuring the service routing address read and written by the background server; 4) completing the service access, and then the upper layer can use the service and bind it with the determined corresponding component, which can be directly used to generate a list and a form, etc.

[0070] Step 220: in response to a selection operation for the displayed component, displaying the selected component in the target development page of the target application platform.

[0071] In the embodiments of the present application, the corresponding component is determined according to the function code and is bound, and the bound component can be displayed in the set area of the current page, and then the user can drag the component to the target development page according to the actual needs, at this time, since the displayed bound component is pre-configured with business logic function through the function code, the dragged component can be directly used without manual and tedious configuration operation.

[0072] Further, in order to improve the development flexibility and meet the customized needs of different users, in addition to the visual arrangement and development mode of dragging, other development modes are also supported in the embodiments of the present application, and specifically, several possible implementation manners are provided in the embodiments of the present application:

[0073] 1) online lightweight coding development mode.

[0074] Specifically, one possible implementation manner is provided in the embodiments of the present application: after displaying the selected component in the target development page of the target application platform, it can further include: in response to an online lightweight coding triggering operation for the component, displaying a coding interface; receiving the lightweight function code input in the coding interface; binding the lightweight function code with the component.

[0075] For example, after the user drags the component into the target development page, if the function of the component needs to be adjusted or other functions need to be added, the online lightweight coding function can be triggered in the target development page, that is, the coding interface can be displayed, and then the user can code and adjust in the coding interface, and the input lightweight function code can take effect in real time without compilation.

[0076] 2) Local development mode.

[0077] In the embodiments of the present application, the local development mode is mainly to meet more professional and highly customized needs, and the project source code can be imported into the local for development. Specifically, a possible implementation provided in the embodiments of the present application is: generating project source code of the target application platform including at least the bound component and the function code; copying the project source code to the local to enable the function code configuration for the component in the local.

[0078] Developing in the development platform can be subject to some limitations of the development platform itself, and it is more convenient and flexible to export to the local for development. After being exported to the local, the function of the component can be adjusted and configured, and a new component can also be defined. Then, after the local development is completed, the code developed in the local can be imported into the development platform, that is, the corresponding component can be determined to be bound and displayed according to the code developed in the local, and then the user can select the bound component to the target development page and publish it to generate the page of the target application platform, thereby realizing the building of the target application platform.

[0079] Step 230: In response to the publishing operation triggered for the target development page, generating the page of the target application platform to complete the building of the target application platform through the generated page.

[0080] Specifically, a possible implementation provided in the embodiments of the present application is:

[0081] 1) Generating page layout code according to the position information of the selected component displayed in the target development page.

[0082] In the embodiments of the present application, after the user selects and drags the bound component to the target development page, the position layout of the component can also be adjusted according to the needs, and visual configuration is supported, so that the page layout code can be automatically generated according to the adjusted position information. Specifically, when generating the page layout code, the page layout code can be derived through the classic horizontal and vertical cell structure, and online compilation-free preview of the page layout code can also be supported. In this way, according to the data description information in the function code of the component, such as the display form of the chart dial, the page layout source code can be converted through the position information of the component, and then the layout display of the component can be visualized and restored through the execution of the page layout source code.

[0083] And, the application embodiment can also support infinite layers of nested layout data, so that more flexible and complex layout structure can be realized, and any layout requirement can be met, and components can be dragged flexibly, so that the page layout configuration of any application platform can be realized.

[0084] 2) At least based on the function code, the selected component and the page layout code, executable code corresponding to the page of the target application platform is generated, so that after the executable code is published, the page can be displayed by running the executable code.

[0085] Wherein, when the Vue framework is used, the generated executable code is the Vue source code, which is not limited in the application embodiment.

[0086] Further, when generating the executable code, the page-level data of the selected component can also be edited based on the lightweight function code input online, and the selected component is dragged out to display in the target development page of the target application platform, that is, all information associated with the target development page can be combined to generate the page of the target development platform. For example, refer to Figure 3 As shown in FIG. 6, the principle of generating executable code in the application embodiment can be shown, as shown in Figure 3 According to the page layout code, the function code of the component, the page-level data, the lightweight function code, etc., the Vue source code can be generated based on the Vue technology, as shown in Figure 3 The rightmost part of FIG. 6 is the code structure of the Vue source code.

[0087] Further, after generating the executable code of the page of the target application platform, the generated page can be displayed by running the executable code at runtime, that is, the functions of the target application platform can be used through the page. Specifically, the method of parsing the Vue source code by the browser can be used to parse and run the Vue source code, that is, it can be understood that the target application platform is built by generating each page, and each generated page constitutes the target application platform.

[0088] In the embodiment of the present application, the function code of the component configuration of the target application platform is acquired, wherein the function code represents the business logic function implemented by the component, and the function code is bound with the corresponding component determined, and the bound component is displayed, and then in response to the selection operation of the displayed component, the selected component is displayed in the target development page of the target application platform, and in response to the publishing operation triggered in the target development page, the page of the target application platform is generated, that is, the construction of the target application platform is completed. In this way, the function code is acquired first, and then the corresponding component is determined and bound according to the acquired function code, and the component is configured and derived based on the data object, which can reduce the configuration operation of the user, improve the development efficiency, facilitate the rapid reuse of the component, and generate the page through the selection and publishing operation, effectively reduce the use threshold, and improve the flexibility.

[0089] Based on the above embodiment, the following will be described by using a specific application scenario, referring to Figure 4 The framework architecture diagram of the application platform generation method in the embodiment of the present application is shown. The related personnel log in the development platform, and then the target application platform can be constructed based on the development platform, mainly based on the application platform generation method in the embodiment of the present application, and the page of the target application platform required is generated, such as Figure 4 The framework architecture applied in the embodiment of the present application can be divided into three parts, which are the data access part, the component configuration part and the backend service part, which will be described below:

[0090] First part: data access part.

[0091] In the embodiment of the present application, a standard data access Paas layer is provided, which can support the database front-end development tool (PowerBuilder, PB), the HyperText Transfer Protocol (HTTP) interface, the database (Data Base, DB), the ES file explorer, the Redis storage system, etc. This layer is mainly responsible for converging the storage difference and management difference of data, providing a solid data foundation for the standard data derivation UI component.

[0092] In addition, after the related personnel log in the development platform, when the target application platform is created for the first time, the related information of the target application platform required to be created can be input, such as the project name, the department, the icon, the permission, the menu, etc. The specific embodiment of the present application is not limited.

[0093] Second part: component configuration part.

[0094] The embodiments of the present application provide different types of components, and the components are divided into different types according to levels, which can facilitate assembly reuse of the components and open source construction of open components. Specifically, the components can be divided into L1, L2 and L3 types, wherein the L1 level is a raw material component, representing the most basic pure UI component, such as input box, select drop-down box and other sub-component; the L2 level is a synthetic component, representing a high-level component, which is usually a combination of L1 level components, from the packaging of raw material components, and does not contain data logic, and can cope with more complex functional components; the L3 level component is a finished component, containing data logic, representing a high-level component of data and UI binding, and also containing a reused component after arrangement, which can be directly used in production environment without configuration, thereby maximizing the reduction of user configuration operations.

[0095] As shown in Figure 4 , the component configuration part is mainly for Figure 3 component arrangement part, that is, the implementation process of the application platform generation method in the embodiments of the present application. After selecting the data source, that is, the function code of the component, the data source is bound to the corresponding component, and the bound component is displayed. Then, the user can select the bound component and drag it to the target development page, and can adjust the layout of each component in the target development page, and then trigger the publishing operation, that is, generate the page of the target application platform.

[0096] In the embodiments of the present application, the data source is bound to the component by using the idea of deriving UI component from data. It can be understood that the type of the data field in the function code is bound to the specified UI component, so that the user can use the data component after dragging it out. At the same time, each component is provided with certain open configuration items to provide more detailed adjustment. The user can configure and adjust the component according to the demand, and the embodiments of the present application do not limit it.

[0097] The third part is the backend service part.

[0098] The backend service part mainly refers to Figure 4 BaaS part in , which provides background support for the development platform, such as data storage service, code analysis service, etc.

[0099] In the embodiments of the present application, intelligent components, data interfaces and service support can be provided in the development platform. The user imports the function code of the component, and the component can be automatically associated with the function code. Then, the user can select the required component from the bound component, effectively reduce the use threshold, improve the efficiency, and also support the online lightweight coding configuration or local configuration of the component, so that the user can compress the code amount to the minimum in some customized scenarios, reduce the threshold, and also provide flexible expansion capability.

[0100] Based on the above embodiments, the application platform generation method in the embodiments of the present application is described from the product side as follows. Referring to Figure 5 The operation flowchart of different users in the embodiments of the present application in generating an application platform is shown in FIG. 2, and the application platform generation method in the embodiments of the present application can meet the needs of building an application platform for users with different technical levels. Figure 5 The operation flowchart of different users in the embodiments of the present application in generating an application platform is shown in FIG. 2, and the application platform generation method in the embodiments of the present application can meet the needs of building an application platform for users with different technical levels.

[0101] 1) Non-technical user: For example, product or operation personnel, who can directly use the visual arrangement development mode to drag out components, so as to realize the CURD operation and the like, and specifically, as shown in FIG. 3, the user logs in to the development platform, creates a target application platform, can input information related to the target application platform, such as name, department, logo, permission and menu configuration and the like, and then imports the function code of the data source, that is, the function code of the component, the background performs component binding and displays the bound components, the user can drag the components to the target development page according to the needs, and then can trigger the publishing operation, that is, generate the page of the target application platform, so as to realize the building of the target application platform. Figure 5

[0102] 2) Background or operation development user: Generally, without professional front-end development capability, can provide interface and other data mode, and can also quickly drag out the related management interface for background configuration, and specifically, as shown in FIG. 4, compared with the non-technical user, the background development user has a certain development capability, can use the online lightweight coding development mode, inputs the lightweight function code in the coding interface, so as to configure and adjust the functions of the components. Figure 5

[0103] 3) Professional front-end development user: Can use the online lightweight coding development mode to write a small amount of code to realize more customized operations, and can also choose to directly export the project source code to the local, and complete the more highly customized needs in the local development mode.

[0104] Based on the above embodiments, the three development modes in the embodiments of the present application are described as follows.

[0105] 1) Visual arrangement development mode, for example, referring to Figure 6 The interface schematic diagram of the visual arrangement development mode in the embodiments of the present application is shown in FIG. 5, in the embodiments of the present application, through the automatic derivation and binding of the data source and the component, the user does not need to configure the cumbersome data interface and style configuration and the like, can perform visual configuration, and drags the components to the target development page, for example Figure 6 ​​The selected components, such as an input box component and the like, are displayed in the page, so that the target application platform can be quickly built by simply performing layout fine-tuning, configuration menu, and configuration permission on the dragged components, and the user can use the business logic function configured by the components through the page of the target application platform.

[0106] For example, refer to Figure 7 As shown in the page schematic diagram generated based on the visual arrangement development mode in the embodiment of the application, the user can use the function in the page, Figure 7 As shown in the schematic diagram of a generated page, the user can use the function in the page, Figure 7 The page has a search function, and the page includes components configured with input business logic functions and search logic functions.

[0107] 2) Online lightweight coding development mode.

[0108] For example, refer to Figure 8 As shown in the interface schematic diagram of the online lightweight coding development mode in the embodiment of the application, the user can open the online lightweight coding development mode by clicking the function button of opening the online lightweight coding, display the coding interface, and input the lightweight function code in the coding interface, such as Figure 8 After the online lightweight coding development mode is opened, the function button of closing the online lightweight coding development mode can be changed to be displayed, and after the lightweight coding is completed, the function button can be triggered to close the online lightweight coding development mode and return to the target development page.

[0109] In addition, the open source monaco editor can be combined in the embodiment of the application, the specific syntax prompt set is matched, and the dynamic collection of the page component list can provide code prompts, for example, the user can be prompted with words and syntax when inputting the lightweight function code, and the eslint and pretty method can be combined to realize the code formatting function, so that the code style is unified and standardized, and the online assembly of the Vue source code can be supported to realize the non-compilation access function, that is, the real-time effect of the code can be realized.

[0110] 3) Local code development mode.

[0111] For example, refer to Figure 9 As shown in the principle schematic diagram of the local code development mode in the embodiment of the application, such as Figure 9As shown, the generation of the entire project source code can be completed by collecting dependencies and installing, formatting and standardizing the code, generating into a scaffold directory, imported to the local, provided to professional developers, without relying on any scaffold or any special environment configuration, and the source code can be operated and edited locally, and then the local development can be completed, and the application platform can be independently deployed for use, or imported to the development platform again, and the page can be generated by real-time online compilation and running.

[0112] In the embodiments of the present application, a concept of configuring and deriving UI components for data objects is proposed, the concept of a progressive development framework is implemented, and a visual arrangement development mode, an online lightweight coding development mode, and a local code development mode are integrated. Through the integration of the three progressive development modes, users with different technical levels and requirements can be supported, the application platform required by the user can be quickly developed through the development platform in the embodiments of the present application, the efficiency of building the application platform is improved, and the ability of more people to build the application platform is enabled.

[0113] Based on the same inventive concept, the embodiments of the present application also provide an application platform generation device, which can be a hardware structure, a software module, or a hardware structure plus a software module. Based on the above embodiments, refer to Figure 10 As shown, the application platform generation device in the embodiments of the present application specifically includes:

[0114] The obtaining module 1000 is configured to obtain function code of component configuration for a target application platform, wherein the function code represents a business logic function implemented by a component.

[0115] The processing module 1010 is configured to bind the function code to the determined corresponding component, and display the bound component.

[0116] The first display module 1020 is configured to, in response to a selection operation on the displayed component, display the selected component in a target development page of the target application platform.

[0117] The first generation module 1030 is configured to, in response to a publishing operation triggered on the target development page, generate a page of the target application platform, so as to complete the building of the target application platform through the generated page.

[0118] Optionally, when the function code is bound to the determined corresponding component, the processing module 1010 is specifically configured to:

[0119] According to a preset protocol format, the function code is parsed to determine the type of the field contained in the function code.

[0120] According to the type of the field contained in the function code, a corresponding component is matched, and the function code is bound to the matched component.

[0121] Optionally, after the selected component is displayed in the target development page of the target application platform, the method further includes:

[0122] The second display module 1040 is configured to display a coding interface in response to an online lightweight coding triggering operation for the component.

[0123] The receiving module 1050 is configured to receive a lightweight function code input in the coding interface.

[0124] The binding module 1060 is configured to bind the lightweight function code to the component.

[0125] Optionally, the method further includes:

[0126] The second generation module 1070 is configured to generate project source code of the target application platform, which at least includes the bound component and the function code.

[0127] The copying module 1080 is configured to copy the project source code to a local device, so that the function code configuration is performed for the component on the local device.

[0128] Optionally, when the page of the target application platform is generated, the first generation module 1030 is specifically configured to:

[0129] Generate page layout code according to position information of the selected component displayed in the target development page.

[0130] Generate executable code corresponding to the page of the target application platform based on at least the function code, the selected component, and the page layout code, so that the page is displayed by running the executable code after the executable code is published.

[0131] Based on the above embodiments, refer to Figure 11 FIG. 1 shows a structural schematic diagram of an electronic device according to an embodiment of the present application.

[0132] An electronic device according to an embodiment of the present application can include a processor 1110 (Center Processing Unit, CPU), a memory 1120, an input device 1130, and an output device 1140, etc. The input device 1130 can include a keyboard, a mouse, a touch screen, etc. The output device 1140 can include a display device, such as a Liquid Crystal Display (LCD), a Cathode Ray Tube (CRT), etc.

[0133] The memory 1120 can include a read-only memory (ROM) and a random access memory (RAM), and provide the processor 1110 with program instructions and data stored in the memory 1120. In the embodiments of the present application, the memory 1120 can be used to store the program of any of the application platform generation methods in the embodiments of the present application.

[0134] The processor 1110, by invoking the program instructions stored in the memory 1120, is configured to execute the application platform generation method in any of the embodiments of the present application according to the obtained program instructions.

[0135] Based on the above embodiments, in the embodiments of the present application, a computer readable storage medium is provided, which stores a computer program. The computer program is executed by a processor to implement the application platform generation method in any of the method embodiments.

[0136] Those skilled in the art can understand that all or part of the steps of the above method embodiments can be completed by program instructions related to hardware, and the foregoing program can be stored in a computer readable storage medium, and the program is executed to perform the steps of the above method embodiments. The foregoing storage medium includes a mobile storage device, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes.

[0137] Alternatively, the integrated units of the present application can be stored in a computer readable storage medium if they are realized in the form of software function modules and sold or used as independent products. Based on this understanding, the technical solutions of the embodiments of the present application can be embodied in the form of software products, which are stored in a storage medium and include a number of instructions for making a computer device (which can be a personal computer, a server, or a network device, etc.) execute all or part of the methods described in the embodiments of the present application. The foregoing storage medium includes a mobile storage device, a ROM, a RAM, a magnetic disk or an optical disk, and various media that can store program codes.

Claims

1. An application platform generation method characterized by comprising: include: Based on the data structure pre-designed by the backend through a preset protocol, the functional code of the component configuration for the target application platform is obtained, wherein the functional code represents the business logic function implemented by the component; Based on the type of the fields contained in the function code, the function code is bound to the corresponding determined component, and the bound component is displayed. Each component is one of the following: raw material component, synthetic component obtained by combining raw material components, and finished product component containing data logic. The raw material component is a basic user interface (UI) component. In response to a selection operation for the displayed component, the selected component is displayed on the target development page of the target application platform; In response to an online lightweight coding trigger operation for a selected component, a coding interface is displayed, and lightweight functional code input on the coding interface is received. The lightweight functional code is then bound to the selected component to adjust and add functionality, which takes effect in real time. The lightweight functional code is obtained based on the code coding and adjustment operations performed on the coding interface. The coding interface also includes code suggestion and code formatting functions. The code suggestion function provides hints for words and grammar. In response to a release operation triggered for the target development page, page layout code is generated based on the position information of the selected component displayed on the target development page and the data description information in the functional code. This code is used to visually recreate the layout structure of the component. The layout structure includes a multi-layered nested layout structure. At least based on the functional code of the selected component, the lightweight functional code, and the page layout code, executable code corresponding to the page of the target application platform is generated. This allows the page to be displayed by running the executable code after the executable code is released, thereby completing the construction of the target application platform through the generated page. The position information is obtained by adjusting the position layout of the selected component according to requirements.

2. The method of claim 1, wherein, Based on the types of the fields contained in the function code, the function code is bound to the corresponding component, specifically including: The function code is parsed according to a preset protocol format to determine the types of the fields contained in the function code; Based on the type of the fields contained in the function code, the corresponding component is matched, and the function code is bound to the matched component.

3. The method as described in claim 1, characterized in that, Further includes: Generate project source code for the target application platform that includes at least the bound components and the functional code; Copy the project source code to your local machine so that you can configure the functional code for the component locally.

4. An application platform generation device, characterized in that, include: The acquisition module is used to acquire the functional code of the component configuration for the target application platform based on the data structure pre-designed by the backend through a preset protocol, wherein the functional code represents the business logic function implemented by the component; The processing module is used to bind the function code to the corresponding determined component based on the type of the field contained in the function code, and display the bound component. Each component is one of the following: raw material component, synthetic component obtained by combining raw material components, and finished product component containing data logic. The raw material component is a basic user interface (UI) component. The first display module is used to display the selected component in the target development page of the target application platform in response to the selection operation of the displayed component; The second display module is used to respond to an online lightweight coding trigger operation for the selected component, display a coding interface, receive lightweight functional code input on the coding interface, and bind the lightweight functional code to the selected component to adjust and add functions to the selected component, which takes effect in real time; the lightweight functional code is obtained based on the code coding and adjustment operations performed on the coding interface; the coding interface also includes code suggestion and code formatting functions; the code suggestion function is used for word and grammar suggestions; The first generation module is used to respond to a release operation triggered for the target development page, and generate page layout code for visually reproducing the layout structure of the components based on the position information of the selected components displayed on the target development page and the data description information in the functional code; the layout structure includes a multi-level nested layout structure; and generates executable code corresponding to the page of the target application platform based at least on the functional code of the selected components, the lightweight functional code, and the page layout code, so that after the executable code is released, the page can be displayed by running the executable code, thereby completing the construction of the target application platform through the generated page; the position information is obtained by adjusting the position layout of the selected components according to requirements.

5. The apparatus as described in claim 4, characterized in that, Further includes: The second generation module is used to generate the project source code of the target application platform, which includes at least the bound components and the functional code. The copy module is used to copy the project source code to the local machine so that the functional code for the component can be configured locally.

6. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the method according to any one of claims 1-3.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1-3.

Images