主标题:如何使用ejs模板生成动态HTML页面? 副标题:简单步骤告诉你如何使用Node.js和EJS模板生成HTML页面

   谷歌SEO    

如何使用EJS模板引擎来生成HTML

ejs模板如何生成html

安装EJS模板引擎

首先需要在项目中安装EJS模板引擎,可使用npm或yarn进行安装。在终端中运行以下命令来安装EJS:

“`

npm install ejs

“`

创建EJS模板文件

在项目根目录下创建一个名为 index.ejs 的文件,这个文件将作为你的模板文件,用于生成最终的HTML页面。

编写EJS模板

打开 index.ejs 文件,并编写你的HTML代码,你可以使用EJS的语法来嵌入JavaScript代码和动态数据。

 html
  <!DOCTYPE html>
  <html>
    <head>
      <title><%= title %></title>
    </head>
    <body>
      <h1><%= heading %></h1>
      <table>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
        <% users.forEach(function(user) { %>
          <tr>
            <td><%= user.name %></td>
            <td><%= user.age %></td>
          </tr>
        <% }); %>
      </table>
    </body>
  </html>

在上面的例子中,<%= title %><%= heading %>是用于插入动态数据的占位符。 users是一个包含用户信息的数组,通过遍历该数组,我们可以动态生成表格的每一行。

设置路由和服务器

在Node.js应用程序中设置一个路由来处理请求并渲染EJS模板,使用Express框架可以这样做:

 javascript
  const express = require('express');
  const app = express();
  const ejs = require('ejs');
  const data = { title: 'My Website', heading: 'Welcome to my website' }; // 动态数据
  const users = [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; // 用户数据
  app.set('view engine', 'ejs'); // 设置模板引擎为EJS
  app.get('/', (req, res) => {
    res.render('index', { data, users }); // 渲染模板并传递数据和用户信息给模板文件
  });
  app.listen(3000, () => {
    console.log('Server is running on port 3000');
  });

在上面的示例中,我们设置了Express的视图引擎为EJS,并定义了一个路由来处理根路径的GET请求,当请求到达时,我们使用 res.render() 方法渲染 index.ejs 模板,并将动态数据和用户信息传递给模板文件。

启动服务器

运行你的Node.js应用程序,并在浏览器中访问 http://localhost:3000,你将看到由EJS模板生成的HTML页面显示在浏览器中。

以上就是如何使用EJS模板引擎来生成HTML的详细步骤。如果你想了解更多关于EJS的用法,请访问EJS官方文档。

如果你对本文有任何疑问或建议,请在下方留言区留言,我们将竭诚为您解答。

如果你觉得这篇文章对你有所帮助,欢迎点赞、关注、分享、评论,谢谢观看!

 标签:

评论留言

我要留言

欢迎参与讨论,请在这里发表您的看法、交流您的观点。