自定義登錄界面 · Laravel構建個人博客

## 登錄上一節我們已經實現了使用了Laravel自帶的用戶認證功能，這節我們將修改登錄界面和自定義定了字段。 ### 自定義登錄界面 `php artisan make:auth` 命令會在 `resources/views/auth` 目錄創建所有認證需要的視圖。同時， `make:auth` 命令還創建了 `resources/views/layouts` 目錄，該目錄包含了應用的基本布局視圖。 `resources/views/auth` 文件夾下新建 `myLogin.blade.php` 登錄視圖 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Myblog</title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  <link href="./assets/css/material-kit.css" rel="stylesheet" /> <link href="./assets/css/style.css" rel="stylesheet" /> </head> <body class="login-page sidebar-collapse"> <div class="page-header header-filter" style="background-image: url('./assets/img/bg4.jpg'); background-size: cover; background-position: top center;"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 ml-auto mr-auto"> <div class="card card-login"> <form class="form" method="" action="" style="min-height: 365px;"> <div class="card-header card-header-primary text-center"> <h2 class="card-title">Login</h2> </div> <div class="card-body"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input type="text" class="form-control login-text" placeholder="賬號..."> <span class="bmd-error">We'll never share your email with anyone else.</span> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input type="password" class="form-control login-text" placeholder="密碼..."> </div> <div class="input-group form-check" style="padding-top: 0"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me <span class="form-check-sign"> <span class="check"></span> </span> </label> </div> </div> <div class="footer text-center" style="margin-bottom: 20px;"> <button class="btn btn-primary btn-raised"> 登錄 <div class="ripple-container"></div> </button> </div> </form> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <nav class="float-left"> <ul> <li> <a href="http://www.iwanli.me"> iwanli </a> </li> </ul> </nav> <div class="copyright float-right"> 2018, make a better web. </div> </div> </footer> </div>  <script src="./assets/js/core/jquery.min.js" type="text/javascript"></script> <script src="./assets/js/core/popper.min.js" type="text/javascript"></script> <script src="./assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script> <script src="./assets/js/material-kit.js" type="text/javascript"></script> </body> </html> ``` 接下來在`App\Http\Controllers\Controller` 中重寫登錄視圖方法： ```php <?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Illuminate\Foundation\Auth\AuthenticatesUsers; class LoginController extends Controller { use AuthenticatesUsers; protected $redirectTo = '/home'; public function __construct() { $this->middleware('guest')->except('logout'); } /** * 重寫登錄視圖方法 */ public function showLoginForm() { return view('auth.myLogin'); } } ``` 在瀏覽器中查看頁面是我們發現樣式全亂了，接下來我們將模板中的css、js以及圖片文件放到項目 `public` 目錄下，然后在 `myLogin.blade.php` 中修改資源文件路徑： ``` <!DOCTYPE html> <html lang="en"> <head> ...... <link href="{{ asset('assets/css/material-kit.css') }}" rel="stylesheet" /> <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet" /> </head> <body class="login-page sidebar-collapse"> ......  <script src="{{asset('assets/js/core/jquery.min.js')}}" type="text/javascript"></script> <script src="{{asset('assets/js/core/popper.min.js')}}" type="text/javascript"></script> <script src="{{asset('assets/js/core/bootstrap-material-design.min.js')}}" type="text/javascript"></script> <script src="{{asset('assets/js/material-kit.js')}}" type="text/javascript"></script> </body> </html> ``` 最后一步，我們將 `resources/views/auth/login.blade.php` 中的登錄代碼更換到 `resources/views/auth/myLogin.blade.php` 中： ``` ...... <body class="login-page sidebar-collapse"> ...... <form class="form" method="post" action="{{ route('login') }}" style="min-height: 365px;"> @csrf <div class="card-header card-header-primary text-center"> <h2 class="card-title">Login</h2> </div> <div class="card-body"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input type="text" class="form-control login-text" name="email" value="{{ old('email') }}" placeholder="賬號..."> @if ($errors->has('email')) <span class="bmd-error">{{ $errors->first('email') }}</span> @endif </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input type="password" class="form-control login-text" name="password" placeholder="密碼..."> @if ($errors->has('password')) <span class="bmd-error">{{ $errors->first('password') }}</span> @endif </div> <div class="input-group form-check" style="padding-top: 0"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me <span class="form-check-sign"> <span class="check"></span> </span> </label> </div> </div> <div class="footer text-center" style="margin-bottom: 20px;"> <button class="btn btn-primary btn-raised"> 登錄 <div class="ripple-container"></div> </button> </div> </form> ...... </body> ...... ``` ### 總結 1. 在 `resources/views/auth` 文件夾下新建 `myLogin.blade.php` 登錄視圖 2. `App\Http\Controllers\Controller` 中重寫登錄視圖方法 3. 引入樣式文件，修改登錄視圖中資源文件路徑 4. 修改登錄視圖字段，路由 * 登錄HTML模板下載地址：[戳這里](https://gitee.com/iwl/myblog/attach_files) * 源碼地址：[戳這里](https://gitee.com/iwl/myblog/tree/s002/)