코딩/웹페이지 만들기7 DB 데이터 삭제 (AJAX) 서버랑 통신할 수 있게 도와주는 JS 문법 새로고침 없이 서버랑 통신할수 있음(가장 큰 장점) AJAX 기본 문법 (list.ejs 하단) Server 쪽 기본 틀 (server.js) app.delete('/delete', function(요청, 응답){ DB에서 글 삭제해주쇼 응답.send('삭제완료') }); 삭제 시 화면 내 즉각 반영 두가지 방법 + 성공/실패 시 동작 (list.ejs) $('.delete').click(function(e){ // class 명이 delete 인 요소를 클릭하면 var 글번호 = e.target.dataset.id; // e.target > 지금 클릭한 것 var 지금누른거 = $(this); // this > 지금 이벤트 동작하는 곳 // 지금 누른 값의 d.. 2021. 6. 21. DB 데이터 인풋 & 아웃풋 a) DB 데이터 인풋 const MongoClient = require('mongodb').MongoClient; var db; MongoClient.connect('mongodb+srv://nt11348:@cluster0.b4ozc.mongodb.net/myFirstDatabase?retryWrites=true&w=majority', { useUnifiedTopology: true }, function(에러, client){ if(에러) return console.log(에러) db = client.db('FrontEnd'); db.collection('feData').insertOne({이름 : 'John', 나이 : 25, _id : 100}, function(에러,결과){ console.log(.. 2021. 6. 21. node.js 웹서버 설치 1) express 라는 라이브러리를 써서 서버를 만들거임 - new Terminal > npm init > - 어떤 라이브러리 설치했는지 기록하면 좋을듯? package.json 에 기록함 - npm install express - node_modules 가 생성된다 (라이브러리 관련 폴더) - 안되면 npm 대신 yarn 을 써보자 2) server.js 설정 기본... const express = require('express'); const app = express(); app.listen(8080, function(){ console.log('listening on 8080'); }); node server.js > 웹서버 ON 컨트롤+C > 웹서버 OFF 위 작업을 자동화하는.. 2021. 6. 21. 보이지 않는 input 을 삽입해서 데이터 전달하기 edit.ejs 오늘의 할일 날짜 Submit 이런식으로 값을 전달해줄수 있다. // 어떤 사람이 edit 경로로 put 요청을 하면 app.put('/edit', function(요청, 응답){ // 폼에 담긴 제목/날짜 데이터를 가지고 // db.collection 에다가 업데이트 함 db.collection('feData').updateOne( {_id : 요청.body.id }, // id값을 따라서 (나는 전달받은 데이터 중 name이 "id"인 값 받겠다.) { $set : {제목 : 요청.body.title , 제목 : 요청.body.date}}, // Operator $set 을 이용해 업데이트 (없으면 추가) function(에러,결과){ // url 파라미터 중 :id 를 가져와주세요... 2021. 6. 20. HTML5 에서 PUT/DELETE 요청하기 HTML5 에서 PUT/DELETE 요청은 안되기 때문에, 라이브러리를 추가로 설치해주어야 한다. 터미널에 npm install method-override 설치 후 server.js 상단에 const methodOverride = require('method-override') app.use(methodOverride('_method')) 를 입력 edit.ejs 오늘의 할일 날짜 Submit PUT 은 HTML5 에서는 못씀 POST 로 쓰되 ?_method=PUT 을 action에 추가해준다. 이런식으로 PUT/DELETE 를 사용가능하다. 2021. 6. 20. DB 에서 데이터 받아온 후 ejs 호출 시 전달하는 법 server.js // .html 말고 .ejs 파일 보내주는법 app.get('/list', function(요청, 응답){ db.collection('feData').find().toArray(function(에러, 결과){ console.log(결과); 응답.render('list.ejs', { posts : 결과 }); // 이런식으로 렌더링을 해준다. // 근데 이렇게만 하면 에러난다. // ejs 파일은 곡 views 폴더 안에 있어야 한다. }); // 다 찾아주세요~ }); 위 posts 값을 list.ejs 에 전달해준다. list.ejs 할 일 제목 : 할 일 마감날짜 : 삭제 수정 2021. 6. 20. url 파라미터 값을 유동적으로 입력하는 법 app.get('/edit/:id', function(요청, 응답){ db.collection('feData').findOne({_id : parseInt(요청.params.id)}, function(에러,결과){ // url 파라미터 중 :id 를 가져와주세요. // 여기서 id 값을 String 값이기 때문에 정수로 바꾸어주어야한다. console.log(결과) if(결과==null){ 응답.render('nox.ejs', {data:결과}) }else{ 응답.render('edit.ejs', {data:결과}) } }) }); 'feData' 에 DB 이름을 적어주자. 2021. 6. 20. 이전 1 다음
