模板引擎其实就是渲染页面用的，主流的主要有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标签
image.png
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文件中，执行结果如下：
image.png
使用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);
image.png
1.html:
image.png
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
image.png
以上代码展示可以看出为什么说jade是侵入式的，一旦用了jade就必须依赖他。因为他实现了整个html页面，如果再对其做出修改也必须用jade去修改。而ejs只是对页面的某一个值做出修改，任何其他东西都可以ejs并用
网友评论