이번 포스팅의 개요는 사용자가 topic/:id/edit 경로로 접근하면 edit.pug 파일을 열어서 화면에 표시해주고, 수정작업이 끝난 다음 전송을 누르면 똑같은 주소로 POST방식으로 전송이 될 것이다.
수정이 끝나면 redirect를 시켜서 topic의 id값으로 가서 사용자에게 수정이 잘 끝났다라는 것을 암시적으로 보여줄 수 있는 코드를 만들 것이다.
또한 사용자가 특정 title을 선택했을 때에만 edit 버튼이 보이게 하고 싶다.
(홈으로 갔을 때에는 edit버튼이 사라지는 기능도 포함)
첫번째로, add버튼 옆에 edit버튼을 생성해야한다.
ul
li
a(href='/topic/add') add
if topic
li
a(href='/topic/'+topic.id+'/edit') edit
다음과 같이 /topic/id/edit 형식으로 edit버튼을 한 개 만들었다.
하지만 여기서 edit버튼을 누르면 마찬가지로 Cannot GET /topic/id/edit 에러 메시지가 날 것이다.
항상 하던 것처럼 /edit에 관한 라우트를 연결해주어야한다.
app.get(['/topic/:id/edit'], function (req, res) {
var sql = 'SELECT id,title FROM topic';
conn.query(sql, function (err, topics, fields) {
var id = req.params.id;
if (id) {
var sql = 'SELECT * FROM topic WHERE id=?';
conn.query(sql, [id], function (err, topic, fields) {
if (err) {
console.log(err);
res.status(500).send('Internal Server Error');
} else {
res.render('edit', {topics: topics, topic: topic[0]});
}
})
} else {
console.log('There is no id.');
res.status(500).send('Internal Server Error');
}
});
});
복잡해보이지만 비슷한 로직의 코드이다.
sql문을 작성하고, id가 있을 때와 없을 때의 예외처리를 했다.
else {
res.render('edit', {topics: topics, topic: topic[0]});
}
이 부분은 글이 있을 때, edit를 사용하는 부분이다.
doctype html
html
head
meta(charset='utf-8')
body
h1
a(href='/topic') Server Title
ul
each topic in topics
li
a(href='/topic/' + topic.id)= topic.title
article
form(action='/topic/' + topic.id + '/edit' method='post')
p
input(type='text', name='title' value=topic.title placeholder='title')
p
textarea(name='description' placeholder='description')
=topic.description
p
input(type='text', name='author' value=topic.author placeholder='author')
p
input(type='submit')
ul
li
a(href='/topic/add') add
edit.pug 파일은 위와 같이 작성했다.
'javascript > node.js 웹애플리케이션 제작' 카테고리의 다른 글
[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 6 (0) | 2024.07.13 |
---|---|
[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 3 (0) | 2024.07.13 |
[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 2 (0) | 2024.07.13 |
[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 1 (0) | 2024.07.13 |
[Node.js] 웹애플리케이션 제작 - 4 파일 업로드 (0) | 2024.07.09 |