티스토리 뷰

SCIT/8월

8/19 [SpringBoot & JPA & Ajax Practice]家計簿(2) - ログイン

Seraphim_ 2024. 8. 19. 19:22

Login HTML
HOME

1. ログインHTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>LOGIN</title>
    <script th:src="@{/jq/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/js/loginForm.js}"></script>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div class="container">
    <header>
        <h1>[ LOGIN ]</h1>
    </header>
    <!-- ※ The name in the ID field of the login form must match the .usernameparameter("id") part specified
           by WebSecurityConfig.
           The name in the password entry box must match the .passwordparameter ("password") part specified
           by WebSecurityConfig.-->
    <!-- ※ 参考 : フォームを丸ごと送る時のみnameが必要 -->
    <form id="loginForm" th:action="@{/member/login}" method="post">
        <p>
            <label>ID</label>
            <input type="text" name="id" id="id">
        </p>
        <p>
            <label>Password</label>
            <input type="password" name="password" id="password">
        </p>
        <p>
            <button type="submit">Login</button>
        </p>
    </form>
    <footer>
        <p>&copy; 2024.08.19 SpringBoot & JPA & Ajax Practice</p>
    </footer>
</div>
</body>
</html>

 

2. Controller

package net.datasa.cashbook.controller;

// lombokのアノテーションを使用して、ログ出力と必要なコンストラクタを自動生成します
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import net.datasa.cashbook.domain.dto.MemberDTO;
import net.datasa.cashbook.service.MemberService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

// コントローラークラスを示すSpringのアノテーション
@Controller
@Slf4j
@RequestMapping("member")
@RequiredArgsConstructor
public class MemberController {

    // MemberService のインスタンスを注入するためのフィールド
    private final MemberService memberService;

    /**
     * ログインフォームに遷移します。
     * @return login form HTML file
     */
    @GetMapping("login")
    public String login() {
        return "loginForm"; // loginForm.html ビューに遷移します
    }
}

 

3. Javascript

$(document).ready(function() {
    // ID and password must be entered when logging in
    $('#loginForm').submit(function() {
        if ($('#id').val() == '' || $('#password').val() == '') {
            alert('Please Enter ID and Password');
            return false;
        }
        return true;
    });
});

 

저작자표시 비영리 변경금지

'SCIT > 8월' 카테고리의 다른 글

8/19 [SpringBoot & JPA & Ajax Practice]家計簿(3) - 家計簿  (0) 2024.08.19
8/17 [SpringBoot & JPA & Ajax Practice]家計簿(1) - 会員登録  (0) 2024.08.17
8/14 [Ajax] Test5. 댓글 저장, 수정, 삭제  (0) 2024.08.14
8/13 [Ajax] Test3. 추천  (0) 2024.08.13
8/12 [Ajax] Test2. 서버로부터 객체 주고 받기  (0) 2024.08.12
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함