jade和ejs都是node中的模板引擎，但是这两个还是有很大区别的。这篇文章主要说jade
首先我们需要安装jade
npm install jade
1.使用jade渲染一个字符串
const jade=require('jade');//引入jade
var str=jade.render('html');//使用jade渲染一个字符串
console.log(str);
执行一下这段代码，我们会发现输出以下结果
1.png
2.使用Jade渲染一个文件
const jade=require('jade');
//pretty:true 是美化代码，即代码编译出来后按照层级排列
var str=jade.renderFile('./views/1.jade',{pretty:true});
console.log(str);
这时我们在views文件夹中创建一个1.jade文件夹，代码如下：
html
head
style
body
div
div
然后我们执行一下上面的js代码，我们会发现1.jade中的代码已经被编译为html代码，结果如下图：
2.png
3.如何在jade中添加属性
创建一个2.jade,代码如下
html
head
style
script(src="a.js")
//要把属性直接写到括号中，多个属性之间用逗号隔开
link(href="a.css",rel="stylesheet")
body
div
ul
li
input(type="text",id="txt1",value="abc")
li
input(type="text",id="txt2",value="111")
li
input(type="text",id="txt3",value="222")
js代码
const jade=require('jade');
var str=jade.renderFile('./views/2.jade',{pretty:true});
console.log(str);
执行一下这段js代码，我们会发现输出以下结果
1.png
4.把上面的2.jade中的内容添加到build文件夹中的1.html中去，所以要先把这些文件创建好。js代码如下
const jade=require('jade');
//引入文件模块
const fs=require('fs');
var str=jade.renderFile('./views/2.jade',{pretty:true});
fs.writeFile('./build/1.html',str,function(err){
if(err){
console.log('写入失败');
}else{
console.log('写入成功');
}
})
这时打开我们的1.html我们会发现里面已经是被渲染过的jade内容
5.如何在jade中添加内容
创建一个3.jade,代码如下
html
head
style
body
//在属性后面+空格 +内容
a(href='http://www.baidu.com') 百度
a(href='http://www.taobao.com') 淘宝
js代码
const jade=require('jade');
var str=jade.renderFile('./views/3.jade',{pretty:true});
console.log(str);
然后执行以下代码我们会看到如下结果
1.png
ejs
ejs在这里只做一个简单的介绍，详细内容后续再写
同样的，我们需要安装ejs
npm install ejs
首先创建一个1.ejs,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我的名字叫:<%= name %>
</body>
</html>
然后创建一个ejs.js，代码如下
const ejs=require('ejs');
ejs.renderFile('./views/1.ejs',{name:'amy'},function(err,data){
if(err){
console.log('编译失败');
}else{
console.log(data);
}
})
然后我们执行上面的代码，会看到如下输出的结果
2.png
详细jade语法可以参考
网友评论