2016 版 Laravel 系列入門教程（三）【最適合中國人的 Laravel 教程】

阿新 • • 發佈：2019-01-15

在本篇文章中，我們將嘗試構建一個帶後臺的簡單部落格系統。我們將會使用到路由、MVC、Eloquent ORM 和 blade 檢視系統。

原文地址：http://www.cnblogs.com/grimm/p/5627004.html

簡單部落格系統規劃

我們在教程一中已經新建了一個 Eloquent 的 Model 類 Article，使用 migration 建立了資料表並使用 seeder 填入了測試資料。我們的部落格系統暫時將只管理這一種資源：後臺需要使用賬號密碼登入，進入後臺之後，可以新增、修改、刪除文章；前臺顯示文章列表，並在點選標題之後顯示出文章全文。

下面我們正式開始。

搭建前臺

前臺的搭建是最簡單的，我先帶領大家找找感覺。

修改路由

刪掉

Route::get('/', function () {
    return view('welcome');
});

將 /home 那一行修改為 Route::get('/', '[email protected]'); ，現在我們系統的首頁就落到了 App\Http\Controllers\HomeController 類的 index 方法上了。

檢視 HomeController 的 index 函式

learnlaravel5/app/Http/Controllers/HomeController.php 的 index 函式只有一行程式碼： return view('home');

，這個很好理解，返回名字叫 home 的檢視給使用者。這個檢視檔案在哪裡呢？在learnlaravel5/resources/views/home.blade.php ，blade 是 Laravel 檢視系統的名字。

blade 淺析

blade 會對檢視檔案進行預處理，幫我們簡化一些重複性很高的 echo、foreach 等 PHP 程式碼。blade 還提供了一個靈活強大的檢視組織系統。開啟 home.blade.php ：

@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">Dashboard</div>

                <div class="panel-body">
                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

這表示此檢視的基檢視是learnlaravel5/resources/views/layouts/app.blade.php 。這個函式還隱含了一個小知識：在使用名稱查詢檢視的時候，可以使用 . 來代替 / 或 \。

@section('content') ... @endsection

這兩個識別符號之前的程式碼，會被放到基檢視的 @yield('content') 中進行輸出。

訪問首頁

為什麼需要登入呢？怎麼去掉這個強制登入呢？刪掉 HomeController 中的建構函式即可：

public function __construct()
{
    $this->middleware('auth');
}

這個函式會在控制器類初始化的時候自動載入一個名為 auth 的中介軟體，正式這一步導致了首頁需要登入。刪除建構函式之後，重新訪問 http://fuck.io:1024 ，頁面應該就會直接出來了。這裡要注意兩點：① 一定要重新訪問，不要重新整理，因為此時頁面的 url 其實是 http://fuck.io:1024/login ② 這個頁面跟之前的歡迎頁雖然看起來一毛一樣，但其實文字是不同的，注意仔細觀察哦。

向檢視檔案輸出資料

既然 Controller - View 的架構已經執行，下一步就是引入 Model 了。Laravel 中向檢視傳資料非常簡單：

public function index()
{
    return view('home')->withArticles(\App\Article::all());
}

修改檢視檔案

修改檢視檔案 learnlaravel5/resources/views/home.blade.php 的程式碼為：

@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

重新整理

如果你得到以上頁面，恭喜你，Laravel 初體驗成功！

調整檢視

前臺頁面是不應該有頂部的選單欄的，特別是還有註冊、登入之類的按鈕。修改檢視檔案為：

<!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.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.2.0/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 為如下程式碼：

<!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>Laravel</title>

    <link href="//cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body id="app-layout">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">

                <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                    Laravel
                </a>
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    <li><a href="{{ url('/home') }}">Home</a></li>
                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="nav navbar-nav navbar-right">
                    <!-- Authentication Links -->
                    @if (Auth::guest())
                        <li><a href="{{ url('/login') }}">Login</a></li>
                        <li><a href="{{ url('/register') }}">Register</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="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>

    @yield('content')

</body>
</html>

接下來我們來著手搭建後臺。

搭建後臺

生成控制器

我們使用 Artisan 工具來生成控制器檔案：

php artisan make:controller Admin/HomeController

成功之後，我們就可以看到 artisan 幫我們建立的資料夾及控制器檔案了：

增加路由

我們要使用路由組來將後臺頁面置於“需要登入才能訪問”的中介軟體下，以保證安全：

Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], function() {
    Route::get('/', '[email protected]');
});

上一篇文章中我們已經接觸到了路由組，這是 Laravel 的另一個偉大創造。路由組可以給組內路由一次性增加名稱空間、uri 字首、域名限定、中介軟體等屬性，並且可以多級巢狀，異常強大。路由組中文文件在此： http://laravel-china.org/docs/5.1/routing#route-groups

上面的三行程式碼的功能簡單概括就是：訪問這個頁面必須先登入，若已經登入，則將 http://fuck.io:1024/admin 指向 App\Http\Controllers\Admin\HomeController 的 index 方法。其中需要登入由 middleware 定義， /admin 由 prefix 定義，Admin 由 namespace 定義，HomeController 是實際的類名。

構建後臺首頁

新建 index 方法

public function index()
{
    return view('admin/home');
}

新建檢視檔案

在 learnlaravel5/resources/views/ 目錄下新建一個名為 admin 的資料夾，在 admin 內新建一個名為 home.blade.php 的檔案，填入程式碼：

@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">Dashboard</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/AuthController.php 中的相應程式碼為：

protected $redirectTo = 'admin';

嘗試登入

恭喜你，後臺首頁搭建完成！下面我們開始構建 Article 的後臺管理功能。

構建 Article 後臺管理功能

讓我們先嚐試點一下 “管理文章”按鈕，不出意外你將得到一個 404 的報錯：

進步之道

很多新手看到這個報錯直接就慌了：什麼鬼？全是英文看不懂呀。然後在文章下面把完整的錯誤棧全部粘貼出來。老實說我第一次見到 Laravel 報這個錯也是完全沒耐心去讀，不過我還是複製了最明顯的那個詞“NotFoundHttpException”去 Google 了一下，從此我就再也沒搜尋過它了。

我為我的浮躁感到羞愧。那句話說的太對了：大多數人的努力程度之低，完全沒有到拼天賦的程度。願本教程的讀者都做“少數人”。

新增路由

404 錯誤是訪問了系統沒有監聽的路由導致的。下面我們要新增針對http://fuck.io:1024/admin/article 的路由：

Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], function() {
    Route::get('/', '[email protected]');
    Route::get('article', '[email protected]');
});

重新整理，錯誤變了：

新建控制器

上圖中的報錯是控制器不存在。我們使用 Artisan 來新建控制器：

php artisan make:controller Admin/ArticleController

重新整理，錯誤又變了：

index 方法不存在。讓我們新增 index 方法：

public function index()
{
    return view('admin/article/index')->withArticles(Article::all());
}

新建檢視

上面我們已經新建過檢視，現在應該已經輕車熟路了。在learnlaravel5/resources/views/admin 下新建 article 資料夾，在資料夾內新建一個 index.blade.php 檔案，內容如下：

@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