수업소개
글 작성을 할 수 있는 UI를 구현해봅시다.
강의
소스코드
main.js (변경사항)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 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, ` <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); |
