ejs数据处理
ejs讀取對象數據
test.js
const ejs=require('ejs');//ejs渲染的數據是在回調里面 ejs.renderFile('./views/1.ejs', {name: '馬優晨',age:18, pas:'888898'}, function (err, data){console.log(data); });1.ejs
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div>姓名： <%=name?name:''%></div><div>年齡： <%=age?age:''%></div><div>密碼： <%=pas?pas:''%></div></body> </html>ejs讀取json數據
test.js
const ejs=require('ejs');ejs.renderFile('./views/2.ejs', {json: {arr: [{user: '馬優晨', pass: '123456'},{user: 'zhangsan', pass: '654321'},{user: 'xiaoming', pass: '999999'}, ]}}, function (err, data){if(data) console.log(data);console.log(err); });2.ejs
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div>姓名： <%=json.arr[0].user%>密碼： <%=json.arr[1].pass%></div></body> </html>ejs遍歷數據
test.js
const ejs=require('ejs');ejs.renderFile('./views/3.ejs', {json: {arr: [{user: '馬優晨', pass: '123456'},{user: 'zhangsan', pass: '654321'},{user: 'xiaoming', pass: '999999'}, ]}}, function (err, data){console.log(data); });3.ejs
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 遍歷數據 --><% for(var i=0;i<json.arr.length;i++) {%><div>用戶名：<%=json.arr[i].user%> 密碼：<%=json.arr[i].pass%></div><% } %></body> </html>ejs解析轉義數據和不需要轉義的數據
test.js
const ejs=require('ejs');ejs.renderFile('./views/4.ejs', {}, function (err, data){console.log(data); });4.ejs
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 定義一個變量 --><%var str="<div>可以直接渲染一個div</div>";%><%var str2="<div><p>2323</p><p>9999</p></div>";%><!-- 變量渲染 --><%- str %><%- str2 %></body> </html>ejs頁面內引入文件片段
test.js
const ejs=require('ejs');ejs.renderFile('./views/5.ejs', {}, function (err, data){console.log(data); });5.ejs
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><% for(var i=0;i<2;i++){ %><% include ../a.txt %><% } %><% include ../b.html %></body> </html>ejs頁面內引入文件片段
test.js
const ejs=require('ejs');ejs.renderFile('./views/6.ejs', {type: 'admin'}, function (err, data){console.log(data); });6.ejs
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><% if(type=='admin'){ %><% include ../style/admin.css %><%}else{%><% include ../style/user.css %><% } %></body> </html>總結
- 上一篇： 载歌载舞的意思（满族文化之载歌载舞）
- 下一篇： js制作返回顶部