I mainly do Java, but since the first job, I have been a front-end and back-end programmer, I believe that many friends like me, not only need post-platform code, but also know a lot of front-end code, such as javascipt and CSS style.

This article gives you a brief overview of how SpringBoot combines front-end code.

There are many ways to incorporate SpringBoot into the front end, such as adding CSS or JS directly to static, or introducing Webjars to add to your project as a JAR package. This article briefly introduces this approach.

Without further ado, let’s go straight to the code, or create a new SpringBoot Web project. Then import the JAR of WebJars into the POM file as follows:

<? XML version="1.0 "encoding="UTF-8 "? > < project XMLNS = "http://maven.apache.org/POM/4.0.0" XMLNS: xsi = "http://www.w3.org/2001/XMLSchema-instance" Xsi: schemaLocation = "http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" > The < modelVersion > 4.0.0 < / modelVersion > < groupId > com. Dalaoyang < / groupId > < artifactId > springboot_webjars < / artifactId > < version > 0.0.1 - the SNAPSHOT < / version > < packaging > jar < / packaging > < name > springboot_webjars < / name > <description>springboot_webjars</description> <parent> <groupId>org.springframework.boot</groupId> The < artifactId > spring - the boot - starter - parent < / artifactId > < version > 1.5.9. RELEASE < / version > < relativePath / > <! -- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> < project. Reporting. OutputEncoding > utf-8 < / project. Reporting. OutputEncoding > < Java version > 1.8 < / Java version > </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <! Webjars </groupId> <artifactId> Bootstrap </artifactId> < < version > 3.3.7-1 / version > < / dependency > <! Webjars </groupId> <artifactId>jquery</artifactId> <version>3.1.1</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>Copy the code

Then we look at the dependencies of the project. The dependencies include bootstrap.jar and jquery.jar

Then in the SRC/main/resources/static files under the new index., HTML code is as follows:

<! DOCTYPE html> <html lang="en "> <head> <meta charset="UTF-8 "> <title>Dalaoyang</title> <link rel="stylesheet " Href = "/ webjars/bootstrap / 3.3.7-1 / CSS/bootstrap. Min. CSS" / > < script SRC = "/ webjars/jquery / 3.1.1 / jquery. Min. Js" > < / script > <script SRC ="/webjars/bootstrap/ 3.7-1/js/bootstrap.min.js "></script> </head> <body> <div class="container "><br/> <div class="alert alert-success "> <a href="# "class="close" data-dismiss="alert "aria-label="close ">×</a> Hello, <strong>Dalaoyang! </strong> </div> </div> </body> </html>Copy the code

Now that the configuration is complete, start the project and visit http://localhost:8888/

At this point, SpringBoot combined with WebJars is complete.

Source code download: elder Yang code cloud

Personal website: dalaoyang.cn