3 后台页面加载原理是怎样的?

发布于 2019-03-08 10:41:17

image.png
后台右边的内容是控制器的index()方法解析对应模板后,结合模板布局,最后引入到一个iframe里加载出来的。我看了下只有index目录下的index.html里有这个iframe:如下:
<!-- 主体内容区域 -->
<div class="content-wrapper tab-content tab-addtabs">

<!-- 固定页显示的框架页面 -->
{if $fixedmenu}
<div role="tabpanel" class="tab-pane {:$referermenu?'':'active'}" id="con_{$fixedmenu.id}">
    <iframe src="{$fixedmenu.url}?addtabs=1" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling-x="no" scrolling-y="auto" allowtransparency="yes"></iframe>
</div>
{/if}
<!-- 切换到的菜单显示的框架页面 -->
{if $referermenu}
<div role="tabpanel" class="tab-pane active" id="con_{$referermenu.id}">
    <iframe src="{$referermenu.url}?addtabs=1" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling-x="no" scrolling-y="auto" allowtransparency="yes"></iframe>
</div>
{/if}

</div>

那就是一个控制器解析了对应的模板文件后,又解析了index/index.html这个模板吗?
这波操作是什么神操作?大神给指导下吧。

查看更多

关注者
0
被浏览
371
惠达浪
惠达浪 2019-03-08
我的PR合并啦!哈哈哈!

我看了下代码,虽然细节的处理还看不懂,但流程已经清楚了。
在admin/controller/index.php中,生成菜单,第一行就是。

    /**
     * 后台首页
     */
    public function index()
    {
        //左侧菜单
        list($menulist, $navlist, $fixedmenu, $referermenu) = $this->auth->getSidebar([
            'dashboard' => 'hot',
            'addon'     => ['new', 'red', 'badge'],
            'auth/rule' => __('Menu'),
            'general'   => ['new', 'purple'],
        ], $this->view->site['fixedpage']);
    // 其它代码
    }

这个getSidebar()在生成菜单时,就已经定义了规范。
此时菜单的html代码已经生成,解析模板时,代入到admin/view/common/menu.html中,在这个文件中有如下代码:

<!--如果想始终显示子菜单,则给ul加上show-submenu类即可,当multiplenav开启的情况下默认为展开-->
<ul class="sidebar-menu {if $config.fastadmin.multiplenav}show-submenu{/if}">

就是菜单了,剩下的过程是ThinkPHP的模板机制,不说了。
最后,我在public/assets/js/backend/index.js中找到如下代码:

//点击左侧菜单栏
$(document).on('click', '.sidebar-menu li a[addtabs]', function (e) {
     var parents = $(this).parentsUntil("ul.sidebar-menu", "li");
     // ... ...

虽然这个前端js机制我还没弄明白,但可以肯定的是,每个菜单项都加上了点击事件。点击后至少做两个工作:

  1. 在最顶端添加选项卡。
  2. 在iframe中打开对应的链接。

而且获取的内容好像是ajax方式实现的。证据有两个:

  1. 第一次加载时虽然加载好多资源,但第二次再点,就省下核心部分了。

image.png

  1. 在admin/library/traits/Backend.php的index方法中,有如下代码:
        //设置过滤方法
        $this->request->filter(['strip_tags']);
        if ($this->request->isAjax()) {
            // .... 简略

            $list = collection($list)->toArray();
            $result = array("total" => $total, "rows" => $list);

            return json($result);
        }
        return $this->view->fetch();

而该trait是Backend控制器中引用的,也就是说后台控制器只要继承Backend,就use了这个trait,同时间接继承了tp的controller。从该文件中明显看出数据的获取是ajax方式。

总结:左侧菜单在生成时添加了javascript事件,点击后,主内容区域,先加载模板,数据通过ajax方式获取。

1 个回答

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览