上一节-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>
- ejs中输出data是在回调函数中，不像jade是定义一个变量来接收的
- ejs中使用
<%=变量名%>输出数据到模板，如果输出如果含有html标签，<>会被编码（转义）
2. <%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>
- ejs中使用
<%js代码%>执行js代码， 不会输出，被称作无缓冲的代码。 - 由于不输出代码，会出现两行空行，可以换成
<%_js代码_%>，会自动删除不输出产生的空行
3. <%-变量或表达式%>
//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>
<div>test</div>
<div>test</div>
</body>
</html>
- 默认使用
<%%>会将<>转义输出，可以使用<%-%>声明不转义输出
4. 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>
- 同理css也可以这样引入，从而不增加http请求。
- 注意，上面代码
../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"
网友评论