模板引擎
1.1模板引擎:
让开发者以更加友好的方式拼接字符串,使代码更加清晰,更加易于维护。
1.2:art-template 模板引擎
使用art-template第三方模块。首先下载这个模
npm install art-template
入门示例:
// 引入这个模块
const template = require("art-template");
const path = require("path");
let views = path.join(__dirname,'views','01.art')
// template方法有两个参数,第一个参数是模板的路径(最好使用绝对路径),第二个参数是数据。该方法有一个返回值是对象
let html = template(views, {
name: '刘德华',
age: 52
});
// 打印得到的返回值
console.log(html);
运行结果
<div> 刘德华</div>
<div> 52</div>
2.1:模板引擎的语法:
1:标准语法{{数据}}
2:原始语法<%=数据%>
2.2:条件判断
标准语法和原始语法示例中的js代码都是相同的,如下:
// 引入这个模块
const template = require("art-template");
const path = require("path");
let views = path.join(__dirname, 'views', '02.art');
let html = template(views, {
name: '刘德华',
age: 52
});
// 打印得到的返回值
console.log(html);
标准语法:
{{if v1}} ... {{/if}}
示例:
{{if age>30}}
刘德华年龄大于30
{{/if}}
运行结果:
刘德华年龄大于30
原始语法:
<% if(条件) {%>
<%}%>
示例:
<%if(age>30) {%>
刘德华年龄大于30
<%}%>
运行结果:
刘德华年龄大于30
2.3:循环
标准语法和原始语法示例中的js代码都是相同的,如下:
// 引入这个模块
const template = require("art-template");
const path = require("path");
let views = path.join(__dirname, 'views', '03.art')
// template方法有两个参数,第一个参数是模板的路径(最好使用绝对路径),第二个参数是数据。该方法有一个返回值是对象
let html = template(views, {
data: [{
name: "刘德华",
age: 52
},
{
name: "张学友",
age: 50
},
{
name: "黎明",
age:54
},
{
name: '郭富城',
age:48
}]
});
// 打印得到的返回值
console.log(html);
标准语法:
{{each target}}
{{$index}} {{$value}} //前者代表索引,后者代表值
{{/each}}
示例:
<ul>
{{each data}}
<li>{{$value.name}}</li>
<li>{{$value.age}}</li>
{{/each}}
</ul>
运行结果:
<ul>
<li>刘德华</li>
<li>52</li>
<li>张学友</li>
<li>50</li>
<li>黎明</li>
<li>54</li>
<li>郭富城</li>
<li>48</li>
</ul>
原始语法:
<% for(var i=0;i<target.length;i++){%>
<%i%> <%target[i]%>
<%}%>
示例代码:
<ul>
<%for(var i=0;i<data.length;i++){%>
<li><%=data[i].name%></li>
<li><%=data[i].age%></li>
<%}%>
</ul>
运行结果:
<ul>
<li>刘德华</li>
<li>52</li>
<li>张学友</li>
<li>50</li>
<li>黎明</li>
<li>54</li>
<li>郭富城</li>
<li>48</li>
</ul>
2.4:子模板
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中.
在view 文件夹下新建一个common文件夹存放公共部分
标准语法:
{{include '模板'}}
示例:
{{include './common/header.art'}}
{{include './common/footer.art'}}
运行结果:
<div>我是头部</div>
<div>我是底部</div>
原始语法:
<%include('模板')%>
示例:
<% include('./common/header.art')%>
<% include('./common/footer.art')%>
运行结果:
<div>我是头部</div>
<div>我是底部</div>
2.5:模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。
首先在骨架文件中使用block来保留位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{{block 'link'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
继承并且填充保留的位置
{{extend './common/layout.art'}}
{{block 'link'}}
<link rel="stylesheet" href="">
{{/block}}
{{block 'content'}}
<p>{{msg}}</p>
{{/block}}
运行结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
</head>
<body>
<p>首页s模板</p>
</body>
</html