Node.js

App - 글삭제 - 삭제버튼 구현

수업소개

삭제 작업을 하기 위해서는 삭제 버튼이 있어야 합니다. 이 때 링크를 사용하는 안됩니다. 링크 대신 form을 이용해서 삭제 버튼을 만드는 방법을 살펴보겠습니다. 

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');

function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${body}
  </body>
  </html>
  `;
}
function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i + 1;
  }
  list = list+'</ul>';
  return list;
}

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readdir('./data', function(error, filelist){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = templateList(filelist);
          var template = templateHTML(title, list,
            `<h2>${title}</h2>${description}`,
            `<a href="/create">create</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list,
              `<h2>${title}</h2>${description}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${title}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${title}">
                  <input type="submit" value="delete">
                </form>`
            );
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        response.writeHead(200);
        response.end(template);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      fs.readdir('./data', function(error, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = templateList(filelist);
          var template = templateHTML(title, list,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var title = post.title;
          var description = post.description;
          fs.rename(`data/${id}`, `data/${title}`, function(error){
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    } else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          fs.unlink(`data/${id}`, function(error){
            response.writeHead(302, {Location: `/`});
            response.end();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. 준바이
    감사합니다
  2. 심여수
    감사합니다
  3. 03.11 완료
  4. eddylee123456
    복습
  5. eddylee123456
    완료
  6. 스티븐잡숴
    완료
  7. 문대랭
    a링크로 하면 안되는 이유와 get 방식으로 했을때 생기는 문제가 잘 이해가 안되네요..
    한 웹 개발자의 실수로 a링크로 만들었는데, 이게 갑자기 왜 get방식이라고 바뀌는건지..
    이유가 url에 쿼리스트링으로 쭉 써지면 그게 그냥 get방식이라는건가요..?

    그리고 get방식으로 보냈는데 갑자기 왜 다 삭제가 되었다는거죠..?
  8. 임은정
    완료
  9. codinginpain
    완료데쇼
  10. 강다리
    runn
  11. 쑤우
    수강완료. 감사합니다~
  12. 굼벵이
    완료
  13. almond
    삭제전 확인창 띄우고 싶으신분들 아래 코드 참고하세요!
    <form action="/delete_process" method="post" onsubmit="return confirm('do you want to delete this file?')">
    <input type="hidden" name="id" value="${title}">
    <input type="submit" value="delete">
    </form>
  14. CronEB
    완료
  15. YesterdayKite
    완료. 감사합니다!
  16. Stephen Lee
    간단하게 onSubmit() 에 return confirm() 을 넣어주시면 확인 취소 버튼이 있는 alert 창과 비슷한 UI 가 나옵니다.
    onSubmit(return confirm('정말로 삭제하시겠습니까?)) 이런식으로요. 그냥 confirm() 을 하실 시에는 취소버튼을 눌러도 not found 화면으로 넘어가게 됩니다. 하지만 return 하시게 되면 취소시 false 를 반환하기때문에 submit 이 작동하지 않더군요.
  17. youngjin.lee
    completed
  18. 허공
    190510 감사합니다.
  19. 위준우
    완료
  20. 자유로움
    완료
  21. supernet
    감사합니다.
  22. 호두
    고맙습니다.
  23. 권문수
    ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 재미있는 이야기네요 ㅋㅋㅋㅋㅋ 그럼 구글에서 힘들게 개발한 플러그인이 개발자의 실수 때문에 모두 지워졌었나요??
  24. Yoonho Aaron Kim
    HTTP 메서드의 DELETE가 있는데 POST 방식을 사용한 이유가 있을 까요??
  25. 삼고잉
    한번 훑기
  26. Gimme_Gsuit
    delete-> post 전송 방식을 사용하며 form 형식의 버튼을 만들어주고 onsubmit 자바스크립트를 이용해서 삭제전에 한번더 물어보는 기능을 추가하는 것 까지 입니다. 감사합니다.
  27. moon
    감사합니다.
  28. Seo Yun Seok Tudoistube
    form action 에 쓰는 경로에는 '\/' 를 꼭 써줘야 하네요. a 링크나 다른 함수에는 '\/' 가 없어도 되는데
    경로표기를 어떻게 해야 하는지 규칙이 있는지 궁금합니다.
    delete 처리를 POST 로 해야 한다는 것도 배웠습니다.
    감사합니다!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기