プログラミング逆引き辞典

～多言語対応のプログラミングレシピ～

WebJarsの設定（ビルドツール：Gradle）

■WebJars

BootStrapやJQuery等を利用する為に設定

※記述するコードは下記サイトを参照
https://www.webjars.org/

記述場所：dependencies

記述コード：

implementation 'org.webjars:bootstrap:4.3.1'
implementation 'org.webjars:jquery:3.4.1'

Thymeleafに下記を記述

<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>

【Thymeleaf記述例】

<!DOCTYPE html>
<html xmlns:th="http://www/thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
<title>社員一覧</title>
</head>
<body>
    <div class="container">
    <h1>社員一覧</h1>
        <hr>
        <table class="table table-striped table-bordered table-condensed">
            <tr>
                <th>社員番号</th>
                <th>社員名</th>
                <th>メールアドレス</th>
                <th>権限</th>
                <th colspan="2">編集</th>
            </tr>
            <tr th:each="employee : ${employees}">
                <td th:text="${employee.employeeId}"></td>
                <td th:text="${employee.employeeName}"></td>
                <td th:text="${employee.email}"></td>
                <td th:text="${employee.adminFlag == '0'}? '一般' : '管理者'"></td>
                <td>
                    <form th:action="@{/employees/edit}" method="get">
                        <input type="submit" class="btn btn-default" name="edit" value="編集">
                        <input type="hidden" name="id" th:value="${employee.id}">
                    </form>
                </td>
                <td>
                    <form th:action="@{/employees/delete}" method="post">
                        <input type="submit" class="btn btn-danger" name="delete" value="削除">
                        <input type="hidden" name="id" th:value="${employee.id}">
                    </form>
                </td>
            </tr>
        </table>
    </div>
    <script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
</body>
</html>