Detailed explanation of the front and rear end separation and consolidation scheme of spring boot + Vue

The combination of springboot and Vue mainly includes the following two schemes on the network:

1. [not recommended] the script tag is directly used in HTML to introduce Vue and some common components. This method is the same as the previous traditional development, but it can easily use the two-way data binding of Vue. This method is only suitable for ordinary full stack development.

two [recommended] use Vue's official scaffold to create a separate front-end engineering project, so that it can be developed and deployed completely independently from the back-end. The back-end deploys a pure restful service separately, while the front-end is directly deployed by nginx. This is called the complete front-end and back-end separation architecture development model, but there are many API permissions problems to be solved in the separation, including the deployed Vue router For routing, you need to configure rewrite rules in nginx. This front-end and back-end completely separated architecture is also adopted by Internet companies. The back-end server no longer needs to deal with static resources, which can also reduce some pressure on the back-end server.

1、 Why do you separate the front and back end development and merge

In traditional industries, many are dominated by project ideas rather than products. A project will be sold to many customers and deployed to the customer's local computer room. In some traditional industries, the technology of deploying implementation personnel cannot be compared with the operation and maintenance team of Internet companies. Due to various uncertain environments, automatic construction and container deployment cannot be achieved. Therefore, in this case, the service software requirements during deployment shall be minimized and the number of packages shall be minimized. In view of this situation, the front-end and back-end independent development is adopted here. The whole development method is the same as the second method mentioned above. However, when the back-end springboot is packaged and released, the front-end construction output is input together. Finally, only the springboot project needs to be deployed without installing the nginx server.

2、 Key operations of spring boot and Vue integration

In fact, this front-end and back-end separate development in this paper. After the front-end is developed, copy the files in the static under dist built by build to the static under resource of springboot, index Html is directly copied to the static of the resource in springboot. The following is an example diagram:

Vue front end project

Springboot project:

The above is the simplest way to merge. However, for engineering level project development, manual merging is not recommended, and it is not recommended to build the front-end code and submit it to the spring boot resource. A good way is to keep the front-end and back-end development code completely independent, and the project code does not affect each other, With the help of a build tool such as Jenkins, trigger the front-end build when building the springboot, and write an automated script to copy the resources built by the front-end webpack to the springboot, and then package the jar. Finally, you get a springboot project that completely includes the front and rear ends.

3、 Core problem handling of integration

After the above integration, there will be two major problems:

1. Unable to access static resources normally.

2. The route of Vue router cannot be resolved normally.

To solve the first problem, we must re specify the static resource processing prefix of springboot. Code:

The way to solve the second problem is to rewrite the route of the Vue and give it to the router instead of the springboot itself. When rewriting, you can consider the latest route after the route is uniformly added, and then write a filter and intercept specific suffix in the springboot to process the route of the request forwarding to the Vue. For example:

It is completely feasible to package the vhtml intercepted by the back-end to the router. However, the direct access path with suffix developed by the front-end will be problematic.

Another way is to uniformly add a prefix to the front-end routing path, such as / UI. At this time, the back-end write filter matches the prefix, which will not affect the routing resolution problem independently developed by the front-end. The filter reference is as follows:

Registration of filters:

At this time, spring boot can hand over the front-end routing resources to the routing origin for processing. So far, the complete front and back-end separation and development consolidation scheme has been completed. In this way, it is also easy to completely separate the development and deployment of the front and rear ends when conditions permit in the later stage.

summary

The above is the front and rear end separation and consolidation scheme of spring boot + Vue introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!