本教程是 Laravel 手冊的一部分,可以從 https://flaviocopes.com/access/ 下載
我們不希望隨機的人進入網站並編輯數據。
我們希望人們先登錄。
如果未登錄,他們會看到狗的列表。
如果已登錄,他們將有能力編輯列表。
Laravel 在框架中為我們提供了內置的身份驗證支持。
為了更加方便,它提供了 Breeze,這是一個應用程序的開始套件工具,可以快速創建我們所需的東西。Breeze 可以快速搭建用戶註冊、登錄、密碼重置、個人資料頁面、儀表板等等功能。它太棒了。對於更高級的需求,我們還有 JetStream,但是 Breeze 更容易設置。
首先,創建一個新的 Laravel 項目,這樣我們可以從一個空白的起點開始。
第一個項目被命名為 first
,為了延續傳統,我們將這個第二個項目命名為 second
:
composer create-project laravel/laravel second
進入該文件夾:
cd second
使用 composer 安裝 Breeze:
composer require laravel/breeze --dev
現在運行下面的命令:
php artisan breeze:install
然後選擇選項 0,即“blade”,並選擇其他問題的默認選項,任務腳本會自動生成遠足點的登錄系統:
現在你可以運行 php artisan serve
,並打開 http://127.0.0.1:8000/。
你會看到“Log in”和“Register”鏈接:
所有的登錄功能已經可以正常使用:
Laravel 添加了大量的資源來實現這一點。
對於開發者來說,這可能需要花數日的時間,而且這些代碼經過了實戰考驗,你不希望自己寫這些代碼,因為這是一個非常重要且需要進行良好的安全性測試的功能。
我建議你查看文件結構,並將其與第一個項目進行對比。許多新東西已經被添加了,例如視圖:
但在進一步之前,我們需要為此項目設置數據庫,就像我們在第一個項目中所做的那樣。我們打開 .env
文件,註釋掉以下幾行:
然後添加以下內容:
DB\_CONNECTION=sqlite
以配置 SQLite 數據庫。
然後運行下面的命令:
php artisan migrate
在另一個終端窗口中,運行 npm install
命令,然後運行 npm run dev
命令,這是一個長時間運行的過程,需要與 php artisan serve
一起運行(⚠️ 請確保在 second
文件夾中運行,而非 first
項目中運行,我剛剛花了15分鐘的時間才找到問題所在)。
由 Breeze 提供的 Blade 模板使用了 Tailwind CSS,當我們運行 php artisan breeze:install
命令時,依賴的 Tailwind 設置已經自動完成。
現在,你可以打開 resources/views/welcome.blade.php
,並瀏覽所有的內容。為了簡單起見,將該文件中的所有內容替換為以下精簡版本:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
</head>
<body class="p-4">
@if (Route::has('login'))
<div class="text-right">
@auth
<a href="{{ url('/dashboard') }}" class="">Dashboard</a>
@else
<a href="{{ route('login') }}" class="">Log in</a>
@if (Route::has('register'))
<a href="{{ route('register') }}" class="ml-4">Register</a>
@endif
@endauth
</div>
@endif
<h1 class="pb-2 mb-3 font-bold border-b border-b-gray-300">
Dogs
</h1>
<div>
@auth
<p>Logged in</p>
@endauth
@guest
<p>Not logged in</p>
@endguest
</div>
</body>
</html>
@auth
/ @endauth
和 @guest
/ @endguest
是兩個 Blade 指令,它們允許你根據是否已登錄來顯示內容。
在瀏覽器中會顯示如下結果:
點擊 Register 鏈接創建一個新帳戶:
創建一個帳戶,你將會在 /dashboard
路由下看到一個儀表板頁面:
如果你回到主頁,你會在已登錄狀態下看到該頁面: