如何用Node.js、MongoDB、EJS实现Flash游戏按分类分Div展示？

嘿，我懂你现在的处境——已经能把游戏展示在首页了，但想把不同类型的游戏规整到对应的分类区块里，让页面更清晰对吧？这事儿其实没那么复杂，咱们一步步来搞定它！

第一步：给游戏数据加上分类标识 #

首先得确保你的MongoDB里的每个游戏文档都有分类字段，比如叫category，值就是“策略游戏”、“塔防游戏”这类具体的分类名称。举个文档示例：

// MongoDB中的游戏文档结构
{
  name: "帝国争霸",
  flashUrl: "/games/empire_war.swf",
  category: "策略游戏",
  coverUrl: "/covers/empire_war.jpg",
  description: "一款经典的回合制策略游戏"
}

如果之前没加这个字段，你可以批量更新现有数据，或者在新增游戏的时候强制要求填写分类。

第二步：后端按分类分组数据 #

接下来在Node.js的路由里，把数据库里的游戏按分类分组后传给前端。这里有两种方式可选：

方式1：用MongoDB聚合查询（推荐） #

直接让数据库帮我们分组，效率更高：

// 假设你的路由文件是routes/home.js
router.get('/', async (req, res) => {
  try {
    // 按category字段分组，把同分类的游戏存到games数组中
    const groupedGames = await Game.aggregate([
      {
        $group: {
          _id: "$category",
          games: { $push: "$$ROOT" } // 把整个游戏文档推到数组里
        }
      },
      { $sort: { _id: 1 } } // 可选：按分类名称排序，让页面展示更规整
    ]);
    // 把分组后的数据传给EJS模板
    res.render('index', { groupedGames });
  } catch (err) {
    console.error('获取游戏数据出错：', err);
    res.status(500).send('服务器内部出错啦');
  }
});

方式2：用JS手动分组 #

如果不想用聚合，也可以先拿到所有游戏，再用JS的reduce方法手动分组：

router.get('/', async (req, res) => {
  try {
    const allGames = await Game.find({});
    // 手动将游戏按分类分组
    const groupedObj = allGames.reduce((acc, game) => {
      const cat = game.category;
      if (!acc[cat]) acc[cat] = [];
      acc[cat].push(game);
      return acc;
    }, {});
    // 把对象转成数组，方便EJS遍历
    const groupedGames = Object.entries(groupedObj).map(([category, games]) => ({
      category,
      games
    }));
    res.render('index', { groupedGames });
  } catch (err) {
    console.error('获取游戏数据出错：', err);
    res.status(500).send('服务器内部出错啦');
  }
});

第三步：前端EJS渲染分类区块 #

现在在你的index.ejs模板里，遍历分组后的数据，生成对应的分类区块：

<!-- index.ejs 核心代码 -->
<div class="main-container">
  <% groupedGames.forEach(categoryGroup => { %>
    <!-- 单个分类区块 -->
    <div class="category-section">
      <!-- 分类标题 -->
      <h2><%= categoryGroup.category %></h2>
      <!-- 游戏网格容器 -->
      <div class="game-grid">
        <% categoryGroup.games.forEach(game => { %>
          <!-- 单个游戏卡片 -->
          <div class="game-card">
            <img src="<%= game.coverUrl %>" alt="<%= game.name %>" class="game-cover">
            <h3><%= game.name %></h3>
            <a href="/play/<%= game._id %>" class="play-btn">开始游戏</a>
          </div>
        <% }) %>
        <!-- 如果该分类没有游戏，显示提示 -->
        <% if (categoryGroup.games.length === 0) { %>
          <p class="empty-tip">暂无该分类的游戏哦</p>
        <% } %>
      </div>
    </div>
  <% }) %>
</div>

第四步：用CSS美化布局 #

最后加些CSS样式，让分类区块和游戏卡片看起来更整齐美观：

/* 自定义样式，可根据你的网站风格调整 */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.category-section {
  margin-bottom: 3rem;
  padding: 1.5rem;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.category-section h2 {
  margin-top: 0;
  color: #2d3748;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.5rem;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.game-card {
  text-align: center;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.game-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.8rem;
}

.play-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1.2rem;
  background-color: #3182ce;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}

.play-btn:hover {
  background-color: #2b6cb0;
}

.empty-tip {
  grid-column: 1 / -1;
  text-align: center;
  color: #718096;
  padding: 2rem;
}

这样一套流程下来，你就能实现想要的“分类+游戏卡片”展示效果啦！如果还有细节需要调整，比如分类的排序、游戏卡片的样式，都可以根据自己的需求修改~

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