[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 4

이번 포스팅의 개요는 사용자가 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 파일은 위와 같이 작성했다.