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