The Book I Read #5

수정하기, 삭제하기 버튼에 따른 백과 프론트에서의 처리를 해보려고 한다. 일단 백부터 작성해주었다. mongoDB와 크게 다를게 없었던 것 같다. 퀴리문에 대한 이해와 VARCHAR의 값의 한계치 지정에 유의해줘야겠다는 생각이 들었다.

삭제하기 DELETE

• index.js ( /backend )

  //데이터 삭제하기
  app.delete("/books/:id", (req, res) => {
    const bookId = req.params.id;
    const q = "DELETE FROM books WHERE id = ?";
  
    db.query(q, [bookId], (err, data) => {
      if (err) return res.json(err);
      return res.json("책 삭제하기 성공");
    });
  });

• Book.js

  const handleDelete = async (id) => {
      try {
        await axios.delete(`http://localhost:8800/books/` + id);
        window.location.reload();
      } catch (err) {
        console.log(err);
      }
    };

수정하기 PUT

• index.js ( /backend )

  //데이터 수정하기
  app.put("/books/:id", (req, res) => {
    const bookId = req.params.id;
    const q =
      "UPDATE books SET `title`= ?, `desc`= ?, `price`= ?,`cover`= ? WHERE id = ?";
  
    const values = [
      req.body.title,
      req.body.desc,
      req.body.price,
      req.body.cover,
    ];
  
    db.query(q, [...values, bookId], (err, data) => {
      if (err) return res.json(err);
      return res.json("책 수정하기 성공");
    });
  });

• Update.js

  const handleClick = async (e) => {
      e.preventDefault();
      try {
        await axios.put("http://localhost:8800/books/" + path, book);
        navigate("/");
      } catch (err) {
        console.log(err);
      }
    };

위와 같이 작성을 통해 Update와 Delete기능까지 넣어주었다. 책에 대한 설명을 Detail 페이지를 만들어서 더 자세히 볼 수 있게 할까 고민 중이다.