Node.js

App - 글삭제 기능 완성

수업소개

글삭제 기능을 완성해봅시다!

 

 

 

강의

 

 

 

 

소스코드

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. vampa
    2020.09.10
  2. Jenny Song
    CRUD 끝
  3. 코딩하는렌즈쟁이
    2020-07-28 (화)
    완료
  4. 불스택
    20.07.12 감사합니다 이고잉님
  5. Amousk
    좋은 강의 감사합니다.
  6. Katherine Roh
    완료 :)
  7. 김재익
    완료
  8. 김보미
    완료
  9. 암말
    감사합니다!
  10. 준바이
    감사합니다
  11. 심여수
    감사합니다
  12. 03.11 완료
  13. eddylee123456
    복습
  14. 임효석
    대박
  15. eddylee123456
    완료
  16. jimmyzip
    우선은 로그인을 시켜서 id/pw같은걸로 인증되어 권한을 가진 사용자만 삭제버튼을 활성화시켜준다. 정도를 먼저 연습하시면 될 것 같습니다.
    대화보기
    • Gritter
      감사합니다.
    • 스티븐잡숴
      완료
    • import.위드
      감사합니다 ㅎㅎ
    • 매리미
      delete 로 간단히 삭제되어버리는 문제를 해결(보안강화)하는 방법에 대한 추가강의가 있으면 좋겠네요...ㅜ
    • 임은정
      완료
    • Uknowit
      정-말 좋은 강의 입니다..!
      잘 듣고 있어요. 힘내세요.
    • codinginpain
      완료쓰`
    • 쑤우
      수강완료. 감사합니다~
    • 굼벵이
      완료
    • CronEB
      완료
    • YesterdayKite
      완료,. 감사합니다!
    • youngjin.lee
      completed
    • 환상논리
      그 변수의 값이 비어있지만 존재하지않는것은 아니므로 공백으로 넣어주고, 나중에 타 콜백함수로 해당변수에 data변수값을 더해 기록하기위해 존재합니다.
      대화보기
      • 환상논리
        145라인의 request.on 구문이 작동하지않습니다(콜백함수에 콘솔로그출력 넣어서 디버깅한 결과입니다.) request핸들러에 관한걸 찾아보고 request가 무엇인지 겨우 어느정도 알긴하였으나, request.on 이 무엇인지에관하여서는 도저히 정보가 부족해 알지못했습니다. 해당코드에서 메인페이지에 파일시스템으로 타 data내 파일 불러오듯 불러오는것으로만 수정하였습니다. request.on 은 어떤 기능을 하고 어떤 의미이며 이 오류에관해 짐작가는게 있으시다면 댓글로 알려주셧으면 좋겠습니다. 감사합니다 ^^
      • p.navillera
        비어있는 변수 body를 만들어주기 위해서입니다. 사용자가 요청할때 들어오는 데이터를 저장해서 이용하기 위한 저장공간을 마련한다고 생각하시면 될거 같네요
        대화보기
        • 허공
          190510 감사합니다.
        • 위준우
          완료
        • 궁금증
          죄송한데 var body = ' '; << 바디에 왜 공백 넣어주는거에요?
        • 자유로움
          완료
        • ㄹㅈㅈ
          감사합니다
        • supernet
          감사합니다.
        • 호두
          고맙습니다.
        • leesj020925@naver.com
          해결했습니다. writeFile 에 ${title} 을 기입할때 ${title.trim()} 으로 기입하면 정상 작동 됩니다.
          update_process 부분에서는 rename title 에도 trim() 을 기입해야 오류가 나지 않더군요
          감사합니다.
          대화보기
          • egoing
            파일을 만들 때와 수정할 떄 trim과 같은 방법을 이용하셔도 좋을 것 같습니다.
            https://www.w3schools.com......asp
            대화보기
            • leesj020925@naver.com
              방금 이유를 찾았습니다. create 로 제목 입력시 끝부분에 공백을 했을때 위와 같은 오류가 나더군요. 해결방법이 있을까요?
              대화보기
              • leesj020925@naver.com
                삭제가 되지 않는 몇몇 목록이 생성됐습니다.
                생성버튼을 눌러 생성했을때 title 을 제대로 나타나나 description 부분이 undefined 로 나타나는 현상입니다.
                삭제도 되지않고 수정도 적용이 되지않습니다.
              • 일단시작하고본다
                감사합니당 이고잉님!!!
              • jo_onc
                CRUD!!! 감사합니다~!
              • jo_onc
                홈으로 돌아가는 pathname 셋팅 부분을 확인해보세요~
                대화보기
                • nochan
                  정말 감사합니다. 도움 많이되네요 ㅠㅠ!
                • 후루룽
                  감동
                • 삼고잉
                  첫번째 훑기
                • yaroori
                  location:`/`으로 지정하셨나요?
                • Gimme_Gsuit
                  홈으로 돌아가지지가 않네요 ㅠㅠ 무슨 문제인지... 삭제 까지되는데 ㅠㅠ
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기