res.render渲染异常：带查询参数时仅生成空表格行

问题分析 #

从你提供的代码来看，存在两个关键问题导致带查询参数时页面仅显示空行：

1. Server端响应逻辑有漏洞 #

当通过req.query.theme查询数据时，仅在data.length > 0时才调用res.render，如果数据为空（逻辑上存在未覆盖分支），请求会处于挂起状态；即使数据存在，当前逻辑也没有确保所有分支都有响应返回。

2. EJS中表格布局被破坏 #

你给<table>标签添加了flex justify-center类，这会改变表格的默认渲染模型，导致表格行（<tr>）无法正确展示内容，看起来像是空行。同时还存在<a>标签未闭合的问题，进一步干扰页面渲染。

修复方案 #

方案1：完善Server端响应逻辑 #

修改server.js中查询主题的分支，确保无论数据是否存在都返回响应：

app.get("/lego/sets", (req, res) => {
  if(req.query.theme){
    legoData
    .getSetsByTheme(req.query.theme)
    .then((data) => {
      // 无论数据是否存在，都渲染sets页面并传递对应数据
      res.render("sets", {sets: data || []});
      console.log(data);
    })
    .catch((err) => {
      res.status(404).render("404");
    });
  }
  else{
    legoData
    .getAllSets()
    .then((data) => {
     res.render("sets", {sets:data});
    })
    .catch((err) => {
      console.log('err')
      res.status(404).render("404");
    });
  }
});

方案2：修复EJS页面的表格布局与标签问题 #

移除<table>标签的flex类，改用外层容器实现居中，同时修复未闭合的<a>标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <%- include('partials/navbar', {page: '/lego/sets'}) %>

    <div class="hero min-h-24 p-6 bg-base-200 md:container md:mx-auto">
          <div class="max-w-md">
            <h1 class="text-5xl font-bold">Collection</h1>
          </div>
    </div>
<!-- 用外层div实现表格居中，避免破坏表格原生布局 -->
<div class="flex justify-center">
    <table>
        <tbody>
            <% sets.forEach((set)=>{ %>
                <tr>
                    <td class="w-24 rounded">
                        <img class="w-24 p-2" src="<%= set.img_url %>">
                    </td>
                    <td ><%= set.name %> </td>
                    <!-- 修复未闭合的a标签 -->
                    <td ><a href="/lego/sets?theme=<%= set.theme %>" class="btn"><%= set.theme %></a></td>
                    <td ><%= set.year %></td>
                    <td class="pl-6 pr-6"><%= set.num_parts %></td>
                    <td><a href="/lego/sets/<%= set.set_num %>" class="btn">Details</a></td>
                </tr>
            <% }) %>
        </tbody>
    </table>
</div>
</body>
</html>

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