-
Node.js - 글생성 UI만들기Node.js 2020. 8. 23. 15:51
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 += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>` 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; console.log(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><p>${description}</p>`); 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><p>${description}</p>`); 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"></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);
http.CreateServer() 안에 만약에 pathname이 /create 라는 것이 있다면 해당 페이지 보여주도록 만드는 작업이다.
form 태그 사용해 post 방식으로 전달되게 만들었다.
아직 /process_create 페이지는 만들어지지 않은 상태
'Node.js' 카테고리의 다른 글
Node.js 파일생성(글쓰기)/ 파일생성과 동시에 Redirect (0) 2020.08.24 Node.js - POST방식으로 전송된 데이터 받기(생활코딩) (0) 2020.08.23 Node.js Package Manager(npm) 와 PM2 (0) 2020.08.19 Node.js 동기와 비동기 / callback (0) 2020.08.19 Node.js 기초 최종 코드(생활코딩 따라하기) (0) 2020.08.19