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. 비전공자
    오후 2:51 2024-05-11
  2. 김철흥
    2024.01.12
    최초 입력값과 수정된 값을 따로 저장하는 것이 이해가 애매하지만 일단 완료!
    복습 필요!
  3. BF_Lee
    23.07.04

    제목(title)값이 변경될 수 있기 때문에 html의 input type중 hidden을 사용하여 오류가 발생되는 것을 보완.
    수정을 해야할 글 불러오기 :
    1. input 태그 : value값에 ${ }을 사용하여 기본값 지정
    2. textarea 태그 : 가운데에 ${ }을 사용하여 기본값 지정
  4. 어흥
    230702
  5. Hojun Song
    2023-04-16
  6. 감자
    22.12.04 완료
  7. 당당
    2022.10.25
  8. 아캔두잇
    20220805 완료
  9. 키다리아저씨
    220720 완
  10. toonfac
    220714 오후 3시 47분 완료
  11. 송바래
    흐어ㅠㅠ 20분 넘게 찾아보고 해결 안되서 댓글 찾아보니까 해결됐네요!!!

    정말 감사합니다 ㅠㅠ 흑흑
    대화보기
    • kimkk
      완료
    • 케굴
      2021-12-26
    • 초딩 개발자
      2021/12/13
    • 일억개
      떠먹여줄때가 좋다
    • pdpd
      21.10.11
    • 졸작완성하자
      211008 완료
    • labis98
      20210727 completed!!
    • Duke
      2021.07.18
    • Jeong Il Haan
      20210421
    • byoonn
      완료
    • 21.02.27
    • chimhyangmoo
      21.02.24
    • jeisyoon
      2021.02.11 App - 글수정 - 수정할 정보 전송 완료
    • 마아앙
      2021.02.09
    • 뭄수
      완료
    • ohhigo
      21/1/24 ★★★★★
    • Noah
      2021.01.06 완료!
    • 손민철
      20/12/31 완료
    • 생활둘기
      2020 12 26
    • kkn1125
      20.12.22 완료~!
    • 옹옹
      2021124
    • 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
      • vampa
        2020.09.10
      • Jenny Song
        29th.JULY.2020 완료
      • 코딩하는렌즈쟁이
        2020-07-28 (화)
        완료
      • 영호팍
        이해 완료!!!
      • Amousk
        좋은 강의 감사합니다.
      • Katherine Roh
        완료 :)
      • 김재익
        완료
      • 김보미
        완료
      • 바다의왕자
        완료
      • 준바이
        감사합니다
      • 심여수
        감사합니다
      • 03.11 완료
      • eddylee123456
        복습
      • eddylee123456
        완료
      버전 관리
      egoing@gmail.com
      현재 버전
      선택 버전
      graphittie 자세히 보기