1、模板引擎的基础概念

1.1、什么是模板引擎

模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。

// 未使用模板引擎的写法
var ary = [{ name: '张三'， age: '20'}];
var str = '<ul>';
for(var i = 0; i < ary.length; i++) {
    str += '<li>
        <span>'+ ary[i].name +'</span>
        <span>'+ ary[i].age +'</span>
        </li>;'
}
// 使用模板引擎的写法
<ul>
  {{each ary }}
      <li>{{$value.name}}</li>
      <li>{{$value.age}}</li>
   {{/each}}
 </ul>
str += '</ul>';

1.2、art-template模板引擎

在命令行工具中使用==npm install art-template==命令进行下载。
使用const template = require('art-template')引入模板引擎。
告诉模板引擎要拼接的数据和模板在哪里const html = template('模板路径'，数据)。
使用模板语法告诉模板引擎，模板与数据应该如何进行拼接。

示例代码

// 导入模板引擎模块
const template = require('art-template');
// 将特定模版与特定数据进行拼接
const html = template('./views/index.art', {
    data: {
        name: 'lgg',
        age: 20
    }
})
// index.art模块
<div>
    <span>{{ data.name }}</span>
    <span>{{ data.age }}</span>
</div>

1.3、模板引擎语法

1.3.1、模板语法

art-template同时支持两种模板语法：==标准语法==和==原始语法==。标准语法：{{ 数据 }} 原始语法：<%= 数据%>

1.3.2、输出

将某项数据输出在模板中，标准语法和原始语法如下：

标准语法： {{ 数据 }}
原始语法：<%=数据%>

// 标准语法
<h2>{{ value }}</h2>
<h2>{{ a ? b : c }}</h2>
<h2>{{ a + b }}</h2>
// 原始语法
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>

1.3.3、原文输出

如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。

标准语法：{{@ 数据 }}
原始语法：<%- 数据%>

// 标准语法
<h2>{{@ value }}</h2>
<h2><%- value%></h2>

1.3.4、条件判断

// 标准语法
{{if 条件 }}...{{/if}}
{{if v1}}...{{else if v2}}...{{/if}}
// 原始语法
<% if(value) {%>...<% } %>
<% if(v1) {%>
...
<% } else if(v2) { %>
...
<% } %>

1.3.5 、循环

标准语法： {{each 数据 }}{{ /each }}
原始语法：<% for() { %><% } %>

// 标准语法
{{each target }}
    {{$index}}-{{$value}}
{{/each}}
// 原始语法
<% for(var i = 0; i < target.length; i++) { %>
    <%= i %>-<%= target[i] %>
<% } %>

1.5.6、子模板

使用字模板可以将网站公共区块（头部、底部）抽离到单独的文件中。

标准语法：{{include '模板' }}
原始语法：<% include('./header.art') %>

// 标准语法
{{include './common/header.art' }}
// 原始语法
<% include('./common/header.art') %>

1.5.7、模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件夹中，其他页面模板可以继承骨架文件。在这里插入图片描述

准备坑一：填充css内容坑二：填充js内容坑三：填充页面主体内容
使用填充一：main.css 填充二：index.js 填充三：
Hello

模板继承示例

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML骨架模板</title>
        {{block 'head' }}{{/block}}
    </head>
    <body>
        {{block 'content'}}{{/block}}
    </body>
</html>

// index.art 首页模板
{{extend './layout.art'}}
{{block 'head'}}<link rel="stylesheet" h>{{/block}}
{{block 'content'}}<p>This is just an awesome page.</p>{{/block}}

1.5.8、模板配置

向模板中导入变量：template.defaults.imports.变量名 = 变量值；
设置模板根目录：template.defaults.root = 模板目录；
设置模板默认后缀：template.defaults.extname = '.art'

附：router路由模块、serve-static静态资源管理模块

第三方模块router

功能：实现路由

获取路由对象。
调用路由对象提供的方法创建路由。
启用路由，使路由生效。

const getRouter = require('router')
const router = getRouter()
router.get('/', (req, res) => {
    res.end('lgg')
})
router.post('/add', (req, res) => {
    let addParams = ""
    req.on('data', (params) => {
        addParams += params
    })
    req.on('end', async () => {
        await Student.create(queryString.parse(addParams))
        res.writeHead(301, {
            Location: '/list'
        })
        res.end()
    })
})
app.on('request', (req, res) => {
    router(req, res， () => {}) // 有三个参数，最后一个回调函数是必填参数。
})

第三方模块serve-static

功能：实现静态资源访问服务

引用serve- static模块获取创建静态资源服务功能的方法。
调用方法创建静态资源服务并指定静态资源服务目录(引入path模块)。
启用静态资源服务功能。

const serveStatic = require('serve-static')
const serve = serveStatic()

app.on('request', (req, res) => {
    serve(req, res， () => {}) // 有三个参数，最后一个回调函数是必填参数。
})

Node.js（四、模板引擎artTemplate）