iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Software Development

跟著官方文件學習Laravel, 並實作出一個會員登入系統系列 第 3

Day3 跟著官方文件學習Laravel-來一個登入畫面

今天的目標是我要透過瀏覽器送出一段路徑後,要在我的頁面能夠接收到我的登入畫面

在官方文件的一開始說到,我們可以在routes/web.php這個檔案之中定義路由,並且提供一個HelloWorld的範例:

Route::get('/greeting', function () {
    return 'Hello World';
});

那我們試著把這些程式碼貼到routes/web.php,接著到http://127.0.0.1:8000/greeting 看看吧,記得要先啟動server

php artisan serve

OK,我們成功地在頁面上看到Hello World了!
我們今天的目標,是要在頁面上看到登入畫面,所以我們修改一下我們的程式碼

Route::get('/login', function () {
    return "<h1>登入畫面</h1>";
});

接著,我們在前往http://127.0.0.1:8000/login 可以看到登入畫面四個字大大的顯示在螢幕上,所以理論上,只要我把登入畫面HTML變成字串放在return上,我就可以有一個登入畫面了,所以我們來試試看

Route::get('/login', function () {
    return <<<EOF
    <h1>登入畫面</h1>
    <form action='/login' method='POST'>
        帳號:<input type='text' name='account'><br/>
        密碼:<input type='password' name='password'><br/>
        <button type='submit'>登入</button>
    </form>
    EOF;
});

登入畫面出來了!!不過呢這個方法不太好,原因是這樣畫面不好維護,且沒辦法加入一些樣式,所以我們會利用Route::view()來傳遞一個視圖。所以我們可以來試試看,首先我們改寫一下Route

Route::get('/login', function () {
    return view('login');
});

接著我們在resources/views之中創建一個login.blade.php

#login.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
</head>
<body>
    <h1>登入畫面</h1>
    @csrf
    <form action='/login' method='POST'>
        帳號:<input type='text' name='account'><br/>
        密碼:<input type='password' name='password'><br/>
        <button type='submit'>登入</button>
    </form>
</body>
</html>

接著我們去看畫面是否正常,結果是正常的,好了,今天的任務完成,我成功顯示出登入畫面了。而在這邊官方跟我們說要加上@csrf才能受到CSRF的保護而什麼是CSRF呢,會是我們明天挑論的話題,大家明天見啦!


上一篇
Day2 跟著官方文件學習Laravel-環境設定
下一篇
Day4 跟著官方文件學習Laravel-CSRF保護
系列文
跟著官方文件學習Laravel, 並實作出一個會員登入系統30

尚未有邦友留言

立即登入留言