NodeJs 中的 HTML 模板

2023-03-09 15:38:16 浏览数 (1)

HTML 模板是一种允许我们创建基本 HTML 结构并使用占位符根据从 JSON 文件或数据库中检索到的数据动态生成内容的技术。

让我们考虑一个假设实例，其中我们的网站包含许多产品卡，每个卡都包含从 JSON 文件中检索到的特定产品详细信息。

现在，如果我们要从 JSON 文件中添加或删除任何产品，我们将如何在前端动态更新相应的卡片？

考虑到我们基于内容的数据存储在 JSON 文件中，我们可以继续从现有的 HTML 代码创建可重用的模板。

第 1 步：构建模板

作为开发人员，您可能熟悉提供动态 Web 内容的概念。实现这一目标的一种方法是使用模板。

我们将创建两个 HTML 模板，一个用于产品概览页面，一个用于单个产品卡片。

第一个模板template-card.html用作单个产品卡片的蓝图，第二个模板template-overview.html用作概览页面的蓝图。这些模板包含占位符，当用户请求页面时，这些占位符将被替换为实际内容。

确保您的占位符不包含任何属于 HTML 代码的符号。占位符的常用语法是{%PLACEHOLDER_NAME%}.

这是template-card.html我们的第一个模板，用作根据需要动态创建尽可能多的卡片的蓝图。

代码语言：javascript复制
<figure class="card">
    <div class="card__emoji">{%IMAGE%}{%IMAGE%}</div>
    <div class="card__title-box">
      <h2 class="card__title">{%PRODUCTNAME%}</h2>
    </div>

    <div class="card__details">
      <div class="card__detail-box">
          <h6 class="card__detail card__detail 
               {%NOT_ORGANIC%}"> Organic!</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail">{%QUANTITY%} per 


	


json html 网站 




	






	

 0 人点赞