摘要：原文來自免費視頻教程地址期間受到很多私事影響，終于還是要好好寫寫的教程了。我們來實現這個功能顯示文章詳情通過文章展示來快速體驗上面的流程注冊路由來到中，我們增加一個路由上面的路由指定我們需要加載中的方法。

原文來自： https://jellybool.com/post/programming-with-laravel-5-model-controller-view-basic-workflow

期間受到很多私事影響，終于還是要好好寫寫laravel的教程了。

上一篇我們說了數據庫和Eloquent的基本用法，如計劃一樣，這一篇文章我們說說Laravel中Model，Controller，Views的工作流程，也就是下面這個順序：

1.注冊路由 ---> 2.創建控制器 ---> 3. 控制器中獲取數據庫數據 ---> 4.在視圖中展示數據

英文的表達可能會更加貼切一點：

1.register routes ---> 2.make a controller ---> 3.fetch data from database ---> 4. load a view to display data

在laravel中，最常見的流程就是這個樣子的，我們在實現某個功能的時候，通常就是走上面的這個流程。比如我們這個blog項目中，我們需要實現下面的功能：

1. 展示所有的文章  // blog首頁
2. 展示一篇文章   //文章詳情頁
3. 創建一篇文章   // 文章發布頁面
4. 修改一篇文章  // 文章修改頁面
5. 刪除一篇文章  // 后臺管理

在這一篇文章中，我們集中精力解決一下第一個功能，所以我們按照上面的流程來走一遍：

PS : 上次我們使用artisan tinker這個工具在命令行中對數據庫的數據進行了CRUD，現在就要將這些應用到MVC當中了。

我們這里會從頭開始，也就是會先刪除app/Http/Controllers/ArticleController.php這個文件

在系列文章的第二篇當中，我們在app/Http/routes.php中注冊了我們首頁的路由：

Route::get("/","ArticleController@index");

可以直接使用這個路由，所以我們可以進入下一步。

這里需要注意的是，如果你使用了Homestead，請先ssh登錄到你的虛擬機中執行命令；還有就是，請先刪除之前課程遺留的ArticleController，如果你想偷懶，可以跳過這一步

創建控制器的時候你可以手動創建，不過還是推薦使用artisan這個命令行工具，在項目目錄之下，命令行執行：

php artisan make:controller ArticleController --plain

這里需要說明的是--plain這個參數表明只要一個簡單的controller，里面不需要生成一堆如show(),create()等方法。

打開這個重新創建的ArticleController.php：

class ArticleController extends Controller
{

    public function index()
    {
        $articles = Article::all();

        return $articles;
    }
}

我們創建一個index()方法，這是因為我們在routes.php當中注冊的路由指定要加載ArticleController的index()方法，我們在index()方法中使用Article::all()將數據庫中articles這張表中的所有的記錄查找出來，直接返回。

我們用瀏覽器來訪問試試，會看到類似下面這個情況：

對，如你看到的一樣，如果你直接返回查找到得數據，Laravel會默認將這些數據轉換成json格式，因為laravel可能是出于這樣的考慮：一般這種情況下地返回，通常都是在創建api功能，比如你為你的一個手機App寫的api一樣，json數據無疑是很好的選擇。

順便安利一下大家使用百度團隊的這個FeHelper這個chrome插件：

https://github.com/zxlie/FeHelper

但是在這里我們并不是想直接返回json，取而代之的是，我們的目的是加載視圖，將數據展示出來。所以這就是我們下一步的工作了

這里我們首先需要修改的是ArticleController中的index()方法：

public function index()
{
    $articles = Article::all();

    return view("articles.index",compact("articles"));
}

我們只是修改了return這一行的代碼，使用view()方法加載視圖，這個視圖就是位于resources/views/articles/中的index.blade.php(我們還沒有創建)，最后使用compact("articles")將數據傳給視圖文件：關于這個視圖傳遞變量的問題，你可以參考教程的第三篇

然后，我們需要創建我們的視圖文件，在resources/views/articles/下創建index.blade.php文件：

@extends("app")
@section("content")
 
這是index.blade.php
@endsection

寫上上面的內容，關于視圖文件的blade模板，可以參考教程的第三篇，然后瀏覽器訪問一下看看：

視圖文件正確之后，我們需要將傳遞給視圖的$articles變量的內容展示出來：

@extends("app")
@section("content")
    @foreach($articles as $article)
        
{{ $article->title }}
        
{{ $article->intro }}
        

    @endforeach
@endsection

我們使用@foreach來將所有的文章循環出來，瀏覽器訪問看看：

這里我們的首頁展示也就基本完成了，然而在我們的實際blog中，我們會在每個標題出給出我們的文章鏈接，也就是為每個文章添加一個詳情展示的頁面，用戶點擊文章的鏈接之后，我們展示相應的文章詳情。我們來實現這個功能

通過文章展示來快速體驗上面的流程：

1.注冊路由

來到app/Http/routes.php中，我們增加一個路由：

Route::get("articles/{id}","ArticleController@show");

上面的路由articles/{id}指定我們需要加載ArticleController中的show()方法。這里需要注意的是{id}這個表達：這是表示id是一個路由變量，也就是當我們訪問類似下面這兩個路由的時候：

http://blog.dev/articles/1 //id 為1
http://blog.dev/articles/foo // id為foo

先不急著訪問，因為我們還沒有創建show()方法，這里只是作為說明。

在laravel中，路由變量寫在{}括號中，這個id對應我們等下寫的show()方法的參數。

2.編寫show()

在ArticleController增加show()方法：

public function show($id)
{
    return $id;
}

我們在show($id)方法中，首先接受參數id，然后直接返回。現在我們可以訪問上面的兩個url了，看到的類似下面這個效果：

3.獲取數據

然而在show()方法中，我們也是需要從數據庫中加載獲取數據，所以我們先修改show()方法：

public function show($id)
{
    $article = Article::find($id);
    return $article;
}

我們通過find()方法從數據庫中查找一條記錄，然后直接返回，我們來看看效果：

4.加載視圖

獲取數據之后，我們需要加載相應地視圖來展示數據，還是修改show()方法：

public function show($id)
{
    $article = Article::find($id);
    return view("articles.show",compact("article"));
}

類似地，我們使用view()加載show.blade.php，然后compact()將變量傳遞過去。所以我們去創建show.blade.php視圖文件吧：

@extends("app")
@section("content")
        
{{ $article->title }}
        

        
{{ $article->content }}
@endsection

這里跟index.blade.php視圖文件差不多，我們只是去掉了@foreach，在來訪問一下看看：

到這里，我們的文章展示頁面也可以說是完成了，然而當我們訪問這個下面這個鏈接的時候：

http://blog.dev/articles/3

報錯了！

這是因為我們在show()方法中使用$article = Article::find($id);來查找一篇文章，但是我們的數據庫中的articles表并沒有id為3的記錄，也就是id為3的時候，$article變量已經是null了，這個時候我們如果還是希望在視圖中使用{{ $article->title }}，所以才會出現錯誤：

Trying to get property of non-object.... 

PS: 如果你想調試，看看$article到底是什么，你可以在laravel中使用dd($article)來調試

那這個要怎么解決呢？有兩種方法：

第一，自己寫個if條件判斷：

public function show($id)
   {
       $article = Article::find($id);
       if(is_null($article)){
           abort(404);
       }
       return view("articles.show",compact("article"));
   }

如果$article為空，直接abort()一個404頁面。再來訪問一下：

這里貌似還是會看到一堆錯誤，為什么呢？那是因為在.env中我們設置了APP_DEBUG=true，所以還會有下面的一堆錯誤，我們在實際的線上部署環境中，APP_DEBUG=false才是我們的設置。我們來體驗一把將APP_DEBUG=false，見證一下我們的404頁面：

這個404頁面，你可以自定義：就是在resources/views/errors/文件夾下創建一個404.blade.php。

實際例子就是這樣的(彩蛋)：

https://jellybool.com/show404page

你也可以在我的blog地址欄隨便輸入一堆東西，看看找不到文章的時候是什么樣的404 page 。

第二，使用findOrFail()

上面的條件判斷其實很不錯了，但是這里我還是推薦使用findOrFail()這個方法：

public function show($id)
    {
        $article = Article::findOrFail($id);
       
        return view("articles.show",compact("article"));
    }

findOrFail()表示首先嘗試find，如果找不到就fail，拋出一個Eloquent Exception，所以我們再來訪問嘗試一下：

我們應該會得到一樣的結果.

然后我們回到我們的index.blade.php中為每篇文章添加鏈接：

  @foreach($articles as $article)
      
{{ $article->title }}
      
{{ $article->intro }}
      

  @endforeach

訪問來看看：

注意我們這里直接使用了href="/articles/{{ $article->id }}"進行鏈接，你也可以使用action()這個方法：

 @foreach($articles as $article)
        
id]) }}">{{ $article->title }}
        
{{ $article->intro }}
        

    @endforeach

action()這個方法第一個參數表明要加載ArticleController的show()方法，跟routes一樣，第二個參數用數組傳入相應地參數[$article->id]。

你還有第三種選擇，使用url()方法：

@foreach($articles as $article)
      
id) }}">{{ $article->title }}
      
{{ $article->intro }}
      

  @endforeach

url()方法第一個參數傳入url路徑，第二個參數直接傳入變量。

上面的三種方法，選擇一種自己喜歡的就可以了。

就寫到這里吧，這一節大概也就是這樣的內容了，不知道這樣介紹，大家對Laravel的Model Controller Views的工作流程清晰了沒，不清晰的話可以評論問我。。。

下一節，我即將說說怎么實現創建一篇文章，就會順帶介紹Laravel的Forms表單。

最后，

Happy Hacking