如何在Node博客应用程序中保留分页页面?

时间:2019-04-17 05:28:15

标签: javascript node.js express ejs

我正在使用Express构建博客站点。它具有编辑和删除功能。我正在尝试重定向到删除或编辑现有帖子后在根路由中遗留的分页的同一页面。目前,例如,如果我删除第2页上的帖子,它将重定向我回到第1页。如果删除第2页上的博客帖子,也会发生同样的事情,但是我希望这两种功能都重定向到Page 1上。 2.感谢您的帮助。

这是前端的“编辑”页面。

<form action="/edit/<%=id %>?_method=PUT?page=<%= currentPage %>" method="POST">
  <div class="form-group">
    <label for="postTitle">Title</label>
    <input type="text" name="postTitle" class="form-control" id="postTitle" autocomplete="off" value="<%= title %>">
    <label for="postBody">Post</label>
    <textarea name="postBody" class="form-control" autocomplete="off" rows="8"><%= content %></textarea>
  </div>
    <button type="submit" name="button" class="btn btn-primary">Publish</button>
</form>

这是前端删除功能的表格。

  <form action="/delete?page=<%= currentPage %>" method="POST">
    <button type="submit" name="delete" value="<%= post._id %>" class="btn btn-outline-danger">DELETE</button>
  </form>

这是后端的根,删除和编辑路由。

// Root route that displays all posts stored in database.
app.get("/", (req, res) => {

  let perPage = 3;
  let totalItems;
  let currentPage = parseInt(req.query.page) || 1;

  Post.find()
    .countDocuments()
    .then(count => {

      totalItems = count;

      Post.find()
        .sort({ date: -1 })
        .skip((currentPage - 1) * perPage)
        .limit(perPage)
        .then(posts => {
          console.log(currentPage);
          res.render("home", {
            posts,
            currentPage,
            totalItems
          });

        });
    })
});


// Route for updating specific post.
app.put('/edit/:id', (req, res) => {
  let currentPage = parseInt(req.query.page) || 1;
  const postEdit = {
    title: req.body.postTitle,
    content: req.body.postBody
  };
  Post.findByIdAndUpdate(req.params.id, postEdit, (err, post) => {
    if (err) {
      console.log(err);
    } else {
      res.redirect("/?page=" + currentPage);
    }
  });
});

// Route for deleting specific post.
app.post("/delete", (req, res) => {
  const deletePost = req.body.delete;
  let currentPage = parseInt(req.query.page) || 1;
  Post.findByIdAndRemove(deletePost, (err) => {
    if (err) {
      console.log(err);
    } else {
      res.redirect("/?page=" + currentPage);
    }
  });
});

2 个答案:

答案 0 :(得分:1)

最好在碰到API时发送状态,而不是直接从API重定向。我建议您也这样做。一旦您在客户端中点击了API,您将获得http状态代码,例如200(成功)或500(执行操作时出了点问题)等。根据http状态代码,仅在客户端进行重定向(如果需要)

app.put('/edit/:id', (req, res) => {

 const postEdit = {
  title: req.body.postTitle,
  content: req.body.postBody
 };

Post.findByIdAndUpdate(req.params.id, postEdit, (err, post) => {
   if (err) {
   console.log(err);
    res.status(500).send(err);
   } else {
    res.status(200).send();// send status only 
   }
 });
});

// Route for deleting specific post.
app.post("/delete", (req, res) => {
 const deletePost = req.body.delete;

  Post.findByIdAndRemove(deletePost, (err) => {
  if (err) {
    console.log(err);
    res.status(500).send(err);
  } else {
    res.status(200).send(); // send status only 
  }
 });
});

答案 1 :(得分:1)

您可以将一些其他数据作为来自客户端Eg的查询参数传递到/delete路由。

<form action="/delete?page=2" method="POST">

您可以从模型的后端传递实际的页面,而不用2并在视图中使用它。

然后与在delete路由中所做的相同,在let currentPage = parseInt(req.query.page) || 1;路由中将其用作/

app.post("/delete", (req, res) => {
  const deletePost = req.body.delete;
  let currentPage = parseInt(req.query.page) || 1; // you need to get the value here for this route

  Post.findByIdAndRemove(deletePost, (err) => {
    if (err) {
      console.log(err);
    } else {
      res.redirect('/?page=' + currentPage);
    }
  });