本教程示例代碼見: https://github.com/johnlui/Learn-Laravel-5
在任何地方卡住,最快的辦法就是去看示例代碼。
在本篇文章中,我們將嘗試構建一個帶后台的簡單博客系統。我們將會使用到 路由、MVC、Eloquent ORM 和 blade 視圖系統。
簡單博客系統規划
我們在教程一中已經新建了一個 Eloquent 的 Model 類 Article,使用 migration 建立了數據表並使用 seeder 填入了測試數據。我們的博客系統暫時將只管理這一種資源:后台需要使用賬號密碼登錄,進入后台之后,可以新增、修改、刪除文章;前台顯示文章列表,並在點擊標題之后顯示出文章全文。
下面我們正式開始。
搭建前台
前台的搭建是最簡單的,我先帶領大家找找感覺。
修改路由
刪掉
Route::get('/', function () { return view('welcome'); });
將 /home 那一行修改為 Route::get('/', 'HomeController@index');
,現在我們系統的首頁就落到了 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')
中進行輸出。
訪問首頁
訪問 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')->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