在 Laravel 6.0 中使用 pjax 进行页面加速,并实现页面顶部进度条

自己学习Laravel也有一段时间了,最近在写项目时想用页面顶部进度条来使自己的页面效果好一点。于是便查看了站长5年前的一份文章,但是我自己使用起来总是会发生错误(可能是我自己弄错了),于是便自己进行摸索。
此篇文章是我发表第的第一篇,编辑器不太会使用,请见谅.

在你阅读以下文章时,强烈建议您先阅读站长发的文章.阅读站长文章

一.安装 rcrowe/Turbo

执行 composer 命令

    composer require spatie/laravel-pjax

二.注册中间件

app\Http\Kernel.php $middlewareGroups 数组中的 web 中添加

\Spatie\Pjax\Middleware\FilterIfPjax::class,

三.使用中间件

如果对使用中间件不熟悉的建议先去看一下


Route::middleware(['web'])->prefix('index')->group(function () {
        Route::get('index', function () {
            return view("index");
        });
        Route::get('login', function () {
            return view("login");
        });
    });    
        #使用中间件有很多种方法,我就不一一举例.

四.页面中引入css和js

下载 jquery.pjax.js 以及 nprogress 之后在页面引入css和js 并添加以下js代码

注意:此时页面应该引入了三个js文件分别是 Jquery jquery.pjax.js nprogress.js

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

这段代码是我从站长那篇文章复制过来的,但是 self.siteBootUp() 这个方法一直报错,我就把它给删了

感谢您阅读我的文章,如果遇到什么问题,欢迎在下方与我一起讨论.

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1

没有啥用,现在是VUE的天线了了!

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!