📜  如何在 JavaScript 中使用 Ejs?

📅  最后修改于: 2022-05-13 01:56:43.654000             🧑  作者: Mango

如何在 JavaScript 中使用 Ejs?

EJS 或 Embedded Javascript Templating 是 Node.js 使用的模板引擎。模板引擎有助于用最少的代码创建 HTML 模板。此外,它还可以在客户端将数据注入 HTML 模板并生成最终的 HTML。

安装:使用以下命令安装模块:

npm install ejs --save        

注意:上述命令中的 npm 代表节点包管理器,一个安装所有依赖项的地方。在 Node 5.0.0 版本之后不再需要–save标志,因为我们现在安装的所有模块都将添加到依赖项中。

现在,我们需要做的第一件事是使用 Express 将 EJS 设置为我们的模板引擎,Express 是一个 Node.js Web 应用程序服务器框架,专为构建单页、多页和混合 Web 应用程序而设计。它已成为 node.js 的标准服务器框架。

从服务器传递的数据被发送到 EJS 文件,然后我们可以使用下面的行访问该数据,它将将该数据提供给 h、p 或其他文本标记。

<%= data %>

如果我们想将此数据用于正常的 js 操作,例如 if-else 和循环或其他编程语句,我们可以将其编写为以下形式:

<% if(data == "1"){%>
Cricket
<%}else{%>
Football
<%}%>

现在要访问 EJS 文件或 .js 文件的脚本标记中的数据,您需要做的就是将该数据传递到另一个变量中,如下所示:

let data = '<%-data%>'

现在您可以对与 EJS 传递的数据变量具有相同值的数据变量执行任何操作。

文件名:index.js

// Set express as Node.js web application 
// server framework. 
  
// Install it using 'npm install express' command 
// and require like this:
var express = require('express'); 
var app = express(); 
    
// Set EJS as templating engine 
app.set('view engine', 'ejs'); 
  
app.get("/", function(req, res) {  
  res.render("home", {name:'Chris Martin'});
});
    
// Server setup
app.listen(3000, function(req, res) {
  console.log("Connected on port:3000");
});

EJS 的默认行为是查看“views”文件夹以供模板呈现。所以,让我们在我们的主节点项目文件夹中创建一个“views”文件夹,并创建一个名为“home.ejs”的文件,该文件将在我们的节点项目中根据一些所需的请求提供服务。

文件名:home.ejs



  

    
    

  

    
                    

            Text from EJS variable passed              from server is =          

        

<%=name%>

        
                    

            Text from EJS variable passed              from script tag =         

        

        

        
                    

            Text from EJS variable passed from              script tag after manipulation =         

        

        

    
          

名称变量已从服务器传递到 name.ejs 文件并使用 h2 标记显示,要在脚本标记中使用名称变量,我们所做的就是声明一个变量并将 EJS 变量传递给声明的变量,使用:

let name = '<%-name%>'

运行程序的步骤:

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

输出: