본문 바로가기
Back-End/App

[ NodeJS - APP ] 글 삭제 버튼 구현

by 2CHAE._.EUN 2021. 8. 12.

* 해당 포스터는 생활코딩 강의를 정리한 내용입니다.


delete를 클릭했을 때 해당 글과 데이터 디렉토리의 제목이 같은 파일이 삭제되면 된다.

 

< 컨텐츠를 선택했을 때 활성화 되는 부분 >

 

//변경 전
fs.readdir('./data', function(error, filelist) {

            fs.readFile(`data/${queryData.id}`, 'utf8', function(err,description){
              var list = templateList(filelist);
              var title = queryData.id
              var template = templateHTML(title,list,
                `<h2>${title}</h2>
                <p>${description}</p>`,
                `<a href="/create">create</a> 
                 <a href="/update?id=${title}">update</a>`);

              response.writeHead(200);
              response.end(template);
    });
});


//변경 후
fs.readdir('./data', function(error, filelist) {

            fs.readFile(`data/${queryData.id}`, 'utf8', function(err,description){
              var list = templateList(filelist);
              var title = queryData.id
              var template = templateHTML(title,list,`<h2>${title}</h2>
                <p>${description}</p>`,
                `<a href="/create">create</a>
                 <a href="/update?id=${title}">update</a>,
                  <form <form action="delete_process" method="post" onsubmit="delete하기">
                    <input type="hidden" name="id" value="${title}">
                    <input type="submit" value="delete">
                 </form>
              response.writeHead(200);
              response.end(template);
              
     });
});

 

< delete 기능을 form으로 만들어서 어디로 이동하지 않고 바로 삭제하기 >

 

1. query string이 있는 get 방식으로 구현을 하면 안된다.

( update에서 submit을 했을 때 전송되는 정보는 post 방식이다. )

 

delete를 클릭했을 때 delete_process로 post 방식으로 데이터를 보내기

<form action="delete_process" method="post">

 

2. onsubmit : 사용자가 데이터를 전송하기 전에 다시 한번 물어봄