引言

  • 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. 洛谷$P$2048 超级钢琴 $[NOI2010]$ $rmq$/主席树

    正解:$rmq$/主席树 解题报告: 传送门! 好像看过这题挺多次辣,,,$QwQ$ 之前$NOIp$的时候$cjk$学长讲课讲了这题(虽然那时候的$gql$太菜辣并麻油落实这道_(:з」∠)_,然后 ...

  2. vue使用axios调用接口

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...

  3. 小小知识点（二十四）什么是5G

    转自 https://www.ifanr.com/1149419 一个简单且神奇的公式 今天的故事,从一个公式开始讲起.这是一个既简单又神奇的公式.说它简单,是因为它一共只有 3 个字母.而说它神奇, ...

  4. MySQL 持久化保障机制-redo 日志

    我们在 聊一聊 MySQL 中的事务及其实现原理 中提到了 redo 日志,redo 日志是用来保证 MySQL 持久化功能的,需要注意的是 redo 日志是 InnoDB 引擎特有的功能. 为什么 ...

  5. ASP.Net Core 3.0 中使用JWT认证

    JWT认证简单介绍     关于Jwt的介绍网上很多,此处不在赘述,我们主要看看jwt的结构.     JWT主要由三部分组成,如下: HEADER.PAYLOAD.SIGNATURE HEADER包 ...

  6. infer 代码静态分析

    infer 代码静态分析 静态代码分析工具,主要是为了提高我们的代码质量. 通常,我们提高代码质量的方式是通过CodeReview,但是这个过程耗费的人工和时间往往较大.并且随着代码量的增加人肉检测起 ...

  7. TensorFlow——卷积神经网络的相关函数

    在TensorFlow中,使用tr.nn.conv2d来实现卷积操作,使用tf.nn.max_pool进行最大池化操作.通过闯传入不同的参数,来实现各种不同类型的卷积与池化操作. 卷积函数tf.nn. ...

  8. 图解kubernetes服务打散算法的实现源码

    在分布式调度中为了保证服务的高可用和容灾需求,通常都会讲服务在多个区域.机架.节点上平均分布,从而避免单点故障引起的服务不可用,在k8s中自然也实现了该算法即SelectorSpread, 本文就来学 ...

  9. [洛谷P3621] [APIO2007] 风铃

    Description 你准备给弟弟 Ike 买一件礼物,但是,Ike 挑选礼物的方式很特别:他只喜欢那些能被他排成有序形状的东西. 你准备给 Ike 买一个风铃.风铃是一种多层的装饰品,一般挂在天花 ...

  10. EFCore-脚手架Scaffold发生Build Failed问题的终极解决

    大家在使用EntityFrameworkCore的DBFirst的脚手架(Scaffolding)时应该遇到过Build Failed的错误,而没有任何提示,我也遇到过不少次,目前已经完美解决并将排查 ...