Node.js.37.App 제작-글삭제-삭제버튼 구현

글 삭제

- 어떤 특정 글을 클릭했을 때 삭제 버튼이 활성화됨

- 눌렀을 때 해당 글이 data 디렉토리에서 제목과 같은 파일이 삭제됨

- delete는 화면이 이동되지 않고 바로 삭제되어야 함(링크가 없어야 함) -> 홈으로 가야한다

 

---

delete 버튼 생성

      // 2. id값을 선택한 page
      } else {
        fs.readdir('./data', function(err, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list,
              `<a href="/create">create</a>
              <a href="/update?id=${title}">update</a>
              <a href="/delete?id=${title}">delete</a>`,
              `<h2>${title}</h2>${description}`);
            response.writeHead(200);  //200: 파일을 성공적으로 전송하였음
            response.end(template);
          });
        });
      }

 

 

하지만 href를 작성하게 되면 delete 버튼을 클릭했을 때 수정의 서버로 가게 된다. 따라서 링크로 만들면 안된다.

대신, form으로 만들자. 

- type="hidden" : 삭제할 파일의 title 데이터를 가져옴

- type="submit" : delete 버튼

      // 2. id값을 선택한 page
      } else {
        fs.readdir('./data', function(err, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list,
              `<a href="/create">create</a>
              <a href="/update?id=${title}">update</a>
              <form>
                <input type="hidden" name="id" value="${title}">
                <input type="submit" value="delete">
              </form>
              `,
              `<h2>${title}</h2>${description}`);
            response.writeHead(200);  //200: 파일을 성공적으로 전송하였음
            response.end(template);
          });
        });
      }

 

그리고 delete버튼을 눌렀을 때 이 데이터(삭제할 파일의 title)를 delete_process로 보낼 것이다.

또한 반드시 이는 get이 아닌 POST방식으로 보낸다.

그리고 눌렀을 때 바로 지워지면 안되므로 onsubmit을 추가하여 정말 삭제할 것인지 묻는 창이 뜨도록 하자.

<form action="delete_process" method="post" onsubmit="정말 삭제하시겠습니까?">