用laravel4.2实现一个简单的图片墙博客（五）页面设计和布局(View)

最新推荐文章于 2024-07-19 10:39:31 发布

原创最新推荐文章于 2024-07-19 10:39:31 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#PHP #laravel #网页制作 #laravel框架 #数据库

php网页开发同时被 2 个专栏收录

10 篇文章

订阅专栏

laravel

7 篇文章

订阅专栏

本文详细介绍了如何利用 Laravel 4.2 构建一个基本博客的服务端代码，包括数据库配置、控制器配置、路由配置和模型设计。重点讲解了页面设计过程，从主页面生成逻辑到具体实现，如如何在 master.blade.php 中定义标题、顶部导航栏、副标题、页脚等，并展示了如何通过控制器生成分页机制展示图片和描述。同时，文章提供了首页、图片显示页面和相关视图的代码片段，以及最终实现的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面四章我们简单地介绍了如何用laravel4.2构建一个基本博客的服务端代码，包括了数据库配置、控制器配置、路由配置和模型设计,这些都是该博客的后端部分，也是整个博客得以架构起来的基础，体现了整个博客运行、路由、运算的所有逻辑，在这些逻辑之上，展现出我们要展现给用户的界面和功能。

接下来，我们简要介绍一下页面的设计。我们一开始设立的目标很简单，用户可以po图片在博客上，博客分为标题、图片、描述、以及它的所有评论，删除图片时会把该图片对应的所有信息都依次删除。但是所有的页面数量并不少，而且这部分代码算是最多了，基本都是时间活儿，慢慢修改和调整。

先介绍一下home页面，主页面：

主页面生成的逻辑：

在BaseController.php中，有一句

protected $layout = 'master';

然后所有的Controller类都继承自这个控制器基类，这表明我们所有的控制器的主页面都是由master.blade.php指定的，路由到任意一个控制器时，都会把这个master界面作为主界面

1#......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> <!-- using {{$title}} is bad here eg:</title><script>alert('hello')</script> -->
    @show
    {{ HTML::style('assets/css/foundation.css') }}
    {{ HTML::style('assets/css/custom.css') }}
    
</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('/','Picture Blog')}}</h1>
                    <h2>A simple blog about a set of pictures with description and comments to them.</h2>
                    <h2>using Laravel 4.2</h2>
                </hgroup>
            </div>
        </header>
    </div>
    <div class="row">
    <span style="white-space:pre">	</span><div class="small-12 large-12 column">
        <span style="white-space:pre">	</span>{{$main}}
        </div>
    </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>
{{ HTML::script('./assets/js/vendor/custom.modernizr.js') }}
</body>
</html>

css,js的相关内容，请参考 w3cscholl教程其实你还能在里面学到更多php、html、html5的东西，关于界面设计，很多都是经验的东西，基本上过一遍教程，就能自己动手开始设计设计了，参考教程的案例，可以更加丰富对相关模块的理解。

基本上，在master这个view里，我们定义了title($title由页面生成时代码指定)，topbar，sub-header，footer，算是主页的全部修饰，之后所有页面，都会带上这些修饰。倘若我们需要在某个页面中不使用这个模板来修饰，也可以在相关的控制器中重新指定$layout来修改默认布局。

具体每一个html类怎么定义它们的属性，都写在几个css文件中，这些都可以自行设计，或者参考我之后放出的代码。

有读者会发现效果和我第一章放出的参考链接uncletoo 很像，因为是学习阶段，页面设计这块我基本都参考了源码，但为了更好地对页面设计有个了解，我对每一个模块都作了自己的修改，至少能知道怎么看代码，怎么修改，以及套上一些自己的想法。

基本效果图：

蓝色的部分，以及topbar都是master中定义的模板，那中间的部分又是什么呢？

其实我们进入首页链接的时候，就已经放出一个路由'/'，在routes.php中有初始路由的定向：

Route::controller('/', 'BlogController');

由于初始路由之后没有其他信息了，它默认调用index，即BlogController的getIndex()方法

public function getIndex()
    {
        $pictures = Picture::orderBy('id', 'desc')->paginate(10);
        $pictures->getFactory()->setViewName('pagination::simple');
        $this->layout->title = 'Home Page | Picture Wall Blog';
        $this->layout->main = View::make('home')->nest('content', 'index', compact('pictures'));
    }

首先它定义了一个分页机制，每一页10张图片的信息

它赋值了title的值（详见master.blade.php中的header部分{{{$title}}})，$this->layout->main代表master模板中的

<div class="row">
        {{$main}}
    </div>

它被一个新生成的view替代：home：

2#......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>

nest函数代表了将其中的$content部分替代为index。compach是一个php函数，用来把变量和它的值构成一个数组，表示index需要使用的数据集pictures：

3#......index.blade.php:

对每一个图片，我们都显示一个块来显示它们

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

好了，博客的实现就全部介绍到这里，感谢uncletoo博客教程，让我学到了很多，实现好每一个模块之后我会放出源码！

源码下载地址