【Laravel5.3 笔记整理八】Laravel视图（二）逻辑控制、模板布局、文件包含

最新推荐文章于 2025-04-22 17:34:15 发布

studyphp123

最新推荐文章于 2025-04-22 17:34:15 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Laravel 文章标签： laravel5.3 laravel视图-逻辑控制 laravel视图-模板布局 laravel视图-文件包含

本文链接：https://blog.youkuaiyun.com/studyphp123/article/details/81871431

Laravel 专栏收录该内容

12 篇文章

订阅专栏

这篇博客详细介绍了Laravel5.3中的视图操作，包括逻辑控制如if、for、while、嵌套和foreach循环的使用，以及模板布局的创建，如新建公共目录、后台公共文件的设置，并讲解了如何在普通页面中应用布局。此外，还讨论了文件包含的实践，如何组织公共资源文件以提高代码复用性。

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

1. 逻辑控制

1） if 语句

将下面的代码写入 shitu1.blade.php

@if($qiangge > 100)
    <h2>胖美女</h2>
@elseif($qiangge > 80)
    <h2>中美女</h2>
@else
    <h2>瘦美女</h2>
@endif

实例：

web.php

Route::get('shitu1', "ShiTuController@index1");

app / Http / Controllers / ShiTuController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

class ShiTuController extends Controller
{
    public function index1()
    {
        // 传入一个变量 qiangge ,体重为 80
        return view('shitu1')->with('qiangge', 80);
    }
}

resources / views / shitu1.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视图1</title>
</head>
<body>
    <h1>我是视图1页面</h1>

    @if ($qiangge > 100)
        <h2>胖美女</h2>
    @elseif($qiangge > 80)
        <h2>中美女</h2>
    @else
        <h2>瘦美女</h2>
    @endif

</body>
</html>

运行结果：

laravel视图-逻辑控制(if判断)

2） for 循环【常用】

将下面的代码写入 shitu1.blade.php

@for($i=0; $1<=10; $i++)

    <h2>{{$i}}</h2>

@endfor

实例：

web.php

Route::get('shitu1', "ShiTuController@index1");

app / Http / Controllers / ShiTuController.php

namespace App\Http\Controllrs;

use Illuminate\Http\Request;

use App\Http\Requests;

class ShiTuController extends Controller
{
    public function index1()
    {
        return view('shitu1');
    }
}

resources / views / shitu1.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视图1</title>
</head>
<body>
    @for($i=0; $i<=10; $i++)

        <h2>{{$i}}</h2>

    @endfor
</body>
</html>

运行结果：

laravel视图 - 逻辑控制(for循环)

3） while 循环【不推荐使用】

将代码写入 shitu1.blade.php

{{$y=0}}
@while($y <= 5)

    {{$y++}}

    <h2>{{$y}}</h2>

@endwhile

实例：

web.php

Route::get('shitu1', "ShiTuController@index1");

app / Http / Controllers / ShiTuController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

class ShiTuController extends Controller
{
    public function index1()
    {
        return view('shitu1');
    }
}

resources / views / shitu1.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视图1</title>
</head>
<body>

    {{$y=0}}
    @while($y <= 5)

        {{$y++}}

        <h2>{{$y}}</h2>

    @endwhile


</body>
</html>

运行结果：

laravel视图 - 逻辑控制(while循环)

4）嵌套

以下代码写入 shitu1.blade.php

// 隔行换色
@for($i=0; $i<=10; $i++)

    @if($i%2)
        <h2 style="background:red">{{$i}}</h2>
    @else
        <h2 style="background:blue">{{$i}}</h2>
    @endif

@endfor

实例：

效果：实现隔行换色

web.php

Route::get('shitu1', "ShiTuController@index1");

app / Http / Controllers / ShiTuController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

class ShiTuController extends Controller
{
    public function index1()
    {
        return view('shitu1');
    }
}

resources / views / shitu1.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视图1</title>
</head>
<body>
    <h1>我是视图1页面</h1>

    {{-- 隔行换色 --}}
    @for($i=0; $i<=10; $i++)

        @if($i%2)
            <h2 style="background:red">{{$i}}</h2>
        @else
            <h2 style="background:blue">{{$i}}</h2>
        @endif

    @endfor
</body>
</html>

运行结果：

laravel视图-逻辑控制(综合实例)

5） foreach 遍历

将以下代码写入 shitu1.blade.php

@foreach($data as $key => $value)
    <tr>
        <th>{{$value->id}}</th>
        <th>{{$value->name}}</th>
        <th>{{$value->pass}}</th>
        @if($value->status)
            <th>正常</th>
        @else
            <th>禁用</th>
        @endif
        <th>{{$value->time}}</th>
    </tr>
@endforeach

实例：

web.php

Route::get('shitu1', "ShiTuController@index1");

app / Http / Controllers / ShiTuController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use DB;

class ShiTuController extends Controller
{
    public function index1()
    {
        $data = DB::table('user')->get();
        return view('shitu1');
    }
}

resources / views / shitu1.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视图1</title>
</head>
<body>
    <h1>我是视图1页面</h1>

    {{-- foreach 遍历 --}}
    <table border="1" width="800px">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Pass</th>
            <th>Status</th>
            <th>Time</th>
        </tr>

        @foreach($data as $key => $value)

            <tr>
                <th>{{$value->id}}</th>
                <th>{{$value->name}}</th>
                <th>{{$value->pass}}</th>
                @if($value->status)
                    <th>正常</th>
                @else
                    <th>禁用</th>
                @endif
                <th>{{$value->time}}</th>
            </tr>

        @endforeach
    </table>

</body>
</html>

运行结果：

laravel视图-逻辑控制(foreach遍历)

2. 模板布局

　　把页面的公共部分进行提取。

1）新建公共目录

　　（D:\phpStudy\PHPTutorial\WWW\laravel\resources\views）

　　新建 layout目录

2）新建后台公共文件

　　admin.blade.php

3）打开后台公共文件

　　将每一个页面不一样的部分用 @yield('title') 占位，一个页面可以有多个占位，用名字区分。

4）普通页面中该如何书写

① 继承公共的模板页面

@extends('layout.admin')

② 修改内容区域

@section('title', '云知梦后台管理系统');

@section('main')

<div class="col-md-10">
    <div class="jumbotron">
        <img src="/admins/img/4.jpg" height="310px" width="100%">
        <h2>联想 后台管理系统</h2>
        <p>开发者：XXX</p>
    </div>
</div>

@endsection

11. 文件包含

将以下的代码写入到 baohan.blade.php

@include('public.footer')

实例：

web.php

Route::get('baohan', "ShiTuController@baohan");

app / Http / Controllers / ShiTuController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

class ShiTuController extends Controller
{
    public function baohan()
    {
        return view('baohan');
    }
}

在 public 下创建一个 homes文件夹 ,专门用户存放前台的样式
resources / views / baohan.blade.php

<!doctype>
<html>
    <head>
        <meta charset="utf-8">
        <title>文件包含</title>
    </head>
    <body>
        <!-- 头部 -->
        @include('public.header')

        <!-- 内容 -->
            #code ...

        <!-- 底部 -->
        @include('public.footer')
    </body>
</html>

在 resources / views 下，创建一个 public文件夹，存放头部和底部（由于头部和底部是一个网站公共的部分，因此其他页面只需要引入即可）
resources / views / public / header.blade.php

<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd">
                <a href="#" target="_top" class="h">亲，请登录</a>
                <a href="#" target="_top">免费注册</a>
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd">
                <a href="#" target="_top" class="h">商城首页</a>            
            </div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng">
                <a href="#" target="_top">
                    <i class="am-icon-user am-icon-fw"></i>个人中心                
                </a>
            </div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd">
                <a id="mc-menu-hd" href="#" target="_top">
                    <i class="am-icon-shopping-cart  am-icon-fw"></i>
                    <span>购物车</span>
                    <strong id="J_MiniCartNum" class="h">0</strong>
                </a>
            </div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd">
                <a href="#" target="_top">
                    <i class="am-icon-heart am-icon-fw"></i>
                    <span>收藏夹</span>
                </a>
            </div>
        </div>
    </ul>
</div>

resources / views / public / footer.blade.php

<div class="footer ">
    <div class="footer-hd ">
        <p>
            <a href="# ">恒望科技</a>
            <b>|</b>
            <a href="# ">商城首页</a>
            <b>|</b>
            <a href="# ">支付宝</a>
            <b>|</b>
            <a href="# ">物流</a>
        </p>
    </div>
    <div class="footer-bd ">
        <p>
            <a href="# ">关于恒望</a>
            <a href="# ">合作伙伴</a>
            <a href="# ">联系我们</a>
            <a href="# ">网站地图</a>
            <em>© 2015-2025 Hengwang.com 版权所有</em>
        </p>
    </div>
</div>