使用Laravel构建内容管理框架（三）

2016-02-18 本文已影响904人七月十五九月初七

Happy Coding

本文目标

完成登录管理页面与登录验证功能

管理用户模型

在文件夹app下新建文件夹Models，将文件夹app下的User.php移动到文件夹app/Models下
修改文件User.php的命名空间

namespace App\Models;

打开文件config/auth.php，修改代码如下

'model' => App\Models\User::class,

新增路由

打开文件app/Http/routes.php，文件代码如下：

<?php
Route::group(['namespace' => 'Backend', 'middleware' => ['auth']], function () {
    Route::get('/', 'IndexController@index');
});

Route::group(['namespace' => 'Auth'], function () {
    Route::get('auth/login', 'AuthController@getLogin');
    Route::post('auth/login', 'AuthController@postLogin');
    Route::get('auth/logout', 'AuthController@getLogout');
});

新增登录视图

在文件夹resources/views/新建文件夹auth，然后新建视图文件login.blade.php
在文件夹resources/views/backend/layout新建文件夹message，然后新建视图文件如下：

tips.blade.php
error.blade.php
success.blade.php

login.blade.php

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Log in</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="{{ asset("/assets/css/app.css") }}" rel="stylesheet" type="text/css"/>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <b>TianMao</b>CMF
    </div>
    <div class="login-box-body">
        <p class="login-box-msg">Happy Coding</p>

        <form action="{{URL::to('/auth/login')}}" method="post" enctype="multipart/form-data">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="row form-group has-feedback">
                <input type="text" class="form-control" placeholder="账号" name="email">
                <span class="fa fa-user form-control-feedback"></span>
                @include('backend.layout.message.tips',['field'=>'email'])
            </div>
            <div class="row form-group has-feedback">
                <input type="password" class="form-control" placeholder="密码" name="password">
                <span class="fa fa-lock form-control-feedback"></span>
                @include('backend.layout.message.tips',['field'=>'password'])
            </div>
            <div class="row form-group has-feedback">
                <input type="text" class="form-control" placeholder="验证码" name="captcha">
                <span class="fa fa-image form-control-feedback"></span>
                @include('backend.layout.message.tips',['field'=>'captcha'])
            </div>
            <div class="row form-group has-feedback">
                <img src="{{$captcha}}" alt="图片验证码" style="width: 100%;">
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox" name="remember" value="1"> 保持登录
                        </label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">登 录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="{{ asset ("/assets/js/app.js") }}"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%'
        });
    });
</script>
</body>
</html>

tips.blade.php

@if($errors->has($field))
    @foreach ($errors->get($field) as $error)
        <button class="btn btn-danger col-sm-12 btn-flat" style="width: 100%;">
            <i class="fa fa-times-circle-o"></i> {{$error}}
        </button>
    @endforeach
@endif

error.blade.php

@if(Session::has('errors'))
    <div id="errors-message" class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-ban"></i> 错误提示!</h4>
        @foreach($errors->all() as $error)
            {{$error}}
        @endforeach
    </div>
@endif

success.blade.php

@if(Session::has('success'))
    <div id="success-message" class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-check"></i> 成功提示!</h4>
        {{Session::get('success')}}
    </div>
@endif

新增验证码Package

打开composer.json文件,修改代码如下:

 "require": {
    "php": ">=5.5.9",
    "laravel/framework": "5.1.*",
    "gregwar/captcha": "1.*"
},

gregwar/captcha是验证码Package，用来生成验证码，在终端执行以下命令进行安装。

sudo composer install

管理登录认证控制器

打开文件app/Http/Auth/AuthController.php，新增代码如下:

use Illuminate\Support\Facades\Session;

public function getLogin()
{
    if (view()->exists('auth.authenticate')) {
        return view('auth.authenticate');
    }

    $builder = new CaptchaBuilder();
    $builder->build();
    Session::put('phrase', $builder->getPhrase());

    return view('auth.login')->with('captcha', $builder->inline());
}

public function postLogin(Request $request)
{
    $this->validate($request, [
        $this->loginUsername() => 'required',
        'password'             => 'required',
        'captcha'              => 'required'
    ], [
        $this->loginUsername() . '.required' => '请输入邮箱或用户名称',
        'password.required'                  => '请输入用户密码',
        'captcha.required'                   => '请输入验证码'
    ]);

    if (Session::get('phrase') !== $request->get('captcha')) {
        return redirect()->back()->withErrors(array('captcha' => '验证码不正确'))->withInput();
    }
}

使用迁移文件生成数据表

接下来打开终端，在项目下运行以下命令，生成用户表并创建用户

// 生成数据表
php artisan migrate

// 生成用户数据
php artisan tinker
$user = new App\Models\User;
$user->name = "admin";
$user->email = "admin@qq.com";
$user->password = bcrypt(123456);
$user->save();
exit

管理登录认证操作跳转页面

打开文件app\Http\Controller\Auth\AuthController，新增以下成员属性:

// 设置成功登录后转向的页面：
protected $redirectPath = '/';

// 设置登录失败后转向的页面：
protected $loginPath = '/auth/login';

// 设置退出登录后转向的页面：
protected $redirectAfterLogout = '/';

打开中间件app\Http\Middleware\RedirectIfAuthenticated.php，找到相应的地方，修改代码如下：

 public function handle($request, Closure $next)
{
    // 设置登录之后，输入/auth/login的跳转地址
    if ($this->auth->check()) {
        return redirect('/');
    }

    return $next($request);
}

效果预览

完成上述步骤后，在浏览器输入项目域名/auth/login，可以看到效果如下：

屏幕快照 2016-02-18 11.38.16.png