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

2021 iThome 鐵人賽

DAY 3

Software Development

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

13th鐵人賽

jimchien

2021-09-17 07:07:17

1538 瀏覽

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

在官方文件的一開始說到，我們可以在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呢，會是我們明天挑論的話題，大家明天見啦！