一步一步用laravel开发回风博客系统-06-构建后台管理

原作者网站:http://laravelcoding.com/blog?tag=L5+Beauty
可以参考中文站点:http://laravelacademy.org/resources/blog

我是基于5.2的,而且有些东西我觉得有必要有的没必要,所以思路是跟着以上两个参考着搞,具体还是有区别的,我最终代码放在了Github:https://github.com/wedojava/hfblog.dev

由于正在补英语,所以有些我能看懂的就没从原作者那里翻译。

上节,我们已经讲测试数据seed到数据库了,现在我们实现后台的管理,管理具体文章当然需要界面和视图,我们先实现这部分。

创建路由

本项目中所有路由都定义在 app/Http/routes.php 文件中。
只要 web 请求路径在 public 目录下找不到,Laravel 5.2 就会从路由文件查找对应关系并返回响应。

修改 app/Http/routes.php 内容如下:

<?php

Route::get('blog', 'BlogController@index');

Route::get('blog/{id}', 'BlogController@showPost');

Route::group(['middleware' => ['web']], function () {
Route::get('/', function () {
return view('welcome');
});

Route::auth();

Route::get('/home', 'HomeController@index');
});

// Admin area
Route::get('admin', function () {
return redirect('/admin/post');
});

// Route::group可以写成$router->group
Route::group(['namespace' => 'Admin', 'middleware' => ['web', 'auth']], function () {
Route::resource('admin/post', 'PostController');
Route::resource('admin/tag', 'TagController');
});

创建控制器

路由有了,我们需要将路由指向的控制器创建起来。运行 Artisan 命令来实现:

php artisan make:controller Admin\\PostController --resource
php artisan make:controller Admin\\TagController --resource

现在 app/Http/Controllers/Admin 目录下生成了两个个控制器,我们现在修改具体的控制器方法。

修改 PostController 类的 index() 方法如下:

public function index()
{

return view('admin.post.index');
}

创建视图

刚才我们的控制器里返回的视图 admin.post.index 并不存在,我们现在创建它。
创建文件 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="/assets/css/hfblog.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">
<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="/assets/js/hfblog.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 脚本文件

创建导航条局部视图

注意到 @include('admin.partials.navbar'),这个视图不存在,我们现在创建它 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>
@endif
</ul>

<ul class="nav navbar-nav navbar-right">
@if (Auth::guest())
<li><a href="/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="/logout">Logout</a></li>
</ul>
</li>
@endif
</ul>

创建文章列表视图

创建后台显示文章列表的视图 resources/views/admin/post/index.blade.php :

@extends('admin.layout')

@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-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

创建返回错误信息局部视图

验证表单输入错误并在视图中显示这些错误在处理表单时是一个通用任务,所以我们将其放到一个单独的 Blade 模板视图中进行处理。

创建文件 resources/views/admin/partials/errors.blade.php

@if (count($errors) > 0)
<!-- Form Error List -->
<div class="alert alert-danger">
<strong>Whoops! Something went wrong!</strong>

<br><br>

<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif

创建返回成功信息局部视图

@if (Session::has('success'))
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>
<i class="fa fa-check-circle fa-lg fa-fw"></i> Success.
</strong>
{{ Session::get('success') }}
</div>
@endif

本节到此结束,至于posts的列表显示会在后面实现,下节我们实现下tag页面。