• node使用art-template的过滤器


    引言

    • art-template过滤器在我看来,其实就是定义一个函数,模板字符串通过调用该函数处理相关的数据,得到相应的返回结果,显示在页面上。因此我们可以注册一个过滤器,处理相关的数据。这里使用node+express举例子。art-template过滤器

    下载相关的包

     npm install express-art-template art-template --save
    

    art-template过滤器语法

    • 注册过滤器

    注册了两个过滤器dateFormat、timestamp,其实就是为 template.defaults.imports添加相应的方法来处理我们的数据。

     template.defaults.imports.dateFormat = function(date, format){...}
     template.defaults.imports.timestamp = function(value){...}
    
    • 使用 过滤器

    它的语法类似与管道操作符,即上一个过滤器的 输出值 或者 数据 会作为下一个过滤器的参数

     {{data | timestamp |  dateFormat}}
    

    使用 art-template

    在app文件引入以下文件,art-template默认是读取项目根目录views文件夹下的art文件,可以通过 app.engine('html', require('express-art-template'))修改为html文件,也可以修改读取的文件夹app.set('views', '具体文件夹'),可以使用相对路径或者绝对路径。

     var express = require('express')
    
     const template = require('art-template')
     app.engine('html', require('express-art-template'))
    
     app.get('/filter', (req, res) =>{
        res.render('filter.html')
     })
    
     //注册一个过滤器 通过处理时间戳 转为日期格式
     template.defaults.imports.getDate = (dateTime) =>{
        const datetime = new Date(dateTime)
    
        const year = datetime.getFullYear()
        const month = ("0" + (datetime.getMonth() + 1)).slice(-2)
        const date = ("0" + datetime.getDate()).slice(-2)
        const hour = ("0" + datetime.getHours()).slice(-2)
        const minute = ("0" + datetime.getMinutes()).slice(-2)
        const second = ("0" + datetime.getSeconds()).slice(-2)
    
        return  year + "-"+ month +"-"+ date +" "+ hour +":"+ minute +":" + second
     }
    
    

    filter.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>Document</title>
     </head>
     <body>
         <p>传入时间搓可获取时间格式</p>
         <span>{{ 1568078584726 | getDate}}</span>
     </body>
     </html>
    

    浏览器显示结果

  • 相关阅读:
    【MongoDB详细使用教程】三、高级查询
    【MongoDB详细使用教程】二、MongoDB基本操作
    【MongoDB详细使用教程】一、Mac安装MongoDB
    【python数据分析实战】电影票房数据分析(二)数据可视化
    【python数据分析实战】电影票房数据分析(一)数据采集
    python爬取旅游数据+matplotlib简单可视化
    详解UDP协议
    MAC地址和交换机
    StringTable结构以及基本调优
    聊聊各种常量池
  • 原文地址:https://www.cnblogs.com/HJ412/p/11495588.html
Copyright © 2020-2023  润新知