Abp Framework Blazor WASM如何从API动态生成左侧菜单并交互？

1. 从API动态生成菜单 #

完全可以通过API动态生成菜单，不需要手动写死所有菜单项。核心逻辑是：用户登录后调用API获取其课程列表，遍历返回的数据生成对应的DOM元素，再插入到左侧菜单容器中。

以下是原生JavaScript的简短实现示例：

// 假设左侧菜单容器的ID为left-menu
const menuContainer = document.getElementById('left-menu');

// 发起API请求获取用户课程列表（实际项目中替换为真实接口，需携带登录凭证如token）
async function fetchUserCourses() {
  const response = await fetch('/api/user/courses', {
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('authToken')}`
    }
  });
  return await response.json();
}

// 动态渲染菜单
async function renderCourseMenu() {
  const courses = await fetchUserCourses();
  
  // 清空原有菜单（避免重复加载）
  menuContainer.innerHTML = '';
  
  courses.forEach(course => {
    // 创建菜单项DOM元素
    const menuItem = document.createElement('div');
    menuItem.className = 'menu-item';
    menuItem.textContent = course.courseName;
    
    // 将课程GUID存入元素的dataset属性，用于后续交互
    menuItem.dataset.courseGuid = course.guid;
    
    // 把菜单项添加到菜单容器
    menuContainer.appendChild(menuItem);
  });
}

// 用户登录成功后调用该函数生成菜单
renderCourseMenu();

如果使用Vue、React等框架，逻辑类似：先请求API拿到数据，再用v-for（Vue）或map（React）循环渲染菜单组件即可，写法会更简洁。

2. 菜单项交互实现 #

要实现点击菜单项加载对应课程内容，只需给菜单项绑定点击事件，取出预先存储的课程GUID，再调用加载内容的逻辑即可。有两种常用实现方式：

方式1：生成菜单项时绑定点击事件 #

在上述renderCourseMenu函数中，创建menuItem后直接添加点击事件：

menuItem.addEventListener('click', () => {
  loadCourseContent(course.guid);
});

// 加载课程内容的核心函数
function loadCourseContent(courseGuid) {
  // 此处编写加载逻辑：比如发起API请求获取课程详情，更新页面内容区域
  console.log(`开始加载课程：${courseGuid}`);
  // 示例：更新内容区域显示
  document.getElementById('course-content').innerHTML = `<p>正在加载课程 ${courseGuid} 的内容...</p>`;
}

方式2：事件委托（推荐） #

如果菜单会频繁动态更新，事件委托更高效——仅需给菜单容器绑定一次事件，就能处理所有菜单项的点击：

// 给菜单容器绑定点击事件
menuContainer.addEventListener('click', (e) => {
  const menuItem = e.target.closest('.menu-item');
  if (!menuItem) return; // 点击的不是菜单项，直接返回
  
  const courseGuid = menuItem.dataset.courseGuid;
  loadCourseContent(courseGuid);
});

这种方式无需给每个菜单项单独绑定事件，性能更优，且新增菜单项时无需重新绑定事件。

内容的提问来源于stack exchange，提问作者AntiMatter