생활코딩

Coding Everybody

코스 전체목록

닫기

App - 글생성 UI 만들기

수업소개

글 작성을 할 수 있는 UI를 구현해봅시다.

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

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

function templateHTML(title, list, body){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    <a href="/create">create</a>
    ${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}`);
          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}`);
            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="http://localhost:3000/process_create" 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 {
      response.writeHead(404);
      response.end('Not found');
    }



});
app.listen(3000);

 

댓글

댓글 본문
  1. i_am_es
    2022-08-10
  2. 아캔두잇
    20220804 완료
  3. 키다리아저씨
    220719 완
  4. toonfac
    220714 오후 3시 29분 완료
  5. 선홍빛참치
    Network탭에서 Headers 옆에 있는 Payload 탭에서 Form Data 확인 가능합니다
    대화보기
    • 개발자 도구 Network에 저는 Form Data 부분이 안 보이는데... 왜 그럴까요..??
    • form tag for posting data at web server
    • 케굴
      2021-12-26
    • 초딩 개발자
      2021/12/12
    • 21.10.09
    • 졸작완성하자
      21.10.07 완료
    • 별거
      + 리로드 안한거였어요
    • 승뇽뇽
      ㅇㄹ
    • labis98
      20210726 good!!
    • Duke
      2021.07.18
    • 해밀턴
      210707
    • Jeong Il Haan
      20210419
    • byoonn
      완료
    • 21.02.27
    • chimhyangmoo
      21.02.22
    • 마아앙
      2021.02.09
    • jeisyoon
      2021.02.09 완료
    • 나그네
      Test
      완료~
      감솨~
    • hanel_
      21.2.2 완료
    • 뭄수
      완료
    • ohhigo
      21/1/24
    • Noah
      2021.01.05 완료!
    • 손민철
      20/12/29 완료
    • 생활둘기
      2020 12 26
    • kkn1125
      20.12.22 완료~!
    • 콜라
      20201015 완료
    • Yong Hyun Lee
      완료 201002
    • vampa
      2020.09.10
    • 모라토리움
      post 방식으로 전달을 해도 이렇게 크롬 개발자도구를 사용해서 제출한 정보를 알아내면 말짱 도루묵 아닌가요??
    • 코딩하는렌즈쟁이
      2020-07-28 (화)
      완료
    • 코딩중독
      이고잉님 강의를 보고나면 항상 뿌듯하네요^^
    • 불스택
      20.07.12 감사합니다 이고잉님 !
    • Amousk
      좋은 강의 감사합니다.
    • Katherine Roh
      완료 :)
    • hibiki
      질문있습니다 ㅜㅜ..
      /create 디렉토리는 실제로 서버컴퓨터에 생성이되는건가요..?
      아니면 main.js 가 실행될 때만 존재하고 정지하면 사라지는 건가요..
      url의 path는 디렉토리로 알고 있는데
      우문현답해주실 분 ㅠ
    • 김재익
      완료
    • 김보미
      완료
    • 바다의왕자
      완료
    • 윤영훈
      감사합니다!
    • 준바이
      감사합니다
    • 심여수
      감사합니다
    • 03.10 완료
    • eddylee123456
      복습
    • eddylee123456
      완료
    • 스티븐잡숴
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기