模板引擎
作用：字符串拼接
// art-template基本使用 字符串拼接
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '1.art');
// template() 第一個參數是模板的 路徑 ， 第二個參數 替換模板的值
const htmlStr = template(views, {
sname: 'zhangsan',
content: '<span>123</span>'
});
console.log(htmlStr);
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>{{ sname }}</div>
<div>
<!-- 第二種表示方法 -->
<%= sname %>
</div>
<p>{{ 2+4}}</p>
<p>{{10>5?10:5}}</p>
<p>{{content}}</p>
<p>{{@ content}}</p> <!-- 支持標籤 -->
</body>
</html>
模板引擎支持if判斷和循環
// 支持if判斷 循環
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '2.art');
const htmlStr = template(views, {
age: 10,
students: [{
name: 'lily',
age: 18,
sex: '女'
},
{
name: 'lucy',
age: 19,
sex: '女'
},
{
name: 'jack',
age: 20,
sex: '男'
}
]
});
console.log(htmlStr);
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{if age >= 16}}
可以考取大學
{{else}}
回高中讀書
{{/if}}
<ul>
{{each students}}
<li>
{{$value.name}}
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
</ul>
<!-- 第二種方法 -->
<ul>
<% for(var i=0; i<students.length; i++) { %>
<li>
<%= students[i].name %>
{{ students[i].name }}
<%= students[i].age %>
<%= students[i].sex %>
</li>
<% } %>
</ul>
</body>
</html>