Laravel教程五：MVC的基本流程

期間受到很多私事影響，終於還是要好好寫寫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') <h1>這是index.blade.php</h1> @endsection

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

替代文字

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

@extends('app') @section('content') @foreach($articles as $article) <h1>{{ $article->title }}</h1> <p>{{ $article->intro }}</p> <hr> @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') <h1>{{ $article->title }}</h1> <hr> <p>{{ $article->content }}</p> @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) <h1><a href="/articles/{{ $article->id }}">{{ $article->title }}</a></h1> <p>{{ $article->intro }}</p> <hr> @endforeach

訪問來看看：

替代文字

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

 @foreach($articles as $article) <h1><a href="{{ action('ArticleController@show',[$article->id]) }}">{{ $article->title }}</a></h1> <p>{{ $article->intro }}</p> <hr> @endforeach

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

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

@foreach($articles as $article) <h1><a href="{{ url('articles/',$article->id) }}">{{ $article->title }}</a></h1> <p>{{ $article->intro }}</p> <hr> @endforeach

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

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

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

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

最后，

Happy Hacking