今天的目標是我要透過瀏覽器送出一段路徑後,要在我的頁面能夠接收到我的登入畫面
在官方文件的一開始說到,我們可以在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呢,會是我們明天挑論的話題,大家明天見啦!