SpringBoot使用WebJars

时间：2022-03-11 04:07:05

本人主要做的是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/> <!-- 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

SpringBoot使用WebJars

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

SpringBoot使用WebJars

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

源码下载 ：大老杨码云

相关文章