Node.js之模板引擎的使用（art-template）

淩亂°似流年 2023-02-17 03:48 15阅读 0赞

### Node.js之模板引擎的使用（art-template） ###

*  Node.js之模板引擎的使用（art-template）
 *   *  1 模板引擎的基础概念
     *   *  1.1 模板引擎存在的意义
         *  1.2 art-template的安装与使用
     *  2 模板引擎语法
     *   *  2.1 输出语法
         *  2.2 条件判断
         *  2.3 数据循环
         *  2.4 子模版
         *  2.5 模板继承
         *  2.6 模板配置
     *  3 第三方模块router和serve-static
     *   *  3.1 第三方模块router
         *  3.2 第三方模块serve-static

# Node.js之模板引擎的使用（art-template） #

## 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>';
     }
     str += '</ul>'; 
     
      
     <ul>
        { { each ary}}
            <li>{ { $value.name}}</li>
            <li>{ { $value.age}}</li>
        { { /each}}
     </ul>

### 1.2 art-template的安装与使用 ###

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

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

## 2 模板引擎语法 ##

*  art-template同时支持两种模板语法：标准语法和原始语法。
 *  标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。

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

### 2.1 输出语法 ###

art文件代码如下：

<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>

js文件代码如下：

const template = require('art-template');
    const path = require('path');
    
    const views = path.join(__dirname, 'views', '01.art');
    
    const html = template(views, { 
    	name: '张三',
    	age: 20,
    	content: '<h1>我是标题</h1>'
    })
    console.log(html);

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

<h2>{ { @ value }}</h2>
     
     <h2><%- value %></h2>

### 2.2 条件判断 ###

语法如下：

{ { if 条件}} ... { { /if}}
     { { if v1}} ... { { else if v2}} ... { { /if}}
     
     <% if (value) {  %> ... <% } %>
     <% if (v1) {  %> ... <% } else if (v2) {  %> ... <% } %>

### 2.3 数据循环 ###

语法如下：

{ { each target}}
         { { $index}} { { $value}}
     { { /each}}
      
     <% for(var i = 0; i < target.length; i++){  %>
         <%= i %> <%= target[i] %>
     <% } %>

例子如下：

<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>

### 2.4 子模版 ###

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

{ { include './header.art'}}
      
     <% include('./header.art') %>

**例子：**  
art文件如下：

{
       { include './common/header.art' }}
    <% include('./common/header.art') %>
    <div> {
       { msg }} </div>
    {
       { include './common/footer.art' }}
    <% include('./common/footer.art') %>

js文件如下：

const template = require('art-template');
    const path = require('path');
    
    const views = path.join(__dirname, 'views', '04.art');
    
    const html = template(views, { 
    	msg: '我是首页'
    });
    
    console.log(html);

### 2.5 模板继承 ###

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。  
art文件如下：

{
       {extend './common/layout.art'}}
    
    {
       {block 'content'}}
    <p>{
       { msg }}</p>
    {
       {/block}}
    
    {
       {block 'link'}}
    <link rel="stylesheet" type="text/css" 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);

### 2.6 模板配置 ###

// 设置模板的根目录
    template.defaults.root = path.join(__dirname, 'views');
    
    // 导入模板变量
    template.defaults.imports.dateFormat = dateFormat;
    
    // 配置模板的默认后缀
    template.defaults.extname = '.html';
    
    const html = template('06.art', { 
    	time: new Date()
    });

art中关于时钟的表述：

{
       { dateFormat(time, 'yyyy-mm-dd')}}

## 3 第三方模块router和serve-static ##

### 3.1 第三方模块router ###

功能：实现路由。

使用步骤：

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

const getRouter = require('router')
    const router = getRouter();
    router.get('/add', (req, res) => { 
        res.end('Hello World!')
    }) 
    server.on('request', (req, res) => { 
        router(req, res)
    })

### 3.2 第三方模块serve-static ###

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

步骤：

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

const serveStatic = require('serve-static')
    const serve = serveStatic('public')
    server.on('request', () => {  
        serve(req, res)
    })
    server.listen(3000)