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

吾爱主题阅读：145 2021-09-15 16:06:00 评论：0

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

1、定义模板

blade定义模板页面同创建html页面一样，只不过在适当的位置通过@section或@yield来占位，当其它页面引用模板页时将内容填充到占位的位置即可

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <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之间的内容。

如果需要在blade中引入外部js、css文件可以采用相对public目录的绝对路径，例如引入自带的bootstrap，位于public/css/app.css，可以<link rel="stylesheet" href="{{ asset('./css/app.css')}}" rel="external nofollow" >

2、引用模板

引用模板首先需要通过@extends()引入你需要使用的模板，模板位置相对于views目录。然后通过@section()~@stop(注意与定义模板时的@section~@show区别），将你所需要替换的内容填充到模板的指定位置，例如要填充header对应的section：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 @ extends ( 'template.layout' ) {{--引入模板views/template/layout.blade.php--}} @section( 'title' ) 登录界面 @stop @section( 'header' ) {{--填充到header对应的占位符--}} @parent {{--保留模板原内容--}} 头部替换内容 @stop

引入组件：通过@component来引入组件模板。比如定义了一个通用的错误提示组件alert：

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

在页面中使用该组件：

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

@component~@endcomponent之间的内容会自动替代组件{{$slot}}，如果要指定替代的位置，可以通过@slot()~@endslot

引入子视图：在一个页面中如果希望引入一个blade子视图，可以通过@include()

1	`@` `include` `(` `'template.child'` `)`

在blade中输出变量通过{{$var}}，其中的语句已经经过 PHP 的 htmlentities 函数处理以避免 XSS 攻击。例如在controller中引入view时传入变量参数：

1 2 3 public static function showBlade(){ return view( 'Login.login' ,[ 'var' => 'test' ]); }

在blade中使用该变量

变量为：{{isset($var)? $var : '默认值'}}

有时候我们希望blade不要对文本进行解析，原样输出，比如在vue中也使用{{}}包裹变量，我们不希望blade对其进行编译，这时可以使用@：

原文本输出：@{{ $var }}

3、流程控制

blade提供了一套流程控制语句来对页面的渲染进行控制，使页面的渲染更为快捷，并且这些控制语句都是和PHP非常类似的。

if判断：

1 2 3 4 5 6 7 @ if ( $val >80) 优秀 @ elseif ( $val >60) 及格 @ else 不及格 @ endif

循环：

1 2 3 4 5 6 7 @ 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分支：

1 2 3 4 5 6 7 8 9 10 11 12 @ switch ( $i ) @ case (1) First case ... @ break @ case (2) Second case ... @ break @ default Default case ... @ endswitch