## 登录
上一节我们已经实现了使用了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/)
