jade和ejs都是node中的模板引擎峦耘，但是這兩個(gè)還是有很大區(qū)別的去枷。這篇文章主要說jade
首先我們需要安裝jade
npm install jade
1.使用jade渲染一個(gè)字符串
const jade=require('jade');//引入jade
var str=jade.render('html');//使用jade渲染一個(gè)字符串
console.log(str);
執(zhí)行一下這段代碼，我們會(huì)發(fā)現(xiàn)輸出以下結(jié)果
1.png
2.使用Jade渲染一個(gè)文件
const jade=require('jade');
//pretty:true 是美化代碼怨喘，即代碼編譯出來后按照層級(jí)排列
var str=jade.renderFile('./views/1.jade',{pretty:true});
console.log(str);
這時(shí)我們在views文件夾中創(chuàng)建一個(gè)1.jade文件夾灶平，代碼如下：
html
head
style
body
div
div
然后我們執(zhí)行一下上面的js代碼，我們會(huì)發(fā)現(xiàn)1.jade中的代碼已經(jīng)被編譯為html代碼雅宾，結(jié)果如下圖：
2.png
3.如何在jade中添加屬性
創(chuàng)建一個(gè)2.jade,代碼如下
html
head
style
script(src="a.js")
//要把屬性直接寫到括號(hào)中养涮，多個(gè)屬性之間用逗號(hào)隔開
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);
執(zhí)行一下這段js代碼，我們會(huì)發(fā)現(xiàn)輸出以下結(jié)果
1.png
4.把上面的2.jade中的內(nèi)容添加到build文件夾中的1.html中去，所以要先把這些文件創(chuàng)建好单寂。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('寫入成功');
}
})
這時(shí)打開我們的1.html我們會(huì)發(fā)現(xiàn)里面已經(jīng)是被渲染過的jade內(nèi)容
5.如何在jade中添加內(nèi)容
創(chuàng)建一個(gè)3.jade,代碼如下
html
head
style
body
//在屬性后面+空格 +內(nèi)容
a() 百度
a() 淘寶
js代碼
const jade=require('jade');
var str=jade.renderFile('./views/3.jade',{pretty:true});
console.log(str);
然后執(zhí)行以下代碼我們會(huì)看到如下結(jié)果
1.png
ejs
ejs在這里只做一個(gè)簡單的介紹贬芥，詳細(xì)內(nèi)容后續(xù)再寫
同樣的，我們需要安裝ejs
npm install ejs
首先創(chuàng)建一個(gè)1.ejs,代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我的名字叫:<%= name %>
</body>
</html>
然后創(chuàng)建一個(gè)ejs.js宣决，代碼如下
const ejs=require('ejs');
ejs.renderFile('./views/1.ejs',{name:'amy'},function(err,data){
if(err){
console.log('編譯失敗');
}else{
console.log(data);
}
})
然后我們執(zhí)行上面的代碼蘸劈，會(huì)看到如下輸出的結(jié)果
2.png
詳細(xì)jade語法可以參考
