laravel 视图view - 学习心得

Home > List of blog posts > laravel 视图view

Blogger Information

Blog 40

fans 0

comment 0

visits 27966

Special Recommendation

More>

Related recommendations

Blade模板

Blade也就是MVC中的V层, 存储在resources/views目录下

//resources/views/user.blade.php
<html>
    <body>
        <h1>{{ $name }}</h1>
    </body>
</html>
//app/http/Controllers/home/UserController.php
 return view('home.user',['name'=>'PHP课程');

如果你的视图存储在 resources/views/admin/profile.blade.php，则可以这样引用它：

return view('admin.user', $data);

视图优化

为了提高性能，你可能希望在部署过程中运行以下命令：

php artisan view:cache

你可以使用 view:clear 命令清除视图缓存：

php artisan view:clear

编译的视图将会存在 storage/framework/views/目录下。

如果不想您的数据被转义，那么您可使用如下的语法：

{!! $name !!}.

模板变量

 {{ time() }}.

渲染 JSON

<script>
    var app = @json($array);
    var app = @json($array, JSON_PRETTY_PRINT);
</script>

控制结构

If 语句

@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

@isset 和 @empty 指令亦可作为它们所对应的 PHP 函数的快捷方式：

@isset($records)
    // $records 已经定义但不为空
@endisset
@empty($records)
    // $records 为空……
@endempty

switch

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

循环

@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

终止循环或跳过当前迭代：

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif
    <li>{{ $user->name }}</li>
    @if ($user->number == 5)
        @break
    @endif
@endforeach

Loop 变量

@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif
    @if ($loop->last)
        This is the last iteration.
    @endif
    <p>This is user {{ $user->id }}</p>
@endforeach

如果您在嵌套循环中，您可以使用循环的 $loop 的变量的 parent 属性访问父级循环：

@foreach ($users as $user)
    @foreach ($user->posts as $post)
        @if ($loop->parent->first)
            This is first iteration of the parent loop.
        @endif
    @endforeach
@endforeach

注释

{{-- 注释 --}}

PHP

@php
    //
@endphp

表单

CSRF 域

任何您在应用中定义 HTML 表单的时候，您都应该在表单中包含一个隐藏的 CSRF token 域，这样一来， CSRF 保护中间件便能校验请求。您可以使用 @csrf Blade 指令来生成一个 token 域：

<form method="POST" action="/profile">
    @csrf
    ...
</form>

方法域

由于 HTML 表单不能够构造 PUT ， PATCH 或 DELETE 请求，您需要添加隐藏的 _method 域来模拟这些 HTTP 动作。您亦可使用 @method Blade 指令来创建这个方法域：

<form action="/foo/bar" method="POST">
    @method('PUT')
    ...
</form>

引入子视图

Blade 的 @include 指令可用于从另一个视图包含一个 Blade 视图。子视图将继承父视图中所有可用的变量：

<div>
    @include('shared.errors')
    <form>
        <!-- Form Contents -->
    </form>
</div>

除了子视图继承父视图中所有可用的数据，您亦可通过数组将数据传递给子视图：

@include('view.name', ['some' => 'data'])

模板继承

// resources/views/layouts/app.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@yield('title','默认值')-PHP BOX</title>
    <meta name="description"  content="@yield('description','默认值')">
    <style>
        .header{
width: 100%;
            height: 80px;
            background: #2d3748;
        }
        .main{
min-height: 600px;
        }
        .footer{
width: 100%;
            height: 80px;
            background: aqua;
        }
    </style>
</head>
<body>
 <div class="header">
顶部导航
 </div>
<div class="main">
    @section('content')
        主体代码块
        @show
</div>
<div class="footer">
底部
</div>
</body>
</html>

``php
// resources/views/user.blade.php

@extends(‘layouts.app’)

@section(‘title’,”个人中心”)

@section(‘content’)
@parent
<div>
<h1>我是个人中心</h1>
</div>
@endsection


## 组件
我们可以使用下面命令来创建组件

php artisan make:component Alert


那个 `make:component` 命令还将为组件创建视图模板。视图将放在 `resources/views/components` 目录中。为自己的应用程序编写组件时，组件会在 `app/View/components` 目录和 `resources/views/components` 目录中自动发现，因此通常不需要进一步的组件注册。
也可以在子目录中创建组件：
```php
php artisan make:component Forms/Input

上面的命令将在 App\View\Components\Forms 目录中创建一个 Input 组件，该视图将放在 resources/views/Components/Forms 目录中。

渲染组件

要显示组件，可以在其中一个 Blade 模板中使用 Blade 组件标记。Blade 组件标记以字符串 x- 开头，后跟组件类的蛇形名称：

<x-alert/>
<x-user-profile/>

如果组件类嵌套在 App\View\Components 目录的更深处，则可以使用 . 字符表示目录嵌套。例如，如果我们假设一个组件位于 App\View\Components\Inputs\Button.php ，我们可以这样处理：

<x-inputs.button/>

给组件传递数据

你可以使用 HTML 属性将数据传递给 Blade 组件。硬编码、原始值可以使用简单的 HTML 属性字符串传递给组件。PHP 表达式和变量应通过使用 : 字符作为前缀的属性传递给组件：

<x-alert type="error" :message="$message"/>

类似于 VUE 组件语法

你应该在组件类的构造函数中定义组件所需的数据。组件上的所有公共属性将自动提供给组件的视图。不必从组件的 render 方法将数据传递到视图：

<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
    /**
     * The alert type.
     *
     * @var string
     */
    public $type;
    /**
     * The alert message.
     *
     * @var string
     */
    public $message;
    /**
     * 创建组件实例
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }
    /**
     * 将一个视图或者字符串传递给组件用于渲染
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

渲染组件时，可以通过按名称回显变量来显示组件公共变量的内容：


<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

驼峰命名

应使用 camelCase 指定组件构造函数参数，而在 HTML 属性中引用参数名称时应使用 kebab-case。例如，给定以下组件构造函数：

/**
 * 创建组件实例
 *
 * @param  string  $alertType
 * @return void
 */
public function __construct($alertType)
{
    $this->alertType = $alertType;
}

$alertType 参数可以使用如下所示的方式接受数据：

<x-alert alert-type="danger" />

访问组件类中的属性和插槽

Blade 组件还允许你访问类的 render 方法中的组件名称、属性和插槽。但是，为了访问这些数据，应该从组件的 render 方法返回闭包。闭包将接收一个 $data 数组作为它的唯一参数。此数组将包含几个元素，这些元素提供有关组件的信息：

/**
 * 获取表示组件的视图/内容
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return function (array $data) {
        // $data['componentName'];
        // $data['attributes'];
        // $data['slot'];
                 return 'components.alert';
        return '<div>Components content</div>';
        return <<<'blade'
                <div class="alert alert-danger">
                    {{ $message }}
                </div>
            blade;
    };
}

组件传递的数据无法修改,修改数据可以在构造函数中修改。

闭包应该返回一个字符串。如果返回的字符串与现有视图相对应，则将呈现该视图；否则，返回的字符串将作为内联 Blade 视图进行计算。

插槽

你通常需要通过「插槽」将其他内容传递给组件。通过回显 $slot 变量来呈现组件插槽。为了探索这个概念，我们假设 alert 组件具有以下内容：类似VUE

<!-- /resources/views/components/alert.blade.php -->
<div class="alert alert-danger">
    {{ $slot }}
</div>

我们可以通过向组件中注入内容将内容传递到 slot ：

<x-alert>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

有时，组件可能需要在组件内的不同位置渲染多个不同的插槽。让我们修改警报组件以允许注入「标题」插槽：

<span class="alert-title">{{ $title }}</span>
<div class="alert alert-danger">
    {{ $slot }}
</div>

可以使用 x-slot 标记定义命名插槽的内容。任何不在显式 x-slot 标记中的内容都将传递给 $slot 变量中的组件：

<x-alert>
    <x-slot name="title">
        Server Error
    </x-slot>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

作用域插槽

如果你使用过诸如 Vue 之类的 JavaScript 框架，那么你可能熟悉「作用域插槽」，它允许你从插槽中的组件访问数据或方法。通过在组件上定义公共方法或属性，并通过 $component 变量访问插槽中的组件，可以在 Laravel 中实现类似的行为。在本例中，我们假设 x-alert 组件在其组件类上定义了一个公共的 formatAlert 方法：

<x-alert>
    <x-slot name="title">
        {{ $component->formatAlert('Server Error') }}
    </x-slot>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

内联组件视图

/**
 * 获取表示组件的视图/内容。
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

使用组件布局

之前我们使用模板继承的方式进行布局。现在我们学习了组件接下来我们使用组件的方式的来进行布局。

// resources/views/components/layout.balde.php
<html>
    <head>
        <title>{{ $title ?? 'Todo Manager' }}</title>
          <style>
        .header{
            width: 100%;
            height: 100px;
            background-color:#f90;
        }
        .main{
            display: flex;
            width: 100%;
            min-height:500px;
        }
        .ce{
            width: 300px;
            background-color:pink;
        }
        .content{
            width: 100%;
            background-color:#cbd5e0;
        }
    </style>
    </head>
    <body>
      <header class="header"></header>
    <div class="main">
        <div class="ce">
            我是侧边栏
        </div>
        <div class="content">
                        {{ $slot }}
        </div>
    </div>
    </body>
</html>

应用布局组件

一旦定义了 layout 组件，我们就可以创建一个使用该组件的 Blade 视图。在本例中，我们将定义一个显示任务列表的简单视图：

// resources/views/user.blade.php
<x-layout>
       <div>
                <h1>我是个人中心</h1>
        </div>
</x-layout>

请记住，注入到组件中的内容将提供给 layout 组件中的默认 $slot 变量。正如你可能已经注意到的，如果提供了 $title 插槽，那么我们的 layout 也会尊从该插槽；否则，将显示默认的标题。我们可以使用 x-slot插入标题


<x-layout>
    <x-slot name="title">
        Custom Title
    </x-slot>
    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

重温emmet让代码写作提升10倍

2021-09-24 12:41:48