Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫(kù)進(jìn)行日期格式化的實(shí)現(xiàn)方法
在 Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫(kù)進(jìn)行日期格式化的步驟如下:
1. 安裝 silly-datetime 庫(kù)
可以通過(guò) npm 命令安裝 silly-datetime 庫(kù),命令為:
npm install silly-datetime --save
2. 在 app.js 中配置模板引擎和使用庫(kù)方法
在 app.js 文件中,需要配置使用 EJS 模板引擎,并使用 res.locals 將庫(kù)方法傳遞給模板。下面是一個(gè)例子:
const express = require("express"); const app = express(); const sd = require("silly-datetime"); // 模板引擎配置 app.set("views", __dirname + "/views"); // 設(shè)置模板文件夾 app.set("view engine", "ejs"); // 設(shè)置視圖模板引擎 // 定義全局變量,模板都可以訪問(wèn)到 app.use(function (req, res, next) { ? // 將 silly-datetime 的 format 方法用 locals 來(lái)代理 ? res.locals.formatDate = function (date, fmt) { ? ? return sd.format(date, fmt); ? }; ? next(); }); // 創(chuàng)建路由和功能代碼 // ...
3. 在模板文件中使用庫(kù)方法
在模板文件中,可以使用模板語(yǔ)法調(diào)用布局文件中定義的 formatDate 函數(shù)。具體方式如下:
<!-- 渲染數(shù)據(jù)列表 --> <% for(var i=0; i<articles.length; i++) { %> ? <tr> ? ? <td><%= articles[i].title %></td> ? ? <td><%= locals.formatDate(articles[i].created_at, "YYYY-MM-DD HH:mm:ss") %></td> ? </tr> <% } %>
以上模板代碼將使用 silly-datetime 的 format 方法對(duì)文章發(fā)布時(shí)間進(jìn)行了格式化處理,最終展示為 YYYY-MM-DD HH:mm:ss 格式的日期字符串。
注意:在模板文件中需要正確引入 silly-datetime 庫(kù),否則無(wú)法使用 formatDate 函數(shù)。
補(bǔ)充說(shuō)明:silly-datetime 庫(kù)的原始用法為:
const sd = require("silly-datetime"); sd.format(new Date(), "YYYY-MM-DD HH:mm:ss");//此處的new Date()位置可以傳入其他日期格式參數(shù)
對(duì)應(yīng)的,在app.js中定義該函數(shù)給EJS模版使用,則對(duì)應(yīng)形式為:
? res.locals.formatDate = function (date, fmt) { ? ? return sd.format(date, fmt); ? };
相應(yīng)的,EJS模版中使用該函數(shù),則是需要通過(guò)locals來(lái)調(diào)用定義的formatDate方法,再傳入對(duì)應(yīng)位置的參數(shù)即可:
locals.formatDate(articles[i].created_at, "YYYY-MM-DD HH:mm:ss")
該方法經(jīng)筆者測(cè)試可以正常使用。
相關(guān)文章:
1. 淺談vue websocket nodeJS 進(jìn)行實(shí)時(shí)通信踩到的坑2. VUE+Express+MongoDB前后端分離實(shí)現(xiàn)一個(gè)便簽墻3. 使用本機(jī)IIS?Express開(kāi)發(fā)Asp.Net?Core應(yīng)用圖文教程4. vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作5. Ajax 的初步實(shí)現(xiàn)(使用vscode+node.js+express框架)6. express框架+bootstrap美化ejs模板實(shí)例分析7. JavaScript 模塊化開(kāi)發(fā)實(shí)例詳解【seajs、requirejs庫(kù)使用】8. 初學(xué)者如何快速搭建Express開(kāi)發(fā)系統(tǒng)步驟詳解9. express框架通過(guò)ejs模板渲染輸出頁(yè)面實(shí)例分析10. nodejs報(bào)digital envelope routines::unsupported錯(cuò)誤的最新解決方法
