之前在學(xué)習(xí)node的過程中接觸到express接著便選擇學(xué)習(xí)ejs做一下全棧，ejs和html是兼容的缸匪，記錄點(diǎn)常用語法流码。
以下是集中常用語法：
1.轉(zhuǎn)義輸出
<%= 變量名 %>
這個是轉(zhuǎn)義輸出,可以把變量名替換成自己需要的東西.
我們可以這么使用.
// js文件
ejs.renderFile('./views/test.ejs',{name:'wzz'},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%=name%>
</body>
</html>
最后我們可以發(fā)現(xiàn)name變量,在控制臺被替換成了wzz.
2.js代碼
<% Javascript代碼 %>
這里面可以寫javascript的代碼.我們可以這么使用
// js文件
ejs.renderFile('./views/test.ejs',{json:{arr:[
{user:'a',pass:'1'},
{user:'b',pass:'2'},
{user:'c',pass:'3'},
{user:'d',pass:'4'}
]}},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%for(var i=0;i<json.arr.length;i++){%>
<div>user:<%=json.arr[i].user%> pass:<%=json.arr[i].pass%><div>
<%}%>
</body>
</html>
然后我們發(fā)現(xiàn)控制臺循環(huán)輸出了div和里面的內(nèi)容
<div>user:a pass:1<div>
<div>user:b pass:2<div>
<div>user:c pass:3<div>
<div>user:d pass:4<div>
3.不轉(zhuǎn)義輸出
<%- 變量名%>
不轉(zhuǎn)義輸出可以把定義的字符串不轉(zhuǎn)義的輸出.
我們可以這么用,這邊我們省略了第二個不使用的json數(shù)據(jù)
// js文件
ejs.renderFile('./views/test.ejs',function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% var str='<div><div>'; %>
<%-str %>
<%=str %>
</body>
</html>
輸出結(jié)果如下
<div><div>
<div><div>
4.使用include引入外部的文件
<% include 文件的地址 %>
我們先新建一個txt文件,隨便在里面填上一點(diǎn)內(nèi)容供測試使用.
js文件和上面的一樣,所以省略,下面是ejs文件
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% include ../content.txt %>
</body>
</html>
我們發(fā)現(xiàn)控制臺正確的輸出了我們想要的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
最關(guān)鍵就是這個include用法，用的好會很省力
例如創(chuàng)建一個ejs文件存放公用代碼例如公用導(dǎo)航欄的代碼layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理首頁</title>
</head>
<body>
<nav >
<div >
<div >
<a href="/admin">后臺管理</a>
</div>
<div >
<ul >
<li><a href="/admin/user">用戶管理</a></li>
<li >
<a href="#" >分類管理<span ></span></a>
<ul >
<li><a href="/admin/category">分類列表</a></li>
<li><a href="/admin/category/add">分類添加</a></li>
</ul>
</li>
<li >
<a href="#" >內(nèi)容管理<span ></span></a>
<ul >
<li><a href="/admin/content">內(nèi)容列表</a></li>
<li><a href="/admin/content/add">內(nèi)容添加</a></li>
</ul>
</li>
</ul>
<ul >
<li >
<a href="#" ><%= userInfo.username%><span class="caret"></span></a>
<ul >
<li><a href="/">退出后臺管理</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
然后你的后臺主頁就可以這樣寫
<%- include('./layout') %>
<div >
<div >
<h1>Hello, world! <%= userInfo.username %></h1>
<p>歡迎來到我的博客后臺管理</p>
</div>
</div>
這樣就能輸出整張完整的頁面，你在寫一些功能提示頁面的時候就不必重寫代碼更鲁，簡化了代碼結(jié)構(gòu)
