在本篇文章中,我们将尝试构建一个带后台的简单博客系统。我们将会使用到 路由、MVC、Eloquent ORM 和 blade 视图系统。
简单博客系统规划
我们在教程一中已经新建了一个继承自 Eloquent Model 类的 Article 类,使用 migration 建立了数据表并使用 seeder 填入了测试数据。我们的博客系统暂时将只管理这一种资源:后台需要使用账号密码登录,进入后台之后,可以新增、修改、删除文章;前台显示文章列表,并在点击标题之后显示出文章全文。
下面我们正式开始。
搭建前台
前台的搭建是最简单的,我先带大家找找感觉。
修改路由
删掉
Route::get('/', ("Y-m-d H:i:s"
将Route::get('/home','HomeController@index')->name('home'); ?改为?Route::get('/','HomeController@index')->name('home'); ,现在我们系统的首页就落到了?AppHttpControllersHomeController ?类的?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 :
@('layouts.app'@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</span>="panel-body"><span style="color: #000000">
@</span><span style="color: #0000ff">if</span> (session('status'<span style="color: #000000">))
</span><div <span style="color: #0000ff">class</span>="alert alert-success"><span style="color: #000000">
{{ session(</span>'status'<span style="color: #000000">) }}
</span></div><span style="color: #000000">
@</span><span style="color: #0000ff">endif</span><span style="color: #000000">
You are logged in</span>!
</div>
</div>
</div>
</div>
('layouts.app')
这表示此视图的基视图是?learnlaravel5/resources/views/layouts/app.blade.php ?。这个函数还隐含了一个小知识:在使用名称查找视图的时候,可以使用 . 来代替 / 或 。
('content') ... @endsection
这两个标识符之间的代码,会被放到基视图的?@yield('content') ?中进行输出。
访问首页
首先删除?learnlaravel5/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php ?中?dispatch ?函数里我们加的的 var_dump 代码,否则会出现奇怪的页面。访问??,不出意外的话,你会看到这个页面:

为什么需要登录呢?怎么去掉这个强制登录呢?删掉 HomeController 中的构造函数即可:
->middleware('auth'
这个函数会在控制器类生成对象后第一时间自动载入一个名为 auth 的中间件,正是这一步导致了首页需要登录。删除构造函数之后,重新访问??,页面应该就会直接出来了。这里要注意两点:① 一定要重新访问,不要刷新,因为此时页面的 url 其实是??② 这个页面跟之前的欢迎页虽然看起来一毛一样,但其实文字是不同的,注意仔细观察哦。
向视图文件输出数据
既然 Controller - View 的架构已经运行,下一步就是引入 Model 了。Laravel 中向视图传数据非常简单:
或
view('home')->withArticles(AppArticle::all());
2016 版教程里很多人看到这段代码都十分不解,这里解释一下:
- AppArticle::all() 是采用
绝对命名空间 方式对 Article 类的调用。
- withArticles 是我定义的方法,Laravel 并不提供,这也是 Laravel 优雅的一个表现:Laravel View 采用 __call 来 handle 对未定义 function 的调用,其作用很简单:给视图系统注入一个名为?
$articles ?的变量,这段代码等价于?->with('articles',AppArticle::all()) 。
- 展开讲一下,
->withFooBar(100) ?等价于?->with('foo_bar',100) ,即驼峰变量会被完全转换为蛇形变量。
修改视图文件
修改视图文件?learnlaravel5/resources/views/home.blade.php ?的代码为:
@ ('layouts.app'@section('content'<span style="color: #000000">)
<div id="title" style="text-align: center;">
Learn Laravel 5
( ="title">
->id) }}">
{{ ->title }}
刷新,得到:

如果看到以上页面,恭喜你,Laravel 初体验成功!
调整视图
前台页面是不应该有顶部的菜单栏的,特别是还有注册、登录之类的按钮。接下来我们修改视图内容为:
<title>Learn Laravel 5</title>
<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>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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><span style="color: #000000">
@</span><span style="color: #0000ff">foreach</span> (<span style="color: #800080">$articles</span> <span style="color: #0000ff">as</span> <span style="color: #800080">$article</span><span style="color: #000000">)
</span><li style="margin: 50px 0;">
<div <span style="color: #0000ff">class</span>="title">
<a href="{{ url('article/'.<span style="color: #800080">$article</span>->id) }}">
<h4>{{ <span style="color: #800080">$article</span>->title }}</h4>
</a>
</div>
<div <span style="color: #0000ff">class</span>="body">
<p>{{ <span style="color: #800080">$article</span>->body }}</p>
</div>
</li><span style="color: #000000">
@</span><span style="color: #0000ff">endforeach</span>
</ul>
</div>
|