那些很神奇的bug系列—

问题描述
奉命修复一个停车系统的bug，后台管理系统前端应该是基于AdminLTE的。其中一个bug是这样的，原始页面是这样的：

$\1.png$
按照需求，这个侧边菜单栏是只有管理员才能访问的，于是对于非管理员页面应该是这样的：

$\2.png$
实际上显示效果是这样的：

$\3.png$
检查后发现是由于设置非管理员样式的时候多加了sidebar-mini属性，于是将其移除

@if(Auth::user()->id == 1)

  <body class="skin-blue">

@else

  <body class="skin-blue sidebar-mini sidebar-collapse">

  <body class="skin-blue sidebar-collapse">

@endif

移除后，页面显示效果如下：

$\4.png$
左边的小侧边菜单栏虽然是消失了，但是头部居然在文字前面空出了一大块黑框！

至此，这个神奇的bug终于浮出水面╭( ･ㅂ･)و ̑̑

解决办法
有的同学也许会说，直接把头部在文字前面的大黑框直接隐藏不久行了嘛？然而问题并没有那么简单(⊙︿⊙)
因为你在文件里根本找不到黑框对应的div或者块什么的┗( T﹏T )┛不信你看html：

<header class="main-header">
    
  <!-- Header Navbar -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
              <span class="logo"><b>智能云</b>停车场</span>
        <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        
        <style>
                        .user_Logout li{
                            padding-right: 30px;
                        }
                        .user_Logout li a{
                            float: left;
                        }
                        .user_Logout li .n_1:active,.user_Logout li .n_1:hover,.user_Logout li .n_1:focus,.user_Logout li .n_1:link{
                            background: none !important;
                        }
                    </style>
        <!-- User Account Menu -->
        <li class="dropdown user user-menu">
          <div class="navbar-custom-menu">
                        <ul class="nav navbar-nav navbar-right user_Logout">
                           
                            <li>
                                                                <a class="n_1" href="#">7535</a>
                                <a href="http://carlibws.dev/auth/logout">Logout</a>

                                                            </li>

                        </ul>
                    </div>
        </li>
      </ul>
    </div>
  </nav>
</header>

根据我们的前端攻城狮说，这个是直接由样式来生成的。。。

后来经过很多次绝望的尝试后，发现如果把智能云停车场文字这一段判断代码去掉页面就显示正常了（其实根本就不需要在这里判断，坑爹啊）！！！

<header class="main-header">

    @if(Auth::user()->is_admin == 1)
        <a href="/" class="logo"><b>智能云</b>停车场</a>
    @endif

  <!-- Header Navbar -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
    @if(Auth::user()->is_admin == 1)
    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
      <span class="sr-only">Toggle navigation</span>
    </a>
      @else
          <span class="logo"><b>智能云</b>停车场</span>
    @endif
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        
        <style>
                        .user_Logout li{
                            padding-right: 30px;
                        }
                        .user_Logout li a{
                            float: left;
                        }
                        .user_Logout li .n_1:active,.user_Logout li .n_1:hover,.user_Logout li .n_1:focus,.user_Logout li .n_1:link{
                            background: none !important;
                        }
                    </style>
        <!-- User Account Menu -->
        <li class="dropdown user user-menu">
          <div class="navbar-custom-menu">
                        <ul class="nav navbar-nav navbar-right user_Logout">
                           
                            <li>
                                                                <a class="n_1" href="#">{{ \Auth::user()->name }}</a>
                                <a href="{{ url('/auth/logout') }}">Logout</a>

                                                            </li>

                        </ul>
                    </div>
        </li>
      </ul>
    </div>
  </nav>
</header>

修改后

<header class="main-header">

  <!-- 这里不用判断，判断了反而会产生前段没法追查的bug，即虽然前段没有标签，但已经加载了样式，影响显示效果 -->
  <a href="/" class="logo"><b>智能云</b>停车场</a>
  <!-- Header Navbar -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
    @if(Auth::user()->is_admin == 1)
    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
      <span class="sr-only">Toggle navigation</span>
    </a>
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        
        <style>
                        .user_Logout li{
                            padding-right: 30px;
                        }
                        .user_Logout li a{
                            float: left;
                        }
                        .user_Logout li .n_1:active,.user_Logout li .n_1:hover,.user_Logout li .n_1:focus,.user_Logout li .n_1:link{
                            background: none !important;
                        }
                    </style>
        <!-- User Account Menu -->
        <li class="dropdown user user-menu">
          <div class="navbar-custom-menu">
                        <ul class="nav navbar-nav navbar-right user_Logout">
                           
                            <li>
                                                                <a class="n_1" href="#">{{ \Auth::user()->name }}</a>
                                <a href="{{ url('/auth/logout') }}">Logout</a>

                                                            </li>

                        </ul>
                    </div>
        </li>
      </ul>
    </div>
  </nav>
</header>

寻找原因
虽然问题解决了，但是一想其实还是觉得很神奇，因为对于非管理员来说，应该不会渲染出<a href="/" class="logo"><b>智能云</b>停车场</a>这个标签来的（实际上在页面上也看不到），不过因为这段代码的存在确实对头部的样式产生了影响。
怀疑这个问题可能是由laravel的blade模板解析引擎引起的，不过这个目前只是猜测，也不知怎么去验证。欢迎大家一起探讨╰(￣▽￣)╭

最后感谢我们公司的前端攻城狮@红杰，帮我解决了这个神奇的bug
( ^_^ )/~~拜拜

Laravel

登陆发表评论

那些很神奇的bug系列——1391