Laravel 系列入门教程三【最适合中国人的 Laravel 教程】

在本篇文章中，我们将尝试构建一个带后台的简单博客系统。我们将会使用到路由、MVC、Eloquent ORM 和 blade 视图系统。

简单博客系统规划

我们在教程一中已经新建了一个继承自 Eloquent Model 类的 Article 类，使用 migration 建立了数据表并使用 seeder 填入了测试数据。我们的博客系统暂时将只管理这一种资源：后台需要使用账号密码登录，进入后台之后，可以新增、修改、删除文章；前台显示文章列表，并在点击标题之后显示出文章全文。

下面我们正式开始。

搭建前台

前台的搭建是最简单的，我先带大家找找感觉。

修改路由

删掉

Route::get('/',<span style=color: #0000ff>function<span style=color: #000000> () {<span style=color: #0000ff>return <span style=color: #008080>date(Y-m-d H:i:s<span style=color: #000000>);
});

将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：

@<span style=color: #0000ff>extends('layouts.app'<span style=color: #000000>)

@section('content'<span style=color: #000000>)
<div <span style=color: #0000ff>class=container><div <span style=color: #0000ff>class=row><div <span style=color: #0000ff>class=col-md-8 col-md-offset-2><div <span style=color: #0000ff>class=panel panel-default><div <span style=color: #0000ff>class=panel-heading>Dashboard<div <span style=color: #0000ff>class=panel-body><span style=color: #000000>
                    @<span style=color: #0000ff>if (session('status'<span style=color: #000000>))<div <span style=color: #0000ff>class=alert alert-success><span style=color: #000000>
                            {{ session('status'<span style=color: #000000>) }}<span style=color: #000000>
                    @<span style=color: #0000ff>endif<span style=color: #000000>

                    You are logged in!<span style=color: #000000>
@endsection

<a class=user-mention href=https://github.com/extends data-hovercard-type=user data-hovercard-url=/hovercards?user_id=727802 data-octo-click=hovercard-link-click data-octo-dimensions=link_type:self>@extends('layouts.app')

这表示此视图的基视图是 learnlaravel5/resources/views/layouts/app.blade.php 。这个函数还隐含了一个小知识：在使用名称查找视图的时候，可以使用 . 来代替 / 或 \。

<a class=user-mention href=https://github.com/Section data-hovercard-type=user data-hovercard-url=/hovercards?user_id=3486656 data-octo-click=hovercard-link-click data-octo-dimensions=link_type:self>@Section('content') ... @endsection

这两个标识符之间的代码，会被放到基视图的 @yield('content') 中进行输出。

访问首页

首先删除 learnlaravel5/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php 中 dispatch 函数里我们加的的 var_dump 代码，否则会出现奇怪的页面。访问 <a href=http://fuck.io:1024/ rel=nofollow>http://fuck.io:1024 ，不出意外的话，你会看到这个页面：

为什么需要登录呢？怎么去掉这个强制登录呢？删掉 HomeController 中的构造函数即可：

<span style=color: #0000ff>public <span style=color: #0000ff>function<span style=color: #000000> __construct()
{<span style=color: #800080>$this->middleware('auth'<span style=color: #000000>);
}

这个函数会在控制器类生成对象后第一时间自动载入一个名为 auth 的中间件，正是这一步导致了首页需要登录。删除构造函数之后，重新访问 <a href=http://fuck.io:1024/ rel=nofollow>http://fuck.io:1024 ，页面应该就会直接出来了。这里要注意两点：① 一定要重新访问，不要刷新，因为此时页面的 url 其实是 <a href=http://fuck.io:1024/login rel=nofollow>http://fuck.io:1024/login ② 这个页面跟之前的欢迎页虽然看起来一毛一样，但其实文字是不同的，注意仔细观察哦。

向视图文件输出数据

既然 Controller - View 的架构已经运行，下一步就是引入 Model 了。Laravel 中向视图传数据非常简单：

<span style=color: #0000ff>public <span style=color: #0000ff>function<span style=color: #000000> index()
{

<span style=color: #0000ff>　　return view('home'，$assign);

<span style=color: #000000> }

或

<span style=color: #0000ff>public <span style=color: #0000ff>function<span style=color: #000000> index()
{<span style=color: #0000ff>return view('home')->withArticles(\App\Article::all());

<span style=color: #000000> }

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 的代码为：

@<span style=color: #0000ff>extends('layouts.app'<span style=color: #000000>)

@section('content'<span style=color: #000000>)<div id=title style=text-align: center;>Learn Laravel 5<div style=padding: 5px; font-size: 16px;>Learn Laravel 5<div id=content><span style=color: #000000>
            @<span style=color: #0000ff>foreach (<span style=color: #800080>$articles <span style=color: #0000ff>as <span style=color: #800080>$article<span style=color: #000000>)<li style=margin: 50px 0;><div <span style=color: #0000ff>class=title><a href={{ url('article/'.<span style=color: #800080>$article->id) }}>{{ <span style=color: #800080>$article->title }}<div <span style=color: #0000ff>class=body>{{ <span style=color: #800080>$article->body }}<span style=color: #000000>
            @<span style=color: #0000ff>endforeach<span style=color: #000000>
@endsection

刷新，得到：

如果看到以上页面，恭喜你，Laravel 初体验成功！

调整视图

前台页面是不应该有顶部的菜单栏的，特别是还有注册、登录之类的按钮。接下来我们修改视图内容为：

<html lang=en>
<meta charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=edge><meta name=viewport content=width=device-width,initial-scale=1>Learn Laravel 5<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 src=//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js><div id=title style=text-align: center;>Learn Laravel 5<div style=padding: 5px; font-size: 16px;>Learn Laravel 5<div id=content><span style=color: #000000>
            @<span style=color: #0000ff>foreach (<span style=color: #800080>$articles <span style=color: #0000ff>as <span style=color: #800080>$article<span style=color: #000000>)<li style=margin: 50px 0;><div <span style=color: #0000ff>class=title><a href={{ url('article/'.<span style=color: #800080>$article->id) }}>{{ <span style=color: #800080>$article->title }}<div <span style=color: #0000ff>class=body>{{ <span style=color: #800080>$article->body }}<span style=color: #000000>
            @<span style=color: #0000ff>endforeach

此视图文件变成了一个独立视图，不再有基视图，并且将 jQuery 和 BootStrap 替换为了国内的 CDN，更快更稳定了。

同理我们修改 learnlaravel5/resources/views/layouts/app.blade.php：

① 删除 <script src={{ asset('js/app.js') }}>② 替换 <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 src=//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js>

接下来我们来着手搭建后台。

搭建后台

生成控制器

我们使用 Artisan 工具来生成控制器文件及代码：

php artisan make:controller Admin/HomeController

成功之后，我们就可以看到 artisan 帮我们建立的文件夹及控制器文件了：

增加路由

我们要使用路由组来将后台页面置于“需要登录才能访问”的中间件下，以保证安全。在 web.php 里增加下面三行：

Route::group(['middleware' => 'auth','namespace' => 'Admin','prefix' => 'admin'],<span style=color: #0000ff>function<span style=color: #000000>() {
    Route::get('/','HomeController@index'<span style=color: #000000>);
});

上一篇文章中我们已经接触到了路由组，这是 Laravel 的另一个伟大创造。路由组可以给组内路由一次性增加命名空间、uri 前缀、域名限定、中间件等属性，并且可以多级嵌套，异常强大。路由组中文文档在此：<a href=https://d.laravel-china.org/docs/5.5/routing#route-groups rel=nofollow>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：

<span style=color: #0000ff>public <span style=color: #0000ff>function<span style=color: #000000> index()
{<span style=color: #0000ff>return view('admin/home'<span style=color: #000000>);
}

新建后台首页视图文件

在 learnlaravel5/resources/views/ 目录下新建一个名为 admin 的文件夹，在 admin 内新建一个名为 home.blade.php 的文件，填入代码：

@<span style=color: #0000ff>extends('layouts.app'<span style=color: #000000>)

@section('content'<span style=color: #000000>)
<div <span style=color: #0000ff>class=container><div <span style=color: #0000ff>class=row><div <span style=color: #0000ff>class=col-md-10 col-md-offset-1><div <span style=color: #0000ff>class=panel panel-default><div <span style=color: #0000ff>class=panel-heading>Learn Laravel 5 后台<div <span style=color: #0000ff>class=panel-body><a href={{ url('admin/article') }} <span style=color: #0000ff>class=btn btn-lg btn-success col-xs-12>管理文章<span style=color: #000000>
@endsection

修改 Auth 系统登陆成功之后的跳转路径

修改 learnlaravel5/app/Http/Controllers/Auth/LoginController.php 中相应的代码为：

<span style=color: #0000ff>protected <span style=color: #800080>$redirectTo = '/admin';

尝试登录

访问 <a href=http://fuck.io:1024/admin rel=nofollow>http://fuck.io:1024/admin ，它会跳转到登陆界面，输入邮箱和密码之后，你应该会看到如下页面：

恭喜你，后台首页搭建完成！下面我们开始构建 Article 的后台管理功能。

构建 Article 后台管理功能

让我们先尝试点一下 “管理文章”按钮，不出意外你将得到一个报错：

这是 Laravel 5.5 刚刚引入的新策略：404 错误不再报告详细信息，而是展示一个友好的 404 页面。

添加路由

404 错误是访问了系统没有监听的路由导致的。下面我们要添加针对 http://fuck.io:1024/admin/article 的路由：

Route::group(['middleware' => 'auth','HomeController@index'<span style=color: #000000>);
    Route::get('article','ArticleController@index'<span style=color: #000000>);
});

刷新，出现详细报错信息了：

进步之道

很多新手看到这个报错直接就慌了：什么鬼？全是英文看不懂呀。然后在文章下面把完整的错误栈全部粘贴出来。老实说我第一次见到 Laravel 报这个错也是完全没耐心去读，不过我还是复制了最明显的那句话“Class App\Http\Controllers\Admin\ArticleController does not exist”去 Google 了一下，从此我就再也没搜索过它了。

如果你遇到了奇怪的报错，不要慌，稳住，Google 一下，我们能赢。

新建控制器

上图中的报错是控制器不存在。我们使用 Artisan 来新建控制器：

php artisan make:controller Admin/ArticleController

刷新，错误又变了：

index 方法不存在。让我们新增 index 方法：

<span style=color: #0000ff>public <span style=color: #0000ff>function<span style=color: #000000> index()
{<span style=color: #0000ff>return view('admin/article/index')->withArticles(Article::<span style=color: #000000>all());
}

新建视图

上面我们已经新建过视图，现在应该已经轻车熟路了。在 learnlaravel5/resources/views/admin 下新建 article 文件夹，在文件夹内新建一个 index.blade.php 文件，内容如下：

@<span style=color: #0000ff>extends('layouts.app'<span style=color: #000000>)

@section('content'<span style=color: #000000>)
<div <span style=color: #0000ff>class=container><div <span style=color: #0000ff>class=row><div <span style=color: #0000ff>class=col-md-10 col-md-offset-1><div <span style=color: #0000ff>class=panel panel-default><div <span style=color: #0000ff>class=panel-heading>文章管理<div <span style=color: #0000ff>class=panel-body><span style=color: #000000>
                    @<span style=color: #0000ff>if (<span style=color: #008080>count(<span style=color: #800080>$errors) > 0<span style=color: #000000>)<div <span style=color: #0000ff>class=alert alert-danger><span style=color: #000000>
                            {!! <span style=color: #008080>implode('
',<span style=color: #800080>$errors->all()) !!<span style=color: #000000>}<span style=color: #000000>
                    @<span style=color: #0000ff>endif<a href={{ url('admin/article/create') }} <span style=color: #0000ff>class=btn btn-lg btn-primary>新增<span style=color: #000000>

                    @<span style=color: #0000ff>foreach (<span style=color: #800080>$articles <span style=color: #0000ff>as <span style=color: #800080>$article<span style=color: #000000>)[object Object]<div <span style=color: #0000ff>class=article><div <span style=color: #0000ff>class=content><a href={{ url('admin/article/'.<span style=color: #800080>$article->id.'/edit') }} <span style=color: #0000ff>class=btn btn-success>编辑<form action={{ url('admin/article/'.<span style=color: #800080>$article->id) }} method=POST style=display: inline;><span style=color: #000000>
                            {{ method_field('DELETE'<span style=color: #000000>) }}
                            {{ csrf_field() }}<button type=submit <span style=color: #0000ff>class=btn btn-danger>删除<span style=color: #000000>
                    @<span style=color: #0000ff>endforeach<span style=color: #000000>
@endsection

刷新，错误又变

Article 类不存在？原因很简单：Article 类和当前控制器类不在一个命名空间路径下，不能直接调用。解决办法就是主动导入 \App\Article 类：

<?<span style=color: #000000>php

namespace App\Http\Controllers\Admin;

<span style=color: #0000ff>use<span style=color: #000000> Illuminate\Http\Request;
<span style=color: #0000ff>use<span style=color: #000000> App\Http\Controllers\Controller;

<span style=color: #0000ff>use<span style=color: #000000> App\Article;

<span style=color: #0000ff>class ArticleController <span style=color: #0000ff>extends<span style=color: #000000> Controller
{
....

如果你还不熟悉命名空间，请阅读<a href=https://lvwenhan.com/php/401.html rel=nofollow>《PHP 命名空间解惑》。

检查成果

再次刷新，你应该能看到如下画面：

如果你没到这个画面也不用担心，根据错误提示去 Google 吧，一定能解决的。

新增、编辑、删除功能怎么办？

这三个功能我将在下一篇教程与大家分享，这是 2015 版 Laravel 教程做的不够好的地方，其实这里才是最应该掰开揉碎仔细讲解的地方。

<p style=text-align: right><span style=font-size: 12px>转载他处，侵权联系删除