DBのユーザでログインする

12639 ワード
課題 課題 テキストリンク

Thymeleafテンプレート作成

register.htmlを編集

<!DOCTYPE html>
<html xmlns:th="http//www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:insert="fragments/base :: header"></th:block>
</head>
<body class="bg-gradient-primary">
    <!-- Main -->
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-10 col-lg-12 col-md-9">
            <!-- card -->
                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <div class="row">
                        <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
                        <div class="col-lg-6">
                        <div class="p-5">

                        <!-- Reistration -->
                        <div class="text-center">
                            <h1 class="h4 text-gray-900 mb-4">ユーザ登録</h1>
                        </div>
                        <form th:action="@{/register}" th:object="${user}" method="post" novalidate>
                            <div class="form-group">
                                <label for="name">
                                <span class="badge badge-danger">必須</span>ユーザ名                              
                                </label>
                                <input type="text" class="form-control" th:errorclass="is-invalid" th:field="*{username}">
                                <div class="invalid-feedback" th:errors="*{username}"></div>
                            </div>
                            <div class="form-group">
                                <label for="password">
                                    <span class="badge badge-danger">必須</span>パスワード
                                </label>
                                <input type="password" class="form-control" th:errorclass="is-invalid" th:field="*{password}">
                                <div class="invalid-feedback" th:errors="*{password}"></div>
                            </div>
                            <div class="form-group">
                            <label for="email">
                                <span class="badge badge-danger">必須</span>メールアドレス
                            </label>
                            <input type="email" class="form-control"
                                    th:errorclass="is-invalid" th:field="*{email}">
                            <div class="invalid-feedback" th:errors="*{email}"></div>
                            </div>
                            <div class="form-group">
                                <label for="email">性別</label>
                                <div th:each="gender:${T(com.example.demo.util.Type).GENDERS}">
                                    <input type="radio" class="ml-2" th:field="*{gender}"
                                            th:value="${gender.key}">
                                    <label th:for="${#ids.prev('gender')}" th:text="${gender.value}">
                                    </label>
                                </div>
                            </div>
                            <div class="form-check mb-2">
                                <input type="checkbox" class="form-check-input" th:field="*{admin}">
                                <label th:for="${#ids.prev('admin')}">管理者として登録する</label>
                            </div>
                            <button class="btn btn-primary btn-user btn-block">登録</button>
                        </form>
                        </div>
                        </div>
                        </div>              
                    </div>                              
                </div>                                  
            </div>
        </div>
    </div>
</body>
</html>

sidebar.htmlを編集

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
</head>
<body>
<th:block th:fragment="sidebar">

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">


<a class="sidebar-brand d-flex align-items-center justify-content-center" th:href="@{/}">
    <div class="sidebar-brand-icon rotate-n-15">
        <i class="fas fa-id-card"></i>
    </div>
    <div class="sidebar-brand-text mx-3">ユーザ管理</div>
</a>

<hr class="sidebar-divider d-none d-md-block">

<!-- Nav Item -->
<li class="nav-item active">
    <a class="nav-link pt-2" th:href="@{/}">
        <i class="fas fa-user">
        <span>ログイン情報</span>
    </a>
</li>
<th:block sec:authorize="hasRole('ADMIN')">
    <li class="nav-item active">
    <a class="nav-link pt-2" th:href="@{/admin/list}">
        <i class="fas fa-table"></i>
        <span>ユーザ一覧</span>
    </a>
    </li>
</th:block>
<hr class="sidebar-divider d-none d-md-block">
<li class="nav-item active">
    <a class="nav-link" th:href="@{/logout}">
        <i class="fas fa-sign-out-alt"></i>
        <span>ログアウト</span>
    </a>
</li>


<hr class="sidebar-divider d-none d-md-block">

<div class="text-center d-none d-md-inline">
    <button class="rounded-circle border-0" id="sidebarToggle">
    </button>
</div>

</ul>
</th:block>

</body>
</html>

base.htmlを編集

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:fragment="header">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ユーザ管理システム</title>
<link rel="stylesheet" th:href="@{/webjars/font-awesome/css/all.min.css}">
<link rel="stylesheet" th:href="@{/webjars/startbootstrap-sb-admin-2/css/sb-admin-2.min.css}">
<link rel="stylesheet" th:href="@{/css/app.css}">
<link rel="stylesheet" th:href="@{/webjars/datatables/css/dataTables.bootstrap4.min.css}">
<link rel="stylesheet" th:href="@{/webjars/datatables-buttons/css.buttons.dataTables.min.css}">
</th:block>
</head>
<body>
    <th:block th:fragment="scripts">
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script th:src="@{/webjars/popper.js./umd/popper.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/startbootstrap-sb-admin-2/js/sb-admin-2.min.js}"></script>
    <script th:src="@{/webjars/chartjs/Chart.min.js}"></script>

    <script th:src="@{/webjars/datatables/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/webjars/datatables/js/dataTables.bootstrap4.min.js}"></script>
    <script th:src="@{/webjars/datatables-buttons/js/dataTables.buttons.min.js}"></script>
    <script th:src="@{/webjars/datatables-buttons/js/buttons.html5.min.js}"></script>
    <script th:src="@{/webjars/datatables-buttons/js.buttons-.print.min.js}"></script>
    <script th:src="@{/webjars/jszip/jszip.min.js}"></script>
    </th:block>
</body>
</html>

list.htmlを作成

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:insert="fragments/base :: header"></th:block>
</head>
<body id="page-top">
    <!-- Page Wrapper -->
    <div id="wrapper">
        <th:block th:insert="fragments/sidebar :: sidebar"></th:block>

    <div id="content-wrapper" class="d-flex flex-column">
    <div id="content">
    <div class="contaier-fluid">
    <!-- list -->
        <div class="card shadow my-4">
            <div class="card-header py-3">
                <h6 class="m-0 fontweight-bold text-primary">ユーザ一覧</h6>
            </div>
            <div class="card-body">
                <div class="tabel-reponsive">
                    <table id="user-table" class="table table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>ユーザ名</th>
                            <th>Email</th>
                            <th>性別</th>
                            <th>権限</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr th:each="user:${users}" th:object="${user}">
                            <td th:text="*{id}"></td>
                            <td th:text="*{username}"></td>
                            <td th:text="*{email}"></td>
                            <td th:text="${T(com.example.demo.util.Type).GENDERS.get(user.gender)}"></td>
                            <td th:text="*{role}"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    <th:block th:insert="fragments/base :: scripts"></th:block>
    <script th:sec="@{/js/usertables.js}"></script>
</body>
</html>

javaScriptを作成

$(function(){
    $("#user-table").tadaTable({
        "language":{"url": "/webjars/datatables-plugins/i18n/Japanese.json"},
                    dom:'Bfrtip',buttons:[
                            'excelHtml5',
                            'csvHtml5',
                            'print'
                            ]
                            });
    });

確認

1.DBにadminアカウントを登録ができるか確認
ブラウザでhttp://www.localhost:8080/login/　にアクセスしその後「新規登録はこちら」を押下

「ユーザ名」「パスワード」「メールアドレス」を入力後登録ボタンを押下

「ユーザを新規登録しました」が表示されていることを確認

2.アカウント登録したアカウントでログインできるか確認

1で登録したアカウントを入力後ログインを押下

ログインできたことを確認

以上