AdSense

網頁

2021/5/27

Spring Boot 使用WebJars引入前端套件 use WebJars to import front-end web libraries

在Java Web專案的頁面若要引用前端套件如Bootstrap或JQuery，除了手動下載或使用npm或yarn套件管理工具下載，還可以用本篇介紹的WebJars函式庫。


WebJars是一個包有各種前端函式庫的jar，在Java Web專案引入WebJars即可在前端頁面(html、jsp、jsf...)使用前端套件。

下面參考WebJars官網教學在Spring Boot專案中使用WebJars引入Bootstrap前端框架。

範例環境：

  • Java 8
  • Spring Boot 2.3.2
  • Maven 3

首先使用Eclipse STS或IntelliJ IDEA CE建立Spring Boot專案。

在專案的pom.xml加入WebJars Bootstrap 5.0.1的依賴。

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>5.0.1</version>
</dependency>

執行mvn install下載WebJar Bootstrap。

WebJars的javascript資源放在/webjars/{name}/{version}目錄。name為套件名稱，{version}為套件版本。可查看下載回來的WebJars套件的MATA-INF/resources/webjars目錄有哪些資源(js,css)。



在src/main/resources/static新增index.html。在<header>內加上
<link rel='stylesheet' href='/webjars/bootstrap/5.0.1/css/bootstrap.min.css'>
引入bootstrap。

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='/webjars/bootstrap/5.0.1/css/bootstrap.min.css'><!-- 引入bootstrap -->

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Index</title>
</head>
<body>
    <h1>Hello WebJars Bootstrap</h1>

    <h3>Bootstrap Grid</h3>
    <div class="container">
        <div class="row">
            <div class="col border p-3">
                <button type="button" class="btn btn-primary">Send</button>
            </div>
            <div class="col border p-3">
                <input type="email" class="form-control" id="input1" placeholder="name@example.com">
            </div>
        </div>
    </div>
</body>
</html>


啟動專案在瀏覽器網址列輸入http://localhost:8080/index.html返回帶有Bootstrap效果的頁面如下。




參考github。


標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

AdSense