• 26-Node.js学习笔记-art-template模板引擎使用

    1.1 模板引擎

    模板引擎是第三方模块

    让开发者以更加友好的方式拼接字符串，使项目代码更加清晰，更加易于维护。

    1.2 art-template模板引擎

    ``` 1.命令行工具中使用 npm install art-template 命令进行下载 2.使用const template = require('art-template') 引入模板引擎 3.告诉模板引擎要拼接的数据和模板在哪 const html = template('模板路径',数据); ```

    1.3 art-template 代码示例

    ``` //导入模板引起模块 const template = require(' art-template'); //将特定模板与特定数据进行拼接 const html = template('./views/index.art',{ data:{ name:'柠檬不酸', age:18 } })

    //

    {{data.name}} {{data.age}}
    ``` demo ``` //导入模板引擎 const template = require('art-template'); const path = require('path'); //template方法是用来拼接字符串的 //1.模板路径 绝对路径 const views = path.join(__dirname,'views','index.art')

    //2.要在模板中显示的数据，对象类型
    //返回拼接好的 字符串
    const html = template(views,{
    name:'柠檬不酸',
    age:18

    })
    console.log(html)

    //template/views/index.art

    Document {{name}} {{20}} ```

    2.1 模板语法

    art-template同时支持两种模板语法：标准语法和原始语法

    标准语法可以让模板更容易读写，原始语法具有强大的额逻辑处理能力

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

    2.2输出

    将某项数据输出在模板中，标准语法与原始语法如下： ``` //标准语法:{{数据}} {{value}} {{a+b}} //原始语法：<%=数据%> <%=value%> <%=a+b%> ```

    2.3原文输出

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

    ``` //标准语法:{{数据}} {{@数据}}

    //原始语法：<%=数据%>
    <%-数据%>

    demo2

    const template = require('art-template');
    const path = require('path');

    const views = path.join(__dirname,'views','01.art')
    const html = template(views,{
    name:'柠檬不酸',
    age:18,
    content:'

    我是标题

    '

    })
    console.log(html)

    //template/views/01.art

    Document //标准语法

    {{name}}

    {{age}}

    {{1+1==2?'相等':'不相等'}}

    {{content}}

    {{@content}}

    //原始语法

    <%=name%>

    <%=age%>

    <%=1+1==2?'相等':'不相等'%>

    <%=content%>

    <%-content%>

    ```

    2.4条件判断

    在模板中可以根据条件来决定显示哪块html代码

    ``` //标准语法 {{if 条件}} ...{{/if}} {{if v1}} ... {{else if v2}} ...{{/if}}

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

    demo

    const template = require('art-template');
    const path = require('path');
    const views = path.join(__dirname,'views','02.art');
    const html = template(views,{
    name:'柠檬不酸',
    age:17
    })
    console.log(html)

    //template/views/02.art
    //标准语法
    {{if age>18}}
    年龄大于18
    {{else if age<15}}
    年龄小于15
    {{else}}
    年龄不符合要求
    {{/if}}

    //原始语法
    <% if(age>18){%>
    年龄大于18
    <% } else if (age < 15) {%>
    年龄小于15
    <% } else { %>
    年龄不符合要求
    <%} %>

    <h2>2.5循环</h2>

    //标准语法
    {{ each 数据}} {{/each}}

    //原始语法
    <% for() { %> <%} %>

    //标准语法
    {{ each target}}
    {{$index}} {{$value}}
    {{/each}}

    //原始语法
    <% for(var i = 0;i<target.length;i++) { %>
    <%= i %> <%=target[i] %>
    <%} %>

    demo

    const template = require('art-template');
    const path = require('path');
    const views = path.join(__dirname,'views','03.art');
    const html = template(views,{
    users:[{
    name:'bibi',
    age:12,
    sex:'男'
    },{
    name:'yiyi',
    age:13,
    sex:'女'
    },{
    name:'uiui',
    age:19,
    sex:'男'
    }]
    })
    console.log(html)

    //template/views/03.art

      {{each users}}
    • {{$value.name}} {{$value.age}} {{$value.sex}}
      • {{/each}}
      <% for(var i = 0;i < users.length; i++) {%>
    • <%=users[i].name %> <%=users[i].age %> <%=users[i].sex %>
      • <% } %>
    ```

    2.6子模板

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

    ``` //标准语法 {{ include '模板' }} {{ include './header.art'}}

    //原始语法
    <% include('模板') %>
    <% include('./header.art) %>

    demo

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

    //标准语法
    {{include './common/header.art'}}

    {{msg}}
    {{include './common/footer.art'}}

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

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

    2.7模板继承

    使用模板继承可以将网站html骨架抽离到单独的文件中，其他的页面模板可以继承骨架文件

    示例

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>骨架模板</title>
   {{ block 'head' }} {{ /block }}
</head>
<body>
    {{ block 'content' }} {{ /block }}
</body>
</html>

    //05.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);

    //05.art
{{extend './common/layout.art'}}
{{block 'content'}}
  <p>{{ msg }}</p>
{{/block}}
{{block 'link'}}
  <link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}


    //layout.art
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  {{block 'link'}}{{/block}}

</head>
<body>
  {{block 'content'}}{{/block}}
</body>
</html>

    2.8模板配置

    1.像模板中导入变量 template.defaults.imports.变量名 = 变量值

    demo 格式化日期 ``` //npm install dateformat //06.js const template = require('art-template'); const path = require('path'); const dateFormat = require('dateformat') const views = path.join(__dirname,'views','06.art');

    //导入模板变量
    template.defaults.imports.dateFormat = dateFormat;
    const html = template(views,{
    time:new Date()
    })
    console.log(html);

    //06.art
    {{dateFormat(time,'yyyy-mm-dd')}}

    <p>2.设置模板根目录 template.default.root = 模板目录</p>

    const template = require('art-template');
    const path = require('path');
    const dateFormat = require('dateformat')
    const views = path.join(__dirname,'views','06.art');
    //设置模板的根目录
    template.defaults.root = path.join(__dirname,'views');

    //导入模板变量
    template.defaults.imports.dateFormat = dateFormat;
    const html = template('06.art',{
    time:new Date()
    })
    console.log(html);

    <p>03.设置模板引擎默认后缀 template.defaults.extname = '.art'</p>

    const template = require('art-template');
    const path = require('path');
    const dateFormat = require('dateformat')
    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',{
    time:new Date()
    })
    console.log(html);

    const template = require('art-template');
    const path = require('path');
    const dateFormat = require('dateformat')
    const views = path.join(__dirname,'views','06.art');
    //设置模板的根目录
    template.defaults.root = path.join(__dirname,'views');

    //导入模板变量
    template.defaults.imports.dateFormat = dateFormat;

    //配置模板的默认后缀
    template.defaults.extname = '.html';
    const html = template('06.art',{
    time:new Date()
    })
    console.log(template('07',{}));
    console.log(html);
  • 相关阅读:
    什么是软件架构？
    子系统、框架与架构
    今天开始锻炼身体
    程序语言中基本数值类型的分类
    软件架构的作用
    软件架构要设计到什么程度
    软件架构视图
    更多资料
    How to:如何在调用外部文件时调试文件路径（常见于使用LaunchAppAndWait和LaunchApp函数）
    installshield卸载时提示重启动的原因以及解决办法
  • 原文地址：https://www.cnblogs.com/foreverLuckyStar/p/12094691.html
Copyright © 2020-2023  润新知