Front-end and back-end collaborative development method, device and equipment and readable storage medium

Abstract

The invention discloses a front-end and back-end collaborative development method, device and equipment and a readable storage medium. The front-end and back-end collaborative development method comprises the steps of determining a resource directory and a template directory of a project; when the front-end development of the project is carried out, configuring a resource directory and a template directory of the project so as to output a resource file generated by the front-end development to the resource directory and output a template file to the template directory; and when the back-end development of the project is carried out, the resource file and the template file generated by the front-end development are used based on the resource directory and the template directory of the project. According to the method, when the back-end development of the project is carried out, the resource file and the template file developed at the front end can be directly used based on the resource catalog and the template catalog, and the front end and the back end can respectively concentrate on own development work, so that the coupling degree between the front end and the back end is greatly reduced, and the Web page development efficiency based on Thymeleaf is improved; and the development requirement of the Web page can be better met.

Description

Technical Field

[0001] The present application relates to the field of Web development technology, and in particular to a front-end and back-end collaborative development method, device, equipment and readable storage medium. Background Art

[0002] Thymeleaf is a server-side Java (an object-oriented programming language) template engine, which is used to render HTML (Hyper Text Markup Language) pages on the server side and dynamically fill in data. Thymeleaf is mainly used as a back-end technology, but it can also be used in combination with front-end technology to support a development model with front-end and back-end separation, and to achieve dynamic rendering of pages and data interaction. Among them, the template engine is created to separate the user interface from the business data. It can generate documents in a specific format. The template engine used for the Web (World Wide Web, also known as the World Wide Web) website will generate a standard HTML document. The working principle of the template engine is based on the design pattern of "template + data = output content". The developer embeds dynamic data in the template, and the template engine generates the final output content by parsing the template and data.

[0003] At present, when developing web pages based on Thymeleaf, it is often done by back-end engineers. With the development of technology, the technical division of front-end and back-end is becoming more and more detailed. On the one hand, in most cases, the front-end technical level of back-end engineers cannot keep up with the actual business needs. They can only write a part of very simple pages, which cannot meet the increasingly diverse and complex business needs. In addition, the traditional page writing methods used by back-end engineers are inefficient and cannot be used with the help of modern more advanced development frameworks and tools. More professional front-end engineers are needed to intervene. On the other hand, since Thymeleaf templates need to be started based on Java, it is a technology that does not separate the front-end and back-end, and current front-end engineers often lack skills in this area.

[0004] It can be seen that the current Web page development based on Thymeleaf has low efficiency and poor effect due to the different technical fields that the front-end and back-end engineers are familiar with and good at, and the high degree of coupling between the front-end and back-end and the poor coordination, which makes it difficult to meet the growing business needs. Summary of the invention

[0005] The present application provides a front-end and back-end collaborative development method, apparatus, device and readable storage medium, aiming to solve the technical problem that the current Thymeleaf-based Web page development is inefficient and ineffective, and is difficult to meet the growing business needs.

[0006] In a first aspect, an embodiment of the present application provides a front-end and back-end collaborative development method, the front-end and back-end collaborative development method comprising:

[0007] Determine the resource directory and template directory of the project;

[0008] When developing the front-end of a project, configure the resource directory and template directory of the project so that the resource files generated by the front-end development can be output to the resource directory and the template files can be output to the template directory.

[0009] When developing the back-end of a project, the resource files and template files generated by the front-end development are used based on the resource directory and template directory of the project.

[0010] Optionally, the resource directory and template directory of the configuration project include:

[0011] Use the Vite tool to create a project, configure the project's resource directory, and modify the project's template directory through the plug-in.

[0012] Optionally, the front-end and back-end collaborative development method further includes:

[0013] Get the context path of the project from the backend;

[0014] Use the Vite tool to configure the context path of the project.

[0015] Optionally, the front-end development includes:

[0016] Use the Vite tool to develop HTML pages for the project based on React and Thymeleaf.

[0017] Optionally, the HTML page development for the project includes:

[0018] Identify project variables;

[0019] Define variables using Thymeleaf syntax in HTML files and save them to the window object for global use.

[0020] Optionally, the resource files and template files generated by the project-based resource directory and template directory using the front-end development include:

[0021] Use the Thymeleaf template engine to render the template files in HTML format in the template directory to generate the final HTML file for page display. The values ​​of the variables in the template files are assigned by the program developed by the backend during rendering.

[0022] In a second aspect, an embodiment of the present application provides a front-end and back-end collaborative development device, the front-end and back-end collaborative development device comprising:

[0023] Determine the module, which is used to determine the resource directory and template directory of the project;

[0024] The configuration module is used to configure the resource directory and template directory of the project when developing the front-end of the project, so that the resource files generated by the front-end development can be output to the resource directory and the template files can be output to the template directory;

[0025] Use modules to use resource files and template files generated by front-end development based on the project's resource directory and template directory when developing the project's back-end.

[0026] Optionally, the configuration module is used to:

[0027] Use the Vite tool to create a project, configure the project's resource directory, and modify the project's template directory through the plug-in.

[0028] In the third aspect, an embodiment of the present application provides a front-end and back-end collaborative development device, which includes a processor, a memory, and a front-end and back-end collaborative development program stored in the memory and executable by the processor, wherein when the front-end and back-end collaborative development program is executed by the processor, the steps of the front-end and back-end collaborative development method described above are implemented.

[0029] In a fourth aspect, an embodiment of the present application provides a readable storage medium, on which a front-end and back-end collaborative development program is stored. When the front-end and back-end collaborative development program is executed by a processor, the steps of the front-end and back-end collaborative development method described above are implemented.

[0030] The beneficial effects brought by the technical solution provided by the embodiments of the present application include:

[0031] In an embodiment of the present application, a resource directory and a template directory of a project are determined; when performing front-end development of the project, the resource directory and the template directory of the project are configured so that resource files generated by the front-end development are output to the resource directory and template files are output to the template directory; when performing back-end development of the project, the resource files and template files generated by the front-end development are used based on the resource directory and the template directory of the project. The embodiments of the present application are mainly used for Web page development based on Thymeleaf front-end and back-end integrated technology. Before the front-end and back-end development of the project, it is only necessary to determine the resource directory and template directory of the project in advance. When the front-end development of the project is carried out, after the resource directory and template directory of the project are configured, Web page development is carried out based on Thymeleaf, and the resource files (such as JavaScript files and pictures, etc.) generated by the development are output to the resource directory and the template files (template files in HTML format developed based on Thymeleaf) are output to the template directory. Since the resource directory and template directory of the project have been determined in advance, when the back-end development of the project is carried out, the resource files and template files developed by the front-end can be directly used based on the resource directory and template directory. The front-end and back-end can each focus on their own development work, and the coordination between the front-end and back-end is concise and efficient, which greatly reduces the coupling between the front-end and back-end, improves the efficiency of Web page development based on Thymeleaf, and can better meet the development needs of Web pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 A first flow chart of an embodiment of the front-end and back-end collaborative development method of the present application;

[0033] Figure 2 A second flow chart of an embodiment of the front-end and back-end collaborative development method of the present application;

[0034] Figure 3 A third flow chart of an embodiment of the front-end and back-end collaborative development method of the present application;

[0035] Figure 4 This is a functional module diagram of an embodiment of a front-end and back-end collaborative development device of the present application;

[0036] Figure 5 This is a schematic diagram of the hardware structure of the front-end and back-end collaborative development equipment involved in the embodiment of the present application. DETAILED DESCRIPTION

[0037] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution 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.

[0038] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0039] In a first aspect, an embodiment of the present application provides a front-end and back-end collaborative development method.

[0040] In one embodiment, referring to Figure 1 , Figure 1 This is a first flow chart of an embodiment of the front-end and back-end collaborative development method of this application, such as Figure 1 As shown in the figure, the front-end and back-end collaborative development methods include:

[0041] Step S10, determining the resource directory and template directory of the project.

[0042] In this embodiment, it is mainly used for Web page development based on Thymeleaf front-end and back-end integrated technology. Before the front-end and back-end development of the project, the resource directory and template directory of the project are determined in advance, where the project mainly refers to a Web website. The Web website usually includes two functions: the front-end user interface and the back-end business data processing according to different needs. A Web website is usually composed of multiple Web pages, among which the user interface (such as JavaScript files, pictures, and HTML files, etc.) is usually programmed and developed by the front-end engineers, and the business data processing part is usually programmed and developed by the back-end engineers. The JavaScript files and pictures in the user interface are usually stored in the resource directory as resource files, and the HTML files are usually stored in the template directory as template files.

[0043] Step S20, when performing front-end development of the project, configure the resource directory and template directory of the project so that the resource files generated by the front-end development are output to the resource directory and the template files are output to the template directory.

[0044] In this embodiment, when developing the front-end of a project, front-end engineers usually use various development tools to develop the front-end of the project, including but not limited to Vite. Vite is a new generation of front-end building tools developed by the author You Yuxi Vue.js, which aims to provide a faster development experience, especially in project startup and module hot update. It uses the native ES module import mechanism supported by modern browsers (where ES modules are the official standard of JavaScript, and modern browsers natively support ES modules) to achieve fast cold start and efficient module hot update, and supports multiple front-end frameworks, such as Vue (a progressive JavaScript framework for building user interfaces), React (a JavaScript library developed and maintained by Facebook for building user interfaces) and TypeScript (a superset language of static type checking launched by Microsoft), etc., with simple configuration, developers can quickly get started and develop projects. Among them, JavaScript is a lightweight object-oriented programming language that is widely used in various fields of Web development. In the Vite tool, after configuring the resource directory and template directory of the project, the resource files generated by the front-end engineer for front-end development will be automatically output to the resource directory and the template files will be automatically output to the template directory.

[0045] Step S30, when performing back-end development of the project, the resource files and template files generated by the front-end development are used based on the resource directory and template directory of the project.

[0046] In this embodiment, when conducting the back-end development of the project, the back-end engineers focus on the programming development of their own business data processing part. When the project needs to display the user interface, since the resource directory and template directory of the project have been determined in advance, the resource files and template files developed by the front-end can be directly used based on the resource directory and template directory, and the template files in the template directory are rendered and displayed through the Thymeleaf template engine.

[0047] In this embodiment, it is mainly used for Web page development based on Thymeleaf front-end and back-end integrated technology. The resource directory and template directory of the project are determined in advance before the front-end and back-end development of the project. When developing the front-end of the project, the front-end engineer usually uses various development tools to develop the front-end of the project, including but not limited to Vite. In the Vite tool, after configuring the resource directory and template directory of the project, the resource files generated by the front-end engineer for front-end development will be automatically output to the resource directory and the template files will be automatically output to the template directory. When developing the back-end of the project, the back-end engineer focuses on the programming development of the business data processing part of his own. When the user interface of the project needs to be displayed, since the resource directory and template directory of the project have been determined in advance, the resource files and template files developed by the front-end can be directly used based on the resource directory and template directory, and the template files in the template directory are rendered and displayed through the Thymeleaf template engine. The work between the front-end and the back-end does not affect each other. The front-end and the back-end can each focus on their own development work, which greatly reduces the coupling between the front-end and the back-end, and can improve the efficiency of Web page development based on Thymeleaf. The coordination between the front-end and the back-end is simple and efficient. The back-end can easily use the user interface developed by the front-end, can make full use of the front-end technology, and can better meet the development needs of Web pages.

[0048] Furthermore, in one embodiment, the resource directory and template directory of the configuration project include:

[0049] Use the Vite tool to create a project, configure the project's resource directory, and modify the project's template directory through the plug-in.

[0050] In this example, first use the Vite tool to create a project, and then configure the project's resource directory and template directory. Vite supports direct configuration of the project's resource directory. By default, resource files and template files are output to the same directory. It does not support modification of the project's template directory. Therefore, it is necessary to use a plug-in to move the location of the template file and move the HTML format template file to the template directory. Add a plug-in by modifying the configuration item in the Vite tool: build->rollupOptions->output->plugins. The core code of the plug-in is:

[0051] generateBundle:(options,bundle)=>{

[0052] for(const key in bundle){

[0053] const obj = bundle[key];

[0054] const fileName=obj.fileName;

[0055] if(fileName.endsWith(".html")){

[0056] const name=fileName.split(" / ")[0];

[0057] const newName=`${html file directory} / ${name}.html`;

[0058] obj.fileName = newName;

[0059] }

[0060] }

[0061] }

[0062] Further, in one embodiment, referring to Figure 2 , Figure 2 This is a second flow chart of an embodiment of the front-end and back-end collaborative development method of this application. Figure 2 As shown, the front-end and back-end collaborative development method also includes:

[0063] Step S01, obtaining the context path of the project from the backend;

[0064] Step S02: Use the Vite tool to configure the context path of the project.

[0065] In this embodiment, the context path refers to the root path of the Web application on the server, such as the following address: https: / / www.baidu.com / abc / def / xxx.png, the path where the image xxx.png is located is / abc / def, this path may be a physical path, that is, there is an actual / abc / def folder on the server, or it may be a virtual path generated by proxy mapping. Therefore, in order for the browser to correctly access resource files and template files, it is necessary to obtain the context path of the project from the backend, and then configure the context path of the project in the Vite tool. It should be noted that in the project configuration of the Vite tool, when the project includes more than one template file, Vite needs to be configured in multi-page mode, and the name and path of each page can be configured separately by modifying the Vite configuration item: build->rollupOptions->input.

[0066] Furthermore, in one embodiment, the front-end development includes:

[0067] Use the Vite tool to develop HTML pages for the project based on React and Thymeleaf.

[0068] In this embodiment, React is a JavaScript library for building user interfaces developed and maintained by Facebook. It allows developers to write componentized UI (User Interface) code in a declarative way, which is easy to maintain and has superior performance. It has the following characteristics: Componentized development: It encourages the decomposition of UI into independent and reusable components; Virtual DOM (Document Object Model): Improves rendering efficiency and reduces performance loss caused by direct operation of real DOM. Strong community support: It has a huge ecosystem and rich third-party libraries. Application scenarios: Build highly interactive single-page applications, mobile applications, or any application scenarios that require efficient UI updates. In a complete web application, Vite and React can work well together to build the front-end part, while Thymeleaf is more suitable for server-side rendering tasks.

[0069] Further, in one embodiment, the HTML page development of the project includes:

[0070] Identify project variables;

[0071] Define variables using Thymeleaf syntax in HTML files and save them to the window object for global use.

[0072] In this embodiment, the variables needed for the project are determined in advance before the front-end and back-end development of the project. The variables are defined in the HTML file using Thymeleaf syntax. The JavaScript template provided by Thymeleaf is used to save the values ​​of the variables in the window object, so that the front-end engineer can directly use these variables globally. The purpose of defining variables is to transfer data, such as the user's name and account information. These variables need to be used on the browser side. The back-end will set the corresponding values ​​to the corresponding variables when using thymeleaf. The front-end engineer can also freely modify the values ​​of these variables when developing to test the code. The window object is part of the Web API and represents a window in the browser, which contains a DOM document. In JavaScript, the window object is a global object, which means that all global variables and functions in the code are properties and methods of the window object. In short, it is a suitable place to store global variables. Saving it to the window is to be used anywhere else it is needed. Specifically, you can add a script block to the entry HTML file and write the relevant template code:

[0073] <script type＝"text javascript"th:inline＝"javascript">

[0074] window.user＝{

[0075] name: / *[[${session.user！＝null？session.user.name:""}]]* / undefined,

[0076] }；

[0077] < / script>

[0078] In the above code example, the Thymeleaf syntax / *[[${session.user! = null? session.user.name:""}]]* / is used to determine whether session.user exists. If session.user is not null, the value of its name attribute is taken. If it is null, the empty string "" is taken and then assigned to the window object window.user.

[0079] Further, in one embodiment, the resource files and template files generated by the project-based resource directory and template directory using front-end development include:

[0080] Use the Thymeleaf template engine to render the template files in HTML format in the template directory to generate the final HTML file for page display. The values ​​of the variables in the template files are assigned by the program developed by the backend during rendering.

[0081] In this embodiment, Thymeleaf is used as a server-side Java template engine, and its main function is to dynamically generate HTML pages based on template files and business data on the server side. Specifically, Thymeleaf's template files usually contain HTML code and some specific Thymeleaf attributes and expressions. These attributes and expressions are used to indicate where Thymeleaf inserts or modifies content. When a request arrives at the server, Thymeleaf reads the template file, parses the Thymeleaf syntax therein, and generates the final HTML output based on the provided business data.

[0082] In this embodiment, refer to Figure 3 , Figure 3 This is a third flow chart of an embodiment of the front-end and back-end collaborative development method of this application. Figure 3 As shown in the figure, Web project development can be mainly divided into two parts: front-end user interface and back-end business data processing, which are completed by front-end engineers and back-end engineers respectively. The resource directory, template directory and required variables of the Web project can be determined in advance. The React project is created using the Vite tool, and the Thymeleaf resource directory is configured in the Vite tool. The Thymeleaf template directory is modified using the plug-in. If there are multiple pages, multiple pages are configured. After completing the relevant configuration, the front-end engineer focuses on the development of the front-end user interface. The resource files and template files developed by the front-end engineer in the Vite tool are automatically output to the resource directory and template directory. The back-end engineer focuses on the development of the back-end business data processing part. When the project needs to display the user interface, since the resource directory and template directory of the project have been determined in advance, the resource files and template files developed by the front-end can be directly used based on the resource directory and template directory, and the template files in the template directory are rendered and displayed through the Thymeleaf template engine.

[0083] In a second aspect, an embodiment of the present application also provides a front-end and back-end collaborative development device.

[0084] In one embodiment, referring to Figure 4 , Figure 4 This is a functional module diagram of an embodiment of the front-end and back-end collaborative development device of the present application. Figure 4 As shown, the front-end and back-end collaborative development device includes:

[0085] A determination module 10 is used to determine a resource directory and a template directory of a project;

[0086] Configuration module 20, used to configure the resource directory and template directory of the project when performing front-end development of the project, so as to output the resource files generated by the front-end development to the resource directory and the template files to the template directory;

[0087] The module 30 is used to use the resource files and template files generated by the front-end development based on the resource directory and template directory of the project when performing the back-end development of the project.

[0088] Furthermore, in one embodiment, the configuration module 20 is used to:

[0089] Use the Vite tool to create a project, configure the project's resource directory, and modify the project's template directory through the plug-in.

[0090] Furthermore, in one embodiment, the front-end and back-end collaborative development device further includes a context path configuration module, which is used to:

[0091] Get the context path of the project from the backend;

[0092] Use the Vite tool to configure the context path of the project.

[0093] Furthermore, in one embodiment, the front-end development is used for:

[0094] Use the Vite tool to develop HTML pages for the project based on React and Thymeleaf.

[0095] Further, in one embodiment, the HTML page development for the project is used to:

[0096] Identify project variables;

[0097] Define variables using Thymeleaf syntax in HTML files and save them to the window object for global use.

[0098] Furthermore, in one embodiment, the module 30 is used to:

[0099] Use the Thymeleaf template engine to render the template files in HTML format in the template directory to generate the final HTML file for page display. The values ​​of the variables in the template files are assigned by the program developed by the backend during rendering.

[0100] Among them, the functional implementation of each module in the above-mentioned front-end and back-end collaborative development device corresponds to the various steps in the above-mentioned front-end and back-end collaborative development method embodiment, and its functions and implementation processes will not be repeated here one by one.

[0101] In a third aspect, an embodiment of the present application provides a front-end and back-end collaborative development device.

[0102] Reference Figure 5 , Figure 5Schematic diagram of the hardware structure of the front-end and back-end collaborative development device involved in the embodiment of the present application. In the embodiment of the present application, the front-end and back-end collaborative development device may include a processor, a memory, a communication interface and a communication bus.

[0103] The communication bus may be of any type and is used to interconnect the processor, the memory, and the communication interface.

[0104] The communication interface includes input / output (I / O) interfaces, physical interfaces, and logical interfaces, which are used to interconnect devices within the front-end and back-end collaborative development equipment, and interfaces used to interconnect the front-end and back-end collaborative development equipment with other devices (such as other computing devices or user devices). The physical interface can be an Ethernet interface, a fiber optic interface, an ATM interface, etc.; the user device can be a display, a keyboard, etc.

[0105] The memory can be various types of storage media, such as random access memory (RAM), read-only memory (ROM), non-volatile RAM (NVRAM), flash memory, optical storage, hard disk, programmable ROM (PROM), erasable PROM (EPROM), electrically erasable PROM (EEPROM), etc.

[0106] The processor may be a general-purpose processor, which may call the front-end and back-end collaborative development program stored in the memory and execute the front-end and back-end collaborative development method provided in the embodiment of the present application. For example, the general-purpose processor may be a central processing unit (CPU). The method executed when the front-end and back-end collaborative development program is called may refer to the various embodiments of the front-end and back-end collaborative development method of the present application, which will not be described in detail here.

[0107] Those skilled in the art will understand that Figure 5 The hardware structure shown in the figure does not constitute a limitation on the present application, and may include more or less components than shown in the figure, or combine certain components, or arrange the components differently.

[0108] In a fourth aspect, an embodiment of the present application also provides a readable storage medium.

[0109] The readable storage medium of the present application stores a front-end and back-end collaborative development program, wherein when the front-end and back-end collaborative development program is executed by a processor, the steps of the front-end and back-end collaborative development method as described above are implemented.

[0110] Among them, the method implemented when the front-end and back-end collaborative development program is executed can refer to the various embodiments of the front-end and back-end collaborative development method of this application, and will not be repeated here.

[0111] It should be noted that the serial numbers of the above-mentioned embodiments of the present application are only for description and do not represent the advantages or disadvantages of the embodiments.

[0112] The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices. The terms "first", "second" and "third" are used to distinguish different objects, etc., and do not represent a sequence, nor do they limit "first", "second" and "third" to different types.

[0113] In the description of the embodiments of the present application, "exemplary", "for example" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary", "for example" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary", "for example" or "for example" is intended to present related concepts in a specific way.

[0114] In the description of the embodiments of the present application, unless otherwise specified, “ / ” means or, for example, A / B can mean A or B; the “and / or” in the text is merely a description of the association relationship of associated objects, indicating that three relationships may exist, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, “multiple” refers to two or more than two.

[0115] In some processes described in the embodiments of the present application, multiple operations or steps that appear in a specific order are included, but it should be understood that these operations or steps may not be executed in the order in which they appear in the embodiments of the present application or in parallel, and the sequence number of the operation is only used to distinguish the different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed in sequence or in parallel, and these operations or steps may be combined.

[0116] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, disk, CD) as described above, and includes a number of instructions for a terminal device to execute the methods described in each embodiment of the present application.

[0117] The above are only preferred embodiments of the present application, and are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A front-end and back-end collaborative development method, characterized in that: The front-end and back-end collaborative development method includes: Determine the resource directory and template directory of the project; When developing the front-end of a project, configure the resource directory and template directory of the project so that the resource files generated by the front-end development can be output to the resource directory and the template files can be output to the template directory. When developing the back-end of a project, the resource files and template files generated by the front-end development are used based on the resource directory and template directory of the project.

2. The front-end and back-end collaborative development method according to claim 1, characterized in that: The resource directory and template directory of the configuration project include: Use the Vite tool to create a project, configure the project's resource directory, and modify the project's template directory through the plug-in.

3. The front-end and back-end collaborative development method according to claim 2, characterized in that: The front-end and back-end collaborative development method further includes: Get the context path of the project from the backend; Use the Vite tool to configure the project's context path.

4. The front-end and back-end collaborative development method according to claim 2, characterized in that: The front-end development includes: Use the Vite tool to develop HTML pages for the project based on React and Thymeleaf.

5. The front-end and back-end collaborative development method according to claim 4, characterized in that: The HTML page development for the project includes: Identify project variables; Define variables using Thymeleaf syntax in HTML files and save them to the window object for global use.

6. The front-end and back-end collaborative development method according to claim 5, characterized in that: The resource files and template files generated by the project-based resource directory and template directory using front-end development include: Use the Thymeleaf template engine to render the template files in HTML format in the template directory to generate the final HTML file for page display. The values ​​of the variables in the template files are assigned by the program developed by the backend during rendering.

7. A front-end and back-end collaborative development device, characterized in that: The front-end and back-end collaborative development device comprises: Determine the module, which is used to determine the resource directory and template directory of the project; The configuration module is used to configure the resource directory and template directory of the project when developing the front-end of the project, so that the resource files generated by the front-end development can be output to the resource directory and the template files can be output to the template directory; Use modules to use resource files and template files generated by front-end development based on the project's resource directory and template directory when developing the project's back-end.

8. The front-end and back-end collaborative development device according to claim 7, characterized in that: The configuration module is used to: Use the Vite tool to create a project, configure the project's resource directory, and modify the project's template directory through the plug-in.

9. A front-end and back-end collaborative development device, characterized in that: The front-end and back-end collaborative development device includes a processor, a memory, and a front-end and back-end collaborative development program stored in the memory and executable by the processor. When the front-end and back-end collaborative development program is executed by the processor, the steps of the front-end and back-end collaborative development method as described in any one of claims 1 to 6 are implemented.

10. A readable storage medium, characterized in that: The readable storage medium stores a front-end and back-end collaborative development program, wherein when the front-end and back-end collaborative development program is executed by a processor, the steps of the front-end and back-end collaborative development method according to any one of claims 1 to 6 are implemented.

Images