（9）前端模板教程 · KPPW开发手册

## Blade 模板引擎 ### 1、简介 >[info]Blade是Laravel提供的一个非常简单、强大的模板引擎，不同于其他流行的PHP模板引擎，Blade在视图中并不约束你使用PHP原生代码。所有的Blade视图都会被编译成原生PHP代码并缓存起来直到被修改，这意味着对应用的性能而言Blade基本上是零开销。Blade视图文件使用.blade.php文件扩展并存放在resources/views目录下。 ### 2、模板继承 #### 2.1 定义布局使用Blade的两个最大优点是模板继承和切片，开始之前让我们先看一个例子。首先，我们检测一个“主”页面布局，由于大多数web应用在不同页面中使用同一个布局，可以很方便的将这个布局定义为一个单独的Blade页面： ~~~  <html> <head> <title>App Name - @yield('title')</title> </head> <body> @section('sidebar') This is the master sidebar. @show <div class="container"> @yield('content') </div> </body> </html> ~~~ >[info]正如你所看到的，该文件包含典型的HTML标记，然而，注意@section和@yield指令，前者正如其名字所暗示的，定义了一个内容的片段，而后者用于显示给定片段的内容。现在我们已经为应用定义了一个布局，接下来让我们定义继承该布局的子页面吧。 2.2 扩展布局 >[info]定义子页面的时候，可以使用Blade的@extends指令来指定子页面所继承的布局，继承一个Blade布局的视图将会使用@section指令注入内容到布局的片段中，记住，如上面例子所示，这些片段的内容将会显示在布局中使用@yield的地方： ~~~  @extends('layouts.master') @section('title', 'Page Title') @section('sidebar') @parent <p>This is appended to the master sidebar.</p> @endsection @section('content') <p>This is my body content.</p> @endsection ~~~ >[warning]在本例中，sidebar片段使用@parent指令来追加（而非覆盖）内容到布局中sidebar，@parent指令在视图渲染时将会被布局中的内容替换。当然，和原生PHP视图一样，Blade视图可以通过view方法直接从路由中返回： ~~~ Route::get('blade', function () { return view('child'); }); ~~~ ### 3、数据显示 >[warning]可以通过两个花括号包裹变量来显示传递到视图的数据，比如，如果给出如下路由： ~~~ Route::get('greeting', function () { return view('welcome', ['name' => 'Samantha']); }); ~~~ 那么可以通过如下方式显示name变量的内容： `Hello, {{ $name }}.` 当然，不限制显示到视图中的变量内容，你还可以输出任何PHP函数，实际上，可以将任何PHP代码放到Blade模板语句中： `The current UNIX timestamp is {{ time() }}.` 注意：Blade的{{}}语句已经经过PHP的htmlentities函数处理以避免XSS攻击。 Blade & JavaScript框架 >[warning]由于很多JavaScript框架也是用花括号来表示要显示在浏览器中的表达式，可以使用@符号来告诉Blade渲染引擎该表达式应该保持原生格式不作改动。比如： ~~~ <h1>Laravel</h1> Hello, @{{ name }}. ~~~ 在本例中，@符将会被Blade移除，然而，{{ name }}表达式将会保持不变，避免被JavaScript框架渲染。输出存在的数据有时候你想要输出一个变量，但是不确定该变量是否被设置，我们可以通过如下PHP代码： `{{ isset($name) ? $name : 'Default' }}` 除了使用三元运算符，Blade还提供了更简单的方式： `{{ $name or 'Default' }}` 在本例中，如果$name变量存在，其值将会显示，否则将会显示“Default”。显示原生数据默认情况下，Blade的{{ }}语句已经通过PHP的htmlentities函数处理以避免XSS攻击，如果你不想要数据被处理，可以使用如下语法： `Hello, {!! $name !!}.` >[danger] 注意：输出用户提供的内容时要当心，对用户提供的内容总是要使用双花括号包裹以避免直接输出HTML代码。 ### 4、流程控制 >[warning] 除了模板继承和数据显示之外，Blade还为常用的PHP流程控制提供了便利操作，比如条件语句和循环，这些快捷操作提供了一个干净、简单的方式来处理PHP的流程控制，同时保持和PHP相应语句的相似。 #### 4.1 If语句可以使用@if, @elseif, @else, 和 @endif来构造if语句，这些指令函数和PHP的相同： ~~~ @if (count($records) === 1) I have one record! @elseif (count($records) > 1) I have multiple records! @else I don't have any records! @endif ~~~ 为方便起见，Blade还提供了@unless指令： ~~~ @unless (Auth::check()) You are not signed in. @endunless ~~~ #### 4.2 循环除了条件语句，Blade还提供了简单指令处理PHP支持的循环结构，同样，这些指令函数和PHP的一样： ~~~ @for ($i = 0; $i < 10; $i++) The current value is {{ $i }} @endfor @foreach ($users as $user) <p>This is user {{ $user->id }}</p> @endforeach @forelse ($users as $user) <li>{{ $user->name }}</li> @empty <p>No users</p> @endforelse @while (true) <p>I'm looping forever.</p> @endwhile ~~~ #### 4.3 包含子视图 >[info]Blade的@include指令允许你很简单的在一个视图中包含另一个Blade视图，所有父级视图中变量在被包含的子视图中依然有效： ~~~ <div> @include('shared.errors') <form>  </form> </div> ~~~ 尽管被包含的视图继承所有父视图中的数据，你还可以传递额外参数到被包含的视图： `@include('view.name', ['some' => 'data'])` #### 4.4 注释 >[info]Blade还允许你在视图中定义注释，然而，不同于HTML注释，Blade注释并不会包含到HTML中被返回： `{{-- This comment will not be present in the rendered HTML --}}` ### 5、服务注入 >[info]@inject指令可以用于从服务容器中获取服务，传递给@inject的第一个参数是服务将要被放置到的变量名，第二个参数是要解析的服务类名或接口名： ~~~ @inject('metrics', 'App\Services\MetricsService') <div> Monthly Revenue: {{ $metrics->monthlyRevenue() }}. </div> ~~~ ### 6、扩展Blade >[info]Blade甚至还允许你自定义指令，可以使用directive方法来注册一个指令。当Blade编译器遇到该指令，将会传入参数并调用提供的回调。下面的例子创建了一个@datetime($var)指令： ~~~ <?php namespace App\Providers; use Blade; use Illuminate\Support\ServiceProvider; class AppServiceProvider extends ServiceProvider { /** * Perform post-registration booting of services. * * @return void */ public function boot() { Blade::directive('datetime', function($expression) { return "<?php echo with{$expression}->format('m/d/Y H:i'); ?>"; }); } /** * 在容器中注册绑定. * * @return void */ public function register() { // } } ~~~ 正如你所看到的，Laravel的帮助函数with被用在该指令中，with方法简单返回给定的对象/值，允许方法链。最终该指令生成的PHP代码如下： `<?php echo with($var)->format('m/d/Y H:i'); ？>` ### **前端文件夹** #### 1、路由及控制器文件位置 ![](https://box.kancloud.cn/ef82347ca96d934f529821514a42a6ee_1928x1048.png) * * * * * #### 2、前端页面位置 ![](https://box.kancloud.cn/c6bebf82c63b3a72fe7cf1803668dd62_1928x1048.png) * * * * * #### 3、前端页面头部尾部的引用 ![](https://box.kancloud.cn/9b8703effd4b5eeaf92c3aa87b1ea043_1928x1048.png) * * * * * #### **前端文件引用** >[info] 1、前端文件除了在layouts中引用的公共文件外，一些单独需要使用的插件以及样式可以在页面文件中引用，如下图所示： ![](https://box.kancloud.cn/808cb58ffbfaeef44daeb48398cee384_1928x1048.png) * * * * * #### 前端样式修改 >[info] 1、首先在浏览器中找到需要修改样式的模块，打开浏览器开发者模式； ![](https://box.kancloud.cn/7c9e8516c2f89ab164cf27dda4de6266_1928x1048.png) >[info] 2、找到对应的css文件； ![](https://box.kancloud.cn/9479484871542a8b96106f2ce0d480d9_1928x1048.png) ![](https://box.kancloud.cn/729b2be5eb83777dee50103465c0dae8_1889x1028.png) >[info] 3、然后在代码中找到相对应的css文件，在css文件中找到对应的第几行，修改保存即可。 * * * * *