Front-end development method and device

Abstract

The invention provides a front-end development method and device.The front-end development method comprises the steps that a front-end development request for a target service is received, and the front-end development request is analyzed to obtain a front-end development framework identifier and development demand information of the target service; based on the front-end development framework identifier, a target front-end development framework is determined in a framework library of a front-end development platform, the framework library comprises a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; under the condition that the target front-end development framework is the lightweight front-end development framework, creating a target component based on the development demand information and the basic function module, and creating component sharing information of the target component based on the dependency injection module; and generating a front-end service code of the target service according to the target component and the component sharing information.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a front-end development method and device. Background Art

[0002] With the continuous development of front-end technology, the requirements for front-end development quality are getting higher and higher. In order to improve the quality of front-end development, in some companies, different development teams may adopt different architectures and technology stacks to ensure development quality.

[0003] However, the above approach, due to the lack of unified project standards, provides some flexibility, but also brings a series of systemic problems, such as increased difficulty in code maintenance and reduced team collaboration efficiency. In addition, in the traditional development model, when the technology stack needs to be updated or a new tool library needs to be introduced, each project often needs to be updated separately. This process is not only time-consuming, but also prone to introducing new errors. Therefore, a front-end development method is urgently needed to solve the above problems. Summary of the invention

[0004] In view of this, the embodiment of the present application provides a front-end development method to solve the technical defects existing in the prior art. The embodiment of the present application also provides a front-end development device, a computing device, a computer-readable storage medium, and a computer program product.

[0005] According to a first aspect of an embodiment of the present application, a front-end development method is provided, including: Receiving a front-end development request for a target business, parsing the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; Determine a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library includes a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; In the case where the target front-end development framework is the lightweight front-end development framework, creating a target component based on the development requirement information and the basic function module, and creating component sharing information of the target component based on the dependency injection module; A front-end service code of the target service is generated according to the target component and the component sharing information.

[0006] Optionally, determining a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier may also include: Create developer tool modules, interface definition modules, basic function modules and dependency injection modules according to the front-end development framework building request; Building a lightweight front-end development framework based on the developer tool module, the interface definition module, the basic function module and the dependency injection module; Add the lightweight front-end development framework to the framework library of the front-end development platform.

[0007] Optionally, before adding the lightweight front-end development framework to the framework library of the front-end development platform, the method further includes: Obtain at least one non-lightweight front-end development framework, and create a conversion tool based on each non-lightweight front-end development framework; A framework library is created based on the conversion tool and various non-lightweight front-end development frameworks.

[0008] Optionally, generating a front-end service code of the target service according to the target component and the component sharing information includes: Generate a target front-end code according to the target component and the component sharing information; The business data of the target business is added to the target front-end code to obtain the front-end business code of the target business.

[0009] Optionally, before creating the target component based on the development requirement information and the basic function module, the method further includes: Parsing the front-end development request to obtain a preset front-end development framework file; Based on the conversion tool and the component structure information in the preset front-end development framework file, the preset front-end development framework file is converted into a lightweight front-end development framework file.

[0010] Optionally, generating a front-end service code of the target service according to the target component and the component sharing information includes: The front-end business code of the target business is generated based on the lightweight front-end development framework file, the target component and the component sharing information.

[0011] Optionally, after generating the front-end service code of the target service according to the target component and the component sharing information, the method further includes: Monitoring the status information of the front-end business code based on the monitoring module; Status prompt information for the front-end business code is generated according to the status information.

[0012] Optionally, before monitoring the status information of the front-end business code based on the monitoring module, the method further includes: In response to the monitoring module building request, create a monitoring module and add identification information of the monitoring module in the module management directory of the front-end development platform; The identification information and the code information of the monitoring module are added to the code library corresponding to the module management directory.

[0013] Optionally, the monitoring module includes a code review submodule, a traffic monitoring submodule, a continuous deployment submodule and a performance monitoring module.

[0014] According to a second aspect of an embodiment of the present application, a front-end development device is provided, including: A receiving module is configured to receive a front-end development request for a target business, parse the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; A determination module is configured to determine a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library includes a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; A creation module configured to create a target component based on the development requirement information and the basic function module when the target front-end development framework is the lightweight front-end development framework, and to create component sharing information of the target component based on the dependency injection module; A generation module is configured to generate a front-end business code of the target business according to the target component and the component sharing information.

[0015] According to a third aspect of an embodiment of the present application, a computing device is provided, including: Memory and processor; The memory is used to store computer-executable instructions, and the processor implements the steps of the front-end development method when executing the computer-executable instructions.

[0016] According to a fourth aspect of an embodiment of the present application, a computer-readable storage medium is provided, which stores computer-executable instructions, and when the instructions are executed by a processor, the steps of the front-end development method are implemented.

[0017] According to a fifth aspect of an embodiment of the present application, a chip is provided, which stores a computer program, and the computer program implements the steps of the front-end development method when executed by the chip.

[0018] According to a sixth aspect of the embodiments of this specification, a computer program product is provided, including a computer program or instructions, which implement the steps of the above-mentioned front-end development method when executed by a processor.

[0019] The front-end development method provided by the present application receives a front-end development request for a target business, parses the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; determines a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library contains a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; when the target front-end development framework is the lightweight front-end development framework, creates a target component based on the development requirement information and the basic function module, and creates component sharing information of the target component based on the dependency injection module; generates the front-end business code of the target business according to the target component and the component sharing information. By selecting the target front-end development framework for code development according to the front-end development framework identifier in the front-end development request, there is no need to adjust the overall platform when using a new front-end development framework, thereby improving the flexibility of front-end development; when the target front-end development framework is a lightweight front-end development framework, code development is performed based on a front-end development framework provided with a basic function module and a dependency injection module, thereby further improving the development efficiency of the front-end code. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 This is a schematic diagram of a development scenario of a front-end development method provided by an embodiment of the present application; Figure 2 This is a flow chart of a front-end development method provided by an embodiment of the present application; Figure 3 It is a schematic diagram of a lightweight front-end development framework provided by an embodiment of the present application; Figure 4 is a schematic diagram of a front-end development platform provided in one embodiment of the present application; Figure 5 It is a flowchart of a front-end development method provided by an embodiment of the present application; Figure 6 It is a structural schematic diagram of a front-end development device provided by an embodiment of the present application; Figure 7 It is a structural block diagram of a computing device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0021] Many specific details are described in the following description to facilitate a full understanding of the present application. However, the present application can be implemented in many other ways than those described herein, and those skilled in the art can make similar generalizations without violating the connotation of the present application, so the present application is not limited by the specific implementation disclosed below.

[0022] The terms used in one or more embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to limit one or more embodiments of the present application. The singular forms of "a", "said" and "the" used in one or more embodiments of the present application and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used in one or more embodiments of the present application refers to and includes any or all possible combinations of one or more associated listed items.

[0023] It should be understood that, although the terms first, second, etc. may be used to describe various information in one or more embodiments of the present application, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of one or more embodiments of the present application, the first may also be referred to as the second, and similarly, the second may also be referred to as the first.

[0024] First, the terms involved in one or more embodiments of the present application are explained.

[0025] Front-end development framework vue: Vue.js (often referred to as Vue) is an open source progressive JavaScript framework for building user interfaces.

[0026] Front-end development framework React: React is a JavaScript library for building user interfaces, especially for creating complex and interactive user interfaces in single-page applications.

[0027] TypeScript Programming Language: TypeScript is a free and open source programming language developed by Microsoft. It is a superset of JavaScript, which means that all JavaScript code is also valid TypeScript code.

[0028] JavaScript: JavaScript is a programming language widely used in web pages and network applications. It is a high-level, interpreted language that supports object-oriented, imperative, and functional programming styles.

[0029] DOM: DOM, short for Document Object Model, is a programming interface for HTML and XML documents. It represents the data structure of documents and defines how to access and manipulate the content, structure, and style of these documents through scripting languages ​​such as JavaScript.

[0030] Diff algorithm: usually refers to an algorithm used in the front-end development framework to optimize the DOM update process.

[0031] JSX converter: Since browsers cannot parse JSX directly, they need to be converted to standard JavaScript code. This process is usually done by a JSX converter.

[0032] Hooks: Used to share state logic and side effects in functional components to achieve code reusability.

[0033] computed: computed function usually refers to the function used to create calculated properties in the front-end framework.

[0034] watch: Used to observe and respond to changes in data, allowing developers to define logic that should be executed when a specific data item (such as a variable, object, or array) changes.

[0035] createSignal: Used to create and manage application states, supporting developers to build efficient and responsive web applications.

[0036] Figure 1 is a schematic diagram of a development scenario of a front-end development method provided by an embodiment of the present application, such as Figure 1 As shown, developers can select the type of front-end development framework in the front-end development platform, and input development requirement information for the target business; the front-end development platform generates a front-end development request for the target business based on the developer's operation, parses the front-end development request to obtain the front-end development framework identifier and the development requirement information of the target business; based on the front-end development framework identifier, the target front-end development framework is determined in the framework library of the front-end development platform, and the framework library includes lightweight front-end development frameworks, front-end development frameworks vue, front-end development frameworks React, etc., and the front-end development framework selected by the developer is used as the target front-end development framework.

[0037] That is Figure 1 As shown, developers can choose any type of front-end development framework and complete the front-end code development for the target business based on the front-end development framework; if there is a preset front-end development framework file for the target business, that is, there is a file generated based on a non-lightweight front-end development framework, the preset front-end development framework file can also be input into the front-end development platform. The conversion tool in the front-end development platform will perform syntax conversion on the preset front-end development framework file to obtain a lightweight front-end development framework file that can be recognized by the lightweight front-end development framework, so as to generate the front-end business code corresponding to the target business.

[0038] The above-mentioned lightweight front-end development framework is built by this application based on the developer tool module, interface definition module, basic function module and dependency injection module; the dependency injection module integrated in the lightweight front-end development framework can be used to generate component sharing information corresponding to the component, thereby eliminating the need to use other databases to collect component sharing information of the component, thereby improving the front-end development efficiency.

[0039] When the target front-end development framework is a lightweight front-end development framework, determine whether the front-end development request contains a preset front-end development framework file; if not, create a target component based on the development requirement information and the basic function module, and create the component sharing information of the target component based on the dependency injection module, and then generate the front-end business code of the target business according to the target component and the component sharing information; if so, it is necessary to use a conversion tool to convert the preset front-end development framework file into a lightweight front-end development framework file, and then generate the front-end business code of the target business based on the lightweight front-end development framework file, the target component and the component sharing information.

[0040] After generating the front-end business code, the code status can be monitored based on the monitoring module integrated in the front-end development platform to obtain status information; abnormal status information can be determined in the status information, and status prompt information for the front-end business code can be generated based on the abnormal status information, thereby realizing automated operation and maintenance of the code.

[0041] The present application provides a method for receiving a front-end development request for a target business, parsing the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; determining a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library contains a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; when the target front-end development framework is the lightweight front-end development framework, creating a target component based on the development requirement information and the basic function module, and creating component sharing information of the target component based on the dependency injection module; generating the front-end business code of the target business according to the target component and the component sharing information. By selecting the target front-end development framework for code development according to the front-end development framework identifier in the front-end development request, there is no need to adjust the overall platform when using a new front-end development framework, thereby improving the flexibility of front-end development; when the target front-end development framework is a lightweight front-end development framework, code development is performed based on a front-end development framework provided with a basic function module and a dependency injection module, thereby further improving the development efficiency of the front-end code.

[0042] In the present application, a front-end development method is provided. The present application also relates to a front-end development device, a computing device, a computer-readable storage medium, and a computer program product. Each of the embodiments below will be described in detail.

[0043] See also Figure 2 , Figure 2 A flowchart of a front-end development method provided according to an embodiment of the present specification is shown. The method is applied to a front-end development platform and specifically includes the following steps: Step 202: receiving a front-end development request for a target business, parsing the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business.

[0044] Specifically, the target business refers to a business that has front-end development requirements, such as a shopping business, a game business, etc. that has front-end development requirements. The front-end development request refers to a request to generate front-end code for the target business. The front-end development request may include a front-end development framework identifier and development requirement information. The front-end development framework identifier is used to determine the front-end development framework for the development code in the front-end development platform, and the development requirement information is used as the basis for the front-end development framework to generate the front-end code. The front-end development platform refers to a platform that can generate front-end development code based on the front-end development framework selected by the user.

[0045] Based on this, the front-end development platform receives the front-end development request for the target business sent by the client; the front-end development request contains the front-end development identifier and development requirement information added according to the business requirements for the target business; after receiving the front-end development request, the front-end development platform parses the front-end development request to obtain the front-end development framework identifier and the development requirement information for the target business. In actual applications, the front-end development identifier can be set by the developer according to the development requirements.

[0046] For example, the target business may be an online shopping business. The front-end development platform receives the front-end development request for the online shopping business, and parses the received front-end development request to obtain the front-end development framework identifier "lightweight front-end development framework" and the development requirement information "develop a shopping cart interface".

[0047] To sum up, by parsing the received front-end development request, the front-end development framework identifier and development requirement information can be obtained, so that the corresponding front-end development framework can be selected according to the front-end development framework identifier, and then the front-end code can be generated according to the selected front-end development framework and development requirements, thereby improving the flexibility of the front-end development framework selection.

[0048] Furthermore, before the front-end development platform receives the front-end development request, it is necessary to integrate various types of front-end development frameworks into the front-end development platform, so that the front-end development platform can provide the function of front-end development based on different types of front-end development frameworks. However, many front-end development frameworks currently require the use of multiple programming languages ​​in development, which affects the efficiency of front-end code development.

[0049] Based on this, in order to address the problem of high complexity of the front-end development framework, the present application has developed a lightweight front-end development framework that uses only one programming language. For example, only the TypeScript programming language is used during the development process, thereby reducing the complexity of using the front-end development framework.

[0050] Furthermore, before determining the target front-end development framework in the framework library of the front-end development platform based on the front-end development framework identifier, the method further includes: Create developer tool modules, interface definition modules, basic function modules and dependency injection modules according to the front-end development framework building request; Building a lightweight front-end development framework based on the developer tool module, the interface definition module, the basic function module and the dependency injection module; Add the lightweight front-end development framework to the framework library of the front-end development platform.

[0051] Specifically, the front-end development framework building request refers to a request for building a lightweight front-end development framework; the developer tool module is a module that supports developers to input relevant information for generating target business; the basic function module refers to a module that contains functional information such as building components, creating nodes, and calculating node differences; the dependency injection module refers to a module that contains component sharing information corresponding to the component; the interface definition module refers to a module that contains interface call information for the component.

[0052] Based on this, in response to the front-end development framework construction request, a developer tool module, an interface definition module, a basic function module and a dependency injection module are created; according to the correspondence between the developer tool module, the interface definition module, the basic function module and the dependency injection module, a lightweight front-end development framework is constructed; the lightweight front-end development module is added to the framework library of the front-end development platform, that is, by integrating the lightweight front-end development module into the front-end development platform, the front-end development framework types of the front-end development platform are increased. Figure 3 As shown, Figure 3This is a schematic diagram of a lightweight front-end development framework provided by an embodiment of the present application. The code in the developer tool module is used to generate developer tools and application entry, the code in the basic function module is used to generate a component tree, a virtual DOM, a Diff algorithm, and a real DOM, the code in the dependency injection module is used to generate a dependency injection system, and the code in the interface definition module is used to generate function components, JSX component structures, Hooks component states, and functions computed, watch, and createSignal for state management.

[0053] To summarize, this application enriches the types of front-end development frameworks by building a lightweight front-end development framework and integrating the lightweight front-end development framework into the front-end development platform; and, the lightweight front-end development framework only uses one programming language, which reduces the complexity of front-end development and thereby improves front-end development efficiency.

[0054] Furthermore, in order to enable users to use different types of front-end development frameworks for code development, it is necessary to integrate various types of front-end development frameworks into the front-end development platform, that is, before adding the lightweight front-end development framework to the framework library of the front-end development platform, it also includes: Obtain at least one non-lightweight front-end development framework, and create a conversion tool based on each non-lightweight front-end development framework; A framework library is created based on the conversion tool and various non-lightweight front-end development frameworks.

[0055] Specifically, a non-lightweight front-end development framework refers to a front-end development framework that is different from the lightweight front-end development framework of the present application, for example, a vue framework, a React framework, etc.; a conversion tool refers to a tool that converts the programming language of the code in the front-end development framework into a preset programming language, for example, based on a JSX converter, converts the JSX syntax code in the React front-end development framework file into the JavaScript syntax code; Based on this, in the process of building a front-end development platform, at least one non-lightweight front-end development framework is obtained according to actual needs; an adapter is created according to each non-lightweight front-end development framework, that is, a conversion tool that can convert different types of front-end development frameworks into the target development language; a framework library integrated into the front-end development platform is created according to each non-lightweight front-end development framework and the conversion tool. It should be noted that according to actual needs, a non-lightweight front-end development framework and a lightweight front-end development framework can be selected to create a framework library, or after the construction based on the non-lightweight front-end development framework is completed, a lightweight front-end development framework or a non-lightweight front-end development framework that does not exist in the framework library can be added to the framework library according to new needs.

[0056] Continuing with the above example, before processing the online shopping business, different types of front-end development frameworks are integrated into the front-end development framework, including: determining the non-lightweight front-end frameworks as the Vue framework and the React framework according to the needs; creating conversion tools based on the Vue framework and the React framework; creating a framework library of the front-end development platform based on the conversion tools, the Vue framework and the React framework, that is, using conversion tools to wrap different types of front-end development frameworks, so that users can choose different types of front-end development frameworks to develop front-end codes, or to facilitate further integration of general modules for processing front-end codes. General modules can be modules that include functions such as code performance monitoring and traffic monitoring.

[0057] To summarize, this application wraps different types of front-end development frameworks by creating a conversion tool, that is, to achieve the conversion of different types of front-end development frameworks, so that common modules can be integrated at the wrapping layer later, thereby smoothing out the problems of low development efficiency and high development complexity caused by differences in front-end development frameworks.

[0058] Step 204: determining a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library includes a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module.

[0059] Specifically, the target front-end development framework refers to the front-end development framework corresponding to the front-end development framework identifier in the framework library; the lightweight front-end development framework refers to the front-end development framework created by this application, which includes a developer tool module, an interface definition module, a basic function module and a dependency injection module; among them, the basic function module can be used to generate components, and the dependency injection module can be used to generate component sharing information corresponding to the components.

[0060] Based on this, the front-end development framework corresponding to the front-end development framework identifier is determined in the framework library according to the front-end development framework identifier; the framework library includes lightweight front-end development frameworks and non-lightweight front-end development frameworks; a non-lightweight front-end development framework refers to a front-end development framework that is not generated by the method of building a front-end development framework in this application, for example, a vue framework, a React framework, etc.; if a lightweight front-end development framework is determined in the framework library based on the front-end development framework identifier, the lightweight front-end development framework is used as the target front-end development framework.

[0061] Continuing with the above example, in the front-end development request for the online shopping business, the front-end development framework identifier "lightweight front-end development framework" is parsed; based on the front-end development framework identifier, the lightweight front-end development framework corresponding to the front-end development framework identifier is determined in the framework library as the target front-end development framework for generating the front-end code for the online shopping business.

[0062] In summary, the corresponding target front-end development framework is determined in the framework library of the front-end development platform through the front-end development framework identifier, so that the front-end code of the target business can be generated based on the target front-end development framework later.

[0063] Step 206: When the target front-end development framework is the lightweight front-end development framework, a target component is created based on the development requirement information and the basic function module, and component sharing information of the target component is created based on the dependency injection module.

[0064] Specifically, the target component refers to the component created based on development requirement information and basic functional modules. The component encapsulates a reusable UI building block of specific functions and interfaces. Component sharing information refers to the information shared by the generated components between different levels. For example, the component sharing information is: component 1 can be reused by level 3 and level 4.

[0065] Based on this, when it is determined that the target front-end framework is a lightweight front-end development framework, the basic functional modules and dependency injection modules in the lightweight front-end development framework are determined; the target components are created according to the development requirement information and the basic functional modules, and component sharing information is added to the created components based on the dependency injection module.

[0066] Continuing with the above example, when it is determined that the front-end page of the online shopping business is built based on the lightweight front-end development framework, create components for building the shopping cart interface based on the development requirement information "Develop a shopping cart interface" and the basic functional modules of the lightweight front-end development framework; create component sharing information corresponding to components with reuse settings based on the dependency injection module of the lightweight front-end development framework.

[0067] To sum up, when it is determined that the target front-end development framework is a lightweight front-end development framework, the target component can be created based on the development requirement information and basic functional modules, and the component sharing information of the target component can be created based on the dependency injection module, so that the front-end code of the target business can be generated based on the target component and the component sharing information corresponding to the target component.

[0068] In actual applications, front-end development framework files have been generated according to the non-lightweight front-end development framework, but in the future, you want to use the lightweight front-end development framework of the front-end development platform to continue development. The front-end development platform provides a file conversion function, which can convert the front-end development framework files generated according to the non-lightweight front-end development framework into front-end development framework files that can be used by the lightweight front-end development framework, thereby improving the convenience of code development.

[0069] Furthermore, before creating the target component based on the development requirement information and the basic function module, the following may also be included: Parsing the front-end development request to obtain a preset front-end development framework file; Based on the conversion tool and the component structure information in the preset front-end development framework file, the preset front-end development framework file is converted into a lightweight front-end development framework file.

[0070] Specifically, the preset front-end development framework file refers to the file generated by code development based on a non-lightweight front-end development framework; the conversion tool refers to a tool that converts the programming language of the code in the front-end development framework into a preset programming language, for example, based on the JSX converter, the JSX syntax code in the React front-end development framework file is converted into JavaScript syntax code; component structure information refers to the elements and organization information contained in the component.

[0071] Based on this, if before the front-end development is carried out using a lightweight front-end development framework based on the front-end development platform, there is a preset front-end development framework file obtained using a non-lightweight front-end development framework, then this preset front-end development framework file can be input into the front-end development platform for conversion; specifically including: adding the preset front-end development framework file to the front-end development request; the front-end development platform parses the front-end development request, and when the preset front-end development framework file is obtained through parsing, obtains the component structure information in the preset front-end framework file; based on the conversion tool and the component structure information, performs syntax conversion on each component in the preset front-end development framework file, and converts it into syntax recognizable by the lightweight front-end development framework, thereby obtaining a lightweight front-end development framework file.

[0072] Continuing with the above example, the front-end development request corresponding to the online shopping business is parsed to obtain a preset front-end development framework file created based on the vue front-end development framework; then the syntax of the preset front-end development framework file is further converted into the TypeScript syntax used by the lightweight front-end development framework based on the JSX converter to obtain a lightweight front-end development framework file.

[0073] To summarize, the preset front-end development framework file is sent to the front-end development platform, and the platform automatically converts the preset front-end development framework file to obtain a lightweight front-end development framework file that can be used by the lightweight front-end development framework, thereby further improving the compatibility of the front-end development platform and realizing the use of historical code information, thereby improving the efficiency of front-end code development based on the front-end development platform.

[0074] Step 208: Generate a front-end service code of the target service according to the target component and the component sharing information.

[0075] In practical applications, the method for generating the front-end service code of the target service according to the target component and the component sharing information may include: Generate a target front-end code according to the target component and the component sharing information; The business data of the target business is added to the target front-end code to obtain the front-end business code of the target business.

[0076] Specifically, the target front-end code refers to the front-end code built based on the target components and component shared information, and does not contain business data; business data refers to the data in the target business data used to generate the front-end interface; the front-end business code refers to the front-end code generated based on the front-end development request of the target business.

[0077] Based on this, after generating the target components and component sharing information based on the lightweight front-end development framework, the target front-end code is built based on the target components and component sharing information; the business data of the target business is added to the component accordingly to obtain the front-end business code corresponding to the front-end business code of the target business.

[0078] Furthermore, the above is a method for generating a front-end business code when the front-end development request does not include a preset front-end development framework file; if the front-end development request includes a preset front-end development framework file, the front-end business code of the target business is generated according to the target component and the component sharing information, including: The front-end business code of the target business is generated based on the lightweight front-end development framework file, the target component and the component sharing information.

[0079] Specifically, when the target business has a preset front-end development framework file generated based on a non-lightweight front-end development framework, a lightweight front-end development framework file converted by a conversion tool integrated based on the front-end development platform is obtained, as well as target components and component sharing information generated based on development requirement information, to generate front-end business code, thereby realizing the use of historical code.

[0080] Continuing with the above example, the preset front-end development framework file created based on the vue front-end development framework is converted into a lightweight front-end development framework file, and the front-end business code for the online shopping business is generated based on the lightweight front-end development framework file, the target component, and the component sharing information of the target component. That is, executing the front-end business code can display the shopping cart page.

[0081] In summary, by using the lightweight front-end business code files converted by the conversion tool in the process of generating the front-end business code, compatibility with different front-end development frameworks is achieved, thereby improving the flexibility of the front-end development platform.

[0082] Furthermore, in addition to integrating different types of front-end development frameworks, the front-end development platform can also integrate a monitoring module to achieve automatic operation and maintenance of the front-end code; after generating the front-end business code of the target business according to the target component and the component sharing information, it can also include: Monitoring the status information of the front-end business code based on the monitoring module; Status prompt information for the front-end business code is generated according to the status information.

[0083] Specifically, the monitoring module refers to a module that automatically monitors the code generated by the front-end development platform; the status information refers to the status of the code in different dimensions, such as deployment status, performance status, etc.; the status prompt information refers to the prompt information generated based on the abnormal information in the status information. Based on the status prompt information, a visual prompt can be generated to prompt developers what abnormalities and other problems exist in the code of the front-end development platform.

[0084] Based on this, the monitoring module integrated in the front-end development platform monitors the status information of the code in the front-end development platform; according to the judgment threshold of each dimension status, the abnormal status information is determined in the status information, and the status prompt information is generated based on the abnormal status information.

[0085] In summary, monitoring the front-end business code based on the monitoring module enriches the functions of the front-end development platform, and through automated monitoring, it can reduce the communication between developers and operation and maintenance personnel, thereby improving the development efficiency of developers.

[0086] Furthermore, in order to reduce the maintenance difficulty of each module on the front-end development platform, a preset management architecture can be used to build each module separately and maintain it uniformly; that is, before the monitoring module monitors the status information of the front-end business code, the following can also be included: In response to the monitoring module building request, create a monitoring module and add identification information of the monitoring module in the module management directory of the front-end development platform; The identification information and the code information of the monitoring module are added to the code library corresponding to the module management directory.

[0087] Specifically, the module management directory refers to a directory containing management information corresponding to the modules of the front-end development platform; identification information refers to a field that can uniquely represent a monitoring module; and a code base refers to a database that stores the corresponding codes of each module in the module management directory.

[0088] Based on this, after receiving the monitoring module construction request, create the monitoring module, and establish a mapping relationship between the monitoring module and the module management directory, that is, add the identification information of the monitoring module to the module management directory of the front-end development platform; add the identification information and the code information of the monitoring module to the code library corresponding to the module management directory. If a module with new functions is added to the front-end development platform later, it can be added based on the above method without affecting the execution of the modules that have been integrated into the front-end development platform.

[0089] In actual applications, the preset management architecture refers to a framework that can manage functions in a unified manner by modules, such as the Monorepo architecture. The above only describes the integration of the monitoring module. The integration method of the above development modules or other functional modules is consistent with the integration method of the monitoring module, so it will not be repeated here.

[0090] Furthermore, the monitoring module may be composed of monitoring sub-modules of multiple dimensions, that is, the monitoring module may include a code review sub-module, a traffic monitoring sub-module, a continuous deployment sub-module and a performance monitoring module.

[0091] Specifically, Figure 4 As shown, Figure 4 This is a schematic diagram of a front-end development platform provided in an embodiment of the present application. The monitoring module includes a code review sub-module, a traffic monitoring sub-module, a continuous deployment sub-module and a performance monitoring module, a total of four dimensions of monitoring sub-modules; the scaffolding tool is used to generate a platform visualization interface to enable developers to select a front-end development framework in the interface.

[0092] In summary, the front-end development method provided by the present application receives a front-end development request for a target business, parses the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; determines the target front-end development framework in the framework library of the front-end development platform based on the front-end development framework identifier, wherein the framework library contains a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; when the target front-end development framework is the lightweight front-end development framework, creates a target component based on the development requirement information and the basic function module, and creates component sharing information of the target component based on the dependency injection module; generates the front-end business code of the target business according to the target component and the component sharing information. By selecting the target front-end development framework for code development according to the front-end development framework identifier in the front-end development request, there is no need to adjust the overall platform when using a new front-end development framework, thereby improving the flexibility of front-end development; when the target front-end development framework is a lightweight front-end development framework, code development is performed based on the front-end development framework provided with a basic function module and a dependency injection module, thereby further improving the development efficiency of the front-end code.

[0093] The following combination Figure 5 Taking the application of the front-end development method provided in this application to the education system business as an example, the front-end development method is further explained. Figure 5 A schematic diagram of a front-end development method provided by an embodiment of the present application is shown, which specifically includes the following steps: Step 502: Receive a front-end development request for an education system business, parse the front-end development request to obtain a front-end development framework identifier and development requirement information for the education system business.

[0094] Specifically, the front-end development framework identifier is used to identify the type of front-end development framework selected by the developer.

[0095] Step 504: Determine the target front-end development framework in the framework library of the front-end development platform based on the front-end development framework identifier.

[0096] Specifically, the framework library includes lightweight front-end development frameworks and non-lightweight front-end development frameworks.

[0097] Step 506: Determine the type of the target front-end development framework; if the target front-end development framework is a non-lightweight front-end development framework, execute step 508; if the target front-end development framework is a lightweight front-end development framework, execute step 510.

[0098] Specifically, the lightweight front-end development framework of the present application is a front-end development framework based on the integration of a developer tool module, an interface definition module, a basic function module and a dependency injection module.

[0099] Step 508: Generate front-end business code for the education system business based on the development requirement information and the non-lightweight front-end development framework.

[0100] Step 510: Determine whether the front-end development request contains a preset front-end development framework file; if so, execute step 512; if not, execute step 514.

[0101] Step 512: Based on the conversion tool, the preset front-end development framework file is converted into a lightweight front-end development framework file, and the front-end business code of the education system business is generated based on the lightweight front-end development framework file and the lightweight front-end development framework.

[0102] Specifically, a target component is created based on development requirement information and the basic functional modules of a lightweight front-end development framework; component sharing information of the target component is created based on a dependency injection module of the lightweight front-end development framework; a target front-end code is generated based on the target component, component sharing information of the target component and a lightweight front-end development framework file; business data of the education system business is added to the target front-end code to obtain the front-end business code of the education system business.

[0103] Step 514: Generate front-end business code for the education system business based on the lightweight front-end development framework.

[0104] Specifically, a target front-end code is generated based on the target component and the component sharing information of the target component; the business data of the education system business is added to the target front-end code to obtain the front-end business code of the education system business.

[0105] The front-end development method provided by the present application receives a front-end development request for a target business, parses the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; determines a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library contains a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; when the target front-end development framework is the lightweight front-end development framework, creates a target component based on the development requirement information and the basic function module, and creates component sharing information of the target component based on the dependency injection module; generates the front-end business code of the target business according to the target component and the component sharing information. By selecting the target front-end development framework for code development according to the front-end development framework identifier in the front-end development request, there is no need to adjust the overall platform when using a new front-end development framework, thereby improving the flexibility of front-end development; when the target front-end development framework is a lightweight front-end development framework, code development is performed based on a front-end development framework provided with a basic function module and a dependency injection module, thereby further improving the development efficiency of the front-end code.

[0106] Corresponding to the above method embodiment, the present application also provides a front-end development device embodiment, Figure 6 FIG. 1 is a schematic diagram showing the structure of a front-end development device provided by an embodiment of the present application. Figure 6 As shown, the device comprises: The receiving module 602 is configured to receive a front-end development request for a target business, and parse the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; A determination module 604 is configured to determine a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library includes a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; A creation module 606 is configured to create a target component based on the development requirement information and the basic function module when the target front-end development framework is the lightweight front-end development framework, and to create component sharing information of the target component based on the dependency injection module; The generating module 608 is configured to generate the front-end service code of the target service according to the target component and the component sharing information.

[0107] In an optional embodiment, the determining module 604 is further configured to: Create developer tool modules, interface definition modules, basic function modules and dependency injection modules according to the front-end development framework building request; Building a lightweight front-end development framework based on the developer tool module, the interface definition module, the basic function module and the dependency injection module; Add the lightweight front-end development framework to the framework library of the front-end development platform.

[0108] In an optional embodiment, the determining module 604 is further configured to: Obtain at least one non-lightweight front-end development framework, and create a conversion tool based on each non-lightweight front-end development framework; A framework library is created based on the conversion tool and various non-lightweight front-end development frameworks.

[0109] In an optional embodiment, the generating module 608 is further configured to: Generate a target front-end code according to the target component and the component sharing information; The business data of the target business is added to the target front-end code to obtain the front-end business code of the target business.

[0110] In an optional embodiment, the creation module 606 is further configured to: Parsing the front-end development request to obtain a preset front-end development framework file; Based on the conversion tool and the component structure information in the preset front-end development framework file, the preset front-end development framework file is converted into a lightweight front-end development framework file.

[0111] In an optional embodiment, the generating module 608 is further configured to: The front-end business code of the target business is generated based on the lightweight front-end development framework file, the target component and the component sharing information.

[0112] In an optional embodiment, the generating module 608 is further configured to: Monitoring the status information of the front-end business code based on the monitoring module; Status prompt information for the front-end business code is generated according to the status information.

[0113] In an optional embodiment, the generating module 608 is further configured to: create a monitoring module in response to a monitoring module building request, and add identification information of the monitoring module to a module management directory of a front-end development platform; The identification information and the code information of the monitoring module are added to the code library corresponding to the module management directory.

[0114] In an optional embodiment, the monitoring module includes a code review submodule, a traffic monitoring submodule, a continuous deployment submodule and a performance monitoring module.

[0115] The front-end development device provided by the present application includes a receiving module, which is configured to receive a front-end development request for a target business, parse the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; a determining module, which is configured to determine a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library includes a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; a creating module, which is configured to create a target component based on the development requirement information and the basic function module when the target front-end development framework is the lightweight front-end development framework, and to create component sharing information of the target component based on the dependency injection module; and a generating module, which is configured to generate a front-end business code of the target business according to the target component and the component sharing information. By selecting the target front-end development framework for code development according to the front-end development framework identifier in the front-end development request, there is no need to adjust the overall platform when using a new front-end development framework, thereby improving the flexibility of front-end development; when the target front-end development framework is a lightweight front-end development framework, code development is performed based on a front-end development framework with basic functional modules and dependency injection modules, thereby further improving the development efficiency of the front-end code.

[0116] The above is a schematic scheme of a front-end development device of the present embodiment. It should be noted that the technical scheme of the front-end development device and the technical scheme of the front-end development method mentioned above belong to the same concept. For details not described in detail in the technical scheme of the front-end development device, please refer to the description of the technical scheme of the front-end development method mentioned above. In addition, each component in the device embodiment should be understood as a functional module that must be established to implement each step of the program flow or each step of the method, and each functional module is not an actual functional division or separation definition. The device claim defined by such a group of functional modules should be understood as a functional module architecture that mainly implements the solution through the computer program recorded in the specification, and should not be understood as a physical device that mainly implements the solution through hardware.

[0117] Figure 7 The structure block diagram of a computing device 700 provided according to an embodiment of the present application is shown. The components of the computing device 700 include but are not limited to a memory 710 and a processor 720. The processor 720 is connected to the memory 710 via a bus 730, and the database 750 is used to store data.

[0118] The computing device 700 also includes an access device 740 that enables the computing device 700 to communicate via one or more networks 760. Examples of these networks include a public switched telephone network (PSTN), a local area network (LAN), a wide area network (WAN), a personal area network (PAN), or a combination of communication networks such as the Internet. The access device 740 may include one or more of any type of network interface (e.g., a network interface card (NIC)) that is wired or wireless, such as an IEEE 802.11 wireless local area network (WLAN) wireless interface, a World Wide Interoperability for Microwave Access (Wi-MAX) interface, an Ethernet interface, a universal serial bus (USB) interface, a cellular network interface, a Bluetooth interface, a near field communication (NFC) interface, and the like.

[0119] In one embodiment of the present application, the above components of the computing device 700 and Figure 7 Other components not shown in the figure may also be connected to each other, for example, via a bus. It should be understood that Figure 7 The computing device structure block diagram shown is only for the purpose of illustration, and is not intended to limit the scope of the present application. Those skilled in the art may add or replace other components as needed.

[0120] The computing device 700 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook, etc.), a mobile phone (e.g., a smart phone), a wearable computing device (e.g., a smart watch, smart glasses, etc.), or other types of mobile devices, or a stationary computing device such as a desktop computer or PC. The computing device 700 may also be a mobile or stationary server.

[0121] The processor 720 is used to execute computer executable instructions of the game character hosting method.

[0122] The above is a schematic scheme of a computing device of this embodiment. It should be noted that the technical scheme of the computing device and the technical scheme of the above-mentioned front-end development method belong to the same concept, and the details not described in detail in the technical scheme of the computing device can be referred to the description of the technical scheme of the above-mentioned front-end development method.

[0123] An embodiment of the present application also provides a computer-readable storage medium storing computer instructions, which are used for a front-end development method when executed by a processor.

[0124] The above is a schematic scheme of a computer-readable storage medium of this embodiment. It should be noted that the technical scheme of the storage medium and the technical scheme of the front-end development method described above are of the same concept, and the details not described in detail in the technical scheme of the storage medium can be found in the description of the technical scheme of the front-end development method described above.

[0125] An embodiment of the present application further provides a chip storing a computer program, which implements the steps of the front-end development method when executed by the chip.

[0126] An embodiment of the present specification also provides a computer program product, including a computer program or instructions, which implement the steps of the above-mentioned front-end development method when executed by a processor.

[0127] The above is a schematic scheme of a computer program product of this embodiment. It should be noted that the technical scheme of the computer program product and the technical scheme of the front-end development method described above are of the same concept, and the details not described in detail in the technical scheme of the computer program product can be found in the description of the technical scheme of the front-end development method described above.

[0128] The above describes specific embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0129] The computer instructions include computer program codes, which may be in source code form, object code form, executable files or some intermediate forms, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc. It should be noted that the content contained in the computer-readable medium may be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0130] It should be noted that, for the above-mentioned method embodiments, for the sake of simplicity of description, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described action sequence, because according to the present application, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0131] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0132] The preferred embodiments of the present application disclosed above are only used to help explain the present application. The optional embodiments do not describe all the details in detail, nor do they limit the invention to the specific implementation methods described. Obviously, many modifications and changes can be made according to the content of the present application. The present application selects and specifically describes these embodiments in order to better explain the principles and practical applications of the present application, so that those skilled in the art can understand and use the present application well. The present application is only limited by the claims and their full scope and equivalents.

Claims

1. A front-end development method, applied to a front-end development platform, characterized in that: The method comprises: Receiving a front-end development request for a target business, parsing the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; Determine a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library includes a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; In the case where the target front-end development framework is the lightweight front-end development framework, creating a target component based on the development requirement information and the basic function module, and creating component sharing information of the target component based on the dependency injection module; A front-end service code of the target service is generated according to the target component and the component sharing information.

2. The method according to claim 1, characterized in that Determining a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, and also including: Create developer tool modules, interface definition modules, basic function modules and dependency injection modules according to the front-end development framework building request; Building a lightweight front-end development framework based on the developer tool module, the interface definition module, the basic function module and the dependency injection module; Add the lightweight front-end development framework to the framework library of the front-end development platform.

3. The method according to claim 2, characterized in that Before adding the lightweight front-end development framework to the framework library of the front-end development platform, it also includes: Obtain at least one non-lightweight front-end development framework, and create a conversion tool based on each non-lightweight front-end development framework; A framework library is created based on the conversion tool and various non-lightweight front-end development frameworks.

4. The method according to claim 1, characterized in that Generating a front-end business code of the target business according to the target component and the component sharing information includes: Generate a target front-end code according to the target component and the component sharing information; The business data of the target business is added to the target front-end code to obtain the front-end business code of the target business.

5. The method according to claim 3, characterized in that: Before creating the target component based on the development requirement information and the basic function module, the method further includes: Parsing the front-end development request to obtain a preset front-end development framework file; Based on the conversion tool and the component structure information in the preset front-end development framework file, the preset front-end development framework file is converted into a lightweight front-end development framework file.

6. The method according to claim 5, characterized in that Generating a front-end business code of the target business according to the target component and the component sharing information includes: The front-end business code of the target business is generated based on the lightweight front-end development framework file, the target component and the component sharing information.

7. The method according to claim 1, characterized in that After generating the front-end business code of the target business according to the target component and the component sharing information, the method further includes: Monitoring the status information of the front-end business code based on the monitoring module; Status prompt information for the front-end business code is generated according to the status information.

8. The method according to claim 7, characterized in that Before monitoring the status information of the front-end business code based on the monitoring module, the following step is also included: In response to the monitoring module building request, create a monitoring module and add identification information of the monitoring module in the module management directory of the front-end development platform; The identification information and the code information of the monitoring module are added to the code library corresponding to the module management directory.

9. The method according to claim 8, characterized in that The monitoring module includes a code review submodule, a traffic monitoring submodule, a continuous deployment submodule and a performance monitoring module.

10. A front-end development device, characterized in that: include: A receiving module is configured to receive a front-end development request for a target business, parse the front-end development request to obtain a front-end development framework identifier and development requirement information of the target business; A determination module is configured to determine a target front-end development framework in a framework library of a front-end development platform based on the front-end development framework identifier, wherein the framework library includes a lightweight front-end development framework, and the lightweight front-end development framework is provided with a basic function module and a dependency injection module; A creation module configured to create a target component based on the development requirement information and the basic function module when the target front-end development framework is the lightweight front-end development framework, and to create component sharing information of the target component based on the dependency injection module; A generation module is configured to generate a front-end business code of the target business according to the target component and the component sharing information.

11. A computing device, characterized in that: include: Memory and processor; The memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions to implement the steps of the front-end development method described in claims 1-9.

12. A computer-readable storage medium storing computer instructions, characterized in that: When the instruction is executed by the processor, the steps of the front-end development method described in claims 1-9 are implemented.

13. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed by a processor, the steps of the front-end development method described in claims 1-9 are implemented.

Images