基于Bootstrap 5实现数据库健身动作复选框动态生成与导航栏同步

1. 先搭后端接口 #

你需要写一个后端接口，从数据库中查询所有健身动作数据，返回JSON格式的结果，示例格式如下：

[
  { "id": "squats", "name": "Squats" },
  { "id": "deadlifts", "name": "Deadlifts" },
  { "id": "benchpress", "name": "Bench Press" },
  { "id": "overheadpress", "name": "Overhead Press" }
]

用你熟悉的后端语言（PHP、Node.js、Python等）实现即可，核心逻辑就是查询数据库并返回上述结构的JSON数据。

2. 前端动态渲染复选框 #

先把原代码中硬编码的复选框部分改成空容器，让JavaScript动态生成内容：

<div class="collapse navbar-collapse justify-content-center" id="navbarCategories">
  <ul class="navbar-nav" id="navbar">
    <!-- 导航项将在这里动态生成 -->
    <div class="dropdown">
      <button class="nav-link btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" style="color: #c5c6c8;">Add favorite</button>
      <ul class="dropdown-menu">
        <form id="checkform">
          <div id="checkbox-container"></div> <!-- 动态复选框的容器 -->
          <br>
          <input type="submit" value="Submit">
        </form>
      </ul>
    </div>
  </ul>
</div>

然后编写JavaScript代码，请求后端接口并渲染复选框：

// 页面加载完成后执行初始化逻辑
document.addEventListener('DOMContentLoaded', async () => {
  try {
    // 替换为你的后端接口地址
    const response = await fetch('/api/exercises');
    const exercises = await response.json();
    
    const checkboxContainer = document.getElementById('checkbox-container');
    const savedFavorites = getSavedFavorites(); // 获取已保存的收藏动作
    
    exercises.forEach(exercise => {
      // 创建复选框元素
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.id = exercise.id;
      checkbox.name = exercise.id;
      checkbox.value = exercise.name;
      checkbox.className = 'form-check-input'; // 应用Bootstrap样式
      // 自动勾选已收藏的动作
      checkbox.checked = savedFavorites.some(fav => fav.id === exercise.id);
      
      // 创建标签元素
      const label = document.createElement('label');
      label.htmlFor = exercise.id;
      label.textContent = exercise.name;
      label.className = 'form-check-label'; // 应用Bootstrap样式
      
      // 用Bootstrap的form-check容器包裹，优化排版
      const checkItem = document.createElement('div');
      checkItem.className = 'form-check mx-3 my-1';
      checkItem.appendChild(checkbox);
      checkItem.appendChild(label);
      
      checkboxContainer.appendChild(checkItem);
    });
    
    // 初始化渲染导航栏的收藏项
    renderNavItems(savedFavorites);
  } catch (error) {
    console.error('加载动作列表失败:', error);
    // 可以在这里添加用户可见的错误提示，比如页面上的提示元素
    // document.getElementById('error-tip').textContent = '加载动作列表失败，请稍后重试';
  }
});

3. 处理表单提交，更新导航栏 #

用localStorage实现收藏状态的本地持久化（也可以改成提交到后端数据库存储），并同步更新导航栏：

// 从本地存储读取已收藏的动作
function getSavedFavorites() {
  return JSON.parse(localStorage.getItem('favoriteExercises')) || [];
}

// 将收藏动作保存到本地存储
function saveFavorites(favorites) {
  localStorage.setItem('favoriteExercises', JSON.stringify(favorites));
}

// 渲染导航栏的动作项
function renderNavItems(favorites) {
  const navbar = document.getElementById('navbar');
  // 保留下拉菜单部分，清空其余导航项
  const dropdown = navbar.querySelector('.dropdown');
  navbar.innerHTML = '';
  navbar.appendChild(dropdown);
  
  // 逐个渲染收藏的动作
  favorites.forEach(exercise => {
    const li = document.createElement('li');
    li.className = 'nav-item';
    
    const link = document.createElement('a');
    link.className = 'nav-link';
    link.style.color = '#c5c6c8';
    link.href = `#${exercise.id}`;
    link.textContent = exercise.name;
    
    li.appendChild(link);
    navbar.prepend(li);
  });
}

// 监听表单提交事件
document.getElementById('checkform').addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单默认提交刷新页面
  
  // 获取所有选中的复选框
  const checkedBoxes = document.querySelectorAll('#checkform input[type="checkbox"]:checked');
  const favorites = Array.from(checkedBoxes).map(box => {
    return { id: box.id, name: box.value };
  });
  
  // 保存收藏状态并更新导航栏
  saveFavorites(favorites);
  renderNavItems(favorites);
  
  // 如果需要将收藏提交到后端，取消注释下面的代码
  // fetch('/api/save-favorites', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(favorites)
  // });
});

4. 额外优化建议 #

• 样式统一：用Bootstrap的form-check类让复选框样式更贴合整体UI，上面代码已经集成
• 状态同步：页面加载时自动勾选已收藏的动作，避免用户重复操作
• 错误提示：添加用户可见的错误提示，当接口请求失败时及时反馈
• 去重处理：确保导航栏不会出现重复的动作项

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