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

本文轉載自查看原文 2019-01-10 14:29 648 PHP/ Laravel

在本篇文章中，我們將嘗試構建一個帶后台的簡單博客系統。我們將會使用到路由、MVC、Eloquent ORM 和 blade 視圖系統。

簡單博客系統規划

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

下面我們正式開始。

搭建前台

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

修改路由

刪掉

 
          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：

 
          @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('layouts.app')

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

@Section('content') ... @endsection

這兩個標識符之間的代碼，會被放到基視圖的 @yield('content') 中進行輸出。

訪問首頁

首先刪除 learnlaravel5/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php 中 dispatch 函數里我們加的的 var_dump 代碼，否則會出現奇怪的頁面。
訪問 http://fuck.io:1024 ，不出意外的話，你會看到這個頁面：

為什么需要登錄呢？怎么去掉這個強制登錄呢？刪掉 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'，$assign); 
           } 
         

或

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

2016 版教程里很多人看到這段代碼都十分不解，這里解釋一下：

\App\Article::all() 是采用絕對命名空間方式對 Article 類的調用。
withArticles 是我定義的方法，Laravel 並不提供，這也是 Laravel 優雅的一個表現：Laravel View 采用 __call 來 handle 對未定義 function 的調用，其作用很簡單：給視圖系統注入一個名為 $articles 的變量，這段代碼等價於 ->with('articles', \App\Article::all())。
展開講一下，->withFooBar(100) 等價於 ->with('foo_bar', 100)，即駝峰變量會被完全轉換為蛇形變量。

修改視圖文件

修改視圖文件 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.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"> 為

 
          <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 工具來生成控制器文件及代碼：

php artisan make:controller Admin/HomeController

成功之后，我們就可以看到 artisan 幫我們建立的文件夾及控制器文件了：

增加路由

我們要使用路由組來將后台頁面置於“需要登錄才能訪問”的中間件下，以保證安全。在 web.php 里增加下面三行：

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

上一篇文章中我們已經接觸到了路由組，這是 Laravel 的另一個偉大創造。路由組可以給組內路由一次性增加命名空間、uri 前綴、域名限定、中間件等屬性，並且可以多級嵌套，異常強大。路由組中文文檔在此：https://d.laravel-china.org/docs/5.5/routing#route-groups

上面的三行代碼的功能簡單概括就是：訪問這個頁面必須先登錄，若已經登錄，則將 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：

 
          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">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 中相應的代碼為：

protected $redirectTo = '/admin';

嘗試登錄

訪問 http://fuck.io:1024/admin ，它會跳轉到登陸界面，輸入郵箱和密碼之后，你應該會看到如下頁面：

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

構建 Article 后台管理功能

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

這是 Laravel 5.5 剛剛引入的新策略：404 錯誤不再報告詳細信息，而是展示一個友好的 404 頁面。

添加路由

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

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

刷新，出現詳細報錯信息了：

進步之道

很多新手看到這個報錯直接就慌了：什么鬼？全是英文看不懂呀。然后在文章下面把完整的錯誤棧全部粘貼出來。老實說我第一次見到 Laravel 報這個錯也是完全沒耐心去讀，不過我還是復制了最明顯的那句話“Class App\Http\Controllers\Admin\ArticleController does not exist”去 Google 了一下，從此我就再也沒搜索過它了。

如果你遇到了奇怪的報錯，不要慌，穩住，Google 一下，我們能贏。

新建控制器

上圖中的報錯是控制器不存在。我們使用 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

刷新，錯誤又變

Article 類不存在？原因很簡單：Article 類和當前控制器類不在一個命名空間路徑下，不能直接調用。解決辦法就是主動導入 \App\Article 類：

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

use App\Article;

class ArticleController extends Controller
{
....

如果你還不熟悉命名空間，請閱讀《PHP 命名空間解惑》。

檢查成果

再次刷新，你應該能看到如下畫面：

如果你沒到這個畫面也不用擔心，根據錯誤提示去 Google 吧，一定能解決的。

新增、編輯、刪除功能怎么辦？

這三個功能我將在下一篇教程與大家分享，這是 2015 版 Laravel 教程做的不夠好的地方，其實這里才是最應該掰開揉碎仔細講解的地方。

轉載他處，侵權聯系刪除

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 2016 版 Laravel 系列入門教程（三）【最適合中國人的 Laravel 教程】 Laravel 系列入門教程（二）【最適合中國人的 Laravel 教程】 Laravel 系列入門教程（一）【最適合中國人的 Laravel 教程】 2016 版 Laravel 系列入門教程（一）【最適合中國人的 Laravel 教程】 2016 版 Laravel 系列入門教程（二）【最適合中國人的 Laravel 教程】 2016 版 Laravel 系列入門教程（五）【最適合中國人的 Laravel 教程】 pytest+allure報告最適合的版本教程《進擊吧！Blazor！》系列入門教程第一章 6.安全《進擊吧！Blazor！》系列入門教程第一章 7.圖表《進擊吧！Blazor！》系列入門教程第一章 8.部署