[TIL] 210707

22294 ワード
テキストリンク
今日、昨日作成した削除コメント機能で、削除APIの表示と変更方法が作成されました.

-------🖥️ Frontend-------


📂 変更バーのオン/オフ


フロントでは、修正ボタンをクリックしたときに、新しい空間をどのように創造し、元のコメント内容をそのまま表現するかがポイントです.探していたら、ボタンをクリックすると、ディスプレイをnoneからblockに変えて、隠れた空間を表示するコードを見つけて、接ぎ木してみました.
新しいスペースを展示するとともに、既存のスペースも一緒に取り除くのでクリックすると同時に「既存スペース」「新スペース」「修正確認ボタン」の3つが変更されます.
最初はどのようなコンテンツしかロードされていないAPIだったのでtypeが「GET」なのか、どのようなコメントをもたらすのか分からないので、orderデータを「POST」に伝えました.
今考えてみればurlでorderデータを渡すとき、「GET」ができる.
function openEdit(order) {
  $.ajax({
    type: 'POST',
    url: `comments/read/edit/${postId}`,
    data: { order: order },
    success: function (response) {
      const comment = response['comment'];
      const preDiv = document.getElementById(`pastCommentContext${order}`);
      const div = document.getElementById(`commentOrder${order}`);
      const button = document.getElementById(`editOrder${order}`);

      if (div.style.display === 'none') {
        preDiv.style.display = 'none';
        div.style.display = 'block';
        button.style.display = 'block';
        $(`#commentOrder${order}`).val(`${comment['comment']}`);
      } else {
        preDiv.style.display = 'block';
        div.style.display = 'none';
        button.style.display = 'none';
      }
    },
  });
}

📂 APIの変更と削除


これらが完了する限り、APIの変更およびAPIの削除は、既存のCRUDを使用することができる.
function editComment(order) {
  let newComment = $(`#commentOrder${order}`).val();

  $.ajax({
    type: 'PUT',
    url: `comments/edit/${postId}`,
    data: {
      comment: newComment,
      order: order,
    },
    success: function (response) {
      alert('수정되었습니다.');
      window.location.reload();
    },
  });
}

function deleteComment(order) {
  const answer = confirm('정말로 삭제하시겠습니까?');
  if (!answer) {
    return;
  } else {
    $.ajax({
      type: 'DELETE',
      url: `comments/delete/${postId}`,
      data: {
        order: order,
      },
      success: function (response) {
        alert('삭제되었습니다.');
        window.location.reload();
      },
    });
  }
}

-------⚙️ Backend-------


📂 APIの変更と削除

router.post('/read/edit/:postId', async (req, res) => {
  const { postId } = req.params;
  const { order } = req.body;
  const comments = await Comment.findOne({ $and: [{ postId }, { order }] });

  res.send({ comment: comments });
});

router.put('/edit/:postId', async (req, res) => {
  const { postId } = req.params;
  const { order, comment } = req.body;

  if (comment === '') {
    res.status(400).send({
      errorMessage: '댓글을 작성해주세요.',
    });
    return;
  }

  await Comment.updateOne(
    {
      $and: [{ postId }, { order }],
    },
    { $set: { comment } }
  );

  res.send();
});

router.delete('/delete/:postId', async (req, res) => {
  const { postId } = req.params;
  const { order } = req.body;

  await Comment.deleteOne({
    $and: [{ postId }, { order }],
  });

  res.send();
});
WDSM 3はCollabを使用してデータをダウンロードする
データの符号化(1)の16進符号化