공부(15)

글생성 UI 만들기

 

templateHTML 함수 ${list}밑에

    <a href="/create">create</a>

create 주소를 생성해준다

 

아래쪽에 else if 문을 만들어서 create 주소일때 출력하는 부분을 생성해보자

 

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);
      })
    }

readdir 부분을 복붙해서 몇몇군데를 수정했다

 

먼저 title값을 수정했고 description부분은 필요없어 삭제했다

 

templateHTML 매개변수 세번째 값(body값)에 폼형식을 집어넣기로했다

 

post형식으로 하고 버튼들을 만들고 제출버튼까지 만들었다

 

이 때 placeholder는 유저가 무엇을 입력해야하는지 보기 쉽게 만들어진 속성이다

 

post방식으로 전송된 데이터 받기

 

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;
        console.log(post.title);
      });
      response.writeHead(200);
      response.end('success');
    }

받는 곳의 주소를 create_process로 하고

post방식으로 받는 코딩을 해보자

var qs = require('querystring');

이렇게 모듈을 불러오고

 

request 식을 작성한다

 

var post = qs.parse(body);라고 되어있는데

 

이는 body를 객체화 하여 post에 넣는것이다

 

console.log(post);

로 실행시켜보면

{title: 'Nodejs', description: 'Nodejs is..'}

으로 넣었던 값들이 나타남을 알 수 있다

 

좀 더 응용해보자면

console.log(post.title);

Nodejs

이렇게 값이 나온다