Laravel 애플리케이션에서 페이지 가속을 위해 pjax를 사용하는 방법

참고: PHPHub는 웹 페이지 로딩 속도를 높이기 위해 pjax를 사용합니다.

관련 권장 사항: "laravel tutorial"

Pjax란 무엇입니까

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

여기에서 프로젝트를 확인하세요. 주소, 공식 소개:

pushState + ajax = pjax

자세한 설명은 Zhihu에서 이 질문을 참조하거나 직접 정보를 확인하세요.

간단한 설명, 즉 ajax를 사용합니다. code> 기술 서버로 이동하여 문서를 얻고, 브라우저 페이지를 새로 고치지 않고 현재 페이지를 업데이트하고, 페이지의 <code>js 및 css가 인지 확인하세요. 자산 파일은 반복적으로 로드되지 않으며 브라우저에서 제공하는 pushState 기능을 사용하여 URL을 업데이트하고 사용자가 클릭하여 기록 페이지로 돌아갈 수 있는지 확인합니다. 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

참고: 모든 브라우저가 pushState를 지원하는 것은 아닙니다. 브라우저 호환성을 확인하려면 여기를 참조하세요. 브라우저가 호환되지 않으면 자동으로 액세스에 사용됩니다. id="Pjax를 사용하는 이유- Pjax를 사용하는 이유

전체 페이지를 새로 고칠 필요가 없고 assets 파일을 다시 로드할 필요가 없기 때문에 로딩 속도가 크게 향상됩니다. 페이지.

서버측 설치 rcrowe/Turbo

rcrowe/Turbo 패키지를 사용하세요.

rcrowe/Turbo code>#🎜🎜추가: <code>composer.json의 require 속성 아래에 🎜

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

🎜를 설치한 다음 composer 업데이트를 업데이트합니다. 또는 composer install🎜<h3 id="Configuration-Providers"> <code>Providers 구성#🎜🎜app/config/app.php 파일, <code>providers /code> 옵션에서 배열에 추가:🎜<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-pjax-js">Download pjax.js</h2>🎜<code>publicjs 아래 code> 폴더🎜rrreee🎜그런 다음 템플릿에 이 파일을 로드합니다. 🎜rrreee🎜마지막 페이지에서 호출합니다.🎜rrreee🎜위 코드 설명은 <code>a 태그의 모든 클릭 이벤트를 가로채는 것입니다. 현재 브라우저는 pjax를 지원하고 ajax 요청을 보내고 _pjax=body 매개변수를 가져옵니다. 🎜🎜모든 것이 순조롭게 진행되면 Chrome 디버거에서 이와 유사한 요청을 볼 수 있습니다. : 🎜🎜🎜🎜이 시점에서 구성은 다음과 같습니다. 성공적으로 완료되었습니다.🎜

로딩 애니메이션 추가#

🎜다음 단계는 페이지 로딩 애니메이션을 추가하는 것입니다. 효과는 다음과 같습니다:🎜🎜🎜

nprogress 추가# 🎜🎜rstacruz/nprogress를 사용하여 달성하세요.🎜🎜추가하는 방법은 파일을 다운로드한 다음 nprogress.js 및 nprogress.css를 페이지에 추가하는 것입니다.🎜rrreee 🎜위 코드를 수정하려면 #🎜🎜을 호출하세요. 수정된 코드는 다음과 같습니다.🎜rrreee 🎜이 경우 페이지를 클릭할 때마다 멋진 효과가 나타납니다🎜

위 내용은 Laravel 애플리케이션에서 페이지 가속을 위해 pjax를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!