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>

浏览器显示结果

posted @ 2019-09-10 09:52  车神我也  阅读(817)  评论(0)  编辑  收藏  举报

目录列表

顶部