HBS 中的 Flash 消息

在 Web 开发中，我们通常会需要在页面中显示一些提示信息，例如用户注册成功、操作失败等等。而 HBS 中的 Flash 消息正是用来实现这个功能的一种方式。

Flash 消息是一种短暂的、即时的消息提示，其特点是只在下一次请求时显示，一旦显示过后就会被清除。这种消息可以用来提供反馈信息，比如操作成功、失败、需要登录等等。

在 HBS 中，我们可以使用 Express 的 connect-flash 模块来实现 Flash 消息。connect-flash 模块是 Express 中的一个中间件，它提供了向客户端发送 Flash 消息的功能。

安装 connect-flash 模块

我们可以使用 npm 来安装 connect-flash 模块：

npm install connect-flash --save

配置 connect-flash 模块

在 Express 中，我们需要使用 connect-flash 模块来实现 Flash 消息。在使用之前，我们需要先对它进行配置。

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

app.use(require('cookie-parser')());
app.use(require('express-session')({ secret: 'keyboard cat', resave: true, saveUninitialized: true }));
app.use(flash());

向客户端发送 Flash 消息

使用 Flash 消息需要分两步完成。第一步是在 Express 路由中向客户端发送 Flash 消息，第二步是在 HBS 视图中显示 Flash 消息。

我们可以在 Express 路由中使用 req.flash(type, message) 方法来向客户端发送 Flash 消息。其中，type 表示消息的类型，message 表示消息的内容。以下是一个例子：

app.get('/login', (req, res) => {
  res.render('login.hbs', { message: req.flash('error') });
});

app.post('/login', (req, res) => {
  const result = authenticate(req.body.username, req.body.password);
  if (result.success) {
    req.session.user = req.body.username;
    res.redirect('/dashboard');
  } else {
    req.flash('error', result.message);
    res.redirect('/login');
  }
});

在这个例子中，我们向客户端发送了一个名为 error 的 Flash 消息，其内容为身份验证失败的信息。

在 HBS 视图中，我们可以使用 {{#if messages.error}}{{messages.error}}{{/if}} 来判断是否有 error 类型的消息，并将它显示出来。

{{#if messages.error}}
  <div class="alert alert-danger">{{messages.error}}</div>
{{/if}}

这就是 HBS 中 Flash 消息的用法了。希望本文对你有所帮助。