생활코딩

Coding Everybody

삭제 기능 구현

토픽 생활코딩 > WEB > WEB2 - Node.js > Node.js - Express

수업소개

삭제 기능을 구현하는 방법을 살펴봅니다. 

 

 

 

강의

 

 

 

소스코드

변경사항

main.js

var express = require('express')
var app = express()
var fs = require('fs');
var path = require('path');
var qs = require('querystring');
var sanitizeHtml = require('sanitize-html');
var template = require('./lib/template.js');

//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var title = 'Welcome';
    var description = 'Hello, Node.js';
    var list = template.list(filelist);
    var html = template.HTML(title, list,
      `<h2>${title}</h2>${description}`,
      `<a href="/create">create</a>`
    ); 
    response.send(html);
  });
});

app.get('/page/:pageId', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.params.pageId;
      var sanitizedTitle = sanitizeHtml(title);
      var sanitizedDescription = sanitizeHtml(description, {
        allowedTags:['h1']
      });
      var list = template.list(filelist);
      var html = template.HTML(sanitizedTitle, list,
        `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
        ` <a href="/create">create</a>
          <a href="/update/${sanitizedTitle}">update</a>
          <form action="/delete_process" method="post">
            <input type="hidden" name="id" value="${sanitizedTitle}">
            <input type="submit" value="delete">
          </form>`
      );
      response.send(html);
    });
  });
});

app.get('/create', function(request, response){
  fs.readdir('./data', function(error, filelist){
    var title = 'WEB - create';
    var list = template.list(filelist);
    var html = template.HTML(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.send(html);
  });
});

app.post('/create_process', function(request, response){
  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();
      })
  });
});

app.get('/update/:pageId', function(request, response){
  fs.readdir('./data', function(error, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.params.pageId;
      var list = template.list(filelist);
      var html = template.HTML(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.send(html);
    });
  });
});

app.post('/update_process', function(request, response){
  var body = '';
  request.on('data', function(data){
      body = 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.redirect(`/?id=${title}`);
        })
      });
  });
});

app.post('/delete_process', function(request, response){
  var body = '';
  request.on('data', function(data){
      body = body + data;
  });
  request.on('end', function(){
      var post = qs.parse(body);
      var id = post.id;
      var filteredId = path.parse(id).base;
      fs.unlink(`data/${filteredId}`, function(error){
        response.redirect('/');
      })
  });
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

댓글

댓글 본문
  1. 삭제 기능 구현
  2. 어흥
    230705
  3. 감자
    22.12.22.
  4. 당당
    2022.11.17
  5. 송바래
    개인프로젝트 만들기!
  6. 케굴
    2021-12-31
  7. 너굴맨
    똑같이 코드를 따라했는데도 제 거에서는 cannot post/delete_process가 뜨는 이유는 뭘까요 ㅠ
  8. 공부좀하자
    저는 update_process 부분에서 리다이렉션을 response.redirect(`/?id=${title}`); 로 하면
    수정된 페이지가 아닌 홈으로 이동이 되어서
    response.redirect(`/page/${title}`);로 바꿔서 했습니다!
  9. chimhyangmoo
    21.03.23
  10. jeisyoon
    2021.03.14 페이지 삭제 구현 - OK
  11. hanel_
    21.2.12
  12. 김지호
    21 01 08
  13. 생활둘기
    2021 1 4
  14. 콜라
    20201025 완료
  15. Yong Hyun Lee
    완료 201003
  16. 전주호
    완료
  17. ldhan0715
    20-09-14
  18. 쑤우
    수강완료. 감사합니다~
  19. 굼벵이
    완료
  20. 지미츄
    /create_process 리다이렉트 코드를 response.redirect(`/?=${title}`);로 바꿔도 작동하네요 ^-^!!! 감사해요
  21. jo_onc
    좋은 강의 감사합니다~
  22. 삼고잉
    잘 읽었습니다
  23. 누누
    좋은강의 감사합니다!
    여러개의 강의를 수강하는 과정에서 점점 변해가는 코드를 보는재미가 쏠쏠하네요.
  24. 연수아빠
    수강완료!!