이번 포스팅에선 글 목록을 추가하는 것에 대해서 구현할 예정이다.
app_mysql.js 에서 항목을 추가하는 부분은 app.get('/topic/new', function(req, res){...} 를 살펴보면 된다.
app_mysql.js
app.get('/topic/new', function(req, res){
fs.readdir('data', function(err, files){
if(err){
console.log(err);
res.status(500).send('Internal Server Error');
}
res.render('new', {topics:files});
});
});조금 더 직관화하기위해 new보다는 add로 하는게 나을 것 같다. new로 설정한 부분을 모두 add로 바꾸자. (views_mysql 폴더의 new.pug 파일도 add.pug 로 바꿔야한다.)
위의 코드는 fs.readdir 즉, 파일로 데이터를 읽고 쓰던 웹 앱의 잔재이다. 우리는 이제 mysql이라는 DB 시스템을 이용할 것이므로 다음의 코드로 수정한다.
app_mysql.js
app.get('/topic/add', function(req, res){
var sql = 'SELECT id, title FROM topic';
conn.query(sql, function(err, topics, fields){
if(err){
console.log(err);
res.status(500).send('Internal Server Error');
}
res.render('add', {topics:topics});
});SELECT 문을 통해 topic table의 id값을 조회하고 render 함수로 add와 렌더링시키도록 한다. 이제 웹에서 add를 누른 후의 경로와 매칭되게 된다.
이제 add.pug 파일에서
li
a(href='/topic/'+topic)= topic위 부분을 view.pug 에서 했던 것처럼
li
a(href='/topic/'+topic.id)= topic.title로 바꾸어 id와 title로 조회할 수 있도록 해준다.
이제 title 과 description 에 글을 작성하고 제출 버튼을 눌러보자.
post 방식으로 서버에 데이터를 전송해야하는데 이에 대한 라우터가 없어 에러가 뜬다. 따라서 이를 설정해주어야한다. 전에 만들었던 app.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, rows, fields)
{
if(err) {
console.log(err);
res.status(500).send('Internal Server Error');
} else {
res.send(rows);
}
});
})title과 description, author를 변수로 생성하고 이를 body에 요청함으로써 파일을 전송한다. 또한 파일을 read하는 fs.readFile 함수 대신 sql의 INSERT 문을 사용해서 (title, description, author) 의 내용을 삽입해준다.
아무 내용이나 적고 제출을 해보면..
우리가 else 문에서 send(rows) 로 보낸 내용이 배열로 출력된 것을 볼 수 있다. insertId 의 내용을 key처럼 사용하면 입력값을 Id에 부착해서 전송할 수 있을 것 같다. insertId 속성을 활용하기 위해 post의 내용을 다음과 같이 변경시켜준다.
app_mysql.js
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 의 내용이 잘 적용되는 것을 볼 수 있다.
