SpringBoot使用WebJars

向右看齐 2022-05-29 11:39 184阅读 0赞

本人主要做的是java，但是从第一份工作开始，就一直在做一个写前端又写后端的程序员，相信很多朋友和我一样，不仅要会后台代码，还要懂得很多的前端代码，例如javascipt和css样式。

本文就为大家简单介绍一下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/> 
    	</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>
    
           
    		<dependency>
    			<groupId>org.webjars</groupId>
    			<artifactId>bootstrap</artifactId>
    			<version>3.3.7-1</version>
    		</dependency>
    
    		
    		<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

![1][]

然后在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>

至此配置已经结束，启动项目，访问http://localhost:8888/

![2][]

至此SpringBoot结合WebJars成功就完成。

源码下载 ：[大老杨码云][Link 1]

[1]: /images/20220529/855a29143eab4f3ab647442fb41eb458.png
[2]: /images/20220529/4fba637fd5884bc9820d7666acde49e6.png
[Link 1]: https://gitee.com/dalaoyang/springboot_learn