ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Node.js 글 수정하기
    Node.js 2020. 8. 24. 18:25
    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 += `<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>`,
                 `<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><p>${description}</p>`,
                   `<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"></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 += 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">${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);
    

    form 에 input type="hidden" 추가해 title이 바뀌어도 기존의 title을 통해 저장되 파일 찾을 수 있도록 id 값에 추가해준다. -> id 값 통해 파일 찾고 제목과 글 수정할 수 있음

    이후 파일의 이름과 내용을 변경해주어야 한다.

    } 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">${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 if(pathname === '/update_process'){
          var body = '';
          request.on('data', function(data){
            body += data;
          });
          request.on('end', function(){
            var post = qs.parse(body);
            var id = post.id;
            var title = post.title;
            var description = post.description;
            fs.rename(`data/${id}`, `data/${title}`, function(error){
              fs.writeFile(`data/${title}`, description, 'utf8',
              function(err){
                response.writeHead(302, {Location: `/?id=${title}`});;
                response.end();
              });
            });
            console.log(post);
          });
        } else{
          response.writeHead(404);
          response.end('Not found');
        }
    });
    app.listen(3000);

    fs.rename() 함수를 통해 기존 id 값을 title로 변경하여 파일을 이름을 변경하고,

    콜백 함수 내에서 create 했을 때와 동일한 방식으로 파일의 내용을 바꾸어준다.

Designed by Tistory.