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>
浏览器显示结果
node使用art-template的过滤器的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
- art.template 循环里面分组。
后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- 利用art.template模仿VUE
首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- Node.js:template
ylbtech-Node.js: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech ...
- Django模板语言中的自定义方法filter过滤器实现web网页的瀑布流
模板语言自定义方法介绍 自定义方法注意事项 Django中有simple_tag 和 filter 两种自定义方法,之前也提到过,需要注意的是 扩展目录名称必须是templatetags templa ...
- 前端学习 node 快速入门 系列 —— 报名系统 - [express]
其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...
- [置顶] ※数据结构※→☆非线性结构(tree)☆============树结点 链式存储结构(tree node list)(十四)
结点: 包括一个数据元素及若干个指向其它子树的分支:例如,A,B,C,D等. 在数据结构的图形表示中,对于数据集合中的每一个数据元素用中间标有元素值的方框表示,一般称之为数据结点,简称结点. 在C语言 ...
随机推荐
- $CH5105\ Cookies$ 线性$DP+$贪心
CH 是很有趣的一道题 : ) Sol 第一反应就是f[i][j]表示前i个小朋友分j块饼干的最小怨气值 但是一个孩子所产生的怨气值并不固定,它与其他孩子获得饼干的情况有关 这里可以用到一个贪心,就是 ...
- 「洛谷P1343」地震逃生 解题报告
P1343 地震逃生 题目描述 汶川地震发生时,四川XX中学正在上课,一看地震发生,老师们立刻带领x名学生逃跑,整个学校可以抽象地看成一个有向图,图中有n个点,m条边.1号点为教室,n号点为安全地带, ...
- docker仓库和dockerfile
通过Dockerfile创建镜像 Dockerfile • Dockerfile语法格式 – FROM:基础镜像 – MAINTAINER:镜像创建者信息 – COPY:复制文件到镜像(所有文 ...
- 如何验证docker-compose安装成功
安装过程及如何验证docker-compose安装成功 步骤1: 通过运行 curl 从GitHub上进行安装下载 sudo curl -L "https://github.com/dock ...
- springboot多环境(dev,test,prod)配置
前情提要 在我们开发工作中,常常因为配置的问题,搞得头昏脑大.开发环境.测试环境.配置各不相同,数据库.redis.注册中心等等参数都不一致,如果放在同一个配置文件,就会发现诸多注释,发布不同的环境, ...
- centos7 编译安装 php7.4
1. 下载安装编译工具 yum groupinstall 'Development Tools' 2.安装依赖包 yum install libxml2 libxml2-devel openssl o ...
- Antd组件库使用方法
零.介绍: Ant design,是阿里巴巴的蚂蚁金服公司设计的一套适应用于web端和移动端网页的Ui组件库,组件好看,非常适合React框架使用. 官网:https://ant.design/ind ...
- Java 基础(三)| IO流之使用 File 类的正确姿势
为跳槽面试做准备,今天开始进入 Java 基础的复习.希望基础不好的同学看完这篇文章,能掌握泛型,而基础好的同学权当复习,希望看完这篇文章能够起一点你的青涩记忆. 一.什么是 File 类? java ...
- 【C&数据结构】---关于链表结构的前序插入和后序插入
刷LeetCode题目,需要用到链表的知识,忽然发现自己对于链表的插入已经忘得差不多了,以前总觉得理解了记住了,但是发现真的好记性不如烂笔头,每一次得学习没有总结输出,基本等于没有学习.连复盘得机会都 ...
- Kafka日志压缩剖析
1.概述 最近有些同学在学习Kafka时,问到Kafka的日志压缩(Log Compaction)问题,对于Kafka的日志压缩有些疑惑,今天笔者就为大家来剖析一下Kafka的日志压缩的相关内容. 2 ...