基于Laravel开发博客应用系列 —— 构建博客后台管理系统
一個(gè)完整的博客應(yīng)用不能沒(méi)有后臺(tái)管理系統(tǒng)。所以在本節(jié)中我們將繼續(xù)完善博客應(yīng)用 —— 開(kāi)發(fā)后臺(tái)管理系統(tǒng)。
1、創(chuàng)建路由
在上一節(jié)十分鐘創(chuàng)建博客項(xiàng)目中，已經(jīng)設(shè)置過(guò)了?app/Http/routes.php，現(xiàn)在，我們要添加后臺(tái)路由到該文件。
為什么要使用路由？
Laravel?5.1 一種機(jī)制用來(lái)建立 web 請(qǐng)求與處理 web 請(qǐng)求的代碼之間的關(guān)系，這種機(jī)制被稱作路由。本項(xiàng)目中所有路由都定義在?app/Http/routes.php?文件中。
只要 web 請(qǐng)求路徑在?public?目錄下找不到，Laravel 5.1 就會(huì)從路由文件查找對(duì)應(yīng)關(guān)系并返回響應(yīng)。
修改?app/Http/routes.php?內(nèi)容如下：
<?php// Blog pages get('/', function () {return redirect('/blog'); }); get('blog', 'BlogController@index'); get('blog/{slug}', 'BlogController@showPost');// Admin area get('admin', function () {return redirect('/admin/post'); }); $router->group(['namespace' => 'Admin', 'middleware' => 'auth'], function () {resource('admin/post', 'PostController');resource('admin/tag', 'TagController');get('admin/upload', 'UploadController@index'); });// Logging in and out get('/auth/login', 'Auth\AuthController@getLogin'); post('/auth/login', 'Auth\AuthController@postLogin'); get('/auth/logout', 'Auth\AuthController@getLogout');保存好 routes.php 后，下一步我們要?jiǎng)?chuàng)建對(duì)應(yīng)的控制器。
2、創(chuàng)建后臺(tái)控制器
使用 Artisan 命令生成控制器：
php artisan make:controller Admin\\PostController? php artisan make:controller Admin\\TagController? php artisan make:controller Admin\\UploadController --plain上述三個(gè)命令運(yùn)行完成后，會(huì)在?app/Http/Controllers/Admin?目錄下生成三個(gè)控制器。
修改?PostController?類的?index()?方法如下：
/*** Display a listing of the posts.** @return Response*/ public function index() {return view('admin.post.index'); }現(xiàn)在?index()?方法只是簡(jiǎn)單渲染視圖，稍后我們會(huì)完善它。
3、創(chuàng)建視圖
我們還需要?jiǎng)?chuàng)建一些視圖，一步步來(lái)好了。
創(chuàng)建后臺(tái)布局
Blade 模板引擎是 Laravel 提供的最強(qiáng)大的功能之一，接下來(lái)我們將基于 Blade 創(chuàng)建一個(gè)供后臺(tái)使用的布局文件，從而讓后臺(tái)有一個(gè)整體外觀一致的視覺(jué)體驗(yàn)。
在?resources/views?目錄下新建一個(gè)?admin?目錄，然后在該目錄下創(chuàng)建一個(gè)?layout.blade.php?文件并編輯其內(nèi)容如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>{{ config('blog.title') }} Admin</title><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">@yield('styles')<!--[if lt IE 9]><script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body>{{-- Navigation Bar --}}<nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">{{ config('blog.title') }} Admin</a></div><div class="collapse navbar-collapse" id="navbar-menu">@include('admin.partials.navbar')</div></div></nav>@yield('content')<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>@yield('scripts')</body> </html>上面的代碼片段可能看上去很熟悉，沒(méi)錯(cuò)，這就是?Bootstrap?的基本模板，我們只是在其基礎(chǔ)上加了一些額外的鉤子：
- <title>{{ config('blog.title') }} Admin</title>?：?設(shè)置站點(diǎn)標(biāo)題
- @yield('styles')：該 Blade 指令將會(huì)輸出繼承自該布局的子視圖的?styles?區(qū)塊內(nèi)容（如果有的話），其目的在于將 CSS 樣式文件放到模板頂部。
- @include('admin.partials.navbar')：這里我們引入另一個(gè) Blade 模板（現(xiàn)在還不存在）
- @yield('content')：輸出頁(yè)面的主體內(nèi)容
- @yield('scripts')：輸出額外的?JavaScript?腳本文件
創(chuàng)建導(dǎo)航條局部視圖
在?resources/views/admin?目錄下新建?partials?目錄，并在該目錄下創(chuàng)建?navbar.blade.php?文件，編輯其內(nèi)容如下：
<ul class="nav navbar-nav"><li><a href="/">Blog Home</a></li>@if (Auth::check())<li @if (Request::is('admin/post*')) class="active" @endif><a href="/admin/post">Posts</a></li><li @if (Request::is('admin/tag*')) class="active" @endif><a href="/admin/tag">Tags</a></li><li @if (Request::is('admin/upload*')) class="active" @endif><a href="/admin/upload">Uploads</a></li>@endif </ul><ul class="nav navbar-nav navbar-right">@if (Auth::guest())<li><a href="/auth/login">Login</a></li>@else<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }}<span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="/auth/logout">Logout</a></li></ul></li>@endif </ul>如果用戶登錄進(jìn)來(lái)，該模板會(huì)顯示一個(gè)頂部導(dǎo)航條：左側(cè)包含 Posts、Tags 和 Uploads，右側(cè)包含 Logout。
如果用戶沒(méi)有登錄，只在導(dǎo)航條右側(cè)顯示 Login 鏈接。
創(chuàng)建登錄表單
現(xiàn)在我們已經(jīng)有了后臺(tái)布局視圖，創(chuàng)建登錄表單不要太簡(jiǎn)單，首先在?resources/views?目錄下新建?auth?目錄，并在該目錄下創(chuàng)建 ?login.blade.php?文件，編輯該文件內(nèi)容如下：
@extends('admin.layout')@section('content') <div class="container-fluid"><div class="row"><div class="col-md-8 col-md-offset-2"><div class="panel panel-default"><div class="panel-heading">Login</div><div class="panel-body">@include('admin.partials.errors')<form class="form-horizontal" role="form" method="POST" action="{{ url('/auth/login') }}"><input type="hidden" name="_token" value="{{ csrf_token() }}"><div class="form-group"><label class="col-md-4 control-label">E-Mail Address</label><div class="col-md-6"><input type="email" class="form-control" name="email" value="{{ old('email') }}" autofocus></div></div><div class="form-group"><label class="col-md-4 control-label">Password</label><div class="col-md-6"><input type="password" class="form-control" name="password"></div></div><div class="form-group"><div class="col-md-6 col-md-offset-4"><div class="checkbox"><label><input type="checkbox" name="remember"> Remember Me</label></div></div></div><div class="form-group"><div class="col-md-6 col-md-offset-4"><button type="submit" class="btn btn-primary">Login</button></div></div></form></div></div></div></div> </div> @endsection在登錄表單中我們引入了一個(gè)尚未創(chuàng)建的?admin.partials.errors，接下來(lái)就來(lái)創(chuàng)建該視圖：
創(chuàng)建錯(cuò)誤局部視圖
驗(yàn)證表單輸入錯(cuò)誤并在視圖中顯示這些錯(cuò)誤在處理表單時(shí)是一個(gè)通用任務(wù)，所以我們將其放到一個(gè)單獨(dú)的 Blade 模板視圖中進(jìn)行處理。
在?resources/views/admin/partials?目錄下創(chuàng)建?errors.blade.php，編輯其內(nèi)容如下：
@if (count($errors) > 0)<div class="alert alert-danger"><strong>Whoops!</strong>There were some problems with your input.<br><br><ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div> @endif$errors?變量在每個(gè)視圖中都有效，其中包含了一個(gè)錯(cuò)誤集合（如果有錯(cuò)誤的話），我們只需要檢查是否包含錯(cuò)誤并將錯(cuò)誤顯示出來(lái)即可。
創(chuàng)建文章列表視圖
在?resources/views/admin?目錄下創(chuàng)建一個(gè)新的目錄?post，并在該目錄下新建?index.blade.php，編輯該文件內(nèi)容如下：
@extends('admin.layout')@section('content')<div class="container-fluid"><div class="row"><div class="col-md-8 col-md-offset-2"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">Posts</h3></div><div class="panel-body">TODO</div></div></div></div></div> @stop這只是一個(gè)臨時(shí)視圖，后面我們會(huì)逐步完善它。
4、測(cè)試登錄/退出
在瀏覽器中訪問(wèn)?http://blog.app/admin，回跳轉(zhuǎn)到登錄頁(yè)面，頁(yè)面顯示如下：
你可以試著登錄，當(dāng)然你不可能登錄成功，因?yàn)槲覀冞€沒(méi)有創(chuàng)建后臺(tái)用戶。
創(chuàng)建后臺(tái)用戶
artisan?tinker?可以用于通過(guò)命令行與應(yīng)用進(jìn)行交互，下面我們?cè)?Homestead 虛擬機(jī)中項(xiàng)目根目錄下使用該命令為博客項(xiàng)目創(chuàng)建后臺(tái)用戶：
現(xiàn)在我們就可以使用剛剛創(chuàng)建的用戶登錄后臺(tái)了。回到登錄頁(yè)試試吧。
登錄成功后頁(yè)面跳轉(zhuǎn)到文章列表頁(yè)：
修改退出后跳轉(zhuǎn) URL
如果點(diǎn)擊頁(yè)面頂部導(dǎo)航條右側(cè)的下拉列表并選擇 Logout 退出，你會(huì)發(fā)現(xiàn)頁(yè)面沒(méi)有跳轉(zhuǎn)到登錄頁(yè)面，而是博客頁(yè)面。
為什么會(huì)這樣？
如果查看?AuthController?類（app/Http/Controllers/Auth/AuthController）的?getLogout()?方法，你會(huì)發(fā)現(xiàn)并沒(méi)有該方法，在其父類中也沒(méi)有?getLogout()?方法，這是因?yàn)?span id="ozvdkddzhkzd" class="Apple-converted-space">?AuthController?使用了AuthenticatesAndRegistersUsers?trait 和 ?AuthenticatesUsers?trait，getLogout()?方法正是定義在了AuthenticateUsers?trait 中。
如果你在?vendor/laravel/framework/src?目錄下找到?Illuminate/Foundation/Auth?目錄，你會(huì)發(fā)現(xiàn)該目錄下有一個(gè)?AuthenticatesUsers.php，在該文件中，可以看到?getLogout()?方法，并且該方法在退出完成后重定向到了根路徑?/?。
要修改該重定向路徑，修改?app/Http/Controllers/Auth/AuthController?代碼如下：
<?phpnamespace App\Http\Controllers\Auth;use App\User; use Validator; use App\Http\Controllers\Controller; use Illuminate\Foundation\Auth\ThrottlesLogins; use Illuminate\Foundation\Auth\AuthenticatesUsers;class AuthController extends Controller {use AuthenticatesUsers, ThrottlesLogins;protected $redirectAfterLogout = '/auth/login';protected $redirectTo = '/admin/post';/*** Create a new authentication controller instance.*/public function __construct(){$this->middleware('guest', ['except' => 'getLogout']);}/*** Get a validator for an incoming registration request.** @param array $data* @return \Illuminate\Contracts\Validation\Validator*/protected function validator(array $data){return Validator::make($data, ['name' => 'required|max:255','email' => 'required|email|max:255|unique:users','password' => 'required|confirmed|min:6',]);} }我們移除了?AuthenticateAndRegistersUsers?trait，因?yàn)槲覀兊膽?yīng)用不允許普通用戶注冊(cè)。然后我們?cè)O(shè)置了 ?$redirectAfterLogout?屬性和?$redirectTo?屬性，用來(lái)指定登錄和退出后的重定向 URL。
該類的其余部分和之前一樣保持不變。
修改登錄后跳轉(zhuǎn) URL
默認(rèn)登錄成功后跳轉(zhuǎn)鏈接是?/home，和退出一樣，我們可以修改該URL。
編輯?app/Http/Middleware/RedirectIfAuthenticated.php?文件，修改第38行代碼如下：
return new RedirectResponse('/admin/post');登錄/退出
由于現(xiàn)在我們已經(jīng)將?getLogout()?方法的跳轉(zhuǎn)鏈接做了修改，現(xiàn)在我們已經(jīng)可以成功實(shí)現(xiàn)登錄/退出了。
試試吧。
轉(zhuǎn)載于:https://www.cnblogs.com/chinalorin/p/5845272.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的基于Laravel开发博客应用系列 —— 构建博客后台管理系统的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTML5中常用的标签(及标签的属性和作
- 下一篇： MongoDB windows解压缩版安