需求

公司决定要使用前后端分离方式，重构一个维护了十余年的后台系统（原来是后端渲染方式）。由于持续过程较长，需要新旧系统并存一段时间。这个并存希望对使用者透明，因此我们把新系统界面结构弄的跟旧系统很相似，且我们要实现两个系统菜单完全一致。

要做到完全一致，首先需要将旧系统菜单抽离出来，改成可配置形式。其次因为新系统是前端渲染形式，所以新系统菜单需要通过 API 获取。接下来详细介绍具体实现的要点，实现代码以框架 Rails 5 和 Vue.js 2 举例，实际上其他框架大同小异。

请求路由定义

首先是路由定义。路由定义每个系统单独定义自己的功能，假如现在总共有三个功能，其中一个功能已经重构到了新系统内。

1、旧系统（Rails）还剩下两个路由：

# config/routes.rb

Rails.application.routes.draw do
  get "function-A1" => "function_a1#index"
  get "function-A2" => "function_a2#index"
end

2、新系统（Vue.js）增加一个路由：

// src/configs/routes.js

const routes = [  
  {
    path: '/function-B1',
    component: () => import('@/pages/function_b1'),
  },
]

菜单改成可配置化

然后是菜单配置问题。配置形式采用 yaml 格式，使用最简单的树形结构，配置内容尽可能的少。

1、配置菜单：

# config/menus.yml

- name: 菜单A
  icon_old: icon-a
  icon_new: mdi-a
  children:
    - name: 菜单A1
      link: /function-A1
    - name: 菜单A2
      link: /function-A2
- name: 菜单B
  icon_old: icon-b
  icon_new: mdi-b
  children:
    - name: 菜单B1
    - link: /frontend/function-B1
# ...

这里假定 /frontend 开头的连接，会使用新系统（Vue.js）进行服务（这里需要配置代理和 Nginx，此文先不展开），其他情况使用旧系统（Rails）进行服务。

2、加载菜单配置文件：

# config/initializers/config_menus.rb

file_dir = Rails.root.join('config', 'menus.yml')
Rails.configuration.menus = YAML.load_file(file_dir)
# 之后可在程序中这样获取：Rails.configuration.menus

（进阶一）其中我们可能要经常要在菜单配置中使用 Rails Routes Helper 方法，可以改用如下加载方式：

# config/initializers/config_menus.rb

Rails.configuration.after_initialize do |application|
  # 开发环境此时路由数据依然为空，需要主动 reload
  # https://stackoverflow.com/a/8707687
  application.reload_routes!

  file = File.read(Rails.root.join('config', 'menus.yml'))
  # yaml 配置中，可以用 <%= xxx_path %> 方法
  bind = application.routes.url_helpers.instance_eval { binding }
  application.config.menus = YAML.load(ERB.new(file).result(bind))
end

（进阶二）树形结构不好通过子节点取父节点，这里通过程序给菜单自动添加一个 tree_nodes 属性，使得后续用起来更方便：

# config/initializers/config_menus.rb

file_dir = Rails.root.join('config', 'menus.yml')
Rails.configuration.menus = YAML.load_file(file_dir)
# 菜单A的 tree_nodes 为: [1], 菜单A1: [1, 1], 菜单A2: [1, 2], 菜单B: [2]
add_tree_nodes = lambda { |menus, parent_tree_nodes = []|
  menus.each_with_index do |menu, index|
    tree_nodes = parent_tree_nodes + [index + 1]
    menu.merge!("tree_nodes" => tree_nodes)
    add_tree_nodes.call(menu['children'], tree_nodes) if menu['children'].present?
  end
}
add_tree_nodes.call(Rails.configuration.menus)

旧系统菜单渲染

旧系统是后端渲染方式，可以直接取到配置并渲染。渲染采用递归形式渲染，下面是一些核心方法。

1、在布局里渲染菜单：

# app/views/layouts/application.html.erb

# 菜单栏
<%= render_menus(Rails.configuration.menus) %>

2、菜单渲染核心方法（UI 框架为 Bootstrap 2）：

# app/helpers/menus_helper.rb

module MenuHelper
  def render_menus(menus, depth = 1)
    doms = menus.map do |menu|
      if menu['children']
        <<~HTML
          # 这里假设 open 样式会让父菜单打开折叠
          <li class="#{'open' if menu_active?(menu, depth)}">
            <a href="#" class="dropdown-toggle">
              <i class="#{menu['icon_old'] || 'icon-double-angle-right'}"></i>
              <span class="menu-text">#{menu['name']}</span>
              <b class="arrow icon-angle-down"></b>
            </a>
            <ul class="submenu">
              #{render_menus(menu['children'], depth + 1)}
            </ul>
          </li>
        HTML
      else
        <<~HTML
          # 这里假设 active 样式会让子菜单高亮
          <li class="#{'active' if menu_active?(menu, depth)}">
            <a href="#{menu['link']}">
              <i class="#{menu['icon_old'] || 'icon-double-angle-right'}"></i>
              <span class="menu-text">#{menu['name']}</span>
            </a>
          </li>
        HTML
      end
    end
    doms.join.html_safe
  end

  private

  # 这里用到了上面菜单配置进阶二中的 tree_nodes 属性，如果不用，也可以用其他方式解决
  def menu_active?(menu, depth)
    current_active_menu&.dig('tree_nodes')&.first(depth) == menu['tree_nodes']
  end

  # 深度遍历，获取第一个命中的菜单（命中算法这里简单使用当前 url 的 path，实际情况可能更复杂，这里不展开讨论）
  def current_active_menu(menus = nil)
    @current_active_menu ||= begin
      menus ||= Rails.configuration.menus
      menus.each do |menu|
        if menu['children']
          active_menu = current_active_menu(menu['children'])
          return active_menu if active_menu
        elsif request.path == menu['link']
          return menu
        end
      end
      nil
    end
  end
end

新系统菜单渲染

新系统是前端渲染形式，除了获取菜单数据方式需要通过 API 形式，其他跟上面逻辑大同小异，大部分就是 Ruby 代码改 JS 代码。

1、首先定义后端菜单获取的 API：

# app/controllers/api/menus_controller.rb

module Api
  class MenusController < ApplicationController
    def index
      render json: { menus: Rails.configuration.menus }
    end
  end
end

2、然后是前端布局中渲染菜单：

<!-- src/layouts/index.vue -->

<template>
  <Menus :menus="menus" :currentActiveMenu="currentActiveMenu" />
</template>
<script>
import Menus from '@/components/Menus'
export default {
  components: {
    Menus,
  },
  data: function () {
    return {
      menus: [],
      currentActiveMenu: null,
    }
  },
  mounted () {
    axios
      .get('/api/menus.json')
      .then(res => {
        this.menus = res.data.menus
        // 根据当前访问 url，设置匹配到的菜单，后续高亮这个菜单要用
        this.setCurrentActiveMenu(this.menus)
      })
  },
  method: {
    setCurrentActiveMenu (menus) {
      menus.forEach(menu => {
        if (menu.children) {
          const activeMenu = this.setCurrentActiveMenu(menu.children)
          if (activeMenu) { this.currentActiveMenu = activeMenu }
        } else if (location.pathname === menu.link) {
          this.currentActiveMenu = menu
        }
      })
    },
  },
</script>

3、最后是完成核心菜单组件（UI 框架为 Vuetify 2）：

<!-- src/components/Menus.vue -->

<template>
  <v-list>
    <template v-for="menu in menus">
      <v-list-group
        v-if="menu.children"
        :key="menu.name"
        :sub-group="isSubmenu"
        :value="isMenuActive(menu)"
      >
        <template v-slot:activator>
          <v-list-item-icon v-if="!isSubmenu">
            <v-icon v-text="menu.icon_new || 'mdi-notification-clear-all'" />
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="menu.name" />
          </v-list-item-content>
        </template>
        <Menus :menus="menu.children" :currentActiveMenu="currentActiveMenu" :depth="depth + 1" />
      </v-list-group>
      <v-list-item
        v-else
        :key="menu.name"
        :href="menu.link"
        :class="{ 'v-list-item--active': isMenuActive(menu) }"
      >
        <v-list-item-icon v-if="!isSubmenu">
          <v-icon v-text="menu.icon_new || 'mdi-notification-clear-all'" />
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title v-text="menu.name" />
        </v-list-item-content>
      </v-list-item>
    </template>
  </v-list>
</template>

<script>
  export default {
    name: 'Menus', // 采用递归组件形式，需要配置组件名称
    props: {
      menus: { type: Array, required: true },
      currentActiveMenu: { type: Object },
      depth: { type: Number, default: 1 },
    },
    methods: {
      isMenuActive(menu) {
        if (this.currentActiveMenu) {
          return this.currentActiveMenu.tree_nodes.slice(0, this.depth).join(',') === menu.tree_nodes.join(',')
        } else {
          return false
        }
      },
    },
    computed: {
      isSubmenu () {
        return this.depth !== 1
      },
    },
  }
</script>

其他

以上是最小核心解决方式，后面要在实际项目中用起来，还要处理菜单是否可见、菜单是否新窗口打开、菜单是否有权限等一系列问题，大部分可以在配置文件中增加配置项解决。

其实将系统菜单配置到 menus.yml 中才是最花时间的，手动整理了 1000 多行 -_-