Как сохранить страницу разбиения на страницы в приложении блога Node? - PullRequest
Новая
       19

Как сохранить страницу разбиения на страницы в приложении блога Node?

1 голос
/ 17 апреля 2019

Я строю блог-сайт с помощью Express. Он имеет функции редактирования и удаления. Я пытаюсь перенаправить на ту же страницу пагинации, которую я остановил в корневом маршруте после удаления или редактирования существующего сообщения. В нынешнем виде, например, если я удалю сообщение на странице 2, оно перенаправит меня обратно на страницу 1. То же самое произойдет, если я удалю сообщение в блоге на странице 2. Но я хочу, чтобы обе функции перенаправили обратно на страницу. 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 ]

1 голос
/ 17 апреля 2019

вы можете передать некоторые дополнительные данные на ваш маршрут /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);
    }
  });
1 голос
/ 17 апреля 2019

Хорошей идеей будет просто отправлять статус при обращении к 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 
  }
 });
});
...