node.js学习(14)——nodejs模板引擎ejs

上一节-node.js学习(13)—nodejs模板引擎jade(2)

上节我们讲解了jade的基本语法,本节我们开始讲解nodejs另一个模板引擎—— ejs

1.ejs

我们已经知道jade属于破坏式(侵入式)引擎,那ejs呢?

特点:ejs是非破坏式(非侵入式)引擎,它不改变html的任何语法,可以让我们直接在标签内书写简单、直白的 JavaScript 代码。

现在我们新建一个文件夹(这我叫views),专门放咱们的ejs文件。目录结构如下:


20190529102713.png

2. <%=变量或表达式%>

//1.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div><%=name%></div>
    <div><%=a+b%></div>
</body>
</html>

//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{name:'test',a:1,b:2},function(err,data){
    if(err){
        console.log(err);
    }else{
        console.log(data);
    }
})

执行1.js,输出的data结果为:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div>test</div> 
        <div>3</div> 
    </body>
</html>
  1. ejs中输出data是在回调函数中,不像jade是定义一个变量来接收的
  2. ejs中使用<%=变量名%> 输出数据到模板,如果输出如果含有html标签,<>会被编码(转义)

3. <%js代码%>

//1.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <% for(var i=0;i<arr.length;i++){ %>  //不输出代码,在html中展示为空行
    <div>用户名:<%=arr[i].name%> 密码:<%=arr[i].pass%></div>
    <% } %> //不输出代码,在html中展示为空行
</body>
</html>

//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{arr:[{name:'aa',pass:111}]},function(err,data){
    if(err){
        console.log(err);
    }else{
        console.log(data);
    }
})

执行1.js,输出的data结果为:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <div>用户名:aa 密码:111</div>

</body>

</html>
  1. ejs中使用<%js代码%> 执行js代码, 不会输出,被称作无缓冲的代码。
  2. 由于不输出代码,会出现两行空行,可以换成<%_js代码_%>,会自动删除不输出产生的空行

4. <%-变量或表达式%>

//1.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%_var str='<div>test</div>'_%>
    <%=str%>
    <%-str%>
</body>
</html>

//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{},function(err,data){
    if(err){
        console.log(err);
    }else{
        console.log(data);
    }
})

执行1.js,输出的data结果为:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    &lt;div&gt;test&lt;/div&gt;
    <div>test</div>
</body>

</html>
  1. 默认使用<%%> 会将<>转义输出,可以使用<%-%>声明不转义输出

5. include

之前在jade中我们讲过include引入代码,不增加http请求的方式,在ejs中也有同样的语法。

新建test.js,里面代码为alert(1)

//1.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        <% include ../test.js %>
    </script>
</head>
<body>
</body>
</html>

//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{},function(err,data){
    if(err){
        console.log(err);
    }else{
        console.log(data);
    }
})

执行1.js,输出的data结果为:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        alert(1)
    </script>
</head>

<body>
</body>

</html>
  1. 同理css也可以这样引入,从而不增加http请求。
  2. 注意,上面代码../test.js只能是个路径,不能放置一个从数据传过来的路径变量(会将路径变量名当成实际路径来解析,导致找不到该路径),比如
//1.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        <% include js_path %>
    </script>
</head>
<body>
</body>
</html>

//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{
    js_path:'../test.js'
},function(err,data){
    if(err){
        console.log(err);
    }else{
        console.log(data);
    }
})

上面代码中,我们那路径放到js_path中,ejs会把js_path当成实际路径,报错Error: Could not find the include file "js_path"

下一节-node.js学习(15)—上传(multer)