반응형
PUT 요청으로 게시글 데이터 수정하기
우선 HTML 에서 PUT 이나 DELETE 요청이 없기에 라이브러리를 설치해보기!
npm i method-override
설치 이후 server.js 에서도 코드를 추가해주기
const methodOverride = require("method-override")
app.use(methodOverride("_method")
그리고 수정하고자 하는 페이지인 edit.ejs 파일을 만들어서 write 페이지와 똑같이 레이아웃 짜고, 여기서 아까 수정했던 method-override 코드를 form 태그에 추가하기!
추가 코드는 form 태그의 action 속성에 action = “/edit?_method=PUT” 으로 경로?_method=메서드 종류 로 추가하고 method 속성은 POST 로 해주기!
또한 form 태그를 통해 전달될 데이터의 종류로 id, title, date 값이 필요한데 id는 굳이 보일 필요가 없기 때문에 class로 d-none 을 해줬고 이건 부트스트랩을 사용한거라서 css 로 할거면 display = none 을 적용하면 될 듯?
<body>
<%- include('nav.html')%>
<div class="container">
<h4 class="mt-4"><strong>글 수정 페이지</strong></h4>
<div class="mt-3">
<form action="/edit?_method=PUT" method="POST">
<div class="form-group">
<label>오늘의 할일</label>
<input type="text" value="<%= data._id %>" class="d-none" name="id">
<input type="text" value="<%= data.제목 %>" class="form-control" name="title">
</div>
<div class="form-group">
<label>날짜</label>
<input type="text" value="<%= data.날짜 %> " class="form-control" name="date">
</div>
<button type="submit" class="btn btn-danger mt-1">Submit</button>
</form>
</div>
</div>
</body>
그래서 우선 edit 페이지를 보여줄 코드를 작성하기
여기서도 param을 이용해서 각 리스트에 맞는 데이터를 db에서 가져와서 보여주도록 하기
app.get("/edit/:id", (req, res) => {
db.collection("post").findOne(
{ _id: parseInt(req.params.id) },
(error, data) => {
if (data === null) {
res.render("error.ejs");
} else {
res.render("edit.ejs", { data: data });
}
}
);
});
그리고 수정을 edit 페이지에서 한다면 server.js에서 put 요청으로 수정하는 코드를 작성하기.
여기서는 updateOne 메서드를 사용해서
첫 번째 인자로는 수정할 데이터, 두 번째 인자로는 수정 값, 세 번째 인자로는 콜백 함수를 작성
app.put("/edit", (req, res) => {
// form에 담긴 데이터를 서버에서 해당 게시글에 맞는 id를 찾아서 데이터를 수정하기.
// update를 할 때는 updateOne({어떤 게시글}, {수정값}, (err, data) => {})
// 여기서 $set 은 operator로 ~가 있으면 수정하고, 없다면 추가해주세요 라는 의미
console.log(req.body);
db.collection("post").updateOne(
{ _id: parseInt(req.body.id) },
{ $set: { 제목: req.body.title, 날짜: req.body.date } },
(err, data) => {
res.redirect("/list");
}
);
});
'NodeJS+MongoDB' 카테고리의 다른 글
| NodeJS+MongoDB Part3 - 암호화 (0) | 2023.06.27 |
|---|---|
| NodeJS+MongoDB Part3 - Search (0) | 2023.06.26 |
| NodeJS+MongoDB Part3 - User (Session, JWT, OAuth) (0) | 2023.06.23 |
| NodeJS+MongoDB Part2 (0) | 2023.06.22 |
| NodeJS+MongoDB Part1 (0) | 2023.06.04 |