Node.js

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. 쑤우
    수강완료. 감사합니다.
  2. 굼벵이
    완료
  3. CronEB
    완료
  4. YesterdayKite
    완료. 감사합니다!
  5. youngjin.lee
    Completed
  6. 허공
    190510 감사합니다.
  7. 이루
    완료
  8. 위준우
    완료
  9. 자유로움
    완료
  10. 파이어폭스에선 폼 데이터를 POST 요청으로 보내는걸 어떻게 확인 가능하나요?
    (패킷캡쳐를 해야하나...)
  11. supernet
    감사합니다.
  12. 지미츄
    감사합니다
  13. 호두
    고맙습니다
  14. 에델
    웅 카렌 에델
  15. 삼고잉
    잘읽었습니다
  16. flyhoon
    감사합니다
  17. moon
    감사합니다.
  18. Seo Yun Seok Tudoistube
    아톰편집기에도 블록 접히기가 되는거 첨 알았습니다.
    감사합니다^^!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기