## 登錄
上一節我們已經實現了使用了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' />
<!-- Fonts and icons -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- CSS Files -->
<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>
<!-- Core JS Files -->
<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">
......
<!-- Core JS Files -->
<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/)