리셋 되지 말자

글생성 UI 만들기 본문

NodeJS/생활코딩

글생성 UI 만들기

kyeongjun-dev 2020. 9. 10. 16:00

코드 팩토링 및 'create' 추가

  • main.js
var http = require('http');
var fs = require('fs');
var url = require('url') // url 모듈을 사용한다

function templateFiles(filelist) {
  var list = '<ul>';
  for (var i = 0; i < filelist.length; i++) {
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
  }

  list = list + '</ul>';
  return list;
}

function templateHTML(title, list, body) {
  return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB2</a></h1>
      ${list}
      <a href="/create">create<a>
      ${body}
    </body>
    </html>    
  `;
}

var app = http.createServer(function (request, response) {
  var _url = request.url;
  var queryData = url.parse(request.url, true).query;
  var pathname = url.parse(_url, true).pathname;
  console.log(pathname);
  // 루트 디렉토리 (/)로부터 존재하는 페이지를 요청하면 페이지 표시
  if (pathname === '/') {
    fs.readFile('data/' + queryData.id, 'utf8', function (err, description) {
      var title = queryData.id;
      if (queryData.id === undefined) { // 없는 값을 호출하려고 하면 javascript는 undefined라고 한다.(약속)
        title = 'Welcome';
        description = 'Hello, Node.js';
      }

      fs.readdir('./data', function (error, filelist) {
        var list = templateFiles(filelist);
        var template = templateHTML(title, list, `<p>${description}</p>`);

        //response.end(fs.readFileSync(__dirname + url));
        response.writeHead(200); // 200을 전송하면, 파일을 잘 전송했다고 하는 약속
        response.end(template);
      });
    });


  } else if (pathname === '/create') {
    fs.readdir('./data', function (error, filelist) {
      //response.end(fs.readFileSync(__dirname + url));
      var title = 'WEB- - reate';
      var list = templateFiles(filelist);

      var template = templateHTML(title, list, `
          <form action="http://localhost:80/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.end(fs.readFileSync(__dirname + url));
      response.writeHead(200); // 200을 전송하면, 파일을 잘 전송했다고 하는 약속
      response.end(template);
    });

  } else { // 없는 페이지를 요청하면 404 에러
    response.writeHead(404);
    response.end('Not found');
  }
});
app.listen(80);

페이지 내용 'create' 링크를 만들고, 클릭하면 '/create'로 이동하도록 추가

 

  • localhost 접속 화면

 

  • create 클릭시 화면

 

POST 방식으로 데이터 전송

hello와 world를 각각 title, description에 입력한 뒤 제출 버튼을 클릭했을 때, 아래와 같이 데이터가 전송된다.

  • 크롬의 Network 탭

POST 방식에 대한 처리를 아무것도 안해서 404에러가 뜬다.

 

Form Data에 입력한 데이터가 출력된다.

저작자표시

'NodeJS > 생활코딩' 카테고리의 다른 글

파일생성과 redirection  (0) 2020.09.10
POSt 방식으로 전송된 데이터 받기  (0) 2020.09.10
HTML-form  (0) 2020.09.09
패키지 매니저와 PM2  (0) 2020.09.09
동기&비동기  (0) 2020.09.09
'NodeJS/생활코딩' Related Articles more
Comments