本人主要做的是java愉耙，但是從第一份工作開始僧叉，就一直在做一個寫前端又寫后端的程序員，相信很多朋友和我一樣哥谷，不僅要會后臺代碼岸夯，還要懂得很多的前端代碼，例如javascipt和css樣式们妥。
webjars官網(wǎng)：傳送門
本文就為大家簡單介紹一下SpringBoot如何結合前端代碼猜扮。
SpringBoot結合前端有很多種方法，比如在static里面直接加入css或js监婶，又或者引入webjars旅赢，以jar包的形式加入項目，本文就是簡單介紹一下這種方式惑惶。
話不多說煮盼，直接引入代碼，還是新建一個SpringBoot Web項目集惋。然后在pom文件引入webjars的jar孕似，pom文件代碼如下：
<?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">
<modelVersion>4.0.0</modelVersion>
<groupId>com.dalaoyang</groupId>
<artifactId>springboot_webjars</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>springboot_webjars</name>
<description>springboot_webjars</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-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>
<!-- 引用bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7-1</version>
</dependency>
<!-- 引用jquery -->
<dependency>
<groupId>org.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>
然后我們觀察一下項目的依賴jar包，依賴中就有了bootstrap.jar和jquery.jar
image
然后在src/main/resources/static文件下新建index.html刮刑，代碼如下：
<!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.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>
至此配置已經(jīng)結束喉祭，啟動項目，訪問http://localhost:8888/
image
至此SpringBoot結合WebJars成功就完成雷绢。
源碼下載 ：大老楊碼云
