1)Ejs模板引擎
- 1、常规使用变量拿值
在Ejs模板引擎中都是以<% %>为一个键值对 里面可以填js语法
**只要记住<% %>这里面是填语法的 **
基本使用变量 <%=变量名%> 而这里的变量名是json数据里面的其中键值对的名字
后台的渲染 ejs.render(字符,变量) 此变量是json数据
//html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1><%= Name%>你好，欢迎使用Ejs模板<h1>
</body>
</html>
//后台以Node为例
var http = require('http');
var fs = require('fs'),ejs = require('ejs');
var result = {
Name:'测试'
}
http.createServer(function(req,res){
//这里就不分配路由了
fs.readFile(HTMLpath,function(err,data){
res.writeHead(200,{'Content-Type':'text/html;charset=utf8'});
res.end(ejs.render(data.toString(),result));//文件读取时Buffer对象
})
}).listen(80)
- 2、for循环语句
<% for(var i=0;i<data.length;i++){ %>
<li><%= data[i] %></li>
<% } %>
//node后台
var result = {
data:['测试','测试1','测试2']
}
ejs.render(html,result);
- 3、for语句和if语句嵌套使用、
<% for(var i =0;i<data.length;i++){
if(data[i].num>200){ %>
<li><%= data.count %></li>
<% }else{ %>
<li>这是不满足200的数据<%= i %></li>
<% }
}
%>
//node后台
var result = {
data:[
{
num:201,
count:'这是201的数据'
},
{
num:3000,
count:'这是3000的数据'
},
{
num:102,
count:'这是102的数据'
},
]
}
ejs.render(html,result);
2)Jade模板引擎
注意在jade中缩进关系是至关重要的
doctype html
html
head
meta(charset="ytf-8")
title 首页
body
h1 首页
h2(style="height:30px;") 这是行间样式的使用
h3.titleH3 这是类名
h4#title 这是id
h5.title#title 这是类名和id
p { #result } 这是变量的使用
p= result 这也是变量的使用
p
a(href="#") 你好 //这里就代表了<p><a href="#">你好</a></p>
模板的继承
关键字
block和extends
//保存在layout.jade中
doctype html
html
head
meta(charset="ytf-8")
title 首页
block connect
body
block connect
//index.jade
extends ./layout //这里就直接继承了layout的模板
block header
link(rel="stylesheet" href="css/index.css")
block connect
h1 模板的继承
网友评论