CN118519619A - Application method and device of front-end scaffold - Google Patents

Abstract

The present application discloses a method and device for applying a front-end scaffold, which is applied to a general front-end scaffold, and the method includes: when the general front-end scaffold receives a creation instruction, based on the front-end framework option provided by the general front-end scaffold, a target front-end framework is determined; based on the basic engineering option provided by the general front-end scaffold, a target basic engineering option is determined; based on the target front-end framework and the target basic engineering option, a target basic engineering address is determined from an option mapping map provided by the general front-end scaffold; the target basic function address is used to indicate the code storage address of the basic function implemented by the target basic engineering option; by downloading code instructions, the target basic engineering is pulled from the target basic engineering address; based on the target basic engineering, a front-end page is created. The method can provide a front-end scaffold adapted to a variety of front-end frameworks, thereby improving development efficiency.

Description

Application method and device of front-end scaffolding

Technical Field

The present application relates to the field of data development technology, and in particular to an application method and device of a front-end scaffold.

Background Art

Front-end scaffolding is a tool set for quickly building and developing front-end projects, aiming to improve front-end development efficiency and standardize project structure. Front-end scaffolding usually includes a series of engineering processes and tools such as project initialization, construction, packaging, and deployment, helping developers quickly build the infrastructure of a front-end framework project.

With the development of front-end engineering, front-end scaffolding has gradually come into people's view in the field of front-end development. Front-end scaffolding can help developers quickly build project structure, automate workflow, provide configuration items, etc., thereby improving development efficiency and ensuring the standardization and consistency of front-end projects.

At present, scaffolding tools are provided by front-end framework developers. If different front-end development frameworks are selected for development during the front-end development process, corresponding scaffolding tools need to be installed, and the usage methods of each scaffolding tool are different. There is a lack of a front-end scaffolding suitable for most front-end frameworks, resulting in poor development efficiency when developing based on different front-end frameworks.

Summary of the invention

In view of this, an embodiment of the present application provides an application method and device of a front-end scaffold, aiming to provide a front-end scaffold that is compatible with a variety of front-end frameworks, thereby improving development efficiency.

In a first aspect, an embodiment of the present application provides an application method of a front-end scaffold, which is applied to a general front-end scaffold, and the method includes:

When the universal front-end scaffold receives a creation instruction, a target front-end framework is determined based on the front-end framework options provided by the universal front-end scaffold;

Determine target basic engineering options based on the basic engineering options provided by the general front-end scaffolding;

Based on the target front-end framework and the target basic engineering options, the target basic engineering address is determined from the option mapping map provided by the general front-end scaffolding; the target basic function address is used to indicate the code storage address of the basic function implemented by the target basic engineering option; the option mapping map includes the mapping relationship between different front-end frameworks and different basic engineering options and different basic engineering addresses;

Pull the target basic project from the target basic project address by downloading code instructions;

Create the front-end page based on the target basic project.

Optionally, the basic engineering options include building tools, user interface component libraries, routing encapsulation options, request service encapsulation options, and data management library encapsulation options.

Optionally, the front-end page includes a rapid development page, and the creating of the front-end page based on the target basic project includes:

Based on the target basic project, a rapid development page is created by using preset parameters in a create page command, and the rapid development page is a page mode provided by the general front-end scaffolding.

Optionally, the creating a quick development page includes:

Based on the target front-end framework, a rapid development page template corresponding to the rapid development page is determined from the page template mapping map provided by the general front-end scaffolding; the page template mapping map includes mapping relationships between different front-end frameworks and different page templates; the rapid development page template includes a table component and a form component, as well as basic interaction operations corresponding to the table component and the form component respectively;

The rapid development page is obtained based on the rapid development page template and the structured data configuration file.

Optionally, the create page command includes a routing address of the rapid development page, and the method further includes:

A corresponding code file is generated based on the rapid development page template and the routing address of the rapid development page, and the code file is stored in a folder corresponding to the target basic project.

Optionally, the method further comprises:

The storage file is read from the folder corresponding to the target basic project by obtaining a command, and a storage location is divided for the storage file based on the target basic project.

Optionally, before creating the front-end page based on the target basic project, the method further includes:

A subprocess is started through a command line instruction, and the subprocess is used to install the relevant dependencies of the target basic project and start the server.

In a second aspect, an embodiment of the present application provides an application device of a front-end scaffold, which is deployed on a general front-end scaffold, and the device includes:

A first determination module is used to determine a target front-end framework based on the front-end framework options provided by the general front-end scaffolding when the general front-end scaffolding receives a creation instruction;

A second determination module is used to determine a target basic engineering option based on the basic engineering options provided by the general front-end scaffolding;

A third determination module is used to determine a target basic engineering address from an option mapping map provided by the general front-end scaffold based on the target front-end framework and the target basic engineering option; the target basic function address is used to indicate a code storage address of a basic function implemented by the target basic engineering option; the option mapping map includes a mapping relationship between different front-end frameworks and different basic engineering options and different basic engineering addresses;

A pulling module, used to pull the target basic project from the target basic project address by downloading code instructions;

A creation module is used to create a front-end page based on the target basic project.

In a third aspect, an embodiment of the present application provides an application device for a front-end scaffold, the device comprising:

Memory for storing computer programs;

The processor is used to execute the computer program so that the device executes the front-end scaffolding application method described in the first aspect above.

In a fourth aspect, an embodiment of the present application provides a computer storage medium, on which a computer program is stored. When the computer program is executed, the device executing the computer program implements the application method of the front-end scaffolding described in the first aspect.

Compared with the prior art, the embodiments of the present application have the following beneficial effects:

The embodiment of the present application provides an application method and device of a front-end scaffold, which is applied to a general front-end scaffold. The method may include: when the general front-end scaffold receives a creation instruction, a target front-end framework can be selected from the front-end framework options provided by the general front-end scaffold. Then, the target basic engineering options can be determined based on the basic engineering options provided by the general front-end scaffold. The option mapping map includes different front-end frameworks and different basic engineering options, and the mapping relationship between different basic engineering addresses. Therefore, after determining the target front-end framework and the target basic engineering options, the code storage address of the basic engineering implemented by the target basic engineering option, i.e., the target basic engineering address, can be determined from the option mapping map provided by the general front-end scaffold according to the target front-end framework and the target basic engineering options. Afterwards, the target basic engineering can be pulled from the mapped target basic engineering address by downloading the code instruction, so that the front-end page can be created based on the target basic engineering. Thus, the project initialization is completed through the general front-end scaffold, and the front-end development can be continued based on the target basic engineering provided by the general front-end scaffold.

It can be seen that the general front-end scaffolding provides an option mapping map, which contains various front-end frameworks and different basic project options, and the mapping relationship with the target basic project address, so that the basic project provided by the general front-end scaffolding can be applied to a variety of front-end frameworks, and the corresponding basic project can be implemented through the target basic project options, so that the front-end development can continue based on the target basic project, without installing scaffolding corresponding to a variety of front-end frameworks, thereby improving development efficiency.

BRIEF DESCRIPTION OF THE DRAWINGS

In order to more clearly illustrate the technical solutions in this embodiment or the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

FIG1 is an application scenario of an application method of a front-end scaffold provided in an embodiment of the present application;

FIG2 is a flow chart of a method for applying a front-end scaffold provided in an embodiment of the present application;

FIG3 is a schematic diagram of an application method of a front-end scaffold provided in an embodiment of the present application;

FIG. 4 is a schematic structural diagram of an application device of a front-end scaffold provided in an embodiment of the present application.

DETAILED DESCRIPTION

In order to enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

Currently, scaffolding tools can realize project initialization, plug-in management and project configuration. Project initialization means that the infrastructure of a project corresponding to a framework can be quickly created through scaffolding tools, including directory structure, configuration files, etc. Plug-in management means that scaffolding tools support plug-in systems, and developers can use plug-ins to extend project functions, such as adding routes and state management. Project configuration means that developers are allowed to customize the project through scaffolding tools, including build tool configuration, compiler Babel configuration, etc., to meet the specific needs of the project.

At present, scaffolding tools are provided by front-end framework developers. If different front-end development frameworks are selected for development during the front-end development process, corresponding scaffolding tools need to be installed, and the usage methods of each scaffolding tool are different. There is a lack of a front-end scaffolding suitable for most front-end frameworks, resulting in poor development efficiency when developing based on different front-end frameworks.

Based on this, in order to solve the above problems, in an embodiment of the present application, when the universal front-end scaffold receives a creation instruction, the target front-end framework can be selected from the front-end framework options provided by the universal front-end scaffold. Then, the target basic engineering options can be determined based on the basic engineering options provided by the universal front-end scaffold. The option mapping map includes different front-end frameworks and different basic engineering options, and the mapping relationship between different basic engineering addresses. Therefore, after determining the target front-end framework and the target basic engineering options, the code storage address for the basic engineering implemented by the target basic engineering option, i.e., the target basic engineering address, can be determined from the option mapping map provided by the universal front-end scaffold according to the target front-end framework and the target basic engineering options. Afterwards, the target basic engineering can be pulled from the mapped target basic engineering address by downloading the code instruction, so that the front-end page can be created based on the target basic engineering. Thus, the project initialization is completed by the universal front-end scaffold, and the front-end development can be continued based on the target basic engineering provided by the universal front-end scaffold. The general front-end scaffolding provides an option mapping map, which contains various front-end frameworks and different basic project options, and the mapping relationship with the target basic project address, so that the basic project provided by the general front-end scaffolding can be applied to multiple front-end frameworks, and the corresponding basic project can be implemented through the target basic project options, so that the front-end development can continue based on the target basic project, without installing scaffolding corresponding to multiple front-end frameworks, thereby improving development efficiency.

For example, one of the scenarios of the embodiment of the present application can be applied to the scenario shown in Figure 1. The scenario includes a terminal 101, wherein a general front-end scaffold is running in the terminal 101, so as to determine the target basic project address based on the option mapping map provided by the general front-end scaffold, so as to pull the target basic project, and then create a front-end page based on the target basic project.

First, in the above application scenario, although the action description of the implementation method provided in the embodiment of the present application is executed by the terminal 101; however, the embodiment of the present application is not limited in terms of the execution subject, as long as the actions disclosed in the implementation method provided in the embodiment of the present application are executed.

Secondly, the above scenario is only an example scenario provided by the embodiment of the present application, and the embodiment of the present application is not limited to this scenario.

The following describes in detail the specific implementation of the application method and device of the front-end scaffold in the embodiment of the present application through embodiments in conjunction with the accompanying drawings.

Referring to FIG. 2 , which is a flow chart of a method for applying a front-end scaffold provided in an embodiment of the present application, the method is applied to a general front-end scaffold, and in combination with FIG. 2 , it may specifically include:

S201: When the general front-end scaffold receives a creation instruction, a target front-end framework is determined based on the front-end framework options provided by the general front-end scaffold.

The general front-end scaffold is a scaffolding tool provided by an embodiment of the present application, and the general front-end scaffold can be used for project initialization. Specifically, the general front-end scaffold provides a construction tool, a user interface component (UserInterface, UI) library, a route encapsulation option, a request service encapsulation option, and a data management library encapsulation option for users to select according to the above-mentioned basic engineering options provided by the general front-end scaffold. Among them, the construction tool includes basic construction tools, such as packaging tools webpack, module packager Rollup, and process automation tools Grunt, etc. The UI library includes basic components, such as buttons, navigation bars, pop-up boxes, tabs, and drop-down menus. The route encapsulation option includes the default two-level routing provided by the general front-end scaffold, and provides a route authentication interface, which can be customized by the developer. The route authentication method, and in the case of requiring a three-level route, can be expanded by the developer. Among them, the route authentication interface refers to the identification and control of route access rights implemented through a specific interface in the front-end application, which is used to determine whether the user has permission to access a certain page or route.

The request service encapsulation option means that the general front-end scaffolding provides a variety of request libraries based on traditional network request technology (XMLHttpRequest, XHR) and network request application interface Fetch for developers to choose from. By encapsulating the request service, the underlying implementation details can be hidden, the interface call can be simplified, and a higher level of abstraction can be provided, which is conducive to the maintainability and extensibility of the code. Then, the general front-end scaffolding can automatically generate the request service encapsulation code according to the selected request library. The request service encapsulation code may include: basic request encapsulation, interface authentication (similar to routing authentication, the authentication method can be customized by the developer), error handling mechanism (encapsulation of common error code processing, the error handling mechanism can be modified, and the error handling mechanism can be extended), and file upload or download function encapsulation (can display the upload and download progress, support breakpoint continuation of large files, that is, in the event of an interruption during the file transfer process, it can record the part that has been transferred and continue the transfer from the interruption point after the connection is restored).

The data management library encapsulation option refers to the option of the data management library provided by the general front-end scaffolding, that is, the library used to manage the data in the project, which is convenient for developers to handle data acquisition, storage, update and display in a simple way, so as to facilitate developers to better organize and manage the data in the project. Then, the data management encapsulation code can be automatically generated through the data management library selected by the developer. The basic functions provided by the state management library include: data storage, data acquisition, and data persistence. In addition, a single data flow is provided in the data management library, and data can be isolated according to the naming of each page to avoid difficulties in locating problems caused by confusion in data flow. At the same time, based on the above basic engineering options, the integrity of the general front-end scaffolding is guaranteed.

In addition, the general front-end scaffolding also provides a rapid development page mode, which can quickly develop table form functions. Through one instruction, the corresponding code files can be automatically generated in the rapid development page template that encapsulates the search, paging, adding, editing and deleting functions of the regular table form according to the UI library selected by the user. For pages with similar functions, there is no need to repeat the development. You can directly use the automatically generated code files. You only need to configure the corresponding structured data configuration file json file according to the actual business needs to get a fully functional front-end page, completing the development of the entire page.

As an example, after installing the general front-end scaffolding, you can first initialize the project through the general front-end scaffolding, that is, build the initial project project. Among them, the general front-end scaffolding can be published on the software package management tool npm, and can be applied to the front-end project after global installation. In addition, in the general front-end scaffolding provided in the embodiment of the present application, the tool that can be used for console selection is the command line interaction tool inquirer, the tool that can be used to process console commands is the library commander for creating a command line interface, and the template tool in the general front-end scaffolding is the embedded scripting language JavaScript template ejs. In the general front-end scaffolding, the instructions are encapsulated by the commander. For example, the creation instruction create, the page creation instruction create page, and the creation of a rapid development page instruction create page fast can all use the commander to receive user instructions.

The creation instruction is an instruction for creating a front-end project. The creation instruction can be create. After receiving the create instruction, the universal front-end scaffold can provide console framework options through inquirer, that is, front-end framework options React, Angular, Vue2, Vue3 and other different types of front-end frameworks. Therefore, the developer can select a front-end framework from the front-end framework options as the target front-end framework, determine the corresponding basic project according to the target front-end framework, and perform front-end development based on the target front-end framework.

In addition, the general front-end scaffolding also supports developers to expand the front-end framework. If the current front-end framework does not contain the front-end framework required by the developer, the developer can expand the required front-end framework by himself. At the same time, the general front-end scaffolding also supports developers to customize the basic project address. Among them, the basic project address refers to the project address, which can be customized by the developer or obtained through the general front-end scaffolding.

S202: Determine target basic engineering options based on the basic engineering options provided by the general front-end scaffolding.

Basic project options refer to the options provided by the general front-end scaffolding for building the basic project of the project, such as build tools, UI libraries, routing encapsulation options, request service encapsulation options, and data management library encapsulation options. Target basic project options refer to the basic project options selected by the developer from the basic project options provided by the general front-end scaffolding, for example, selecting an XHR-based request library from the request service encapsulation options as the request library in the target basic project options.

For example, after determining the target front-end framework, the general front-end scaffolding can provide corresponding building tools and UI library options according to the target front-end framework. In addition, the general front-end scaffolding also provides multiple request library options based on XHR and Fetch, Cascading Style Sheets (css) compiler options, etc. Developers can choose according to their personal development habits or actual project requirements.

S203: Based on the target front-end framework and the target basic engineering options, the target basic engineering address is determined from the option mapping map provided by the general front-end scaffolding; the target basic function address is used to indicate the code storage address of the basic function implemented by the target basic engineering option; the option mapping map includes different front-end frameworks and different basic engineering options, and the mapping relationship between different basic engineering addresses.

The target basic project address refers to the basic project address determined from the option mapping map provided by the general front-end scaffold, which is used to indicate the code storage address of the basic functions implemented by the target basic project options. Among them, the basic functions implemented by the target basic project options refer to the basic tools in the project that can be provided based on the basic project options selected by the developer to build the initial software project, such as build tools, request packaging, and compilers.

The option mapping map is provided by the general front-end scaffolding, including different front-end frameworks and different basic project options, and the mapping relationship between different basic project addresses. For example, the option mapping map includes that when the front-end framework is the Vue3 framework and the build tool is webpack, the basic project address is A; when the front-end framework is the Vue2 framework and the build tool is vite, the basic project address is B. When the target front-end framework is Vue3 and the build tool is webpack, the target basic project address can be determined from the option mapping map as A.

Therefore, the basic project address can be determined from the option mapping map according to the target front-end framework and target basic project options selected by the developer. If the developer customizes the basic project address, this step can be omitted and the basic project address provided by the developer can be directly used for front-end development.

S204: Pull the target basic project from the target basic project address by downloading code instructions.

The download code instruction refers to an instruction for downloading the corresponding basic project code from the basic project address. For example, the download code instruction can be download-git-repo. When the general front-end scaffolding determines the target basic project address, the corresponding target basic project can be pulled through the above download code instruction. The target basic project refers to the infrastructure or infrastructure part of a software project, which is used to provide infrastructure for the software project, such as routing encapsulation, request service encapsulation, and data management library encapsulation, as well as providing a UI library that can be shared and reused by the entire project. It can also provide basic tools, such as build tools.

After pulling the target basic project, you can use the commander's command line child_process to automatically start a child process to install the relevant dependencies of the target basic project and start the server to run the project locally. It should be noted that during the process of installing dependencies and starting the server, asynchronous execution can be performed in the child process to avoid blocking and improve operation efficiency.

S205: Create a front-end page based on the target basic project.

Finally, after obtaining the target basic project, the project initialization is completed, and then you can continue to create the front-end page based on the target basic project.

In addition, the rapid development page mode provided by the general front-end scaffolding is encapsulated in the basic project and placed on the open source platform, so developers can expand it according to project requirements.

Please refer to Figure 3, which is a schematic diagram of an application method of a front-end scaffolding provided in an embodiment of the present application. After receiving the creation instruction, the target front-end framework can be selected from the general front-end scaffolding, or the developer can customize the framework, thereby creating a corresponding project based on the developer's customized framework.

In the process of creating front-end pages based on the target basic project, the front-end pages created can be divided into two modes. The first mode is to create basic pages based on the target basic project, that is, only the most basic pages of the target front-end framework are provided, and no encapsulation and data processing functions are provided; the second mode is to create rapid development pages based on the target basic project. When creating a page, the above two situations can be distinguished by the preset parameters in the create page command to determine whether the newly created page is a basic page or a rapid development page. Among them, the create page command can be create page, and the preset parameter can be fast. When the create page command is create page fast, the newly created page is considered to be a rapid development page.

When creating a fast development page, you can first make a judgment based on the preset parameters in the create page command, and then create a routing address for the fast development page. For example, create page fast <secondary routing (menu name)><first-level routing (parent menu)> [-d specified path], where the second-level routing address is optional and not required. Since the routing address cannot be repeated, the first-level routing address and second-level routing address entered by the developer can be used as the unique identifier of the page by the general front-end scaffolding, and the module division can be performed according to the identifier later.

It should be noted that when creating a quick development page, if the path has been specified, a folder will be generated under the specified path. If the path is not specified, it will be placed in the view folder by default. At the same time, you can generate a configuration file config in the configuration file in views/first-level routing/second-level routing/config, and if the developer has no additional development requirements, after creating the quick development page, configure the config file to complete the page creation and get the quick development page. At the same time, if other functions need to be configured in the quick development page, the developer can expand and develop them in the generated page.

As an example, when the general front-end scaffold receives a new page (create page command) or a new component command, taking the creation of a rapid development page as an example, the specific implementation method may include:

First, you can create a service server file, that is, create a server file for processing server processing requests, and perform request encapsulation operations in this service file. Then, based on the target front-end framework, you can determine the rapid development page template corresponding to the rapid development page from the page template mapping map provided by the general front-end scaffolding, that is, the ejs template provided by the general front-end scaffolding. Among them, the page template mapping map includes the mapping relationship between different front-end frameworks and different page templates. The rapid development page template includes table components and form components, as well as the basic interactive operations corresponding to the table components and form components, such as adding, deleting, modifying, querying, and paging functions. For example, when the front-end framework is Vue2, the corresponding page template is template A; when the front-end framework is Vue3, the corresponding page template is template B.

It should be noted that for the front-end framework extended by the developer himself, the developer can extend the corresponding page template at this time.

Since the create page command includes the routing address of the rapid development page, and the routing address can be used as a unique identifier of the rapid development page for module division, in the process of generating code based on the rapid development page template, the corresponding code file can be generated based on the rapid development page template and the routing address of the rapid development page, that is, the placeholder in the rapid development page template can be replaced with the unique identifier, and then the corresponding file can be generated by developing the server-side application node file processing module. If a specified path is received, the file is stored in the specified path, otherwise, the file is stored in the default folder, that is, the code file is stored in the folder corresponding to the target basic project.

Then, in the process of generating code based on the rapid development template, taking the front-end framework in the target basic project as Vue and the construction tool as webpack as an example, a data flow processing store can be created to store and manage the status data in the project, and uniformly manage the acquisition, modification and update of data. The target basic project can read the storage file from the folder corresponding to the target basic project by obtaining the command require, that is, read the local store file, introduce the data management library selected by the developer from the target basic project, and uniformly manage the data in the storage file. In addition, the storage location can be divided for the storage file according to the routing address of the generated code file, that is, a storage location can be set separately for the generated code file in the storage file according to the unique identifier of the code file, realizing the module isolation according to the routing address. The module division of other pages can be determined by the developer according to the actual project requirements. In this regard, this application is not specifically limited to the storage location division in the storage files of other pages.

After that, the target infrastructure project can read all local route files through require to map these route files to the menu, so as to create routes in the creation of the quick development page. As an example, the menu can be a navigation menu of a website or other forms of menus, which is convenient for developers to browse different pages or functions on the network or in applications. After creating the route, the application programming interface (API) file can be written through the writing method fs.writeFile, that is, the data defining the API interface is written to the file in a certain format to achieve persistent storage and facilitate subsequent reading and processing.

In addition, during the interface configuration process, the server service introduces the corresponding interface objects in the service interface configuration file service/api.json to generate the corresponding objects in the quick development page, which encapsulate the corresponding add, delete, modify and query interfaces. For example, the query interface "query":"", the delete interface "deleteItem":"", the new interface "create":"", and the modification interface "edit":"".

In addition, the server service will be introduced in the corresponding store file, and the request service data will be written to the corresponding data management module, that is, the storage location set in the storage file. If the developer has no additional requirements at this time, he can directly obtain the rapid development page according to the determined rapid development page template and configure the structured data json configuration file generated at the same time. Among them, there is only one set of json configuration files, and all front-end frameworks are unified. It can be seen that according to the rapid development page template and the corresponding commands, a complete page or component can be generated by itself. It only needs to complete the configuration of the subsequent json file. For systems with background management classes including multiple table form items, the creation efficiency is improved.

In addition, the target infrastructure project also provides encapsulation functions for adding, deleting, modifying and checking. For example, data echo after editing the pop-up window, refreshing the list after deleting or adding, and refreshing the table after the search item changes. These operations all rely on component communication. For example, hooks can be used for calling in Vue3, and event bus eventbus can be used for implementation in Vue2.

After completing the above interface configuration, you can create a quick development page. In the process of generating code based on the quick development template, you can encapsulate the table component of the configurable table items through the target basic project, and you can encapsulate the form component of the configurable form items, and use the corresponding config file to configure the generated table component and form component. Then, you can create a json file for configuring the page. For example, in the process of table configuration, the following configuration is automatically generated, such as:

contentTableConfig={

title:'User List',

pageName:'courceSource',

propList:[

{prop:'name',label:'Username',minWidth:'100'},

],

showIndexColumn:true,

showSelectColumn:true

}

The above code structure introduces some parameters used to configure the content table, such as the configured title, configured page name, array of configured lists, and other information.

During this configuration process, developers only need to configure Label: table column; prop: field name corresponding to the backend field. The configurable functions provided above can be reflected in the type script ts file of the target basic project.

For example, during the form configuration process, the following configuration is automatically generated, such as:

searchFormConfig={

pageName:"courceSource",

formItems:[{

field:"code",

type:"input",

label:"Encoding",

placeHolder:"Please enter the code",

maxlength:20

}],

itemTextAlign:'left',

labelWidth:"60px",

itemStyle:{padding:'10px 30px 10px 0'},

colLayout:{span:8}

};

The above code structure introduces some parameters for configuring the content form, such as the configured page name, the array containing the form item configuration, the alignment of the form item text content, the width of the form item label, the style settings of the form, etc. Similar to the above table configuration, the configurable functions provided above can be reflected in the type script ts file of the target basic project.

It should be noted that in addition to the functions provided by the above-mentioned target basic project, for table form items customized by users, the corresponding page file includes custom slots, and correspondingly, the automatically generated document includes relevant comments to prompt the slot location for developers to customize table form items.

In addition, creating a component is similar to creating the quick development page mentioned above. The difference is that the route is not automatically generated when creating a component, and the default generated path is component.

The above is an application method of a front-end scaffold provided by an embodiment of the present application, which is applied to a general front-end scaffold. The method may include: when the general front-end scaffold receives a creation instruction, the target front-end framework can be selected from the front-end framework options provided by the general front-end scaffold. Then, the target basic engineering options can be determined based on the basic engineering options provided by the general front-end scaffold. The option mapping map includes different front-end frameworks and different basic engineering options, and the mapping relationship between different basic engineering addresses. Therefore, after determining the target front-end framework and the target basic engineering options, the code storage address of the basic engineering implemented by the target basic engineering option, i.e., the target basic engineering address, can be determined from the option mapping map provided by the general front-end scaffold according to the target front-end framework and the target basic engineering options. Afterwards, the target basic engineering can be pulled from the mapped target basic engineering address by downloading the code instruction, so that the front-end page can be created based on the target basic engineering. Thus, the project initialization is completed by the general front-end scaffold, and the front-end development can be continued based on the target basic engineering provided by the general front-end scaffold.

It can be seen that the general front-end scaffolding provides an option mapping map, which contains various front-end frameworks and different basic project options, and the mapping relationship with the target basic project address, so that the basic project provided by the general front-end scaffolding can be applied to a variety of front-end frameworks, and the corresponding basic project can be implemented through the target basic project options, so that the front-end development can continue based on the target basic project, without installing scaffolding corresponding to a variety of front-end frameworks, thereby improving development efficiency.

The above are some specific implementations of the front-end scaffolding application method provided in the embodiment of the present application. Based on this, the present application also provides a corresponding device. The device provided in the embodiment of the present application will be introduced from the perspective of functional modularization.

Referring to FIG. 4 , this figure is a schematic diagram of the structure of a front-end scaffold application device 400 provided in an embodiment of the present application. The device is deployed on a general front-end scaffold. The device 400 may include:

The first determination module 401 is used to determine a target front-end framework based on the front-end framework options provided by the general front-end scaffolding when the general front-end scaffolding receives a creation instruction;

A second determination module 402 is used to determine a target basic engineering option based on the basic engineering options provided by the general front-end scaffolding;

The third determination module 403 is used to determine the target basic engineering address from the option mapping map provided by the general front-end scaffold based on the target front-end framework and the target basic engineering option; the target basic function address is used to indicate the code storage address of the basic function implemented by the target basic engineering option; the option mapping map includes the mapping relationship between different front-end frameworks and different basic engineering options and different basic engineering addresses;

The pulling module 404 is used to pull the target basic project from the target basic project address by downloading code instructions;

The creation module 405 is used to create a front-end page based on the target basic project.

Optionally, the basic engineering options include construction tools, user interface component libraries, routing encapsulation options, request service encapsulation options, and data management library encapsulation options.

Optionally, the front-end page includes a quick development page, and the creation module 405 includes:

A creation unit is used to create a rapid development page based on the target basic project by using preset parameters in a page creation command, wherein the rapid development page is a page mode provided by the general front-end scaffolding.

Optionally, the first creating unit includes:

A determination unit, configured to determine, based on the target front-end framework, a rapid development page template corresponding to the rapid development page from a page template mapping map provided by the general front-end scaffold; the page template mapping map includes a mapping relationship between different front-end frameworks and different page templates; the rapid development page template includes a table component and a form component, and basic interaction operations corresponding to the table component and the form component respectively;

The obtaining unit is used to obtain the rapid development page based on the rapid development page template and the structured data configuration file.

Optionally, the create page command includes a routing address of the rapid development page, and the device further includes:

The generating unit is used to generate a corresponding code file based on the rapid development page template and the routing address of the rapid development page, and store the code file in a folder corresponding to the target basic project.

Optionally, the device further comprises:

The reading unit is used to read the storage file from the folder corresponding to the target basic project through an acquisition command, and divide the storage location for the storage file based on the target basic project.

Optionally, the device further comprises:

The startup unit is used to start a subprocess through a command line instruction, and the subprocess is used to install the relevant dependencies of the target basic project and start the server.

The embodiments of the present application also provide corresponding devices and computer storage media for implementing the solutions provided by the embodiments of the present application.

Among them, the device includes a memory and a processor, the memory is used to store a computer program, and the processor is used to execute the computer program so that the device executes the application method of the front-end scaffolding described in any embodiment of the present application.

The computer storage medium stores a computer program. When the code is executed, the device executing the computer program implements the front-end scaffolding application method described in any embodiment of the present application.

The "first" and "second" in the names such as "first" and "second" (if any) mentioned in the embodiments of the present application are only used as name identifiers and do not represent the first or second in order.

Through the description of the above implementation methods, it can be known that those skilled in the art can clearly understand that all or part of the steps in the above-mentioned embodiment method can be implemented by means of software plus a general hardware platform. Based on such an understanding, the technical solution of the present application can be embodied in the form of a software product, which can be stored in a storage medium, such as a read-only memory (ROM)/RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network communication device such as a router) to execute the methods described in each embodiment of the present application or some parts of the embodiments.

It should be noted that each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described above is merely schematic, in which the unit described as a separate component may or may not be physically separated, and the component prompted as a unit may or may not be a physical unit, that is, it may be located in one place, or it may be distributed on multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative work.

The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims (10)

1. A method of applying a front-end scaffold, characterized in that it is applied to a universal front-end scaffold, the method comprising:

when the universal front-end scaffold receives a creation instruction, determining a target front-end frame based on front-end frame options provided by the universal front-end scaffold;

Determining a target basic engineering option based on the basic engineering option provided by the universal front-end scaffold;

Determining a target basic engineering address from an option mapping map provided by the universal front-end scaffold based on the target front-end frame and the target basic engineering options; the target basic function address is used for indicating a code storage address of a basic function realized through the target basic engineering option; the option mapping map comprises mapping relations between different front end frames, different basic engineering options and different basic engineering addresses;

pulling a target basic project from the target basic project address by downloading a code instruction;

and creating a front-end page based on the target basic engineering.

2. The method of claim 1, wherein the base engineering options include a build tool, a user interface component library, a route encapsulation option, a request service encapsulation option, and a data management library encapsulation option.

3. The method of claim 1, wherein the front-end page comprises a quick development page, the creating the front-end page based on the target base project comprising:

Based on the target basic engineering, a quick development page is created by creating preset parameters in a page command, wherein the quick development page is a page mode provided by the universal front-end scaffold.

4. The method of claim 3, wherein creating the quick development page comprises:

based on the target front-end frame, determining a quick development page template corresponding to the quick development page from a page template mapping map provided by the universal front-end scaffold; the page template mapping map comprises mapping relations between different front end frames and different page templates; the rapid development page template comprises a form component and a form component, and basic interaction operations respectively corresponding to the form component and the form component;

And obtaining the quick development page based on the quick development page template and the structured data configuration file.

5. The method of claim 4, wherein the create page command includes a routing address for the fast developing page, the method further comprising:

And generating a corresponding code file based on the rapid development page template and the routing address of the rapid development page, and storing the code file in a folder corresponding to the target basic engineering.

6. The method of claim 5, wherein the method further comprises:

And reading a storage file from a folder corresponding to the target basic project through an acquisition command, and dividing a storage position for the storage file based on the target basic project.

7. The method of claim 1, wherein prior to creating a front-end page based on the target base project, the method further comprises:

And starting a subprocess through command line instructions, wherein the subprocess is used for installing relevant dependence of the target basic engineering and starting a server.

8. An application device for a front-end scaffold, deployed on a universal front-end scaffold, the device comprising:

The first determining module is used for determining a target front end frame based on front end frame options provided by the universal front end scaffold when the universal front end scaffold receives a creation instruction;

The second determining module is used for determining a target basic engineering option based on the basic engineering option provided by the universal front-end scaffold;

The third determining module is used for determining a target basic engineering address from an option mapping map provided by the universal front-end scaffold based on the target front-end frame and the target basic engineering options; the target basic function address is used for indicating a code storage address of a basic function realized through the target basic engineering option; the option mapping map comprises mapping relations between different front end frames, different basic engineering options and different basic engineering addresses;

the pulling module is used for pulling the target basic project from the target basic project address by downloading code instructions;

and the creation module is used for creating a front-end page based on the target basic engineering.

9. An application device for a front-end scaffold, the device comprising:

a memory for storing a computer program;

A processor for executing the computer program to cause the apparatus to perform the method of application of the front-end scaffold of any one of claims 1 to 7.

10. A computer storage medium, wherein a computer program is stored in the computer storage medium, which computer program, when being executed by a processor, implements a method for applying the front-end scaffold according to any of claims 1 to 7.