So verwenden Sie Pjax zur Seitenbeschleunigung in Laravel-Anwendungen

Hinweis: PHPHub verwendet Pjax, um das Laden von Webseiten zu beschleunigen.

Verwandte Empfehlungen: „Laravel-Tutorial“

Was ist Pjax?

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

Siehe hier für das Projekt Adresse, offizielle Einführung:

pushState + ajax = pjax

Eine ausführliche Erklärung finden Sie in dieser Frage auf Zhihu oder überprüfen Sie die Informationen selbst.

Eine einfache Beschreibung, d. h. mit ajax code>-Technologie Gehen Sie zum Server, um das Dokument abzurufen, aktualisieren Sie die aktuelle Seite, ohne die Browserseite zu aktualisieren, und stellen Sie sicher, dass <code>js und css der Seite sind Assets Die Datei wird nicht wiederholt geladen. Anschließend wird die vom Browser bereitgestellte Funktion pushState verwendet, um die URL zu aktualisieren und sicherzustellen, dass der Benutzer durch Klicken zur historischen Seite zurückkehren kann ajax 技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的js 和 css 等 assets 文件不会被重复加载, 然后利用浏览器提供的 pushState 功能, 对 URL 进行更新, 并能保证用户通过点击 back 按钮回溯到历史页面.

注意: 并不是所有浏览器都支持 pushState, 关于浏览器的兼容请见这里, 当浏览器不兼容的时候, 会自动使用原始的浏览方式进行访问.

为什么要使用 Pjax

因为不需要整个页面刷新, 并且 assets 文件都不需要重新加载, 很大程度上提高了页面的加载速度.

服务端安装 rcrowe/Turbo

使用 package rcrowe/Turbo .

安装 rcrowe/Turbo#

在 composer.json 里的 require 属性下添加:

"rcrowe/turbo": "0.2.*"

然后 composer update 或者 composer install

配置 Providers#

编辑 app/config/app.php 文件, 在选项 providers 数组里面添加:

"Turbo\Provider\Laravel\TurboServiceProvider",

下载 pjax.js

在 publicjs 文件夹下

wget https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

然后在模版里面加载此文件

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

最后页面里调用:

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

上面的代码解释是, 把所有的 a 标签的点击事件截获, 如果当前浏览器支持 pjax 的话, 发送一个 ajax 请求, 并把参数_pjax=body 带过去.

如果一起顺利的话, 在 Chrome 的 debuger 里能看到类似于这样的请求:

至此, 已经顺利配置完毕.

添加加载动画#

接下来要来添加一个页面加载的动画, 效果如下:

添加 nprogress#

使用 rstacruz/nprogress 来实现.

添加的方法是 下载 文件, 然后把 nprogress.js 和 nprogress.css

Hinweis: Informationen zur Browserkompatibilität finden Sie hier. Für den Zugriff wird automatisch die ursprüngliche Browsermethode verwendet id="Warum Pjax verwenden">Warum Pjax verwenden

Weil nicht die gesamte Seite aktualisiert werden muss und die Assets-Dateien nicht neu geladen werden müssen, was die Ladegeschwindigkeit erheblich verbessert die Seite.

Serverseitige Installation rcrowe/Turbo

Verwenden Sie das Paket rcrowe/Turbo.

Installieren Sie rcrowe/Turbo code>#🎜🎜Fügen Sie Folgendes hinzu: 🎜<pre class="brush:php;toolbar:false;"> &lt;script src=&amp;#39;nprogress.js&amp;#39;&gt;&lt;/script&gt; &lt;link rel=&amp;#39;stylesheet&amp;#39; href=&amp;#39;nprogress.css&amp;#39;/&gt;</pre>🎜 unter dem Attribut <code>require in composer.json und dann composer update oder composer install🎜<h3 id="Configuration-Providers">Configuration <code>Providers#🎜🎜Bearbeiten Sie die app/config/app.php-Datei, in der Option <code>providers Zum Array hinzufügen:🎜<pre class="brush:php;toolbar:false;">$(document).ready(function(){ $(document).pjax(&amp;#39;a&amp;#39;, &amp;#39;body&amp;#39;); $(document).on(&amp;#39;pjax:start&amp;#39;, function() { NProgress.start(); }); $(document).on(&amp;#39;pjax:end&amp;#39;, function() { NProgress.done(); self.siteBootUp(); });});</pre><h2 id="Download-pjaxjs">pjax.js herunterladen</h2>🎜Unter <code>publicjs code>-Ordner🎜rrreee🎜Dann laden Sie diese Datei in die Vorlage 🎜rrreee🎜Aufruf auf der letzten Seite:🎜rrreee🎜Die obige Codeerklärung besteht darin, alle Klickereignisse des <code>a-Tags abzufangen, und wenn das Der aktuelle Browser unterstützt pjax. Senden Sie eine Ajax-Anfrage und bringen Sie den Parameter _pjax=body mit. 🎜🎜Wenn alles gut geht, können Sie im Debugger von Chrome eine ähnliche Anfrage sehen : 🎜🎜🎜🎜Zu diesem Zeitpunkt ist die Konfiguration abgeschlossen erfolgreich abgeschlossen.🎜

Ladeanimation hinzufügen#

🎜Der nächste Schritt besteht darin, eine Seitenladeanimation hinzuzufügen. Der Effekt ist wie folgt:🎜🎜🎜

nprogress hinzufügen# 🎜🎜Verwenden Sie rstacruz/nprogress, um dies zu erreichen.🎜🎜Die Methode zum Hinzufügen besteht darin, die Datei herunterzuladen und dann nprogress.js und nprogress.css zur Seite hinzuzufügen:🎜rrreee 🎜Rufen Sie #🎜🎜 an, um den obigen Code zu ändern. Der geänderte Code lautet wie folgt:🎜rrreee 🎜In diesem Fall wird jedes Mal, wenn Sie auf die Seite klicken, ein cooler Effekt angezeigt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Pjax zur Seitenbeschleunigung in Laravel-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!