laravel Pjax

在laravel后台管理类项目中,我们需要实现头部导航栏、左侧菜单栏不变,中间内容模块部分实现局部刷新的功能。

Pjax刚好符合我们的要求。

1、安装引入

composer require spatie/laravel-pjax

2、注册中间件

进入laravel项目,app\Http\Kernel.php;

找到web中间件组

在最后加入Pjax中间件类

'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \Spatie\Pjax\Middleware\FilterIfPjax::class,
        ],

3、修改前端模板页面

引入Pjax.js和jquery.js,

<div class="main-content" >
                <div class="page-content-area" id="pjax-container" style="overflow-y:scroll">

                    <div class="page-header">
                        <h1>Default Responsive(mobile) Menu </h1>
                    </div><!-- /.page-header -->
                    @yield('content')
                </div><!-- /.page-content -->
            </div><!-- /.main-content -->

只刷新pjax-container内的部分

最后再添加一个方法

<script type="text/javascript">
        function LA() {}
        LA.token = "{{ csrf_token() }}";
        
        $(document).pjax('a', '#pjax-container');
        $(document).on("pjax:timeout", function(event) {
            // 阻止超时导致链接跳转事件发生
            event.preventDefault()
        });
    </script>

现在再刷新我们的页面,就实现了局部刷新了。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章