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>`
            );
            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 {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
  1. Jeong Il Haan
    20210421
  2. byoonn
    완료
  3. 21.02.27
  4. chimhyangmoo
    21.02.24
  5. jeisyoon
    2021.02.11 App - 글수정 - 수정할 정보 전송 완료
  6. 마아앙
    2021.02.09
  7. 뭄수
    완료
  8. ohhigo
    21/1/24 ★★★★★
  9. 2021.01.06 완료!
  10. 손민철
    20/12/31 완료
  11. 생활둘기
    2020 12 26
  12. kkn1125
    20.12.22 완료~!
  13. 옹옹
    2021124
  14. Kim Jaok
    너무 늦은 답변이지만...
    같은 문제를 해결했어요.

    님의 코드 중에..

    else {
    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>${description}`,
    `<a href="/create">create </a> <a href="/update/?id=${title}"> update </a>`); // 이부분이에요
    // href="/update?id=${title}" 이렇게 주소를 변경하면 되요.
    // 저도 같은 오타가 있었어요.
    response.writeHead(200);
    response.end(template);
    });
    });
    }

    (egoing 님 코드로는 58번째입니다. : `<a href="/create">create</a> <a href="/update?id=${title}">update</a>` )

    주소 변경후 href="/update?id=${title}" 다 잘 작동합니다. :)
    대화보기
    • 콜라
      20201015 완료
    • Yong Hyun Lee
      완료 201002
    • 박병진
      완료 2020.09.12
    • 2020.09.10
    • Jenny Song
      29th.JULY.2020 완료
    • 코딩하는렌즈쟁이
      2020-07-28 (화)
      완료
    • 영호팍
      이해 완료!!!
    • Amousk
      좋은 강의 감사합니다.
    • Katherine Roh
      완료 :)
    • 김재익
      완료
    • 김보미
      완료
    • 바다의왕자
      완료
    • 준바이
      감사합니다
    • 심여수
      감사합니다
    • 03.11 완료
    • eddylee123456
      복습
    • eddylee123456
      완료
    • Gritter
      감사합니다.
    • 스티븐잡숴
      완료
    • 임은정
      ㅠㅠㅠ

      http://localhost......ipt 로 안들어오고
      // http://localhost......ipt 로 들어오는지 모르겠어요
      똑같이 적은것같은데....




      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;
      var title = queryData.id;

      console.log(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 list = templateList(filelist);
      var title = queryData.id;
      var template = templateHTML(title, list,
      `<h2>${title}</h2>${description}`,
      `<a href="/create">create </a> <a href="/update/?id=${title}"> update </a>`);
      response.writeHead(200);
      response.end(template);
      });
      });
      }
      } else if(pathname === '/create') {
      fs.readdir('./data',function(error,filelist){
      var title = 'Welcome';
      var description = 'Hello, Node js';
      var list = templateList(filelist);
      var template = templateHTML(title, list,`
      <form action="/create_process" method="post">
      <p><input type="text" name="title"></p>
      <p><textarea name="desc"></textarea></p>
      <p><input type="submit" name="button"></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 desc = post.desc;

      fs.writeFile(`data/${title}`,desc,'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" value="${title}"></p>
      <p><textarea name="desc">${description}</textarea></p>
      <p><input type="submit" name="button"></p>
      </form>

      `,`<a href="/create">create </a> <a href="/update?id=${title}"> update </a>`); // body에 넣을 내용 //쿼리 실렉터 앞에 / 붙으면 아예 다른주소가 붙는것입니당..
      response.writeHead(200); //200의 의미 : 파일을 성공적으로 전송했다.
      response.end(template);

      // Q. 왜 http://localhost......ipt 로 안들어오고
      // http://localhost......ipt 로 들어오는지 모르겠음
      });
      });

      }
      else {
      response.writeHead(404);//404의 의미 : 파일을 성공적으로 전송하지 못했다.
      response.end('Not Found');

      }


      });
      app.listen(3001);

      저렇게 들어오는걸 확인하고
      일단 조건문을
      pathname === '/update/'

      으로 바꿧더니 작동은 해요..

      혹은

      pathname = '/update'

      으로 해도 됩니다...

      ㅠㅠㅠ
      왜 제대로 작동 안할까욤
    • codinginpain
      완료뜨
      강의를 많이 하셔서 강의력이 점점 느시는건지
      제가 쫓아가다보니 는건지 모르겠지만
      이해가 쏙쏙 되는 강의입니다
      너무 감사합니다 갓고잉님
    • 홍콩돼지
      queryData.id 가 없는게 아닐까요
      그 말은 이코드에서 뭔가 잘못된게 아니라 상세페이지에 control로 넘겨주는 a tag 링크가
      <a href="/update?id=${title}">update</a>
      이렇게 안하고
      <a href="/update">update</a>
      이렇게 하시지 않았을까요

      9개월전이니 이미 해결 하셨겠지만.......ㅎㅎㅎ...
      대화보기
      • 강다리
        runn
      • 쑤우
        수강완료. 감사합니다~
      • 굼벵이
        완료
      • YesterdayKite
        완료. 감사합니다!
      • youngjin.lee
        completed
      • 허공
        190510 감사합니다.
      • 이루
        완료
      • 위준우
        완료
      • 자유로움
        완료
      • supernet
        감사합니다.
      • younhoso
        } else if(pathname === '/update'){
        fs.readdir('./data', function(err, filelist) {
        fs.readFile(`data/${queryData.id}`, 'UTF-8', 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);
        });
        });
        }
        이부분에서 value="${title}", ${description}를 똑같이 해줬는데. 왜 undefined가 나올까요??
        도와 주세요~
      • 호두
        고맙습니다
      • 1. 기존의 파일과 같은 이름으로 create시 기존의 파일에 덮어씌워짐
        2. 한글 깨짐
        과 같은 문제가 있습니다.
        create 상황일 때는, list와 비교해서 중복 검사 -> 기존의 파일들 중 똑같은 제목이 있으면 뒤에 _2 추가와 같은 방법으로 해결하시는지, 아니면 다른 좋은 방법이 있는지 궁금합니다. 그리고 한글 제목과 내용의 경우 글자가 깨지는데 qs.escape 방법을 써도 해결이 안돼서 막막하네요...
      • 일단시작하고본다
        이고잉님 사랑해요
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기