基于Laravel开发博客应用系列 —— 构建博客后台管理系统
一個完整的博客應用不能沒有后臺管理系統。所以在本節中我們將繼續完善博客應用 —— 開發后臺管理系統。
1、創建路由
在上一節十分鐘創建博客項目中,已經設置過了?app/Http/routes.php,現在,我們要添加后臺路由到該文件。
為什么要使用路由?
Laravel?5.1 一種機制用來建立 web 請求與處理 web 請求的代碼之間的關系,這種機制被稱作路由。本項目中所有路由都定義在?app/Http/routes.php?文件中。
只要 web 請求路徑在?public?目錄下找不到,Laravel 5.1 就會從路由文件查找對應關系并返回響應。
修改?app/Http/routes.php?內容如下:
<?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 后,下一步我們要創建對應的控制器。
2、創建后臺控制器
使用 Artisan 命令生成控制器:
php artisan make:controller Admin\\PostController? php artisan make:controller Admin\\TagController? php artisan make:controller Admin\\UploadController --plain上述三個命令運行完成后,會在?app/Http/Controllers/Admin?目錄下生成三個控制器。
修改?PostController?類的?index()?方法如下:
/*** Display a listing of the posts.** @return Response*/ public function index() {return view('admin.post.index'); }現在?index()?方法只是簡單渲染視圖,稍后我們會完善它。
3、創建視圖
我們還需要創建一些視圖,一步步來好了。
創建后臺布局
Blade 模板引擎是 Laravel 提供的最強大的功能之一,接下來我們將基于 Blade 創建一個供后臺使用的布局文件,從而讓后臺有一個整體外觀一致的視覺體驗。
在?resources/views?目錄下新建一個?admin?目錄,然后在該目錄下創建一個?layout.blade.php?文件并編輯其內容如下:
<!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>上面的代碼片段可能看上去很熟悉,沒錯,這就是?Bootstrap?的基本模板,我們只是在其基礎上加了一些額外的鉤子:
- <title>{{ config('blog.title') }} Admin</title>?:?設置站點標題
- @yield('styles'):該 Blade 指令將會輸出繼承自該布局的子視圖的?styles?區塊內容(如果有的話),其目的在于將 CSS 樣式文件放到模板頂部。
- @include('admin.partials.navbar'):這里我們引入另一個 Blade 模板(現在還不存在)
- @yield('content'):輸出頁面的主體內容
- @yield('scripts'):輸出額外的?JavaScript?腳本文件
創建導航條局部視圖
在?resources/views/admin?目錄下新建?partials?目錄,并在該目錄下創建?navbar.blade.php?文件,編輯其內容如下:
<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>如果用戶登錄進來,該模板會顯示一個頂部導航條:左側包含 Posts、Tags 和 Uploads,右側包含 Logout。
如果用戶沒有登錄,只在導航條右側顯示 Login 鏈接。
創建登錄表單
現在我們已經有了后臺布局視圖,創建登錄表單不要太簡單,首先在?resources/views?目錄下新建?auth?目錄,并在該目錄下創建 ?login.blade.php?文件,編輯該文件內容如下:
@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在登錄表單中我們引入了一個尚未創建的?admin.partials.errors,接下來就來創建該視圖:
創建錯誤局部視圖
驗證表單輸入錯誤并在視圖中顯示這些錯誤在處理表單時是一個通用任務,所以我們將其放到一個單獨的 Blade 模板視圖中進行處理。
在?resources/views/admin/partials?目錄下創建?errors.blade.php,編輯其內容如下:
@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?變量在每個視圖中都有效,其中包含了一個錯誤集合(如果有錯誤的話),我們只需要檢查是否包含錯誤并將錯誤顯示出來即可。
創建文章列表視圖
在?resources/views/admin?目錄下創建一個新的目錄?post,并在該目錄下新建?index.blade.php,編輯該文件內容如下:
@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這只是一個臨時視圖,后面我們會逐步完善它。
4、測試登錄/退出
在瀏覽器中訪問?http://blog.app/admin,回跳轉到登錄頁面,頁面顯示如下:
你可以試著登錄,當然你不可能登錄成功,因為我們還沒有創建后臺用戶。
創建后臺用戶
artisan?tinker?可以用于通過命令行與應用進行交互,下面我們在 Homestead 虛擬機中項目根目錄下使用該命令為博客項目創建后臺用戶:
現在我們就可以使用剛剛創建的用戶登錄后臺了。回到登錄頁試試吧。
登錄成功后頁面跳轉到文章列表頁:
修改退出后跳轉 URL
如果點擊頁面頂部導航條右側的下拉列表并選擇 Logout 退出,你會發現頁面沒有跳轉到登錄頁面,而是博客頁面。
為什么會這樣?
如果查看?AuthController?類(app/Http/Controllers/Auth/AuthController)的?getLogout()?方法,你會發現并沒有該方法,在其父類中也沒有?getLogout()?方法,這是因為?AuthController?使用了AuthenticatesAndRegistersUsers?trait 和 ?AuthenticatesUsers?trait,getLogout()?方法正是定義在了AuthenticateUsers?trait 中。
如果你在?vendor/laravel/framework/src?目錄下找到?Illuminate/Foundation/Auth?目錄,你會發現該目錄下有一個?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,因為我們的應用不允許普通用戶注冊。然后我們設置了 ?$redirectAfterLogout?屬性和?$redirectTo?屬性,用來指定登錄和退出后的重定向 URL。
該類的其余部分和之前一樣保持不變。
修改登錄后跳轉 URL
默認登錄成功后跳轉鏈接是?/home,和退出一樣,我們可以修改該URL。
編輯?app/Http/Middleware/RedirectIfAuthenticated.php?文件,修改第38行代碼如下:
return new RedirectResponse('/admin/post');登錄/退出
由于現在我們已經將?getLogout()?方法的跳轉鏈接做了修改,現在我們已經可以成功實現登錄/退出了。
試試吧。
轉載于:https://www.cnblogs.com/chinalorin/p/5845272.html
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的基于Laravel开发博客应用系列 —— 构建博客后台管理系统的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML5中常用的标签(及标签的属性和作
- 下一篇: 足球队