使用 Express 和 EJS 模板从 JSON 响应动态创建路由答案

【问题标题】：Dynamically creating routes with Express and EJS template from JSON response使用 Express 和 EJS 模板从 JSON 响应动态创建路由
【发布时间】：2017-07-28 09:07:41
【问题描述】：

我有许多产品，并希望为每个产品动态创建一个路由，因此当我将产品添加到 CMS 时，我正在执行 API 调用以获取 JSON，它会自动创建页面而不是手动编码.

JSON Tree

快递：

var scopedEntries;

//get contentful entries
client.getEntries() //get entries
.then(function (entries){
  scopedEntries = entries; //assigning globally to later pass into routes
  console.log(entries.items[0].fields.companyName); //log data
}); // end of promise

router.get('/test:id', function (req, res) {
  //console.log(scopedEntries);
  res.render('test' + req.params.id, {
    entries: scopedEntries
    });
  });

模板示例：

<html>
  <head>
    <title>TEST APP</title>
  </head>
  <body>
    <h1><%= entries.items[0].fields.companyName %></h1>
    <h2><%= entries.items[1].fields.productName %></h2>
    <p>Description: <%= entries.items[1].fields.productDescription %></p>
    <p>Size: <%= entries.items[1].fields.sizetypecolor %></p>
    <p>Price: <%= entries.items[1].fields.price %></p>
    <p>SKU: <%= entries.items[1].fields.productDescription %></p>
    <img src="<%= entries.includes.Asset[0].fields.file.url %>" alt="" />
  </body>
</html>

因此，理想情况下，JSON 响应中的每个项目都有一个页面，并且它是在快速路由中使用 EJS 动态创建的。我将如何正确地做到这一点。

另外，JSON 不是最终的 JSON。该架构尚未完全播种，因此我需要将其调整为我的树。

【问题讨论】：

您可能不想为每个产品都创建一条路线。可能，您想创建一个处理所有产品的单个路由，然后在您的路由中指定一个参数（路由的一部分或查询参数），告诉单个路由处理程序应该显示哪个产品。
感谢您的评论！具体我该怎么做？
要执行我上面的建议，我们必须了解您网站的整体 URL 设计，以便我们可以准确地建议如何将产品参数放入 URL 结构中。
我可以将 IDS 作为产品名称
想象一下，如果测试路线是 /product/:ID

标签： json node.js express ejs

【解决方案1】：

您可能不想为每个产品都创建一条新路线。可能，您想创建一个处理所有产品的单一路由，然后在路由中指定一个参数（路由的一部分或查询参数），告诉单一路由处理程序应该显示哪个产品。

具体如何操作取决于您网站的整体 URL 设计。但是，你可以有一个/product/view/:productName 的路由。或/product/view/:productID 并拥有一个处理您所有产品的路线处理程序。如果有人输入了一个不存在的productName 或productID，那么你只需要做一个不错的 404 页面。

此路由的一个路由处理程序将从 URL 中获取 productName 或 productID（取决于您要设计的那个），然后在您的数据库中查找有关该产品的所有相关信息。然后它将所有数据放入一个数据结构（可能是一个具有很多属性的对象），然后将该数据结构传递给res.render(templateName, data)。然后，模板引擎将按照您的模板指定将数据放入生成的 HTML 页面中。

如果某些产品显示不同类型的信息，那么您的模板必须是需要显示的所有内容的超集，并且您对模板进行编码以根据传递给 @ 的数据中是否存在各种信息来显示各种信息987654326@.

【讨论】：

另外，问题的当前代码已经几乎所有部分都到位了；它只需要将 ID 从模板名称中移出，而不是传递整个产品列表，而是使用 ID 在产品列表中找到正确的条目并将其仅传递给模板。
太棒了！！但我有一个问题，我们是如何从客户端发送 productID 的，你能帮忙吗！！
@SaadSohail - 我建议您编写自己的问题并充分描述您的情况并展示您目前拥有的代码。