제이쿼리도 헤드안에있고 코드도 변경해보았는데 똑같습니다..ㅜㅜ
대체 뭐가 문젠지 모르겠어요,...
다시 처음부터 작성해보는게 나을까요ㅠㅠ???..
혹시 몰라 전체 코드 올려봅니다ㅠㅠㅠㅠ
server.js
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
app.set('view engin', 'ejs');
app.use(express.urlencoded({extended: true}));
// 데이터 저장하기
var db;
MongoClient.connect('mongodb+srv://아이디:비밀번호@cluster0.arvkk.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',function(에러, client){
//연결되면 할 일
if (에러) return console.log(에러)
db = client.db('todoapp');
// db.collection('post').insertOne( {이름 : 'John', 나이 : 20} , function(에러, 결과){
// console.log('저장완료')
// });
app.listen(8080, function(){
console.log('listening on 8080')
});
});
app.get('/pet', function(요청, 응답){
응답.send('펫 용품 쇼핑몰입니다.');
});
app.get('/beauty', function(요청, 응답){
응답.send('뷰티 용품 쇼핑몰입니다.');
});
app.get('/', function(요청, 응답){
응답.sendFile(__dirname + '/index.html')
});
app.get('/write', function(요청, 응답){
응답.sendFile(__dirname + '/write.html')
});
// app.post('/add', function(요청, 응답){
// 응답.send('전송완료');
// console.log(요청.body.title);
// console.log(요청.body.date);
// });
// 데이터 읽어오기
app.get('/list', function(요청, 응답){
db.collection('post').find().toArray(function(에러, 결과){
console.log(결과);
응답.render('list.ejs', { posts : 결과 })
});
});
app.post('/add', function(요청, 응답){
응답.send('전송완료');
db.collection('counter').findOne({ name : '게시물갯수' }, function(에러, 결과){
console.log(결과.totalPost)
var 총게시물갯수 = 결과.totalPost;
db.collection('post').insertOne({ _id : 총게시물갯수 + 1, 제목 : 요청.body.title, 내용 : 요청.body.date }, function() {
console.log('저장완료');
db.collection('counter').updateOne({ name : '게시물갯수' },{ $inc : {totalPost:1} },function(에러, 결과){
if(에러){return console.log(에러)}
});
});
});
});
app.delete('/delete', function(요청, 응답){
console.log(요청.body)
요청.body._id = parseInt(요청.body._id);
db.collection('post').deleteOne(요청.body, function(에러, 결과){
console.log('삭제완료');
응답.json({success : "삭제성공임", status : 200});
});
});
list.ejs
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Todo App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Write</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
</ul>
</div>
</nav>
<h4 style="padding: 20px; background: rgb(0, 0, 0); color: #fff;">할 일 리스트</h4>
<ul class="list-group list-group-flush">
<% for (var i = 0; i < posts.length; i++){ %>
<li class="list-group-item">
<p>글 번호 : <%= posts[i]._id %> </p>
<p><strong>할 일 제목 : <%= posts[i].제목 %></strong></p>
<p>할 일 내용 : <%= posts[i].내용 %><p>
<button data-id="<%= posts[i]._id %>" type="button" class="delete btn btn-primary">
삭제
</button>
</li>
<% } %>
</ul>
<script>
console.log('안녕!')
$('.delete').click(function(e){
var 글번호 = e.target.dataset.id;
var 지금누른거 = $(this);
$.ajax({
method : 'DELETE',
url : '/delete',
data : { _id : 글번호 }
}).done(function(결과){
console.log('성공');
지금누른거.parent('li').fadeOut();
}).fail(function(){
});
})
</script>
</body>
</html>
