NodeJs 中的 HTML 模板

Posted 海拥✘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NodeJs 中的 HTML 模板相关的知识,希望对你有一定的参考价值。

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

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

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

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

第 1 步:构建模板

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

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

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

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

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

<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 📦</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail card__detail--price"> 
            %PRICE%€</h6>
      </div>
    </div>

    <a class="card__link" href="/product?id=%ID%">
      <span>Detail <i class="emoji-right">👉</i></span>
    </a>
  </figure>

由于此卡片将用作模板,因此其中包含的信息也应替换为占位符。添加占位符后,卡片将类似于以下内容:

<figure class="card">
    <div class="card__emoji">🥦🥦</div>
    <div class="card__title-box">
      <h2 class="card__title">Apollo Broccoli</h2>
    </div>

    <div class="card__details">
      <div class="card__detail-box">
          <h6 class="card__detail card__detail--organic">Organic!</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail">3🥦 per 📦</h6>
      </div>

      <div class="card__detail-box">
        <h6 class="card__detail card__detail- 
              price">5.50</h6>
      </div>
    </div>

    <a class="card__link" href="/product?id=">
      <span>Detail <i class="emoji-right">👉</i></span>
    </a>
  </figure>

锚标记包含一个 href 链接,其中包含一个 ID 的占位符。这表明我们的 JSON 文件中的每张卡或产品都有一个不同的 ID。这些 ID 是唯一的,将用于在路由过程中识别每个产品。

此外,当我们需要根据元素的类别设置元素样式时,CSS 类和 ID 可以用占位符代替,就像在图像示例中所做的那样。这种方法在这种情况下特别有用。

<body>
  <div class="container">
    <h1>🌽 Node Farm 🥦</h1>

    <div class="cards-container">
      %PRODUCT_CARDS%
    </div>
  </div>
</body>

在此示例中,我们已将模板卡片替换为占位符。请务必记住,我们将使用这个单一模板卡片动态生成多张卡片。

注意:这是我们的第二张模板卡,template-overview.html

第 2 步:填充模板

有趣的部分来了,通过用实际内容替换我们的占位符来填充我们的模板。

当用户请求 URL 时,代码会同步读取相关模板文件(或者template-overview.htmltemplate-card.html),用 JSON 文件中的内容动态填充它,并将相关内容作为响应发回给用户。

这是通过使用函数实现的replaceTemplate,该函数用实际内容替换模板中的占位符。

// SECOND STEP:
const replaceTemplate = (temp, product) => 
    let output = temp.replace(/%PRODUCTNAME%/g, product.productName);
    output = output.replace(/%IMAGE%/g, product.image);
    output = output.replace(/%PRICE%/g, product.price);
    output = output.replace(/%ID%/g, product.id); 
     // /g is a regex global flag
    return output;


// FIRST STEP:
const tempOverview = fs.readFileSync(`$__dirname/templates/template-overview.html`, 'utf-8');
const tempCard = fs.readFileSync(`$__dirname/templates/template-card.html`, 'utf-8');
const data = fs.readFileSync(`$__dirname/dev-data/data.json`, 'utf-8');
const dataObj = JSON.parse(data);

// THIRD STEP:
const server = http.createServer((req, res) => 
    const pathName = req.url;

    //FOURTH STEP:
    //Here is the Overview
    if(pathName === '/' || pathName === '/overview') 
        res.writeHead(200, 'Content-type': 'text/html');
        const cardsHtml = dataObj.map(el => replaceTemplate(tempCard, el)).join('');
        const output = tempOverview.replace('%PRODUCT_CARDS%', cardsHtml);

        res.end(output);

        //API
     else if(pathName === '/api') 
        res.writeHead(200, 'Content-type': 'application/json');
        res.end(data);
    // Not Found
     else 
            res.writeHead(404, 
            'Content-type': 'text/html', //standard header
            'my-header': 'hello-world'
        );
        res.end('<h1>This page cannot be found.</h1>');
    
);

server.listen(8000, '127.0.0.1', () => 
    console.log('Listening to requests on port 8000');
);
    res.writeHead(404, 
            'Content-type': 'text/html', //standard header
            'my-header': 'hello-world'
        );
        res.end('<h1>This page cannot be found.</h1>');
    
);

server.listen(8000, '127.0.0.1', () => 
    console.log('Listening to requests on port 8000');
);

别担心,我们将仔细研究上面的大块代码,并用更简单的术语弄清楚它的作用。

  • 首先,读取两个 HTML 模板文件和存储在 JSON 文件中的产品数据
  • 其次,定义一个函数,用特定于产品的数据替换模板中的占位符。在这里,我们的函数被命名为replaceTemplate
  • 第三、监听传入的 HTTP 请求并检查请求 URL 的路径名
  • 第四,如果路径名为//overview,则使用replaceTemplatefunction和JSON文件中的产品数据替换tempCard模板中的占位符,为每个产品卡生成HTML代码。
  • 然后连接每张卡片的结果 HTML 以创建字符串cardsHtml。然后修改模板tempOverview以包含 cardsHtml 字符串,并将生成的 HTML 代码作为响应发回。
  • 此外,如果路径名是,/api它会以 JSON 格式发回产品数据作为响应
  • 最后,如果路径名是其他任何内容,则发回 404 错误消息。

哇,那段代码看起来确实很多,但如果我们仔细看,一步一步来,它并没有那么复杂。

它所做的只是用真实信息替换一些特殊词并将其发送回网站,以便人们可以看到它!

HTML 模板的好处

HTML 模板提供了几个好处,使其成为 Web 开发人员的热门选择:

  • 通过使用 HTML 模板,我们将内容与表示分离,允许开发人员生成可重复使用的模板,这些模板可以处理来自多个来源的不同数量的数据,并维护类似代码的多个副本。
  • HTML 模板为呈现数据、改善用户体验和轻松导航站点提供了标准结构。
  • 模板的灵活性使得修改底层数据变得更加容易。这节省了时间和精力,因为开发人员不需要手动更改 HTML 代码。
  • 由于 HTML 模板可重复使用,因此更易于维护和更新。可以在不修改模板代码的情况下对基础数据进行更改,从而降低出错的可能性。
  • HTML 模板可以在不影响性能的情况下处理大量数据。这使其成为具有大量动态内容的网站的理想选择。

总之,HTML 模板是一种高效、一致、灵活且可扩展的技术,可简化动态 Web 内容的开发和维护。

通过将内容与表示分离,HTML 模板使开发人员能够创建可重用的模板,这些模板可以处理不同数量的数据,而无需将内容硬编码到每个页面中。

拓展部分:

Node.js 中还有其他几个可用的模板引擎,例如 EJS、Pug(以前称为 Jade)、Handlebars 和 Mustache 等。

要在 Node.js 中使用模板引擎,您需要通过 npm 安装它,然后在您的代码中需要它。这些引擎提供了一种通过将数据插入模板内的占位符来生成 HTML 的方法。

⭐️ 好书推荐

《特效师手册:影视剪辑与特效制作从入门到精通(剪映版)》

【内容简介】

本书根据作者多年的特效制作经验,结合目前年轻人喜爱的短视频特效,设计、讲解了 11 章内容,包括影视剪辑与特效基础、画面特效与人物特效、使用蒙版合成画面、混合模式合成效果、用关键帧制作特效、掌握剪映抠图特效、剪辑影视解说视频、制作影视字幕特效,以及制作热门的武侠类特效、仙侠类特效和科幻类特效等,帮助读者在较短的时间内,从新手成为剪映影视剪辑和特效制作高手。本书既讲解了如何在剪映电脑版中进行影视剪辑与特效制作,也讲解了剪映手机版的案例制作步骤,让读者买一本书精通剪映的两个版本,轻松玩转剪映电脑版 + 手机版,随时随地制作出精彩的影视混剪与特效视频。

📚 京东自营购买链接:《特效师手册:影视剪辑与特效制作从入门到精通(剪映版)》

以上是关于NodeJs 中的 HTML 模板的主要内容,如果未能解决你的问题,请参考以下文章

nodejs express 设置html后缀模板

nodejs 返回html页面--使用 ejs 模板

使用nodejs从模板生成PDF的最佳方法

如何删除 nodejs/html 中的科学记数法并仅以十进制显示?

nodejs之egg框架整合ejs模板

使用 Jade、NodeJS、Express 的动态 html 页面