如何在重定向后向用户显示友好的重复添加提示消息-js教程-PHP中文网

如何在重定向后向用户显示友好的重复添加提示消息

本文介绍如何在 express 应用中，通过 url 查询参数传递状态信息，在用户尝试重复添加图书至收藏库并被重定向回首页后，动态显示“该书已存在”的友好提示，避免误判为系统错误。

本文介绍如何在 express 应用中，通过 url 查询参数传递状态信息，在用户尝试重复添加图书至收藏库并被重定向回首页后，动态显示“该书已存在”的友好提示，避免误判为系统错误。

在 Web 开发中，res.redirect() 是一个无状态操作——它无法直接向目标路由传递变量或渲染上下文。因此，当用户点击“Add to Library”却因图书已存在而被重定向回 / 时，前端无法得知这次跳转背后的业务原因。若仅靠 display: none/block 的纯前端控制，将无法区分“首次访问”与“因重复添加而跳转”，导致体验割裂。

解决思路是：利用 URL 查询参数作为轻量级状态载体，在重定向时附带语义化信息（如 ?duplicate=The+Great+Gatsby），再由首页路由解析并注入模板上下文，最终由服务端渲染决定是否展示提示。

✅ 步骤实现

1. 修改 POST 路由：重定向时携带 duplicate 参数

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(`/?duplicate=${encodeURIComponent(existingBook.title)}`);
    }

    const newBook = {
      title: req.body.title,
      image: req.body.image,
    };
    user.book.push(newBook);
    await user.save();

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

⚠️ 注意：使用 encodeURIComponent() 对书名进行编码，确保含空格、特殊字符的标题（如 "The Great Gatsby"）能安全出现在 URL 中。

2. 更新首页 GET 路由：解析并透传 duplicate 状态

router.get("/", async (req, res, next) => {
  const duplicate = req.query.duplicate ?? null;

  // 此处保留你原有的首页逻辑（如获取 18 本热门图书等）
  const books = data.PopularBooks.slice(0, 18);

  // 渲染时统一传入 duplicate（即使为 null，EJS 也能安全判断）
  res.render("index", { 
    books,
    duplicate 
  });
});

3. 在 EJS 模板中条件渲染提示消息

移除原先隐藏的静态

，改用服务端条件渲染：

<!-- index.ejs -->

  <div id="message" class="alert alert-info">
    ? The book "" is already in your library.
  </div>


<!-- 其余页面结构（18 个图书 div）保持不变 -->
<div class="books-grid">
   { %>
    <div class="book-card" data-id="<%= book.id %>">
      <h3></h3>
      <p></p>
      <!-- ... -->
    </div>
  
</div>

? 建议为 #message 添加 CSS 类（如 alert alert-info）并配合淡入动画提升体验，例如：
#message {
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}