SpringBoot使用WebJars

dalaoyang發表於2018-03-22
Spring BootWebJAR

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

9953332-1e39b82a2df845d7
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>

至此配置已經結束，啟動專案，訪問http://localhost:8888/

9953332-47f10967fcb4a849
image

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

原始碼下載 ：大老楊碼雲

個人網站：https://dalaoyang.cn


相關文章