EJS入门

了解EJS的实际运作方式

这是一个简短的说明,说明了我如何最终理解并开始在我一直在使用的大多数基本应用程序中使用EJS。 首先,在继续之前,让我解释一下EJS是什么,以及您可能实际需要将EJS用于那些尚不了解的人。

EJS在哪里使用? :当与express框架一起用作模板引擎以帮助在客户端呈现JavaScript代码时,在node.js中使用EJS。

什么是EJS? :EJS代表嵌入式JavaScript。 它使我们可以将JavaScript代码(变量,if语句,循环)嵌入到HTML内。 例如:

  

示例变量名称:exampleVar

但是上面的代码还不能正常工作,因为我们必须告诉HTML exampleVar是JavaScript代码,应该将其视为一个,而不是将其作为纯HTML输出,这就是EJS的exampleVar ,这exampleVar首先,当您看到时。 但这是典型的EJS的样子: 您有小于号和百分号,JavaScript代码进入的空间,然后是百分号,后跟大于号。

  
 //这输出10 

但在常规HTML 5 + 5 ,您输入的方式仍然是5 + 5 。 现在回到带有变量的上一个示例,我们可以使用EJS添加从服务器端传递到客户端的任何变量,并且不会将其呈现为HTML。 服务器端代码示例:

  app.get(“ /”,function(req,res){
 res.render(“ index.ejs”,{exampleVar:Javascript});
 }); //“ exmpleVar”是我们EJS文件中变量的名称
 //“ JavaScript”分配给变量的值 

现在,当我们在添加EJS括号后运行带有.ejs extension先前HTML文件时,我们的JavaScript代码将正确呈现。

  

示例变量名称:

//“ exampleVar”作为值“ JavaScript”输出

但是请记住exampleVar不是HTML,它实际上是一个JavaScript变量,这意味着您还可以执行 ,并且仍然可以正确呈现。

除了添加变量之外,我们还可以执行其他操作,例如控制流(if语句,循环等)

EJS If Statements :仍然使用我们之前的示例,让我们添加一些逻辑,以检查变量的值是否为JavaScript ,并打印出是否正确的值。 因此,我们可以在EJS文件中执行此操作:

  
      

不错的选择

//如果条件为真,这只会将段落的内容添加到我们的HTML中

在上面的示例中,您会发现JavaScript代码的每一行都位于EJS括号之间,无论代码在何处开始或结束,所有代码都包裹在EJS括号中,但是如果将此示例与上面的示例进行比较,则会发现我们有不同形式的方括号,分别是 ,这两者之间的区别在于,当添加=时,无论在空格中的什么内容都将返回到HTML,例如exampleVar5 + 5但是当执行普通的逻辑(如在if语句或循环中)时,我们不希望将逻辑添加到HTML中,因此我们将其包装在方括号中而不使用=符号。

使用循环的更多示例 :在普通JavaScript中对数字1到10进行计数通常会导致使用循环

  for(var i = 1; i <10; i ++){
 console.log(i);  //这将输出1到10之间的数字
 } 

这也可以用EJS稍有不同的方式来完成,这需要将JavaScript代码包装在EJS括号中,因此for loop如下所示:

  <%for(var i = 1; i 
     
 注意:EJS中的注释写在括号之间 

您也可以使用此for loop示例遍历服务器端的post数组,并将每个post的内容通过EJS文件发送到HTML。

我希望这对于在使用node.js上的express时将EJS用作模板引擎有所帮助。

干杯!