[TOC]
### **關注文檔→[進群一起學習提升吧](https://jq.qq.com/?_wv=1027&k=5dpB2jL)**
## **簡單博客系統規劃**
我們在教程一中已經新建了一個繼承自 Eloquent Model 類的 Article 類，使用 migration 建立了數據表并使用 seeder 填入了測試數據。我們的博客系統暫時將只管理這一種資源：后臺需要使用賬號密碼登錄，進入后臺之后，可以新增、修改、刪除文章；前臺顯示文章列表，并在點擊標題之后顯示出文章全文。
下面我們正式開始。
## **搭建前臺**
前臺的搭建是最簡單的，我先帶大家找找感覺。
### **修改路由**
刪掉
~~~html
Route::get('/', function () {
return date("Y-m-d H:i:s");
});
~~~
將`Route::get('/home', 'HomeController@index')->name('home');`改為`Route::get('/', 'HomeController@index')->name('home');`，現在我們系統的首頁就落到了`App\Http\Controllers\HomeController`類的`index`方法上了。
### **查看 HomeController 的 index 函數**
將`learnlaravel5/app/Http/Controllers/HomeController.php`的 index 函數我們之前加的 Exception 那行代碼刪除，就只剩一行代碼了：`return view('home');`，這個很好理解，返回名叫 home 的視圖給用戶。這個視圖文件在哪里呢？在`learnlaravel5/resources/views/home.blade.php`，blade 是 Laravel 視圖引擎的名字，會對視圖文件進行加工。
### **blade 淺析**
blade 引擎會對視圖文件進行預處理，幫我們簡化一些重復性很高的 echo、foreach 等 PHP 代碼。blade 還提供了一個靈活強大的視圖組織系統。打開`home.blade.php`：
~~~html
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
You are logged in!
</div>
</div>
</div>
</div>
</div>
@endsection
~~~
#### **[@extends](https://github.com/extends)('layouts.app')**
這表示此視圖的基視圖是`learnlaravel5/resources/views/layouts/app.blade.php`。這個函數還隱含了一個小知識：在使用名稱查找視圖的時候，可以使用 . 來代替 / 或 \\。
#### **[@section](https://github.com/section)('content') ... @endsection**
這兩個標識符之間的代碼，會被放到基視圖的`@yield('content')`中進行輸出。
### **訪問首頁**
首先刪除`learnlaravel5/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php`中`dispatch`函數里我們加的的 var\_dump 代碼，否則會出現奇怪的頁面。
訪問[http://fuck.io:1024](http://fuck.io:1024/)，不出意外的話，你會看到這個頁面：
[](https://camo.githubusercontent.com/be32acb9dae82b79ab062b51f210ade43d5409d8/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130323334383632313836332e6a7067)
為什么需要登錄呢？怎么去掉這個強制登錄呢？刪掉 HomeController 中的構造函數即可：
~~~html
public function __construct()
{
$this->middleware('auth');
}
~~~
這個函數會在控制器類生成對象后第一時間自動載入一個名為 auth 的中間件，正是這一步導致了首頁需要登錄。刪除構造函數之后，重新訪問[http://fuck.io:1024](http://fuck.io:1024/)，頁面應該就會直接出來了。這里要注意兩點：① 一定要重新訪問，不要刷新，因為此時頁面的 url 其實是[http://fuck.io:1024/login](http://fuck.io:1024/login)② 這個頁面跟之前的歡迎頁雖然看起來一毛一樣，但其實文字是不同的，注意仔細觀察哦。
### **向視圖文件輸出數據**
既然 Controller - View 的架構已經運行，下一步就是引入 Model 了。Laravel 中向視圖傳數據非常簡單：
~~~html
public function index()
{
return view('home')->withArticles(\App\Article::all());
}
~~~
2016 版教程里很多人看到這段代碼都十分不解，這里解釋一下：
1. \\App\\Article::all() 是采用`絕對命名空間`方式對 Article 類的調用。
2. withArticles 是我定義的方法，Laravel 并不提供，這也是 Laravel 優雅的一個表現：Laravel View 采用 \_\_call 來 handle 對未定義 function 的調用，其作用很簡單：給視圖系統注入一個名為`$articles`的變量，這段代碼等價于`->with('articles', \App\Article::all())`。
3. 展開講一下，`->withFooBar(100)`等價于`->with('foo_bar', 100)`，即駝峰變量會被完全轉換為蛇形變量。
### **修改視圖文件**
修改視圖文件`learnlaravel5/resources/views/home.blade.php`的代碼為：
~~~html
@extends('layouts.app')
@section('content')
<div id="title" style="text-align: center;">
<h1>Learn Laravel 5</h1>
<div style="padding: 5px; font-size: 16px;">Learn Laravel 5</div>
</div>
<hr>
<div id="content">
<ul>
@foreach ($articles as $article)
<li style="margin: 50px 0;">
<div class="title">
<a href="{{ url('article/'.$article->id) }}">
<h4>{{ $article->title }}</h4>
</a>
</div>
<div class="body">
<p>{{ $article->body }}</p>
</div>
</li>
@endforeach
</ul>
</div>
@endsection
~~~
刷新，得到：
[](https://camo.githubusercontent.com/039277caa2cdae51920d400d9deb1c31ba43b37e/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333036303335383031362e6a7067)
如果看到以上頁面，恭喜你，Laravel 初體驗成功！
### **調整視圖**
前臺頁面是不應該有頂部的菜單欄的，特別是還有注冊、登錄之類的按鈕。接下來我們修改視圖內容為：
~~~html
<!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>Learn Laravel 5</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div id="title" style="text-align: center;">
<h1>Learn Laravel 5</h1>
<div style="padding: 5px; font-size: 16px;">Learn Laravel 5</div>
</div>
<hr>
<div id="content">
<ul>
@foreach ($articles as $article)
<li style="margin: 50px 0;">
<div class="title">
<a href="{{ url('article/'.$article->id) }}">
<h4>{{ $article->title }}</h4>
</a>
</div>
<div class="body">
<p>{{ $article->body }}</p>
</div>
</li>
@endforeach
</ul>
</div>
</body>
</html>
~~~
此視圖文件變成了一個獨立視圖，不再有基視圖，并且將 jQuery 和 BootStrap 替換為了國內的 CDN，更快更穩定了。
同理我們修改`learnlaravel5/resources/views/layouts/app.blade.php`：
① 刪除`<script src="{{ asset('js/app.js') }}"></script>`
② 替換`<link href="{{ asset('css/app.css') }}" rel="stylesheet">`為
~~~html
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
~~~
接下來我們來著手搭建后臺。
## **搭建后臺**
### **生成控制器**
我們使用 Artisan 工具來生成控制器文件及代碼：
~~~shell
php artisan make:controller Admin/HomeController
~~~
成功之后，我們就可以看到 artisan 幫我們建立的文件夾及控制器文件了：
[](https://camo.githubusercontent.com/7810111fd8becaa97ace0c5cfc9bd8fa2bf3e5f6/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031362d30362d30332d31343633373636303031343230332e6a7067)
### **增加路由**
我們要使用路由組來將后臺頁面置于“需要登錄才能訪問”的中間件下，以保證安全。在 web.php 里增加下面三行：
~~~html
Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], function() {
Route::get('/', 'HomeController@index');
});
~~~
上一篇文章中我們已經接觸到了路由組，這是 Laravel 的另一個偉大創造。路由組可以給組內路由一次性增加 命名空間、uri 前綴、域名限定、中間件 等屬性，并且可以多級嵌套，異常強大。
上面的三行代碼的功能簡單概括就是：訪問這個頁面必須先登錄，若已經登錄，則將`http://fuck.io:1024/admin`指向`App\Http\Controllers\Admin\HomeController`的 index 方法。其中需要登錄由`middleware`定義，`/admin`由`prefix`定義，`Admin`由`namespace`定義，`HomeController`是實際的類名。
### **構建后臺首頁**
#### **新建 index 方法**
在新生成的`learnlaravel5/app/Http/Controllers/Admin/HomeController.php`文件中增加一個 function：
~~~html
public function index()
{
return view('admin/home');
}
~~~
#### **新建后臺首頁視圖文件**
在`learnlaravel5/resources/views/`目錄下新建一個名為 admin 的文件夾，在 admin 內新建一個名為`home.blade.php`的文件，填入代碼：
~~~html
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Learn Laravel 5 后臺</div>
<div class="panel-body">
<a href="{{ url('admin/article') }}" class="btn btn-lg btn-success col-xs-12">管理文章</a>
</div>
</div>
</div>
</div>
</div>
@endsection
~~~
#### **修改 Auth 系統登陸成功之后的跳轉路徑**
修改`learnlaravel5/app/Http/Controllers/Auth/LoginController.php`中相應的代碼為：
~~~html
protected $redirectTo = '/admin';
~~~
#### **嘗試登錄**
訪問[http://fuck.io:1024/admin](http://fuck.io:1024/admin)，它會跳轉到登陸界面，輸入郵箱和密碼之后，你應該會看到如下頁面：
[](https://camo.githubusercontent.com/f56c11b3924ac8e0bbf2c4d3aefa20376821bfce/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333039303236373233352e6a70673f743d33)
恭喜你，后臺首頁搭建完成！下面我們開始構建 Article 的后臺管理功能。
### **構建 Article 后臺管理功能**
讓我們先嘗試點一下 “管理文章”按鈕，不出意外你將得到一個報錯：
[](https://camo.githubusercontent.com/1aa9f0b2d15610fdff06a5e73c902a53a980691d/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333039313137323634352e6a7067)
這是 Laravel 5.5 剛剛引入的新策略：404 錯誤不再報告詳細信息，而是展示一個友好的 404 頁面。
#### **添加路由**
404 錯誤是訪問了系統沒有監聽的路由導致的。下面我們要添加針對`http://fuck.io:1024/admin/article`的路由：
~~~html
Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], function() {
Route::get('/', 'HomeController@index');
Route::get('article', 'ArticleController@index');
});
~~~
刷新，出現詳細報錯信息了：
[](https://camo.githubusercontent.com/35814a132cd945a044f10f2bc73f35a11872da13/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135333335353032312e6a7067)
#### **進步之道**
很多新手看到這個報錯直接就慌了：什么鬼？全是英文看不懂呀。然后在文章下面把完整的錯誤棧全部粘貼出來。老實說我第一次見到 Laravel 報這個錯也是完全沒耐心去讀，不過我還是復制了最明顯的那句話“Class App\\Http\\Controllers\\Admin\\ArticleController does not exist”去 Google 了一下，從此我就再也沒搜索過它了。
如果你遇到了奇怪的報錯，不要慌，穩住，Google 一下，我們能贏。
#### **新建控制器**
上圖中的報錯是控制器不存在。我們使用 Artisan 來新建控制器：
~~~shell
php artisan make:controller Admin/ArticleController
~~~
刷新，錯誤又變了：
[](https://camo.githubusercontent.com/eef2a12383699c72b7923af6214fa7b1a8567032/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135343939313933332e6a70673f743d35)
index 方法不存在。讓我們新增 index 方法：
~~~html
public function index()
{
return view('admin/article/index')->withArticles(Article::all());
}
~~~
#### **新建視圖**
上面我們已經新建過視圖，現在應該已經輕車熟路了。在`learnlaravel5/resources/views/admin`下新建 article 文件夾，在文件夾內新建一個 index.blade.php 文件，內容如下：
~~~html
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">文章管理</div>
<div class="panel-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
{!! implode('<br>', $errors->all()) !!}
</div>
@endif
<a href="{{ url('admin/article/create') }}" class="btn btn-lg btn-primary">新增</a>
@foreach ($articles as $article)
<hr>
<div class="article">
<h4>{{ $article->title }}</h4>
<div class="content">
<p>
{{ $article->body }}
</p>
</div>
</div>
<a href="{{ url('admin/article/'.$article->id.'/edit') }}" class="btn btn-success">編輯</a>
<form action="{{ url('admin/article/'.$article->id) }}" method="POST" style="display: inline;">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<button type="submit" class="btn btn-danger">刪除</button>
</form>
@endforeach
</div>
</div>
</div>
</div>
</div>
@endsection
~~~
刷新，錯誤又變了：
[](https://camo.githubusercontent.com/d610d8470d6f8babbc516537f25743217a792d30/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135363730353035302e6a70673f743d30)
Article 類不存在？原因很簡單：Article 類和當前控制器類不在一個命名空間路徑下，不能直接調用。解決辦法就是主動導入`\App\Article`類：
~~~html
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Article;
class ArticleController extends Controller
{
....
~~~
如果你還不熟悉命名空間，請閱讀[《PHP 命名空間 解惑》](http://mp.weixin.qq.com/s?__biz=MzI0NjcxNDYzOQ==&mid=100000064&idx=1&sn=7a7c7e390a9f7719b8175a660ef890d6&chksm=69ba59205ecdd0362448e75201eba4454c85bfb916308d01289eb9729ef11b0f0cc21db0dedd#rd)。
#### **檢查成果**
再次刷新，你應該能看到如下畫面：
[](https://camo.githubusercontent.com/fc17f69a54a49b54bd5f64cc6de34f47c65e2248/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135383433363434312e6a7067)
如果你沒到這個畫面也不用擔心，根據錯誤提示去 Google 吧，一定能解決的。
#### **新增、編輯、刪除功能怎么辦？**
這三個功能我將在下一篇教程與大家分享，這是 2015 版 Laravel 教程做的不夠好的地方，其實這里才是最應該掰開揉碎仔細講解的地方。
