模板引擎其实就是渲染页面用的,主流的主要有jade和ejs;
jade是一个破坏式的模板引擎,侵入式、强依赖;如果用了这个其他的就不能使用
ejs:可以和其他都兼容,弱依赖
jade的使用:
npm install jade;
jade会根据参数渲染出页面,简单代码如下:
const jade = require("jade");
//render 渲染出页面,返回一个结果字符串
var str = jade.render("html");
console.log(str);
cmd中执行node XXX.js,结果如下会渲染出html标签
jade也提供了renderFile方法,可以根据文件中的内容进行渲染;
//pretty:true 表示,美化
var str = jade.renderFile("./views/3.jade",{pretty:true});
如下需要给标签元素添加class,style等等,书写方式如下:
html
head
style
script(src="a.js")
link(href="a.css",rel="stylesheet")
body
div(style="height:80px;" class="div-cls")
div aaa
将以上内容放入到3.jade文件中,执行结果如下:
使用fs的文件操作,即可以完成一个html页面:
const jade = require("jade");
const fs = require("fs");
var str = jade.renderFile("./views/3.jade",{pretty:true});
fs.writeFile('./views/1.html',str,function(err,data){
if(err){
console.log("写入失败");
console.log(err);
}else{
console.log('写入成功');
}
});
console.log(str);
1.html:
ejs:
通过ejs对name进行赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
姓名<%= name%>
</body>
</html>
const ejs = require("ejs");
ejs.renderFile("./views/2.ejs",{name:"bule"},function(err,data){
if(err){
consol.log("编译失败");
}else{
console.log(data);
}
});
以上代码就实现了将name赋值为bule
以上代码展示可以看出为什么说jade是侵入式的,一旦用了jade就必须依赖他。因为他实现了整个html页面,如果再对其做出修改也必须用jade去修改。而ejs只是对页面的某一个值做出修改,任何其他东西都可以ejs并用