[Node.js MongoDB] 16-21강 정리

res.body._id = parseInt(res.body._id);

<script>

      $('.delete').click(function(e){
        $.ajax({
        method : 'DELETE',
        url : '/delete',
        data : {_id : e.target.dataset.id}//클릭한 버튼의 id를 파악 (내가 누른 요소의 data-id)
        }).done((ret)=>{ //function보다 this값이 변형없이 잘됨
          $(this).parent('li').fadeOut(); //삭제한 리스트 사라지게 현재 지금 이벤트가 동작하는 곳 = 지금 클릭한 버튼
        }).fail(function(xhr, textStatus, errorThrown){ // function(xhr, 응답코드, 에러메세지)
          console.log(xhr, textStatus, errorThrown);
        })
      });
</script>

app.delete('/delete', function(req, res){
    console.log(req.body);
    req.body._id = parseInt(req.body._id); //자료형 숫자로 변환
    //req.body에 담겨온 게시물번호를 가진 글을 db에서 찾아서 삭제
    db.collection('post').deleteOne(req.body, function(error, ret){
        console.log('delete complete'); //터미널에 띄워짐
        res.status(200).send({ message : 'sucssess'}); //응답코드 200(요청성공)을 보내주세요 400은 응답실패 500은 서버문제로 요청실패
    });
}); // DELETE 요청 처리

app.get('/detail/:id', function(req, res){ // detail/어쩌구로 get 요청을 하면~
    db.collection('post').findOne({_id : parseInt(req.params.id)}, function(error, ret){
        console.log(ret);
        if (ret == null) return (res.status(404).send('404 not found'));
        res.render('detail.ejs', { data : ret}) // data 라는 이름으로 ejs 파일로 데이터 전송
    });
});

: 여백 주는거

mt - 상단 마진

mb - 하단 마진

pt - 패딩 탑

pb - 패딩 하단

: 글자 가운데 정렬

css 파일(static 파일) 넣기

1. public 폴더 만들고 안에 css 파일 만들기
2. detail.ejs 에
3. server.js 에 app.use('/public', express.static('public')); 라는 미들웨어 추가

html 공통부분 간단하게 표현하기

1. html 파일들을 모두 ejs 파일로 변경하고 views 폴더로 이동
2. 공통부분을 html 파일로 views에 저장 (ex. nav.html)
3. ejs 파일에 <%- include('nav.html') %> 코드를 추가하여 해당 html을 포함시킴

20, 21강 edit 페이지

수정 방법

• .updateOne({}, {}) 사용

PUT 메소드를 사용하기 위해 npm install method-override 설치

server.js 에 PUT을 사용한다고 알림

const methodOverride = require('method-override')
app.use(methodOverride('_method'))

edit.js 에는

이것도 추가해야함

ret.redirect('/list'); 다시 응답하도록 해야함

server.js에서의 코드

app.get('/edit/:id', function(req, res){
    db.collection('post').findOne({_id : parseInt(req.params.id)}, function(error, ret){
        console.log(ret);
        if (ret == null) return (res.status(404).send('404 not found'));
        res.render('edit.ejs', { data : ret}) // data 라는 이름으로 ejs 파일로 데이터 전송
    });
});

app.put('/edit', function(req, res){
    db.collection('post').updateOne({ _id : parseInt(req.body.id)}, { $set : { title : req.body.title, date : req.body.date}}, function(error, ret){
        console.log('edit complete');
        res.redirect('/list');
    });
});

edit.ejs

<div class="container mt-3">
      <form action="/edit?_method=PUT" method="POST">
        <div class="form-group">
          <label>할일</label>
          <input type="text" value="<%= data._id %>" name="id" style="display: none;">
          <input type="text" class="form-control" name="title" value="<%= data.title %>">
        </div>
        <div class="form-group">
          <label>Due date</label>
          <input type="text" class="form-control" name="date" value="<%= data.date %>">
        </div>
        <button type="submit" class="btn btn-outline-secondary">Submit</button>
      </form>
    </div>