Laravel实现通过blade模板引擎渲染视图

2019-10-2516:22:03后端程序开发Comments2,635 views字数 2154阅读模式

laravel提供了blade模板引擎用于视图的渲染,在blade中可以直接使用PHP代码,并且blade最终也会被编译为php缓存起来,只有在blade文件被修改后才会重新编译,这一点可以节省开销提高应用性能。blade文件.作为视图文件存放于laravel的resource/views目录下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

1、定义模板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

blade定义模板页面同创建html页面一样,只不过在适当的位置通过@section或@yield来占位,当其它页面引用模板页时将内容填充到占位的位置即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

<html>
 <head>
  <title>@yield('title')</title>
 </head>
 <body>
  <header class="header">
   @section('header')
    这是头部<br>
   @show
  </header>
  <div class="middle">
   <aside class="aside">
    这是侧边栏
    @yield('aside')
   </aside>
   <div class="content">
    @section('content')
    这是主体内容
    @show
   </div>
  </div>
  <footer class="footer">
   这是底部
   @yield('footer')
  </footer>
 </body>
</html>

section与yield都是占位符,其区别体现在引用模板时,当使用yield时会完全将指定的占位符替换掉,而使用section时可以通过@parent来保留@section()~@show之间的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

如果需要在blade中引入外部js、css文件可以采用相对public目录的绝对路径,例如引入自带的bootstrap,位于public/css/,可以<link rel="stylesheet" href="{{%20asset('./css/')}}" rel="external nofollow" >文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

2、引用模板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

引用模板首先需要通过@extends()引入你需要使用的模板,模板位置相对于views目录。然后通过@section()~@stop(注意与定义模板时的@section~@show区别),将你所需要替换的内容填充到模板的指定位置,例如要填充header对应的section:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

@extends('')  {{--引入模板views/template/layout.--}}

@section('title')

登录界面

@stop

@section('header')    {{--填充到header对应的占位符--}}

@parent      {{--保留模板原内容--}}

头部替换内容

@stop

引入组件:通过@component来引入组件模板。比如定义了一个通用的错误提示组件alert:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

<div style="color: #ff5b5d;">
 <h5>{{$title}}</h5>
 {{$slot}}
</div>

在页面中使用该组件:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

@component('') {{--引入组件views/template/alert.--}}
 @slot('title')    {{--指定替代组件中的$title位置--}}
  alert标题
 @endslot
 alert组件内容
@endcomponent

@component~@endcomponent之间的内容会自动替代组件{{$slot}},如果要指定替代的位置,可以通过@slot()~@endslot文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

引入子视图:在一个页面中如果希望引入一个blade子视图,可以通过@include()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

@include('')

在blade中输出变量通过{{$var}},其中的语句已经经过 PHP 的 htmlentities 函数处理以避免 XSS 攻击。例如在controller中引入view时传入变量参数:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

public static function showBlade(){
 return view('',['var'=>'test']);
}

在blade中使用该变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

变量为:{{isset($var)? $var : '默认值'}}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

有时候我们希望blade不要对文本进行解析,原样输出,比如在vue中也使用{{}}包裹变量,我们不希望blade对其进行编译,这时可以使用@:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

原文本输出:@{{ $var }}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

3、流程控制文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

blade提供了一套流程控制语句来对页面的渲染进行控制,使页面的渲染更为快捷,并且这些控制语句都是和PHP非常类似的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

if判断:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

@if ($val >80)
 优秀
@elseif ($val>60)
 及格
@else
 不及格
@endif

循环:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

@for ($i = 0; $i < 10; $i++)
 The current value is {{ $i }}
@endfor
 
@foreach ($users as $user)
 <p>This is user {{ $user->id }}</p>
@endforeach

switch分支:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

@switch($i)
 @case(1)
  First case...
  @break
 
 @case(2)
  Second case...
  @break
 
 @default
  Default case...
@endswitch

认证:@auth 和 @guest 指令可用于快速判断当前用户是否登录:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html

@auth
 // 用户已登录...
@endauth
 
@guest
 // 用户未登录...
@endguest
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/17132.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/bc/17132.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定