Laravelアプリケーションでページアクセラレーションにpjaxを使用する方法

注: PHPHub は、Web ページの読み込みを高速化するために pjax を使用します。この記事は、この関数の開発後に作成されたメモです。

関連する推奨事項: "laravel チュートリアル "

Pjax とは

        .--.
       /    \
      ## a  a
      (   '._)
       |'-- |
     _.\___/_   ___pjax___
   ."\> \Y/|<&#39;.  &#39;._.-&#39;
  /  \ \_\/ /  &#39;-&#39; /
  | --&#39;\_/|/ |   _/
  |___.-&#39; |  |`&#39;`
    |     |  |
    |    / &#39;./
   /__./` | |
      \   | |
       \  | |
       ;  | |
       /  | |
 jgs  |___\_.\_
      `-"--&#39;---&#39;

プロジェクトのアドレスはこちら、公式紹介:

pushState ajax = pjax

詳しい説明については、こちらをご覧ください。この問題については、「この問題について」を参照するか、自分で情報を確認してください。

これを簡単に説明すると、ajax テクノロジを使用してサーバーからドキュメントを取得し、現在のページを何もせずに更新します。ブラウザ ページを更新することで、ページの js と css およびその他の assets ファイルが繰り返し読み込まれないようにすることができます。ブラウザによって提供される ##pushState 関数は URL を更新し、ユーザーが [戻る] ボタンをクリックして履歴ページに戻れるようにします。

注:すべてのブラウザが PushState をサポートしているわけではありません。ブラウザの互換性については、こちらを参照してください。ブラウザに互換性がない場合、自動的に元のブラウジング方法を使用してアクセスします。

Pjax を使用する理由

ページ全体を更新する必要がなく、

assets ファイルを再ロードする必要がないため、ページの読み込み速度が大幅に向上します。

サーバー側インストール

rcrowe/Turbo

パッケージ rcrowe/Turbo を使用します。

インストール

rcrowe/Turbo

# の

require 属性の下に追加します。 composer.json:

"rcrowe/turbo": "0.2.*"

次に、

composer update または composer install

構成

プロバイダー

#app/config/app.php

ファイルを編集し、オプション providers 配列を追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&quot;Turbo\Provider\Laravel\TurboServiceProvider&quot;,</pre><div class="contentsignin">ログイン後にコピー</div></div>pjax.jsをダウンロード

public\js

フォルダーの下 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>wget https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js</pre><div class="contentsignin">ログイン後にコピー</div></div> 次に、このファイルをテンプレートに読み込みます

<script src="{{ cdn(&#39;js/jquery.pjax.js&#39;) }}"></script>

最後のページで呼び出します:

$(document).ready(function(){    $(document).pjax('a', 'body');});

上記のコードの説明は、 a

タグのクリック イベントをすべて

にインターセプトすることです。現在のブラウザが pjax をサポートしている場合は、ajax リクエストを送信し、パラメーター _pjax=body## を持ち込んでください。 #.If すべてがうまくいけば、Chrome のデバッガーで次のようなリクエストが表示されます。

この時点で、構成は正常に完了しています。完了しました。

読み込みアニメーションを追加

# 次に、ページ読み込みアニメーションを追加する必要があります。効果は次のとおりです:

追加nprogress

# 達成するには rstacruz/nprogress を使用します。

追加方法は、ファイルをダウンロードし、

nprogress.js

と

nprogress.css をページへ:

    <script src=&#39;nprogress.js&#39;></script>    <link rel=&#39;stylesheet&#39; href=&#39;nprogress.css&#39;/>

Call

#上記のコードを変更します。変更後のコードは次のとおりです:

$(document).ready(function(){    $(document).pjax('a', 'body');    $(document).on('pjax:start', function() {
      NProgress.start();  });  $(document).on('pjax:end', function() {
      NProgress.done();
      self.siteBootUp();  });});

この場合、ページをクリックするたびにクールな効果が得られます

以上がLaravelアプリケーションでページアクセラレーションにpjaxを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。