提取 Vue.js 应用程序的十月静态页面 MainMenu 项

Question

为了在 10 月构建 Vue 菜单，我在后端插件中有以下代码。在 JSON 数据中获取 Static Pages pages 工作正常，保持页面项目缩进：

$theme = \Cms\Classes\Theme::getEditTheme();
$pageList = new \RainLab\Pages\Classes\PageList($theme);
$treePageList = $pageList->getPageTree(true);

现在我想提取 10 月的“RainLab 静态页面/菜单/Mainmenu”items，保持菜单项缩进。（在我的后端插件中）。

感谢您提供有关如何获取这些菜单项的任何想法？

Answer 1

您可以在 layout file 上添加 static-menu component 和 ajax-handler 来处理 ajax 请求。

Your need to add staticMenu with proper menu selected

现在在处理程序代码中

function onGetMenu() {
    $menuItems = $this['staticMenu']->menuItems();
    return Response::json(['mainMenu' => $menuItems]);
}

Ajax request

$.request('onGetMenu', {
    success: function (data) {
      console.log(data);
    }
});

你可以得到你的菜单作为回应

如果您想查看带图片的完整教程，请在此处查看 Static Page Menu Ajax Tutorial

如有疑问请评论。

Answer 2

感谢 Hardik Satasiya，我用下面的代码解决了它：

if(class_exists('\Rainlab\Pages\Classes\Menu')) {
    $theme = \Cms\Classes\Theme::getActiveTheme();
    $menus = \RainLab\Pages\Classes\Menu::listInTheme($theme, 'mainmenu');
    $menu_full = json_decode($menus);

    return getRecursiveMenu($menus);
}

function getRecursiveMenu($menus) {
    static $level = 0;
    static $next_level = 0;
    $menuDetails = [];
    foreach($menus as $iMenu) {
        $detail = [];
        if ($level == $next_level) {
            $detail['menu_name'] = ['name' => $iMenu->name];
        } else
            $detail['menu_name'] = ['title' => $iMenu->title, 'url' => $iMenu->reference];

        $level++;
        $items = getRecursiveMenu($iMenu->items);

        if(count($items) > 0 ) {
            $detail['menu_items'] = $items;
        }
        $menuDetails[] = $detail;
        $next_level++;
    }
    return $menuDetails;
}

感谢您的帮助！

提取 Vue.js 应用程序的十月静态页面 MainMenu 项

Extracting October Static Pages MainMenu items for a Vue.js app

octobercms

octobercms-plugins

octobercms-backend