Laravel后台模板、Laravel模板继承

在开发基于Laravel框架的Web应用时，后台管理系统的界面设计和布局的一致性是至关重要的。Laravel提供了一种强大的模板继承机制，可以有效地管理和复用页面布局，提高开发效率。介绍如何使用Laravel的Blade模板引擎实现后台模板的创建和继承。

解决方案

Laravel的Blade模板引擎支持模板继承和组件化开发，通过定义一个基础布局模板，可以在多个页面中复用该布局，同时每个页面可以根据需要覆盖或添加特定的内容。这种机制不仅提高了代码的可维护性，还简化了页面的开发过程。

创建基础布局模板

我们需要创建一个基础布局模板，通常命名为layouts/app.blade.php。这个模板将包含页面的公共部分，如头部、导航栏、侧边栏和底部等。

blade
<!-- resources/views/layouts/app.blade.php -->
</p>



    
    
    <title>@yield('title', '默认标题')</title>
    


    <header>
        <nav class="navbar">
            <a href="{{ route('home') }}">首页</a>
            <a href="{{ route('users.index') }}">用户管理</a>
            <a href="{{ route('posts.index') }}">管理</a>
        </nav>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>© 2023 Laravel后台管理系统</p>
    </footer>

    



<p>

继承基础布局模板

接下来，我们创建一个具体的页面模板，并继承上述的基础布局模板。假设我们要创建一个用户列表页面。

用户列表页面

blade
<!-- resources/views/users/index.blade.php -->
@extends('layouts.app')</p>

<p>@section('title', '用户列表')</p>

<p>@section('content')
    <h1>用户列表</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <a>id) }}">编辑</a>
                        id) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit">删除</button>
                        
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

列表页面

同样地，我们可以创建一个列表页面，继承同一个基础布局模板。

blade
<!-- resources/views/posts/index.blade.php -->
@extends('layouts.app')</p>

<p>@section('title', '列表')</p>

<p>@section('content')
    <h1>列表</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>作者</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($posts as $post)
                <tr>
                    <td>{{ $post->id }}</td>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->author->name }}</td>
                    <td>
                        <a>id) }}">编辑</a>
                        id) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit">删除</button>
                        
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

其他思路

使用组件

除了模板继承，Laravel的Blade模板引擎还支持组件化开发。通过定义组件，可以进一步提高代码的复用性和可维护性。

定义组件

php
// app/View/Components/Navbar.php
namespace AppViewComponents;</p>

<p>use IlluminateViewComponent;</p>

<p>class Navbar extends Component
{
    public function render()
    {
        return view('components.navbar');
    }
}

创建组件视图

blade
<!-- resources/views/components/navbar.blade.php --></p>

<nav class="navbar">
    <a href="{{ route('home') }}">首页</a>
    <a href="{{ route('users.index') }}">用户管理</a>
    <a href="{{ route('posts.index') }}">管理</a>
</nav>

<p>

在布局模板中使用组件

blade
<!-- resources/views/layouts/app.blade.php -->
</p>



    
    
    <title>@yield('title', '默认标题')</title>
    


    <header>
        
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>© 2023 Laravel后台管理系统</p>
    </footer>

    



<p>

通过以上方法，我们可以有效地管理和复用页面布局，提高开发效率。希望对您在Laravel项目中实现后台模板和模板继承有所帮助。