iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
1
Modern Web

30天學習Spring MVC系列 第 13 篇

Day 13-Spring Boot-實現一個登錄功能(不含驗證)

2018鐵人賽
15408 瀏覽

  • 分享至 

  • xImage
    •  

前言

大家新年快樂~~ /images/emoticon/emoticon55.gif

就算是過年鐵人賽還是在進行著!!!!
/images/emoticon/emoticon28.gif

來介紹一下我今天要做的事情
1.製作一個登錄頁面
2.使用Spring Data JPA 自訂一個SQL查詢語法
3.實現一個POST傳輸
4.實現一個沒經過驗證的轉跳(未加Session)

今天只是要簡單的介紹我們如何實現一個登錄頁面,讓這個登錄頁面可以實現POST的功能
看似簡單,這背後可是進入網站程式設計許多人最難的一關也是第一關

程式碼如下:

Controller

MemberController.java

	@GetMapping("/login")
    public String login(@ModelAttribute MemberAccountJPA memberAccountJPA){

        return "login";
    }
	
	@PostMapping("/doLogin")
    public String doLogin(@ModelAttribute MemberAccountJPA memberAccountJPA){
		System.out.println(memberRepository.findCheckMemberAccount(memberAccountJPA.getEmail(), memberAccountJPA.getPassword()));

        return "welcome";
    }

MemberRepository.java (interface)

@Query(value="select id,email,password,address,cellphone from member.memberaccountjpa where EMAIL = ?1 and PASSWORD = ?2 " ,nativeQuery = true)
	List<MemberAccountJPA> findCheckMemberAccount(String email,String password);

新增一個login.html頁面

login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <title>登入頁面</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- MetisMenu CSS -->
    <link th:href="@{/vendor/metisMenu/metisMenu.min.css}" href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link th:href="@{/dist/css/sb-admin-2.css}" href="../dist/css/sb-admin-2.css" rel="stylesheet"/>

    <!-- Custom Fonts -->
    <link th:href="@{/vendor/font-awesome/css/font-awesome.min.css}" href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">請輸入登入信箱及密碼</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" id="loginForm" method="post" enctype="multipart/form-data" th:action="@{/doLogin}" th:object="${memberAccountJPA}">
                            <fieldset>
                                <div class="form-group">
                                    <input class="form-control" placeholder="E-mail" id="email" th:field="*{email}" type="email" autofocus=""/>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" id="password" th:field="*{password}" type="password" />
                                </div>
<!--                                 <div class="checkbox"> -->
<!--                                     <label> -->
<!--                                         <input name="remember" type="checkbox" value="Remember Me">Remember Me -->
<!--                                     </label> -->
<!--                                 </div> -->
                                <!-- Change this to a button or input when using this as a form -->
                                <a onclick="checkLogin()" class="btn btn-lg btn-success btn-block">登錄</a>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script th:src="@{/vendor/jquery/jquery.min.js}" src="../vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}" src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script th:src="@{/vendor/metisMenu/metisMenu.min.js}" src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script th:src="@{/dist/js/sb-admin-2.js}" src="../dist/js/sb-admin-2.js"></script>

</body>
<script type="text/javascript">
$(function(){
	checkLogin = function(){

		$("#loginForm").submit();
		
	}
});
</script>
</html>

新增一個welcome.html頁面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <title>登入頁面</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- MetisMenu CSS -->
    <link th:href="@{/vendor/metisMenu/metisMenu.min.css}" href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link th:href="@{/dist/css/sb-admin-2.css}" href="../dist/css/sb-admin-2.css" rel="stylesheet"/>

    <!-- Custom Fonts -->
    <link th:href="@{/vendor/font-awesome/css/font-awesome.min.css}" href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"></h3>
                    </div>
                    <div class="panel-body">
                        歡迎登錄~~2018IT邦幫忙鐵人賽
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script th:src="@{/vendor/jquery/jquery.min.js}" src="../vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}" src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script th:src="@{/vendor/metisMenu/metisMenu.min.js}" src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script th:src="@{/dist/js/sb-admin-2.js}" src="../dist/js/sb-admin-2.js"></script>

</body>

</html>

重點說明

1.你可以使用button做submit,但是切記一定要先使用javascript做使用者輸入資料的驗證,這雖然也防不了有心人攻擊,但是驗證基本資料是很重要的一步,我先省略他,他不是我們的重點
2.你也可以使用HTML提供的屬性作驗證,但是使用開發者工具就能輕易修改
3.我們在Controller中注入了 @ModelAttribute MemberAccountJPA memberAccountJPA這是要將modle object映射到我們的form表單中的 th:field="*{email}",這邊如果沒有注入object的話在th:object="${memberAccountJPA}"這邊就會發生問題了,他會回報一個object XXX的錯誤訊息
4.在MemberRepository.java中@Query宣告自定義了一個Query查詢語法value即是我們的查詢語法,內部當然有他的運作原理了,但是在這裡我們不做解釋,我們先學會如何建構一個Spring MVC的應用再來學客制化的配置
5.在doLogin方法內我只是將取到的Model給print輸出在控制台,測試他是否真的有查詢到資料表的資料
6.當執行POST後會return 到welcome.html頁面
7.Spring 裡有Spring Security項目可以幫助我們做使用者登入的驗證,這屬於比較進階的項目,最基礎的驗證首先我們要紀錄使用者登入的session之後篇服中有Spring Session介紹

完成後的圖示

https://ithelp.ithome.com.tw/upload/images/20180101/20107812Ar5R4UPh0o.png
登入頁面

https://ithelp.ithome.com.tw/upload/images/20180101/20107812BVcMqGtX0f.png
轉跳後的頁面


上一篇
Day12-Spring Boot-什麼是Spring Data JPA
下一篇
Day 14-Spring Boot-Log日誌管理篇
系列文
30天學習Spring MVC 共 30 篇
  1. 26
    Day26 Spring Boot WebSocket 製作一個簡單的聊天室(上)
  2. 27
    Day27 Spring Boot WebSocket 製作一個簡單的聊天室(下)
  3. 28
    Day28 Spring Boot發佈篇-認識Docker(上)
  4. 29
    Day29 Spring Boot發佈篇-認識tomcat(下)
  5. 30
    Day30 Spring MVC完賽心得與Spring學習的未來建議
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙