引言

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

浏览器显示结果

node使用art-template的过滤器的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. 小白学习VUE第二课：环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  3. art.template 循环里面分组。

    后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...

  4. 利用art.template模仿VUE 一次渲染多个模版

    TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...

  5. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  6. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  7. Node.js：template

    ylbtech-Node.js: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech ...

  8. Django模板语言中的自定义方法filter过滤器实现web网页的瀑布流

    模板语言自定义方法介绍 自定义方法注意事项 Django中有simple_tag 和 filter 两种自定义方法,之前也提到过,需要注意的是 扩展目录名称必须是templatetags templa ...

  9. 前端学习 node 快速入门 系列 —— 报名系统 - [express]

    其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...

  10. [置顶] ※数据结构※→☆非线性结构（tree）☆============树结点 链式存储结构（tree node list）（十四）

    结点: 包括一个数据元素及若干个指向其它子树的分支:例如,A,B,C,D等. 在数据结构的图形表示中,对于数据集合中的每一个数据元素用中间标有元素值的方框表示,一般称之为数据结点,简称结点. 在C语言 ...

随机推荐

  1. 使用PAC file结合ATS控制访问

    介绍:前面已经介绍了ATS的安装和PAC文件的写法格式,现在把nginx端口转发,pac file访问控制和ATS代理结合起来分别控制不同的机器访问不同URL权限的目的 效果如下 一.使用nginx端 ...

  2. 洛谷$P$2575 高手过招 博弈论

    正解:博弈论 解题报告: 传送门! 阿西$gql$又双叒被题意杀辣,,,再不好好学语文吃枣药丸$TT$ 然后在$get$规则之后还有什么问题嘛,,, 就和这题差不多了,一个$easy$的阶梯问题罢辽, ...

  3. 「洛谷P1262」间谍网络 解题报告

    P1262 间谍网络 题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美元,他们就愿意 ...

  4. shell 概览

    shell能做什么: 1. 自动化批量系统初始化程序(update,软件安装,时区设置,安全策略...) 2. 自动化批量软件部署程序(LAMP,LNMP,Tomcat,LVS,Nginx) 3. 管 ...

  5. Go中的Package和Module分析

    Package 所谓package(包)其实就是代码的一种组织管理方式,代码多了就需要放入文件,文件多了就需要归类放入文件夹,就好比我们在给电脑装软件时会进行归类安装,其实也是有意无意对电脑软件安装的 ...

  6. 解释一下什么是 aop？（未完成）

    解释一下什么是 aop?(未完成)

  7. SpringCloud入门系列0-Nacos的安装与配置

    背景 工作有一些年头了,自从19年初彻底转了java(这又是另一篇心酸的故事),突然感觉自己荒废了好几年(不是说.net不好,而是回顾自己这几年做的很多东西都浮于表面,有时候弄成很忙的样子,回头看看自 ...

  8. Redis 高可用之"持久化"

    Redis高可用概述 在Redis中,实现高可用的技术主要包括:持久化.复制(读写分离).哨兵.集群. 持久化: 持久化是最简单的高可用方法(有时甚至不被归为高可用手段),主要作用是数据备份,即将数据 ...

  9. Redis-缓存穿透、缓存雪崩、缓存击穿、缓存一致性、并发竞争

    缓存流程 在讲这五个问题之前,首先我们回顾下正常的缓存的使用流程 程序在处理请求时,会先从缓存中进行查询,如果缓存中没有对应的key,则会从数据库中查询,如果查询到结果,并将查询结果添加到缓存中去,反 ...

  10. Spring-cloud微服务实战【二】：eureka注册中心（上）

    ## 前言   本系列教程旨在为大家演示如何一步一步构建一整套微服务系统,至于其中的数据库用什么,订单ID如何保持唯一,分布式相关问题等等不在我们讨论范围内,本教程为了方便大家后续下载代码运行测试,不 ...