Express.js 中如何使用 connect-flash 显示消息

在 Web 应用程序中，我们经常需要向用户显示一些消息，例如成功或失败的操作信息、表单验证错误等。在 Express.js 中，我们可以使用 connect-flash 中间件来实现这一功能。本文将介绍如何在 Express.js 中使用 connect-flash 显示消息。

安装 connect-flash

首先，我们需要安装 connect-flash 中间件。可以使用 npm 命令进行安装：

npm install connect-flash

配置中间件

在 Express.js 应用程序中配置 connect-flash 中间件非常简单。我们只需要在应用程序中添加以下代码：

const flash = require('connect-flash');
const app = express();

app.use(flash());

在路由中使用 connect-flash

现在，我们已经在应用程序中配置了 connect-flash 中间件。接下来，我们需要在路由中使用它来显示消息。

// javascriptcn.com 代码示例
app.post('/login', (req, res) => {
  // 验证用户登录信息
  if (valid) {
    req.flash('success', '登录成功！');
    res.redirect('/');
  } else {
    req.flash('error', '用户名或密码错误！');
    res.redirect('/login');
  }
});

app.get('/', (req, res) => {
  const successMessage = req.flash('success');
  const errorMessage = req.flash('error');
  res.render('index', { successMessage, errorMessage });
});

在上面的代码中，我们在登录路由中使用了 req.flash 方法来设置成功或失败的消息。然后，我们重定向到首页路由，并将消息作为参数传递给视图引擎。在视图中，我们可以通过 successMessage 和 errorMessage 变量来访问消息。

在视图中显示消息

最后，我们需要在视图中显示消息。这可以通过使用模板引擎来完成。以下是一个使用 EJS 模板引擎的示例：

<% if (successMessage) { %>
  <div class="alert alert-success"><%= successMessage %></div>
<% } %>

<% if (errorMessage) { %>
  <div class="alert alert-danger"><%= errorMessage %></div>
<% } %>

在上面的代码中，我们使用了条件语句来检查是否存在成功或失败的消息。如果存在，则显示相应的消息。

总结

在本文中，我们介绍了如何在 Express.js 中使用 connect-flash 中间件来显示消息。首先，我们安装了 connect-flash 中间件，并在应用程序中配置了它。然后，我们在路由中使用了 req.flash 方法来设置成功或失败的消息，并将消息作为参数传递给视图引擎。最后，我们在视图中使用模板引擎来显示消息。通过使用 connect-flash，我们可以方便地向用户显示消息，并提高用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657a7353d2f5e1655d4cb6ea