Laravel 5 に Pjax を統合して、更新せずにページをロードする拡張パッケージ -- Laravel Pjax

1. はじめに

Pjax は、ajax を使用してページの読み込み時間を短縮する jQuery プラグインです。その動作原理は、サーバーから指定された HTML フラグメントのみを取得し、クライアントがそれを使用することです。取得したコンテンツを更新する部分ページ。

Laravel Pjax 拡張パッケージは、Pjax を Laravel に統合し、Pjax が期待する応答コンテンツを返すミドルウェアを提供します。

2. インストールします

Composer を通じて拡張パッケージをインストールします:

$ composer require spatie/laravel-pjax

次に、Kernel.php にミドルウェアを登録する必要があります:

// app/Http/Kernel.phpprotected $middlewareGroups = [    'web' => [        ...        \Spatie\Pjax\Middleware\FilterIfPjax::class,    ],    ...];

3.

この拡張機能パッケージによって提供されるミドルウェアは、サーバーから返されたコンテンツを処理し、Pjax プラグインがサーバーから返されることを予期するコンテンツに変換します。

ここでは、その使用法を示すために php 職人の make:auth コマンドによって生成されたデフォルトのビュー ファイルを例として取り上げます。 まず、ルーティング ファイル Routes.php を変更します。

Route::group(['middleware' => 'web'], function () {    Route::get('/', function () {        return view('welcome');    });    Route::get('/home', 'HomeController@index');    Route::auth();});

次に、デフォルトのレイアウト ファイルも変更する必要があります。 layouts/app.blade.php、Pjax設定を追加します:

...<div class="main-content" id="pjax-container">    @yield('content')</div><!-- JavaScripts --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.min.js"></script><script>    $(document).pjax('a', '#pjax-container');    $(document).on("pjax:timeout", function(event) {        // 阻止超时导致链接跳转事件发生        event.preventDefault()    });</script></body></html>

テストのためにブラウザでアクセスできるようにします:

ログイン/登録ボタンを切り替えると、ページはジャンプせず、ジャンプすることがわかります。直接リフレッシュできます。

注: この拡張パックは、pjax リクエストと通常の XHR リクエストを区別するために X-AJAX リクエスト ヘッダーを設定します。この場合、リクエストが pjax の場合、ページ レイアウト部分の HTML をスキップし、ページの主要部分のみをレンダリングします。

Laravel キャッシュの無効化

フロントエンド キャッシュの無効化を管理するために Laravel Elixir を使用します。このメソッドを使用して、x-pjax-version メタのコンテンツとして elixir メソッドを導入するだけです。

<meta http-equiv="x-pjax-version" content="{{ elixir('css/app.css') }}">

複数のファイルがある場合は、これを使用します:

<meta http-equiv="x-pjax-version" content="{{ elixir('css/app.css') . elixir('css/app2.css') }}">

この場合、フロントエンド キャッシュが失敗すると、Pjax キャッシュも自動的に失敗します。