7 글 보임 - 1 에서 7 까지 (총 7 중에서)
-
글쓴이글
-
2022년 12월 8일 17:03 #57359
익명비활성server.js 파일 코드입니다 //서버 실행 라이브러리: npm install express const express = require('express'); const app = express(); const bodyParser= require('body-parser'); app.use(bodyParser.urlencoded({extended: true})); const MongoClient = require('mongodb').MongoClient; app.set('view engine','ejs'); app.use('/public', express.static('public'))//퍼블릭안에 css 파일 사용 하겠습니다var db; MongoClient.connect('mongodb+srv://@cluster0.om8zy2z.mongodb.net/?retryWrites=true&w=majority',function(에러, client){ db = client.db('todo'); //db.collection('post').insertOne({이름:'조병준', 나이:'29', 성별:'남자',결혼:'미혼',_id:1},function(에러,결과){ //console.log('저장완료'); //}); app.listen(8090, function(){ console.log('listening on 8090') }); });//누군가가 /pet 으로 방문을 하면 pet관련된 html서버를 띄워주자 app.get('/pet', function(요청,응답){ 응답.send('펫 관련 사이트입니다.'); }); //누군가가 /beauty 으로 방문을 하면 beauty관련된 html서버를 띄워주자 app.get('/beauty', function(요청,응답){ 응답.send('뷰티용품 쇼핑 홈페이지임'); });//서버 재실행 라이브러리: npm install -g nodemon
//서버에들어왔을때 html파일을서버에 띄우기 app.get('/', function(요청,응답){ 응답.render('index.ejs') });app.get('/write', function(요청,응답){ 응답.render('write.ejs') }); //어떤 사람이 /add 경로로 post 요청을 하면 ~~을 해주세요 app.post('/add', function (요청, 응답) { db.collection('counter').findOne({name : '게시물갯수'}, function(에러, 결과){//counter라는 collection에 name:게시물갯수라는 데이터 1개를 꺼냅니다 var 총게시물갯수 = 결과.totalpost//총게시물이라는 변수에 결과.totalpost를 저장합니다 db.collection('post').insertOne({ _id : 총게시물갯수 + 1, 날짜 : 요청.body.date , 제목 : 요청.body.title }, function (에러, 결과) {//post라는 collection에 _id : 총게시물갯수 + 1, 날짜 : 요청.body.date , 제목 : 요청.body.title 이 데이터를 저장해주셈 db.collection('counter').updateOne({name:'게시물갯수'},{ $inc: {totalpost:1} },function(에러, 결과){//counter라는 collection에 name:게시물갯수라는 데이터에 totalpost를 1씩 증가하겠습니다 if(에러){return console.log(에러)} }) }) }) 응답.send('전송이 완료되었습니다');//app.post('/add', function (요청, 응답) 에서 응답에 대한 함수 내용 : 누군가가 add경로로 post 요청이 오면 응답.send('전송완료')라는 글자를 띄워주셈 }) //post로 받은 정보 실행 라이브러리: npm install body-parser/*어떤사람이 /add로 라는 post요청을 하면, 데이터 2개(날짜,제목)을 보내주는데, 이때, "post"라는 이름을 가진 collection에 두개 데이터 저장하기 {제목:'~',날짜:'~'}*//*app.post('/add',function(요청,응답){ 응답.send('전송완료') console.log(요청.body.date) console.log(요청.body.title) db.collection('post').insertOne({제목:요청.body.date, 날짜:요청.body.title},function(에러,결과){ console.log('저장완료'); }); });*///누군가가 /list로 get요청을 하면 실제 DB에 저장된 데이터들로 꾸며진 HTML을 보여줌 app.get('/list', function(요청,응답){ db.collection('post').find().toArray(function(에러,결과){//디비에 저장된 'post'라는 collection안의 모든 데이터를 꺼내주세요 응답.render('list.ejs',{posts:결과});//ejs 파일 보여줄때 쓰는 문법 html보여줄때 쓰는 문법과는 다름!!! }); }); /*ejs:html을 꾸밀수 있는 라이브러리 ejs파일 장점:html기본틀에다가 서버데이터 삽입 가능!!! 서버데이터 삽입시<%= 변수이름 %>으로 사용가능 ejs파일 주의:views 폴더안에 ejs파일을 삽입해야 에러막을수 있음 <%javascript 문법 %>을 쓰면 ejs안에서 javascript문법을 사용할수 있음*/app.delete('/delete', function(요청, 응답){ 요청.body._id = parseInt(요청.body._id)//ejs파일에서 body부분에 있는 $.ajax의 data값을 요청.body에 저장하고 요청.body의 _id값을 숫자형으로 치환한것을 다시 요청.body에 저장해주세요 db.collection('post').deleteOne(요청.body, function(에러, 결과){//요청.body에 해당되는 데이터값을 post라는 collection에서 찾아서 그것을 삭제해주세요 응답.status(200).send({message: '성공했습니다'})//요청을 성공으로 판정해주세요 그리고 서버에 성공했습니다라고 메세지를 띄워주세요 }) });// /detail로 접속하면 detail.ejs보여줌 detail/2로 접속하면 detail2.ejs 보여줌 .... app.get('/detail/:id',function(요청,응답){ db.collection('post').findOne({ _id : parseInt(요청.params.id) }, function(에러, 결과){//detail/id로 들어오면 post라는 collection에서 id에 해당하는 결과 값을 가져오기 응답.render('detail.ejs',{data:결과})//detail.ejs를 서버에 띄우기 }) }) list파일 코드입니다<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <link rel="stylesheet" href="/public/main.css"> <title>list</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <%- include('nav.html') %> <!--<h4>할일 제목:<%= posts[0].제목 %></h4> <p>할일 마감날짜:<%= posts[0].날짜 %></p> <button>삭제</button>--> <div class="mt-4"> <h4 class="text-center">서버에서 가져온 데이터</h4> <div class="container mt-4"> <ul class="list-group"> <% for (var i = 0; i < posts.length; i++){ %> <li class="list-group-item"> <h4> 할일 날짜 : <%= posts[i].날짜 %> </h4> <p> 할일 제목 : <%= posts[i].제목 %> </p> <button class="btn btn-danger" data-id="<%= posts[i]._id %>">삭제</button> <button class="btn btn-primary" href="/detail/<%= posts[i]._id %>">이동</button><% } %>
</div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $('.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(xhr,textStatus,errorThrown){ console.log(xhr,textStatus,errorThrown) }) }); </script> </body> </html>detail파일 코드입니다
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <link rel="stylesheet" href="/public/main.css"><!--css 파일 첨부 방법--> <title>list</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <%- include('nav.html') %><!--nav.html을 첨부해주는 문법--> <div class="container mt-4"><!--좌우 여백 주는 부트스트랩 class명--> <h2 class="text-center">상세페이지</h2><!--글자 가운데 정렬 주는 부트스트랩 class명--> <div class="card"> <div class="card-body"> <h5 class="card-title">날짜:게시물의 <%= data.날짜 %></h5> <p class="card-text">제목:게시물의 <%= data.제목 %></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> 수정하기 </div> </div> </div> </body> </html>다름이 아니라 화면과 같이 삭제 이동 버튼은 있으나 삭제는 삭제버튼대로 이동은 이동버튼대로 작동이 안되고 작동이 안되어서 list.ejs에서와 같이 삭제버튼을 누르고 눈속임으로 fade out이 되는지 확인을 할수가 없습니다 무엇이 잘못된거일까요?
2022년 12월 8일 17:10 #57361
익명비활성그리고 2강 마지막에 detail로 이동하는 버튼을 <button class="btn btn-primary" href="/detail/<%= posts[i]._id %>">이동</button>이렇게 코드를 짯는데요 코드의 의도는 이동이라는 버튼을 만들어서 href=라고 하면 html css특강과 같이 다른 사이트로 이동할수 있다고 하셔서 여기에 /detail/<%= posts[i]._id %>와 같이 링크를 달아서 이 링크대로 이동할수 있게 하고 각각 내용들이 id값이 다르기에 for 문을 돌리고 있기 때문에 detail/숫자 대신에 detail/<%= posts[i]._id %> 와 같이 코드를 짯습니다 문제있으면 말씀 부탁드리겠습니다
-
글쓴이글
7 글 보임 - 1 에서 7 까지 (총 7 중에서)
- 답변은 로그인 후 가능합니다.