文章詳情頁
Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫進行日期格式化的實現(xiàn)方法
瀏覽:193日期:2022-06-10 10:03:46
在 Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫進行日期格式化的步驟如下:
1. 安裝 silly-datetime 庫
可以通過 npm 命令安裝 silly-datetime 庫,命令為:
npm install silly-datetime --save
2. 在 app.js 中配置模板引擎和使用庫方法
在 app.js 文件中,需要配置使用 EJS 模板引擎,并使用 res.locals 將庫方法傳遞給模板。下面是一個例子:
const express = require("express"); const app = express(); const sd = require("silly-datetime"); // 模板引擎配置 app.set("views", __dirname + "/views"); // 設(shè)置模板文件夾 app.set("view engine", "ejs"); // 設(shè)置視圖模板引擎 // 定義全局變量,模板都可以訪問到 app.use(function (req, res, next) { ? // 將 silly-datetime 的 format 方法用 locals 來代理 ? res.locals.formatDate = function (date, fmt) { ? ? return sd.format(date, fmt); ? }; ? next(); }); // 創(chuàng)建路由和功能代碼 // ...
3. 在模板文件中使用庫方法
在模板文件中,可以使用模板語法調(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 方法對文章發(fā)布時間進行了格式化處理,最終展示為 YYYY-MM-DD HH:mm:ss 格式的日期字符串。
注意:在模板文件中需要正確引入 silly-datetime 庫,否則無法使用 formatDate 函數(shù)。
補充說明:silly-datetime 庫的原始用法為:
const sd = require("silly-datetime"); sd.format(new Date(), "YYYY-MM-DD HH:mm:ss");//此處的new Date()位置可以傳入其他日期格式參數(shù)
對應(yīng)的,在app.js中定義該函數(shù)給EJS模版使用,則對應(yīng)形式為:
? res.locals.formatDate = function (date, fmt) { ? ? return sd.format(date, fmt); ? };
相應(yīng)的,EJS模版中使用該函數(shù),則是需要通過locals來調(diào)用定義的formatDate方法,再傳入對應(yīng)位置的參數(shù)即可:
locals.formatDate(articles[i].created_at, "YYYY-MM-DD HH:mm:ss")
該方法經(jīng)筆者測試可以正常使用。
標(biāo)簽:
JavaScript
相關(guān)文章:
1. 使用本機IIS?Express開發(fā)Asp.Net?Core應(yīng)用圖文教程2. NodeJs超長字符串問題處理的詳細分析3. vuejs element table 表格添加行,修改,單獨刪除行,批量刪除行操作4. Ajax 的初步實現(xiàn)(使用vscode+node.js+express框架)5. Nodejs 連接 mysql時報Error: Cannot enqueue Query after fatal error錯誤的處理辦法6. express框架通過ejs模板渲染輸出頁面實例分析7. nodejs報digital envelope routines::unsupported錯誤的最新解決方法8. 初學(xué)者如何快速搭建Express開發(fā)系統(tǒng)步驟詳解9. 淺談vue websocket nodeJS 進行實時通信踩到的坑10. Vue+express+Socket實現(xiàn)聊天功能
排行榜
