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

이번에는 글을 추가하는 기능을 포스팅할 것이다.
localhost:7777/topic/add로 접근시 add.pug을 이용해 글을 작성할 수 있는 폼을 만들 것이다.



views_mysql 디렉토리 내에 add.pug 파일을 만든다.
그리고 기존에 사용하였던 new부분을 add로 다음과 같이 변경하였다.
(추가로 view.pug 파일 내에 있는 new도 add로 바꿔줘야한다.)

app.get('/topic/add', function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('add', {topics: files});
    })
});

 

이를 실행하면 오류가 날 것이다. 왜냐하면 data라는 로컬파일을 사용하였었는데, 현재는 데이터베이스를 사용할 것이기 때문이다.

그래서 우선 주석처리를 하고, 코드를 추가했다.

 

app.get('/topic/add', function (req, res) {
    var sql = 'SELECT id,title FROM topic';
    conn.query(sql, function (err, topics, fields) {
        res.render('add', {topics: topics});
    });
    /*fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('add', {topics: files});
    })*/
});

 

 

 

이를 접근하면 add 페이지에서 글 목록들이 object Object로 또 뜨게 될 것이다.

 

a(href='/topic/' + topic)= topic

이 코드 역시 add.pug 파일에서 다음과 같이 수정을 해줘야한다.

 

a(href='/topic/' + topic.id)= topic.title

그러면 add 페이지에서도 정상적으로 글 목록이 출력되는 것을 확인할 수 있다.



글을 작성하고 서버에 올릴 때 POST 방식을 사용할 것이다.
그래서 우선 add.pug 파일을 수정하였다.

article
            form(action='/topic/add' method='post')
                p
                    input(type='text', name='title' placeholder='title')
                p
                    textarea(name='description' placeholder='description')
                p
                    input(type='text', name='author' placeholder='author')
                p
                    input(type='submit')

title, description, author에 대한 텍스트박스를 각각 만들었다.
이 폼에서 제출버튼을 누르면 Cannot POST /topic/add 에러가 뜰 것이다. 라우트를 하고 있지 않기 때문이다.
이를 통해 POST 방식으로 전달되고 있다는 사실을 확인할 수 있다.

 

 

 

app.post('/topic/add', function (req, res) {
    var title = req.body.title;
    var description = req.body.description;
    var author = req.body.author;
    var sql = 'INSERT INTO topic (title, description, author) VALUES(?, ?, ?)';
    conn.query(sql, [title, description, author], function (err, result, fields) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        } else {
            res.redirect('/topic/' + result.insertId);
        }
    });
});

우선 코드는 위와 같다.
각각 title, description, author의 변수를 선언하고, ?치환자를 이용해서 sql문을 작성했다.
예외처리를 해주고, res.redirect('/topic/' + result.insertId);으로 id값을 이용한 url으로 접근 가능하도록 만들었다.