使用 Connect-flash 模块的 NodeJS 中的 Flash 消息

介绍

NodeJS 中的connect-flash模块允许开发人员在用户被重定向到特定网页时呈现弹出消息。例如，在您的 Nodejs 演示应用程序中，您希望在登录和注销时通知您的用户。为此，您可以借助connect-flash模块在 NodeJs 应用程序中使用 flash 消息。

先决条件：NodeJs 中的 Flash 消息

在开始开发我们的演示应用程序之前，让我们看看先决条件是什么——

• 安装了 Node.js 和 NPM

• NodeJS 及其模块的基础知识

初始化应用程序

第一步是创建 package.json 来初始化项目。为此，运行以下命令

npm 初始化

安装依赖

要使用 connect-flash 模块在 NodeJs 中实现flash 消息，您需要使用命令安装所需的依赖项。

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

Express：库connect-flash需要运行。

Express-session：每当闪现消息时创建一个会话，以便用户可以被重定向到特定页面。

设置 index.js

现在，前往编码部分。创建一个名为 index.js 的文件。您可以随意命名。现在，打开 index.js 文件并使用以下代码导入模块。

const express = require('快递');const session = require('快速会话');const flash = require('connect-flash');
  const app = express();

现在，是时候着手处理逻辑部分并实施它了。在index.js文件中编写代码，如下所示。

const express = require('快递');const session = require('快速会话');const flash = require('connect-flash');
  const app = express();
  const port = process.env.PORT || 3001;
  应用程序使用（会话（{
    秘密：'flashblog'，
    保存未初始化：真，
    重新保存：真}));
  app.use(flash());
  app.get('/', (req, res) => {
  req.flash('消息', '欢迎来到博客');
  res.redirect('/显示消息');});
  app.get('/display-message', (req, res) => {
    res.send(req.flash('消息'));});
  app.listen（端口，（错误）=> {
  console.log('服务器启动并监听', port);});

解释

• 定义一个端口号，一旦您导入了模块，我们的演示应用程序将在该端口号上运行。

• 定义一个会话密码来加密我们的敏感信息。

• SaveUninitialized将避免浏览器使用空会话。现在，在app.use(flash())的帮助下调用 connect-flash 模块。

稍后定义路线：

• / – 用于显示指定的消息，然后将用户重定向到 /display-message 路由。

• /display-message – 用于在网页上显示特定消息。

瞧！我们制作了演示应用程序来监听端口。

运行应用程序

一旦完成开发部分。通过以下命令运行应用程序并测试功能。

节点索引.js

浏览器将被重定向到 /display-message 并显示以下输出。

在视图文件上显示 Flash 消息

现在我们将在视图文件上显示 flash 消息。为此，我们需要使用 ejs 视图引擎。要安装 ejs，请运行以下命令。

npm 安装 ejs

打开index.js并添加以下代码

app.set('视图引擎', 'ejs');
 app.use(函数(请求、资源、下一个){
    res.locals.message = req.flash();
    下一个（）;});

在应用程序的根目录中创建 views 文件夹，并在同一文件夹中创建display.ejs 。现在使用以下代码在显示消息路由中呈现视图模板 (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><% } %>

重启节点服务器，在浏览器中打开http://localhost:3001/。

输出看起来像这样。

Github 仓库

欢迎访问源代码：flash-messages-in-nodejs。您可以克隆 github 存储库并使用代码。

结论

言鼎科技