More than 3 years have passed since last update.

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

課題

Posted at 2020-09-24

Thymeleafテンプレート作成

<!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で登録したアカウントを入力後ログインを押下

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

以上

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up