Laravel入门教程（六）- Blade模板引擎

最新推荐文章于 2023-02-07 13:39:54 发布

酱油能

最新推荐文章于 2023-02-07 13:39:54 发布

阅读量616

点赞数

分类专栏： PHP Laravel学习笔记

本文链接：https://blog.csdn.net/martinwangjun/article/details/78611116

版权

PHP 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Laravel学习笔记

10 篇文章 0 订阅

订阅专栏

1. 模板引擎简介及继承使用

1.1. 简介

可以在blade模板中使用原生的php

所有的模板引擎都会被编译成原生php代码并缓存，除非模板文件被修改，否则不会重新编译。

1.2. 模板继承

section:
yield：
extends：继承
parent：父模板的内容

为什么要使用模板继承？

网页的Header和Footer往往是一样的，我们可以通过继承来减少工作量。

假设有个模板文件 layouts.blade.php 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title') - Laravel入门</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Laravel入门教程</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            @section('header')
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            @show
        </div><!--/.navbar-collapse -->
    </div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
        @section('jumbotron')
        @show
        <h1>Hello, Laravel!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
</div>

<div class="container">
    <!-- Example row of columns -->
    @yield('content', 'Hi')

    <hr>

    <footer>
        @section('footer')
        底部
        @show
    </footer>
</div>
</body>
</html>

在StudentController中，添加一个方法，返回视图：

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;
use App\Student;

class StudentController extends Controller
{
    // ... 省略部分代码

    public function section1(){
        return view('student.section1');
    }
}

在视图文件夹的 student/section1 中

@extends('layouts')

@section('header');
    @parent
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Sons</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
    </ul>
@stop

@section('content')
    <div class="row">
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
     </div>
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
    </div>
@stop

2. 基础语法与include

知识点：
- 模板中输出变量
- 模板中调用PHP代码
- 原样输出
- 模板中的注释
- 引入子视图include的使用

2.1. 模板中输出变量

在视图中用{{$var_name}}表示一个变量：

<!-- 此处省略了部分代码 -->
<div class="col-md-4">
    <h2>{{$heading}}</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<!-- 此处省略了部分代码 -->

在Controller中，返回视图的时候顺便带上一个数组：

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;
use App\Student;

class StudentController extends Controller
{
    // 省略了部分代码
    public function section1(){
        return view('student.section1', [
            'heading' => 'Martin'
            ]);
    }
}

student.section1 表示路径为 student/section1.blade.php，用 . 推荐。

2.2. 模板中输出PHP代码

在模板文件中：

<!-- 2. 模板中输出PHP代码 --> <p>{{time()}}</p> <p>{{date('Y-m-d H:i:s', time())}}</p> <p>{{ in_array($name, $arr) ? 'TRUE' : 'FALSE' }}</p> <p>{{ isset($name) ? $name : 'default'}}</p> <p>{{ $name1 or 'default' }}</p>

2.3. 原样输出

前面加个@就能原样输出

<!-- 3. 原样输出 -->
@{{$name}} 的值是：{{$name}}

2.4. 模板的注释

{{-- 4. 这个是模板的注释 --}}

2.5. 子视图和@include

在视图中，可以使用子视图，这个是视图中的文件：

@section('footer')
    <!-- 5. include -->
    @include('student.common1', ['corp' => 'Martin Inc.'])
@stop

这个是子视图 common1.blade.php 的内容：

{{date('Y', time())}} {{$corp}} All Rights Reserved

3. 流程控制

流程控制主要有下列语句：
- if
- unless
- for
- foreach

3.1. if

@if...@elseif...@else...@endif

<p>
    @if($name === 'Martin')
        I'm Martin.
    @elseif($name === 'Rebecca')
        I'm Rebecca.
    @else
        Who am I?
    @endif
</p>

3.2. unless

@unless 相当于 @if 取反

<p> {{-- @unless 相当于 @if 取反 --}} @unless($name !== 'Rebecca') REBECCA @endunless </p>

3.3. for

<p>
    {{-- for --}}
    @for($i = 0; $i < 10; $i++)
        {{$i}}
    @endfor
</p>

3.4. foreach

<p>
    @foreach($student as $s)
        {{$s->name}}
    @endforeach
</p>


<!-- 如果$student2是个空数组 -->
<p>
    @forelse($student2 as $s)
        {{$s->name}}
    @empty
        NULL
    @endforelse
</p>

4. View中的url

url(): 通过路由的名称生成URL
action()：通过控制器和方法名来生成URL
route(): 通过路由的别名来生成URL

在View中

<div class="col-md-4">
    <h2>模板中的URL</h2>
    <p>
        <a href="{{url('urlTest')}}">url()</a>
    </p>
    <p>
        <a href="{{action('StudentController@urlTest')}}">action()</a>
    </p>
    <p>
        <a href="{{route('url')}}">route()</a>
    </p>
</div>

酱油能

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Laravel入门教程（六）- Blade模板引擎

1. 模板引擎简介及继承使用1.1. 简介可以在blade模板中使用原生的php所有的模板引擎都会被编译成原生php代码并缓存，除非模板文件被修改，否则不会重新编译。1.2. 模板继承section: yield：extends：继承parent：父模板的内容为什么要使用模板继承？网页的Header和Footer往往是一样的，我们可以通过继承来减少工作量。假设有个模板文件 layo
复制链接

扫一扫

专栏目录