您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP技术 > PHP应用

使用 Laravel4 创建博客(完结):布局与视图

作者:UncleToo  来源:原创  日期:2014-03-25 7:56:25
收藏  评论:( 6 )  阅读:5832

提示:如果你是首次看到这篇文章,请移步至以下两篇文章:

使用 Laravel4 创建博客(一):Models and Seeding

使用 Laravel4 创建博客(二):Controllers/控制器

使用 Laravel4 创建博客(三):Routing/路由


本文是 Laravel4 创建博客系列的最后一节,在这篇文章中,我们将讨论学习博客的布局与创建视图。在这之前我们已经学习过:

  • Laravel设置

  • Laravel迁移

  • 创建Model

  • Seeding数据库

  • 控制器

  • 路由


视图:MVC中的V

视图在MVC的web框架中用于隔离业务层,表示逻辑和应用程序逻辑。在一个典型的MVC web框架中,每当接收到一个请求时,路由组件解析请求,并选择正确的控制器action来处理请求。首先是控制器action,然后获取所请求的数据模型,并将其传递到视图,最后,返回包含由视图来显示数据生成的HTML标记的响应。

现在我们看看下面的示例:

文件: app/controllers/IndexController.php

<?php
class IndexController extends BaseController {
    public function index()
    {
        return View::make('index',['name'=>'usman']);
    }
}


文件: app/routes.php

Route::get('index','IndexController@index');


文件: app/views/index.blade.php

<html>
<head>
    <title>Index page</title>
</head>
<body>
    <p> my name is {{$name}}</p>
</body>
</html>


在上面几个文件中,IndexController.php文件包含了一个简单的索引操作的控制器类。在routes.php文件中,我们使用路由Route::get()注册action,在index()中我们使用变量name根据index.blade.php生成一个视图,最后name变量展示在index.blade.php文件的p标签中。


主布局

主布局用于定义一个应用程序的统一外观,通常包含所有视图中通用的元素,如页眉、页脚、侧边栏等等。Laravel创建主要布局有两种选择:

  • 控制器的布局

  • 叶片模板继承

一直以来,我们所创建的控制器都是设置的控制器布局,叶片模板继承不在我们讨论范围内。

下面我们看一个大师级的标记布局(app/views/master.blade.php):

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    @section('title')
        <title>{{{$title}}}</title>
    @show
    {{ HTML::style('assets/css/foundation.css') }}
    {{ HTML::style('assets/css/custom.css') }}
    {{ HTML::script('./assets/js/vendor/custom.modernizr.js') }}
</head>
<body>
<div class="row main">
    <div class="small-12 large-12 column" id="masthead">
        <header>
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <!-- Title Area -->
                    <li class="name"></li>
                    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <ul class="left">
                        <li class="{{(strcmp(URL::full(), URL::to('/')) == 0) ? 'active' : ''}}"><a href="{{URL::to('/')}}">Home</a></li>
                    </ul>
                    <ul class="right">
                        @if(Auth::check())
                            <li class="{{ (strpos(URL::current(), URL::to('admin/dash-board'))!== false) ? 'active' : '' }}">
                                {{HTML::link('admin/dash-board','Dashboard')}}
                            </li>
                            <li class="{{ (strpos(URL::current(), URL::to('logout'))!== false) ? 'active' : '' }}" >
                                {{HTML::link('logout','Logout')}}
                            </li>
                        @else
                            <li class="{{ (strpos(URL::current(), URL::to('login'))!== false) ? 'active' : '' }}">
                                {{HTML::link('login','Login')}}
                            </li>
                        @endif
                    </ul>
                </section>
            </nav>
            <div class="sub-header">
                <hgroup>
                    <h1>{{HTML::link('/','Laravel 4 Blog')}}</h1>
                    <h2>Laravel 4 Simple Blog tutorial</h2>
                </hgroup>
            </div>
        </header>
    </div>
    <div class="row">
        {{$main}}
    </div>
    <div class="row">
        <div class="small-12 large-12 column">
            <footer class="site-footer"></footer>
        </div>
    </div>
</div>
{{ HTML::script('./assets/js/vendor/jquery.js') }}
{{ HTML::script('./assets/js/foundation.min.js') }}
<script>
    $(document).foundation();
</script>
</body>
</html>

注1:

在控制器中使用主布局,我们需要在BaseController中定义 protected $layout='master';,因此所有控制器都将继承layout属性。

注2:

这里我们使用的是Foundation 5 的框架,点击这里了解Foundation 5 框架。


在主布局的头部(head标签部分),我们使用HTML::style()方法链接样式表,该方法生成的link标签中href值为参数传递的path属性。同样,HTML::script()是用来产生所需要的Javascript文件的链接。在头部,

在header标签中,我们定义博客的导航,其中的标签表达式用来显示活动链。只有用户登陆后,才会显示控制面板及注销链接。{{$main}}标签用于在控制器中插入子视图。


下面是BlogController控制器中getIndex的代码片段:

<?php
//used to set the title variable in master layout.
$this->layout->title = 'Home Page | Laravel 4 Blog';
//used to insert partial view named as home.blade.php in the master layout.
//by using nest() we are injecting index view in the home view, exciting huh?
$this->layout->main = View::make('home')->nest('content','index',compact('posts'));


创建视图

app/views目录是用于保存应用程序的视图文件。下面是我们的博客程序的视图目录图截:

首页:index 和 sidebar

home.blade.php

{{-- home page --}}
<div class="small-8 large-8 column">
  <div class="content">
    {{$content}}
  </div>
</div>
<div class="small-4 large-4 column">
  <aside class="sidebar">
    @include('sidebar')
  </aside>
</div>


index.blade.php

@if(!empty($notFound))
<p>Sorry nothing found for your query!</p>
@else
@foreach($posts as $post)
    <article class="post">
        <header class="post-header">
            <h1 class="post-title">
                {{link_to_route('post.show',$post->title,$post->id)}}
            </h1>
            <div class="clearfix">
                <span class="left date">{{explode(' ',$post->created_at)[0]}}</span>
                <span class="right label">{{$post->comment_count}} comments </span>
            </div>
        </header>
        <div class="post-content">
            <p>{{$post->read_more.' ...'}}</p>
            <span>{{link_to_route('post.show','Read full article',$post->id)}}
        </div>
        <footer class="post-footer">
            <hr>
        </footer>
    </article>
@endforeach
{{$posts->links()}}
@endif


sidebar.blade.php

{{ Form::open(['url' => 'search','method'=>'get']) }}
    <div class="row">
        <div class="small-8 large-8 column">
            {{ Form::text('s',Input::old('username'),['placeholder'=>'Search blog...']) }}
        </div>
            {{ Form::submit('Search',['class'=>'button tiny radius']) }}
    </div>
{{ Form::close() }}
<div>
    <h3>Recent Posts</h3>
    <ul>
    @foreach($recentPosts as $post)
        <li>{{link_to_route('post.show',$post->title,$post->id)}}</li>
    @endforeach
    </ul>
</div>


首页包含两个DIV元素,一个显示索引内容,另一个是用来包括侧边栏使用叶片局部视图的 @include指令。

在index.blade.php文件中,我们遍历显示所有的文章,并添加 Read More 链接。如图:


视图组装器

Laravel框架中的视图组装器,可以帮助我们回调定义在视图中的逻辑,我们可以随时使用View::composer()注册回调机制。当一个视图呈现的回调注册,Laravel将在执行回调之前呈现视图。

大家可能注意到,在侧边栏的控制器中我们没有传递任何$recentPosts变量,实际上是通过使用View Composer回调来填充这个变量:

<?php
 View::composer('sidebar', function($view)
{
    $view->recentPosts = Post::orderBy('id','desc')->take(5)->get();
});


控制面板、文章列表、评论列表

dash.blade.php

<div class="small-3 large-3 column">
    <aside class="sidebar">
        <h3>Menu</h3>
        <ul class="side-nav">
            <li>{{HTML::link('/','Home')}}</li>
            <li class="divider"></li>
            <li class="{{ (strpos(URL::current(),route('post.new'))!== false) ? 'active' : '' }}">
                {{HTML::linkRoute('post.new','New Post')}}
            </li >
            <li class="{{ (strpos(URL::current(),route('post.list'))!== false) ? 'active' : '' }}">
                {{HTML::linkRoute('post.list','List Posts')}}
            </li>
            <li class="divider"></li>
            <li class="{{ (strpos(URL::current(),route('comment.list'))!== false) ? 'active' : '' }}">
                {{HTML::linkRoute('comment.list','List Comments')}}
            </li>
        </ul>
    </aside>
</div>
<div class="small-9 large-9 column">
    <div class="content">
        @if(Session::has('success'))
        <div data-alert class="alert-box round">
            {{Session::get('success')}}
            <a href="#" class="close">&times;</a>
        </div>
        @endif
        {{$content}}
    </div>
    <div id="comment-show" class="reveal-modal small" data-reveal>
        {{-- quick comment using ajax --}}
    </div>
</div>


在控制面板,CRUD(增加、查询、修改、删除)链接在左边栏显示,右边用于插入执行CRUD操作,如发文章、评论的管理。

Foundation 5 中Reveal Modal 插件内置了Ajax功能,最下面的div模块用来显示ajax内容。


posts/list.blade.php

<h2 class="post-listings">Post listings</h2><hr>
<table>
    <thead>
    <tr>
        <th width="300">Post Title</th>
        <th width="120">Post Edit</th>
        <th width="120">Post Delete</th>
        <th width="120">Post View</th>
    </tr>
    </thead>
    <tbody>
        @foreach($posts as $post)
            <tr>
                <td>{{$post->title}}</td>
                <td>{{HTML::linkRoute('post.edit','Edit',$post->id)}}</td>
                <td>{{HTML::linkRoute('post.delete','Delete',$post->id)}}</td>
                <td>{{HTML::linkRoute('post.show','View',$post->id,['target'=>'_blank'])}}</td>
            </tr>
        @endforeach
    </tbody>
</table>
{{$posts->links()}}


comments/list.blade.php

<h2 class="comment-listings">Comment listings</h2><hr>
<table>
    <thead>
    <tr>
        <th>Commenter</th>
        <th>Email</th>
        <th>At Post</th>
        <th>Approved</th>
        <th>Comment Delete</th>
        <th>Comment View</th>
    </tr>
    </thead>
    <tbody>
    @foreach($comments as $comment)
    <tr>
        <td>{{{$comment->commenter}}}</td>
        <td>{{{$comment->email}}}</td>
        <td>{{$comment->post->title}}</td>
        <td>
            {{Form::open(['route'=>['comment.update',$comment->id]])}}
            {{Form::select('status',['yes'=>'Yes','no'=>'No'],$comment->approved,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
            {{Form::close()}}
        </td>
        <td>{{HTML::linkRoute('comment.delete','Delete',$comment->id)}}</td>
        <td>{{HTML::linkRoute('comment.show','Quick View',$comment->id,['data-reveal-id'=>'comment-show','data-reveal-ajax'=>'true'])}}</td>
    </tr>
    @endforeach
    </tbody>
</table>
{{$comments->links()}}


关于使用 Laravel4 创建博客到此全部结束,完整源码在下面可以下载到,感谢大家对UncleToo的支持,如果您有更好的意见,请给我们留言。


下载完整源码



Laravel
 
视图
 
MVC
 
除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/application/877.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论