目录
1. 模板引擎
模板引擎是第三方模块
让开发者以更友好的方式拼接字符串，使项目代码更加清晰，更加易于维护。
2. art-template模板引擎（腾讯）
- 在命令行工具中使用 npm install art-template 命令进行下载
- 使用
const template = require('art-template')引入模板引擎 - 告诉模板引擎要拼接的数据和模板在哪
const html = template('模板路径', 数据)；
3. art-template代码示例
app.js
// 导入模板引擎
const template = require('art-template');
const path = require('path');
const view = path.join(__dirname, 'views', 'index.art')
// template方法是用来拼接字符串的
// 1. 模板路径 绝对路径
// 2. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(view, {
name: '张三',
age: 20
})
console.log(html);
index.art
<!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>
{
{name}}
{
{age}}
</body>
</html>
4. 模板语法
- art-template同时支持两种模板语法：标准语法和原始语法
- 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力
4.1 标准语法 原始语法 原文输出
标准语法：{
{
数据}}
原始语法：<%=数据 %>
原文输出：{
{
@ content}} <%- content%>
<!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>
<!-- 标准语法 -->
<p>{
{name}}</p>
<p>{
{1+1}}</p>
<p>{
{1+1==2 ? '相等':'不相等'}}</p>
<p>{
{content}}</p>
<!-- 原文输出 -->
<p>{
{@ content}}</p>
<!-- 原始语法 -->
<p><%= name %></p>
<p><%= 1 + 2%></p>
<p><%= 1+1==2 ? '相等':'不相等' %></p>
<p><%= content%></p>
<!-- 原文输出 -->
<p><%- content%></p>
</body>
</html>
4.2 条件判断（68级）
在模板中可以根据条件来决定显示那块HTML代码
<!-- 条件判断的标准语法 -->
{
{
if age>18}}
年龄大于18
{
{
else if age < 15}}
年龄小于15
{
{
else}}
年龄不符合要求
{
{
/if}}
<% if(age > 18) {
%>年龄大于18<%} %>
<!-- 条件判断的原始语法 -->
<% if(age > 18) {
%>
年龄大于18
<%} else if (age < 15) {
%>
年龄小于15
<%} else {
%>
年龄不符合要求
<%} %>
4.3 循环
标准语法：{
{
each 数据}} {
{
/each}}
原始语法：<% for() {
%> <%} %>
<ul>
{
{
each users}}
<li>
{
{
$value.name}}
{
{
$value.age}}
{
{
$value.sex}}
</li>
{
{
/each}}
</ul>
<ul>
<% for (var i = 0; i < users.length; i++){
%>
<li>
<%= users[i].name %>
<%= users[i].age %>
<%= users[i].sex %>
</li>
<%}
%>
</ul>
4.4 子模板
使用子模板可以将网站公共区块（头部，底部）抽离到单独的文件中。
- 标准语法：{
{
include '模板' }}
- 原始语法：<% include{
'模板'} %>
代码示例：
{
{
include './common/header.art'}}
<% include('./common/header.art')%>
<div> {
{
msg }} </div>
{
{
include './common/footer.art'}}
<% include('./common/footer.art')%>
4.5 模板继承
使用模板继承可以将网站骨架抽离到单独的文件中，其他页面模板可以继承骨架文件
要继承的模板：
<!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>
向模板中填充：
// 继承layout模板
{
{extend './common/layout.art'}}
{
{block 'content'}}
<p>{
{ msg }}</p>
{
{/block}}
{
{block 'link'}}
<link rel="stylesheet" href="./main.css">
{
{/block}}
js文件：
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '05.art');
const html = template(views, {
msg: '首页模板'
})
console.log(html);
4.6 模板配置
- 向模板中导入变量 template,defaults.imports.变量名 = 变量值；
- template.defaults.root = path.join(__dirname, ‘views’);
- template.defaults.extname = ‘.art’;
后缀名
const template = require('art-template');
const dateFormat = require('dateformat');
const path = require('path');
const views = path.join(__dirname, 'views', '06.art');
// 设置模板根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 默认后缀的配置
template.defaults.extname = '.art';
// 有后缀就找后缀名的文件
const html = template('06.art', {
time: new Date(),
// "2020-08-19T03:22:11.413Z" 用引号引起来的字符串
})
// 可以直接传模板的名字
// 没有后缀就找 template.defaults.extname 设置的文件
console.log(template('07', {
}));
console.log(html);
{
{
dateFormat(time,'yyyy-mm-dd hh:mm:ss')}}