介紹

NodeJS 中的connect-flash模塊允許開(kāi)發(fā)人員在用戶被重定向到特定網(wǎng)頁(yè)時(shí)呈現(xiàn)彈出消息。例如，在您的 Nodejs 演示應(yīng)用程序中，您希望在登錄和注銷(xiāo)時(shí)通知您的用戶。為此，您可以借助connect-flash模塊在 NodeJs 應(yīng)用程序中使用 flash 消息。

先決條件：NodeJs 中的 Flash 消息

在開(kāi)始開(kāi)發(fā)我們的演示應(yīng)用程序之前，讓我們看看先決條件是什么——

• 安裝了 Node.js 和 NPM

• NodeJS 及其模塊的基礎(chǔ)知識(shí)

初始化應(yīng)用程序

第一步是創(chuàng)建 package.json 來(lái)初始化項(xiàng)目。為此，運(yùn)行以下命令

npm 初始化

安裝依賴(lài)

要使用 connect-flash 模塊在 NodeJs 中實(shí)現(xiàn)flash 消息，您需要使用命令安裝所需的依賴(lài)項(xiàng)。

npm 安裝 connect-flash express express-session --save

Express：庫(kù)connect-flash需要運(yùn)行。

Express-session：每當(dāng)閃現(xiàn)消息時(shí)創(chuàng)建一個(gè)會(huì)話，以便用戶可以被重定向到特定頁(yè)面。

設(shè)置 index.js

現(xiàn)在，前往編碼部分。創(chuàng)建一個(gè)名為 index.js 的文件。您可以隨意命名。現(xiàn)在，打開(kāi) index.js 文件并使用以下代碼導(dǎo)入模塊。

const express = require('快遞');const session = require('快速會(huì)話');const flash = require('connect-flash');
  const app = express();

現(xiàn)在，是時(shí)候著手處理邏輯部分并實(shí)施它了。在index.js文件中編寫(xiě)代碼，如下所示。

const express = require('快遞');const session = require('快速會(huì)話');const flash = require('connect-flash');
  const app = express();
  const port = process.env.PORT || 3001;
  應(yīng)用程序使用（會(huì)話（{
    秘密：'flashblog'，
    保存未初始化：真，
    重新保存：真}));
  app.use(flash());
  app.get('/', (req, res) => {
  req.flash('消息', '歡迎來(lái)到博客');
  res.redirect('/顯示消息');});
  app.get('/display-message', (req, res) => {
    res.send(req.flash('消息'));});
  app.listen（端口，（錯(cuò)誤）=> {
  console.log('服務(wù)器啟動(dòng)并監(jiān)聽(tīng)', port);});

解釋

• 定義一個(gè)端口號(hào)，一旦您導(dǎo)入了模塊，我們的演示應(yīng)用程序?qū)⒃谠摱丝谔?hào)上運(yùn)行。

• 定義一個(gè)會(huì)話密碼來(lái)加密我們的敏感信息。

• SaveUninitialized將避免瀏覽器使用空會(huì)話。現(xiàn)在，在app.use(flash())的幫助下調(diào)用 connect-flash 模塊。

稍后定義路線：

• / – 用于顯示指定的消息，然后將用戶重定向到 /display-message 路由。

• /display-message – 用于在網(wǎng)頁(yè)上顯示特定消息。

瞧！我們制作了演示應(yīng)用程序來(lái)監(jiān)聽(tīng)端口。

運(yùn)行應(yīng)用程序

一旦完成開(kāi)發(fā)部分。通過(guò)以下命令運(yùn)行應(yīng)用程序并測(cè)試功能。

節(jié)點(diǎn)索引.js

瀏覽器將被重定向到 /display-message 并顯示以下輸出。

在視圖文件上顯示 Flash 消息

現(xiàn)在我們將在視圖文件上顯示 flash 消息。為此，我們需要使用 ejs 視圖引擎。要安裝 ejs，請(qǐng)運(yùn)行以下命令。

npm 安裝 ejs

打開(kāi)index.js并添加以下代碼

app.set('視圖引擎', 'ejs');
 app.use(函數(shù)(請(qǐng)求、資源、下一個(gè)){
    res.locals.message = req.flash();
    下一個(gè)（）;});

在應(yīng)用程序的根目錄中創(chuàng)建 views 文件夾，并在同一文件夾中創(chuàng)建display.ejs 。現(xiàn)在使用以下代碼在顯示消息路由中呈現(xiàn)視圖模板 (display.ejs)。

app.get('/display-message', (req, res) => {
    res.render("顯示");});

完成后，在views/index.js中添加以下行。

<%= 消息.成功 %>

為了美化 flash 消息，我們將使用 bootstrap css。將 bootstrap css 文件包含到視圖模板中并使用以下代碼。

<link data-minify="1" href="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/npm/bootstrap@5.1.1/dist/css/bootstrap.min。 css?ver=1686822230" rel="stylesheet" type="text/css" ><% 如果（消息.成功）{ %><div class="alert alert-success" role="alert">
    <%= 消息.成功 %></div><% } %>

重啟節(jié)點(diǎn)服務(wù)器，在瀏覽器中打開(kāi)http://localhost:3001/。

輸出看起來(lái)像這樣。

Github 倉(cāng)庫(kù)

歡迎訪問(wèn)源代碼：flash-messages-in-nodejs。您可以克隆 github 存儲(chǔ)庫(kù)并使用代碼。

結(jié)論

言鼎科技