在 Node.js 中使用 EJS 作为模板引擎

EJS： EJS 或 Embedded Javascript Templating 是 Node.js 使用的模板引擎。模板引擎有助于用最少的代码创建 HTML 模板。此外，它还可以在客户端将数据注入 HTML 模板并生成最终的 HTML。 EJS 是一种简单的模板语言，用于使用纯 JavaScript 生成 HTML 标记。它还有助于将 JavaScript 嵌入 HTML 页面。首先，使用 EJS 作为模板引擎，我们需要使用给定的命令安装 EJS：

npm install ejs --save

注意：上述命令中的 npm 代表节点包管理器，安装所有依赖项的地方。在 Node 5.0.0 版本之后不再需要 --save 标志，因为我们现在安装的所有模块都将添加到依赖项中。
现在，我们需要做的第一件事是使用 Express 将 EJS 设置为我们的模板引擎，Express 是一个 Node.js Web 应用程序服务器框架，专为构建单页、多页和混合 Web 应用程序而设计。它已成为 node.js 的标准服务器框架。

Javascript

// Set express as Node.js web application
// server framework.
// To install express before using it as
// an application server by using
// "npm install express" command.
var express = require('express');
var app = express();
 
// Set EJS as templating engine
app.set('view engine', 'ejs');

EJS 的默认行为是查看“views”文件夹以供模板呈现。因此，让我们在我们的主节点项目文件夹中创建一个“views”文件夹，并创建一个名为“home.ejs”的文件，该文件将在我们的节点项目中满足某些所需的请求。这个页面的内容是：

HTML

 

    
     
    

 

    This is our home page.

 
   

现在，我们将根据用户的某个请求呈现此页面：

Javascript

app.get('/', (req, res)=>{
 
// The render method takes the name of the HTML
// page to be rendered as input
// This page should be in the views folder
// in the root directory.
res.render('home');
 
});

现在，页面 home.ejs 将显示在请求 localhost 上。要添加动态内容，此渲染方法需要第二个参数，它是一个对象。这是这样做的：

Javascript

app.get('/', (req, res)=>{
 
// The render method takes the name of the HTML
// page to be rendered as input.
// This page should be in views folder in
// the root directory.
// We can pass multiple properties and values
// as an object, here we are passing the only name
res.render('home', {name:'Akashdeep'});
 
});
 
var server = app.listen(4000, function(){
    console.log('listening to port 4000')
});

现在，我们将名称嵌入到 HTML 页面中：

html

    
    


    
        This is our home page.

        Welcome <%=name%>, to our home page.
    

                   

它用于将动态内容嵌入到页面中，并用于嵌入普通的 JavaScript。现在嵌入普通的 JavaScript：

Javascript

app.get('/', (req, res)=>{
 
// The render method takes the name of the html
// page to be rendered as input.
// This page should be in views folder
// in the root directory.
var data = {name:'Akashdeep',
    hobbies:['playing football', 'playing chess', 'cycling']}
 
res.render('home', {data:data});
});
 
var server = app.listen(4000, function() {
    console.log('listening to port 4000')
});

最终的 HTML 内容：

HTML

    
    

 

    Hobbies of <%=data.name%> are:

     
    

        <% data.hobbies.forEach((item)=>{%>
        
<%=item%>
        <%});%>
    

 

运行程序的步骤：

• 创建所有文件后，转到项目文件夹的根目录。
• 在此目录中运行命令提示符。
• 键入 node file_name.js 命令以运行您的程序并查看显示的输出。

输出：