Laravel8 布局和视图详解(Layouts and Views)

Laravel8 布局和视图详解(Layouts and Views)

Scroll Down

查看本文章时请确保已经安装了laravel。

基本视图概念

我们可以在许多配置中渲染视图。我们将一步一步地看到这些。

闭包路由

打开文件/routes/web.php

方式 #1

Route::get('/', function () {
  
    return view('welcome'); // 这里我们就能解析到模版文件:/resources/views/welcome.blade.php
  
});

当我们打开路由 / 时,它会打开欢迎视图文件。如果我们需要传递参数来查看文件,我们也可以发送。

方式 #2

Route::get('/', function () {
  
    $data = ["name" => "Sanjay", "email" => "sanjay@mail.com"];
  
    return view('welcome', $data); // 这里同样解析到模板文件/resources/views/welcome.blade.php,同时还携带分配了数据
  
});

# 在视图文件 - `welcome.blade.php`中可以这样使用

{{ $name }} {{ $email }}

视图路由

在这里,我们将使用 Route 的 view() 方法。第一个参数是路径,第二个是视图文件,第三个是可选的,包含视图文件的数据集。

方式 #3

# 指向weclome视图文件
Route::view("/", "welcome");

# 指向weclome视图文件并携带参数
Route::view("/", "welcome", ["name" => "Sanjay", "email" => "sanjay@mail.com"]);

这里我们可以看出,使用这种方法比闭包写法更为简单。

通过控制器路由调用视图

假设我们的应用程序中有一个控制器。在那个控制器中,我们有一个简单的方法。首先让我们先配置路由。

web.php

# Import controller here
use App\Http\Controllers\StudentController;

Route::get("/", [StudentController::class, "welcome"]);


路由/,Student 控制器的方法欢迎。返回控制器文件.

注:laravel7及以前版本不支持该写法

StudentController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class StudentController extends Controller
{
    public function welcome(Request $request)
    {
        $data = ["name" => "Sanjay", "email" => "sanjay@mail.com"];
      
        return view("welcome", $data); // welcome.blade.php
    }
}

Blade布局的概念

Blade布局是指具有多个公共部分的布局,可以在整个应用程序中使用,无需为此加载多个文件。公共区域包括页眉、页脚、侧边栏等。它包括Blade语法。

我们也使用相同的文件夹结构/resources/views来存储布局。让我们创建一个简单的基本Blade布局。在/resources/views/layouts/app.blade.php创建一个文件

app.blade.php

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the common sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

我们在刀片模板@yield、@section等中使用了一些指令。我们可以说这些是动态占位符来呈现动态页面内容。

现在,让我们看看如何使用内部应用程序。创建一个文件/resources/views/about-us.blade.php。在这个视图文件中,我们需要为动态占位符扩展和添加内容。

about-us.blade.php

@extends('layouts.app')

@section('title', 'About Us')

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
    <p>This is about us content page.</p>
@stop

@extends('layouts.app') 从layouts文件夹扩展布局。
同样,我们可以创建多个应用程序视图,并根据页面放置页面内容。
在布局中包含部分文件
要包含部分文件或子视图,我们使用@include指令。该指令允许我们将子视图渲染到其他视图中。我们可以包含主Blade布局,也可以包含在任何视图文件中。

假设我们有一个名为slider.blade.php的滑块文件到/resources/views/partials/slider.blade.php文件中,该文件包含滑块的 HTML 代码。现在我们要包含到欢迎页面布局中。

关于-us.blade.php

@extends('layouts.app')

@section('title', 'About Us')

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
 
    @include('partials.slider')

    <p>This is about us content page.</p>
@stop

@include('partials.slider') 包括部分文件滑块partials 文件夹。

如何访问公共文件

所有公共可访问文件都应放在公共目录中。假设我们已经创建并存储了一些文件作为/public/assets/css/style.css/public/assets/js/script.js

有多种方法可以将公共资产文件附加到布局和查看文件。我们将使用其中之一作为URL::to()添加到布局中。这是来自使用 Illuminate\Support\Facades\URL Facade。

添加查看文件为 –

<link rel="stylesheet" type="text/css" href="{{ URL::to('assets/css/style.css') }}">
  
<script type="text/javascript" src="{{ URL::to('assets/js/script.js') }}"></script>

添加样式和 javascripts 以查看文件

我们正在使用@stack指令来放置诸如 javascript 和样式表文件之类的资产。这对于指定子视图和样式文件所需的任何 JavaScript 库特别有用。
layout blade文件

<html>
    <head>
        <title>App Name - @yield('title')</title>

        @stack('styles')<!-- To include style links -->
    </head>
    <body>
        @section('sidebar')
            This is the common sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>

        @stack('scripts') <!-- To include script links -->
    </body>
</html>

在任何视图文件中扩展布局。

任何视图文件可以使用

@extends('layouts.app')

@section('title', 'About Us')

@push('styles')
    <link rel="stylesheet" href="/assets/css/style.css"/>
    <style>
      /* css code */
    </style>
@endpush

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
 
    @include('partials.slider')

    <p>This is about us content page.</p>
@stop

@push('scripts')
    <script src="/assets/js/script.js"></script>
    <script>  
     // .. custom js code
    </script>
@endpush

资源文件应该放在/public/assets/css/public/assets/js文件夹中。

我们希望本文能帮助您以非常详细的方式了解 Laravel 8 布局和视图。