node.js MySQL #3

학미새🐥·2022년 2월 19일
0
post-custom-banner

글 수정 기능 구현

  • 글 수정 페이지의 글목록 구현
    파일 형태 : fs.readdir('./data', function(error, filelist){
    DB 형태 : db.query(`SELECT * FROM topic`, function(error, topics){

불러온 결과값인 topics를 통해 list를 생성한다

var list = template.list(topics);
var html = template.HTML(topic[0].title, list, ...);
  • 글 수정 페이지의 글 내용 구현
    파일 형태 : fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
    DB 형태 : db.query(`SELECT * FROM topic WHERE id=?`,[queryData.id], function(error2, topic){

UI를 생성하는 template모듈의 HTML함수에서 (글제목, 글목록, 본문, control 버튼들) 순으로 인자를 받기 때문에, 쿼리문을 통해 받은 결과값 배열인 topic을 통해 각 인자에 해당하는 값을 입력한다.
글 제목 : topic[0].title
글 목록 : list
본문 : HTML form이 들어감
control : <a href="/create">create</a> <a href="/update?id=${topic[0].id}">update</a>

  • 각 쿼리문 내부의 callback에서 꼭 예외처리를 해준다
if(error) {
  throw error;
}
  • update_process 웹서버로 전송되는 HTML form
    <form action="/update_process" method="post">
     <input type="hidden" name="id" value="${topic[0].id}">
     <p><input type="text" name="title" placeholder="title" value="${topic[0].title}"></p>
     <p>
       <textarea name="description" placeholder="description">${topic[0].description}</textarea>
     </p>
     <p>
       <input type="submit">
     </p>
    </form>
form에서 글의 id/제목/본문이 들어가야할 곳에 각각
`${topic[0].id}`, `${topic[0].title}`, `${topic[0].description}`을 넣어준다. 

update 글 수정 페이지에서 **페이지소스보기**를 하면 form에 hidden type으로 선택한 (수정하고자 하는) 글의 id값이 담겨있는 것을 확인할 수 있다. 

---
## 웹서버 update_process에서 수신한 데이터 처리하기

- 글 제목 수정
파일 형태 : ```fs.rename(`data/${id}`, `data/${title}`, function(error){```

- 글 본문 수정(rewrite)
파일 형태 : ```fs.writeFile(`data/${title}`, description, 'utf8', function(err){```

- DB 형태로 글 제목 수정, 글 본문 수정하기

db.query('UPDATE topic SET title=?, description=?, author_id=1 WHERE id=?', [post.title, post.description, post.id], function(error, result) {


- 내용 수정 후 변경된 해당 글 페이지로 Redirction

response.writeHead(302, {Location: /?id=${post.id}});
response.end();


<최종 update_process 웹서버 구현 코드>
```js
else if(pathname === '/update_process'){
  var body = '';
  request.on('data', function(data){
    body = body + data;
  });
  request.on('end', function(){
    var post = qs.parse(body);
    db.query('UPDATE topic SET title=?, description=?, author_id=1 WHERE id=?', [post.title, post.description, post.id], function(error, result) {
      response.writeHead(302, {Location: `/?id=${post.id}`});
      response.end();
    })
  });

글 삭제 기능 구현 (delete_process 코드 수정)

  • 파일을 삭제하는 코드 : fs.unlink(`data/${filteredId}`, function(error){
    삭제를 위해 사용할 쿼리문 : DELETE FROM topic WHERE id=?

파일을 아닌 DB를 사용하기 위해 다음과 같이 코드를 수정할 수 있다.

db.query(`DELETE FROM topic WHERE id=?`, [post.id], function(error, result){..}

여기서 데이터를 삭제한 뒤에 실행될 callback에서는 1.오류 발생 시의 예외처리 2. 홈화면으로 Redirection 하면 된다.

else if(pathname === '/delete_process'){
  var body = '';
  request.on('data', function(data){
    body = body + data;
  });
  request.on('end', function(){
    var post = qs.parse(body);
    db.query(`DELETE FROM topic WHERE id=?`, [post.id], function(error, result){
      // 1. 오류 발생 예외 처리
      if(error) {
        throw error;
      }
      // 2. 홈화면으로 Redirection
      response.writeHead(302, {Location: `/`});
      response.end();
    });
  });
profile
뭐든 다해보려는 공대생입니다
post-custom-banner

0개의 댓글