laravel后台模板、laravel模板继承

2024-12-03 0 73

Image

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项目中实现后台模板和模板继承有所帮助。

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载