分享一下解决Dcat Admin左侧菜单不刷新的问题

起因

遇到一个需求,客户要菜单栏提示当前栏目下未处理数据的数量

解决过程

  • 首先我想到的是直接在后端获取到相关的数据,然后前端渲染,修改app\Admin\bootstrap.php

       \Dcat\Admin\Layout\Content::resolving(function (\Dcat\Admin\Layout\Content $content) {
          //未审核文章数
          $unCheckedArticle = \App\Models\Article::query()->where('status', false)->count();
          //未审核需求数
          $unCheckedNeed = \App\Models\Need::query()->where('status', false)->count();
          //未审核作品数
          $unCheckedProduct = \App\Models\Product::query()->where('status', false)->count();
    
          $total = $unVerifyProduct + $unVerifyNeed + $unVerifyArticle;
          view()->share([
             'unCheckedArticle' => $unCheckedArticle,
              'unCheckedNeed' => $unCheckedNeed,
              'unCheckedProduct' => $unCheckedProduct,
              'total' => $total
          ]);
      });
  • 修改前端页面后展示没有问题

  • 后面测试发现,在编辑,修改过后菜单栏的数量是不更新的(必须手动刷新页面),想了一下,哦,可能是pjax的问题

    于是我想禁用pjax,全站刷新,修改app\Admin\bootstrap.php

      Admin::disablePjax();  

    结果是没有效果的,去看一下,这个是不是有点小问题~ [@Jiangqh] (learnku.com/users/38389)


    换个写法(依然没用!)

       (new Admin())->pjax(false);

去查了很多资料(百度,手动狗头),也没有解决问题的方法,偶然看到了pjax的事件,然后有了思路

新建admin-extend.js

     (function($){
        var AdminExtended = {
            init: function(){
                var self = this;
                $(document).on('pjax:start', function() {

                });

                $(document).on('pjax:end', function() {

                });

                $(document).on('pjax:complete', function() {
                    self.refreshPage();
                });
                // 正常页面加载成功后的初始化
                self.refreshPage()
            },
            refreshPage: function() {
              window.location.reload()

            }

        };
        window.AdminExtended = AdminExtended;
    })(jQuery);

    $(document).ready(function()
    {
        AdminExtended.init();
    }); 

全局加载写好的JS文件,回到app\Admin\bootstrap.php

if (\Illuminate\Support\Facades\Route::current()->uri() != 'admin/auth/login') {
    Admin::js('/vendor/dcat-admin/dcat/js/admin-extend.js');
}

在回头去测试,pjax刷新后会重新整站刷新页面(右边内容区会刷新两次),功能基本实现了,可是体验太差(忍不了)

优化

    refreshPage: function() {
        //  window.location.reload()
        $.ajax({
        url: 'xxx',
        success: function(result) {
        //jquery操作DOM
        }
        })
    } 

refreshPage方法改为了异步去获取数据,jquery去操作DOM,体验好多了

结束

想问下大佬@Jiangqh 有没简单点的解决方法:neutral_face:

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 3
GDDD

无聊逛论坛。你这应该是最优解了。数据增改后,前端只有这个事件能去做点事情。

3个月前 评论

其实最简单的是在app/Admin/bootstrap.php中加上js代码去实现这个功能,例如

$url = admin_url('...');
$num = ...;
Admin::script(<<<JS
(function () {
    var a = $('.main-sidebar .nav-sidebar .nav-item > a[href="{$url}"]');
    var num = $num;
    if (! a.find('.audit-num').length) {
        a.find('p').append('&nbsp;<span class="audit-num badge bg-danger" style="padding: 4px 6px;"></span>')
    }

    a.find('.audit-num').text(num || '');
})()
JS
);
3个月前 评论

你这个未读计数怎么做的

2个月前 评论

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