Project-Flyer-12-The-Authentication-Layer

跟随 Jeffrey Way 的视频学习,脑子不好,一些细节容易忘记,这里记录下来。相关视频在 laracasts.com
课程名称:Build “ProjectFlyer” With Me(12)

本节实现用户认证。

美化编辑 create.blade.php form.blade.php。
删除 form.blade.php 里 form 的样式,然后把 create.blade.php 修改为:

@inject('countries', 'App\Http\Utilities\Country')
<div class="row">
{{ csrf_field() }}
<div class="col-md-6">
<div class="form-group">
<label for="street">Street:</label>
<input type="text" name="street" id="street" class="form-control" value="{{ old('street') }}" required/>
</div>

<div class="form-group">
<label for="city">City:</label>
<input type="text" name="city" id="city" class="form-control" value="{{ old('city') }}" required/>
</div>

<div class="form-group">
<label for="zip">Zip/Postal Code:</label>
<input type="text" name="zip" id="zip" class="form-control" value="{{ old('zip') }}" required/>
</div>

<div class="form-group">
<label for="country">Country:</label>
<select name="country" id="country" class="form-control">
@foreach($countries::all() as $name => $code)
<option value="{{ $code }}">{{ $name }}</option>
@endforeach
</select>
</div>

<div class="form-group">
<label for="state">State:</label>
<input type="text" name="state" id="state" class="form-control" value="{{ old('state') }}" required/>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label for="price">Sale Price:</label>
<input type="text" name="price" id="price" class="form-control" value="{{ old('price') }}" required/>
</div>

<div class="form-group">
<label for="description">Home Description:</label>
<textarea type="text" name="description" id="description" class="form-control" rows="10" required>{{ old('description') }}</textarea>
</div>
</div>

<div class="col-md-12">
<hr>
<div class="form-group">
<button type="submit" class="btn btn-primary">Create Flyer</button>
</div>
</div>
</div>

编辑 FlyerController 控制器,添加构造函数:

function __construct() {
$this->middleware('auth');
}

刷新 create 页面,可以看到页面会自动跳转等登录页面,比如我这里是跳转到了:
http://flyer.dev/auth/login

在官方文档在搜索栏输入 auth => Authentication => Routing => 复制代码到我们自己的路由文件 routes.php:

// Authentication routes...
Route::get('auth/login', 'Auth\AuthController@getLogin');
Route::post('auth/login', 'Auth\AuthController@postLogin');
Route::get('auth/logout', 'Auth\AuthController@getLogout');

// Registration routes...
Route::get('auth/register', 'Auth\AuthController@getRegister');
Route::post('auth/register', 'Auth\AuthController@postRegister');

在刷新下页面,报错:View [auth.login] not found.,我们创建这个页面:
resources/views/auth/login.blade.php

@extends('layouts.master')

@section('content')
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="/auth/login" method="POST">
{!! csrf_field() !!}
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email" id="email" class="form-control" value="{{ old('email') }}"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" value="{{ old('password') }}"/>
</div>
<div class="form-group">
<input type="checkbox" name="remember">Remember Me
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Login</button>
</div>
</form>
</div>
</div>
@stop

刷新和点击 create flyer 按钮都可以跳转到登录页,但是注册页面目前不存在,根据路由的定义,我们应该创建注册页面在这里:
resources/views/auth/register.blade.php

@extends('layouts.master')

@section('content')
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Register</h1>
<hr>
<form action="/auth/register" method="POST">
{!! csrf_field() !!}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" value="{{ old('password') }}"/>
</div>
<div class="form-group">
<label for="password_confirmation">Confirm Password:</label>
<input type="password" name="password_confirmation" id="password_confirmation" class="form-control" value="{{ old('password_confirmation') }}"/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Register</button>
</div>
</form>
</div>
</div>
@stop

我们试着填写完整信息注册个用户试试,报错是必然的,错误出在没有 home 这样页面,先不急解决这个问题,先看注册数据是否已经入库,homestead 虚拟机网站根目录下运行:

php artisan
App\User::all();

我会发现数据已经入库了,先试试刚才新添加的用户吧,回到 create 页面,用刚才注册的用户登录试试。注意,我们刚才注册的,默认目前已经用那个用户登录了,所以先退出登录再试,在地址栏输入类似的地址具体根据你的情况决定:
http://flyer.dev/auth/logout
然后我们来试试:
http://flyer.dev/flyers/create
在登录页输入刚注册的用户,应该会成功登录进入到具体的 create 页面。

打开 AuthController.php,在

use AuthenticatesAndRegistersUsers, ThrottlesLogins;

的下面添加:

/**
* Where to redirect upon successful registration
* @var string
*/
protected $redirectPath = '/flyers/create';

再添加表单验证,打开 register.blade.php,在 form 表单的下面添加:

@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>
{{ $error }}
</li>
@endforeach
</ul>
</div>
@endif

刷新下注册页面,表单什么都不填写,点提交可以看到红色的 required 警示,注意到登录页也没有验证,所以干脆把上面刚添加的验证代码段抽象到单独的模板文件:errors.blade.php 里,剪切刚刚添加到 register.blade.php 里的验证代码段,替换成:

@include('errors')

然后新建 resources/views/errors.blade.php,内容为刚剪切的验证代码段。
再在 login.blade.php 里添加 @include('errors')。刷新 register 和 login 两个页面,空表单提交试试验证是否正常提示。
然后在 register 和 login 模板页的每个表单标签的后面添加 required,例如:

<input type="text" name="email" id="email" class="form-control" value="{{ old('email') }}" required/>

再刷新 register 和 login 两个页面,提交空表单试试,如果是 chrome 或 Firefox 应该会有更友好的提示。

本节完!

0%