수업소개
수정할 내용을 서버로 전송하는 법을 살펴봅니다.
강의
소스코드
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | var http = require( 'http' ); var fs = require( 'fs' ); var url = require( 'url' ); var qs = require( 'querystring' ); function templateHTML(title, list, body, control){ return ` <!doctype html> <html> <head> <title>WEB1 - ${title}</title> <meta charset= "utf-8" > </head> <body> <h1><a href= "/" >WEB</a></h1> ${list} ${control} ${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}`, `<a href= "/create" >create</a>` ); 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}`, `<a href= "/create" >create</a> <a href= "/update?id=${title}" >update</a>` ); 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= "/create_process" 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 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; fs.writeFile(`data/${title}`, description, 'utf8' , function (err){ response.writeHead(302, {Location: `/?id=${title}`}); response.end(); }) }); } else if (pathname === '/update' ){ 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, ` <form action= "/update_process" method= "post" > <input type= "hidden" name= "id" value= "${title}" > <p><input type= "text" name= "title" placeholder= "title" value= "${title}" ></p> <p> <textarea name= "description" placeholder= "description" >${description}</textarea> </p> <p> <input type= "submit" > </p> </form> `, `<a href= "/create" >create</a> <a href= "/update?id=${title}" >update</a>` ); response.writeHead(200); response.end(template); }); }); } else { response.writeHead(404); response.end( 'Not found' ); } }); app.listen(3000); |