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

下面我们正式开始。

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

删掉

将 改为 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

  1. @extends('layouts.app')
  2.  
  3. @section('content')
  4. <div class="container">
  5. <div class="row">
  6. <div class="col-md-8 col-md-offset-2">
  7. <div class="panel panel-default">
  8. <div class="panel-heading">Dashboard</div>
  9.  
  10. <div class="panel-body">
  11. @if (session('status'))
  12. <div class="alert alert-success">
  13. {{ session('status') }}
  14. @endif
  15.  
  16. You are logged in!
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. @endsection

@extends('layouts.app')

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

@Section('content') …

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

首先删除 中 dispatch 函数里我们加的的 var_dump 代码,否则会出现奇怪的页面。访问 ,不出意外的话,你会看到这个页面:

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

  1. public function __construct()
  2. {
  3. $this->middleware('auth');
  4. }

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

向视图文件输出数据

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

  1. public function index()
  2. {
  3. return view('home')->withArticles(\App\Article::all());
  4. }

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

  1. @extends('layouts.app')
  2.  
  3. @section('content')
  4. <div id="title" style="text-align: center;">
  5. <h1>Learn Laravel 5</h1>
  6. <div style="padding: 5px; font-size: 16px;">Learn Laravel 5</div>
  7. </div>
  8. <hr>
  9. <div id="content">
  10. <ul>
  11. @foreach ($articles as $article)
  12. <li style="margin: 50px 0;">
  13. <div class="title">
  14. <a href="{{ url('article/'.$article->id) }}">
  15. <h4>{{ $article->title }}</h4>
  16. </a>
  17. </div>
  18. <div class="body">
  19. </div>
  20. </li>
  21. @endforeach
  22. </ul>
  23. </div>
  24. @endsection

刷新,得到:

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

此视图文件变成了一个独立视图,不再有基视图,并且将 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">

  1. <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  3. <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

生成控制器

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

  1. php artisan make:controller Admin/HomeController

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

增加路由

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

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

上一篇文章中我们已经接触到了路由组,这是 Laravel 的另一个伟大创造。路由组可以给组内路由一次性增加 命名空间、uri 前缀、域名限定、中间件 等属性,并且可以多级嵌套,异常强大。路由组中文文档在此:

上面的三行代码的功能简单概括就是:访问这个页面必须先登录,若已经登录,则将 http://fuck.io:1024/admin 指向 App\Http\Controllers\Admin\HomeController 的 index 方法。其中需要登录由 middleware 定义,/admin 由 定义,Adminnamespace 定义,HomeController 是实际的类名。

新建 index 方法

在新生成的 learnlaravel5/app/Http/Controllers/Admin/HomeController.php 文件中增加一个 function:

  1. public function index()
  2. {
  3. return view('admin/home');
  4. }

新建后台首页视图文件

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

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

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

  1. protected $redirectTo = '/admin';

尝试登录

访问 ,它会跳转到登陆界面,输入邮箱和密码之后,你应该会看到如下页面:

2017 版 Laravel 系列入门教程(三)【最适合中国人的 Laravel 教程】 - 图4

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

构建 Article 后台管理功能

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

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

添加路由

404 错误是访问了系统没有监听的路由导致的。下面我们要添加针对 的路由:

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

刷新,出现详细报错信息了:

进步之道

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

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

新建控制器

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

  1. php artisan make:controller Admin/ArticleController

刷新,错误又变了:

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

  1. public function index()
  2. {
  3. return view('admin/article/index')->withArticles(Article::all());
  4. }

新建视图

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

刷新,错误又变了:

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

  1. <?php
  2.  
  3. namespace App\Http\Controllers\Admin;
  4.  
  5. use Illuminate\Http\Request;
  6. use App\Http\Controllers\Controller;
  7.  
  8. use App\Article;
  9.  
  10. class ArticleController extends Controller
  11. {

如果你还不熟悉命名空间,请阅读《PHP 命名空间 解惑》

检查成果

再次刷新,你应该能看到如下画面:

2017 版 Laravel 系列入门教程(三)【最适合中国人的 Laravel 教程】 - 图9

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

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

原文: https://github.com/johnlui/Learn-Laravel-5/issues/18