重定向至首页后显示图书已添加提示的实现方案咨询

要实现重复添加图书时显示提示而非静默重定向，你需要在重定向时传递状态标识，再在首页根据标识显示提示框，具体步骤如下：

1. 修改POST路由，传递重复添加标识 #

在图书页的POST路由中，当检测到图书已存在时，重定向到首页并携带查询参数bookExists=true：

router.post("/book/:title", async (req, res, next) => {
  try {
    const user = await User.findById(req.user.id);
    if (!user) {
      return res.status(404).send("User not found");
    }

    const existingBook = user.book.find(
      (book) => book.title === req.body.title
    );
    if (existingBook) {
      // 重定向时添加查询参数，告知首页需要显示提示
      return res.redirect("/?bookExists=true");
    }

    const newBook = {
      title: req.body.title,
      image: req.body.image,
    };

    user.book.push(newBook);
    await user.save();

    res.redirect("/");
  } catch (error) {
    res.status(500).send("Error adding book");
  }
});

2. 修正提示框的初始样式 #

确保提示div默认隐藏，添加display: none的基础样式：

<div id="message" style="display: none;">Book already added to library</div>

3. 显示提示框的两种可选方案 #

方案一：前端JS自动检测（无需修改首页路由） #

在首页添加一段脚本，读取URL中的查询参数，若存在bookExists则显示提示框，还可设置自动隐藏：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('bookExists')) {
    const messageBox = document.getElementById('message');
    messageBox.style.display = 'block';
    // 可选：3秒后自动隐藏提示
    setTimeout(() => {
      messageBox.style.display = 'none';
    }, 3000);
  }
});
</script>

方案二：服务器端渲染控制（适配模板引擎场景） #

如果首页有对应的GET路由，可在路由中读取查询参数，传递给模板控制显示：

// 首页GET路由示例
router.get("/", async (req, res) => {
  // 其他业务逻辑（比如获取首页展示的18本图书）
  const showDuplicateTip = req.query.bookExists === 'true';
  // 将变量传递给模板
  res.render("index", { showDuplicateTip });
});

然后在首页模板中根据变量设置样式：

<div id="message" style="display: <%= showDuplicateTip ? 'block' : 'none' %>">Book already added to library</div>

内容的提问来源于stack exchange，提问作者Dagger