게시글 입력
enter.html
app.post('/save', (req, res) => {
console.log(req.body);
mydb.collection('post').insertOne({
title:req.body.title,
content:req.body.content,
date:req.body.someDate
}).then(result => {
console.log('저장 완료', result);
res.send('데이터 추가 성공');
});
});
템플릿 엔진이 인식하는 기본 폴더인 'views'대신 다른 폴더를 사용하고 싶을 때
// 'templates' 폴더를 뷰 디렉토리로 설정
app.set('views', path.join(__dirname, 'templates'));위 코드에서 경로를 명시했기 때문에 render() 함수에서는 경로를 쓰지 않아도 됨
app.get('/enter', function (req, res) {
res.render('enter.ejs');
});server.js
기존의 content를 date로 변경
app.post('/save', (req, res) => {
console.log(req.body);
mydb.collection('post').insertOne({
title:req.body.title,
content:req.body.content,
date:req.body.someDate //사용자가 입력한 someDate를 date 변수로 받아옴
}).then(result => {
console.log('저장 완료', result);
res.send('데이터 추가 성공');
});
});list.ejs
<%for (let i = 0; i < data.length; i++) {%>
<tr>
<td><%=data[i].title%></a></td>
<td><%=data[i].date%></td>
<td><button class = 'delete btn btn-outline-danger' >삭제</button></td>
</tr>
<% } %> 
JQuery
기본 구문은 $(selector).action()
-
jQuery를 정의/액세스하는 $ 기호
-
HTML 요소를 "쿼리(또는 찾기)"하는 선택자
-
요소에 대해 수행될 jQuery action()
jQuery 라이브러리를 다운받았을때 jQuery를 사용하는 코드
<script src="jquery-3.7.1.min.js"></script>웹 주소를 통해 jQuery를 사용(CDN)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>CDN 방식으로 추가했을때 개발자 도구의 Source를 보면 jquery.min.js 파일이 추가되어있음
<script>
$(document).ready(function () { //문서가 모두 불러와졌을때 콜백함수(alert()) 실행
alert();
});
</script><script>
$(document).ready(function () { //문서가 모두 불러와졌을때 콜백함수(alert()) 실행
btn.addEventListener('click', function () {
alert();
});
});
</script>
</head>
<body>
hi
<button id="btn">전송</button>위의 addEventListener 대신 JQuery 사용
<script>
$(document).ready(function () {
$('#btn').click(function() {
alert();
})
});
</script>
</head>
<body>
hi
<button id="btn">전송</button>
class 사용 시 그룹화 가능
<script>
$(document).ready(function () {
$('.a').click(function() {
alert();
})
});
</script>
</head>
<body>
hi
<button id="btn" class="a">전송</button>
<button id="btn" class="a">전송</button>
<button id="btn" class="b">전송</button>첫번째, 두번째 버튼만 눌렀을때 alert창이 뜸
게시글 삭제
list.ejs
<%for (let i = 0; i < data.length; i++) {%>
<tr>
<td><%=data[i].title%></a></td>
<td><%=data[i].date%></td>
<td><button data-id="<%=data[i]._id %>" class = 'delete btn btn-outline-danger' >삭제</button></td>
</tr>
<% } %> <script>
$('.delete').click(function (e) {
let sid = e.target.dataset.id;
$.ajax({
type:'post',
url:'/delete',
data:{_id:sid}
})
.done(function (result) {
console.log(result);
})
.fail(function (xhr, textstatus, err) {
console.log('');
});
})
</script>delete 버튼 클릭 시 각 id값이 넘어와짐
delete 버튼 클릭 시 몽고DB에서도 삭제 기능 추가
server.js
app.post('/delete', (req, res) => {
// console.log(req.body, '삭제 완료');
mydb.collection('post')
.deleteOne(req.body)
.then(result=>{
console.log('삭제 완료');
res.status(200).send();
})
.catch(err=>{
console.log(err);
});
});
server.js
app.post('/delete', (req, res) => {
// console.log(req.body, '삭제 완료');
console.log(req.body._id); //문자 형태 출력
req.body._id=new ObjId(req.body._id); //MongoDB에 내장된 ObjId 라이브러리 사용
console.log(req.body._id); //객체 형태 출력
mydb.collection('post')
.deleteOne(req.body)
.then(result=>{
console.log('삭제 완료');
res.status(200).send();
})
.catch(err=>{
console.log(err);
});
});
하지만 삭제한 것을 확인하려면 새로고침을 해야 확인됨
객체 참조가 DOM Tree구조를 따라서 일어남
에러를 내보기 위해 없는 컬렉션으로 코드를 작성(mydb.collection('postt'))
server.js
app.post('/delete', (req, res) => {
// console.log(req.body, '삭제 완료');
console.log(req.body._id); //문자 형태 출력
req.body._id=new ObjId(req.body._id);
console.log(req.body._id); //객체 형태 출력
mydb.collection('postt')
.deleteOne(req.body) // {_id:Object('hdfjdjkflsdkl') }
.then(result=>{
console.log('삭제 완료');
res.status(200).send();
})
.catch(err=>{
// console.log(err);
res.status(500).send();
});
});하지만 에러가 나지 않고 몽고DB에 변경 내용(삭제)가 적용되지는 않지만 브라우저 상에서는 삭제되는 것처럼 보이는 문제 발생(새로고침하면 다시 보임)
몽고DB가 postt라는 컬렉션을 만들어내서 생기는 문제
컬렉션명을 비워두면 에러 출력
mydb.collection('')
title 클릭 시 해당 컨텐트 페이지로 이동
list.ejs
<tbody>
<%for (let i = 0; i < data.length; i++) {%>
<tr>
<td><a href="/content/<%=data[i]._id %>"><%=data[i].title%></a></td>
<td><%=data[i].date%></td>
<td><button data-id="<%=data[i]._id %>" class = 'delete btn btn-outline-danger' >삭제</button></td>
</tr>
<% } %>
</tbody>content.ejs
<h1>상세내용</h1>
<h2>제목 : <%=data.title%></h2>
<h3>내용 : <%=data.content%></h3>
<h4>작성일 : <%=data.date%></h4>server.js
app.get('/content/:_id', (req, res) => {
mydb.collection('post')
.findOne({_id:new ObjId(req.params._id)}) //req.body가 없기 때문에 req.body 사용 불가(get방식에서는 body가 공백)
.then(result => {
res.render('content.ejs');
})
.catch()
});
게시글 수정
edit.ejs
<form action="/edit" method="post">
<input type="hidden" name="_id" value="<%=data._id%>"> //폼 제출 시 id값 가져오지만 hidden 태그로 숨겨져 있어 보이지 않음
<div class="form-container">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">제목</label>
<input value="<%=data.title%>" name="title" type="text" class="form-control" id="exampleFormControlInput1" placeholder="제목을 입력해주세요.">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">내용</label>
<textarea name="content" class="form-control" id="exampleFormControlTextarea1" rows="3">
<%=data.content%>
</textarea>
</div>
<div class="mb-3">
<label for="created" class="form-label">작성일</label>
<input value="<%=data.date%>" type="date" id="created" name="someDate" class="form-control">
</div>
<button class="btn btn-custom" type="submit">수정</button>
</div>
</form>server.js
app.get('/edit/:_id', (req, res)=> {
console.log(req.params._id);
mydb.collection('post')
.findOne({_id:new ObjId(req.params._id)})
.then(result => {
res.render('edit.ejs', {data:result});
})
.catch((err) => {
// console.log(err);
res.status(500).send();
});
});
app.post('/edit', (req, res)=> {
console.log(req.body);
mydb.collection('post')
.updateOne({_id:new ObjId(req.body._id)},
{$set:{title:req.body.title, content:req.body.content, date:req.body.someDate}})
.then(result => {
console.log('수정 완료');
res.redirect('/list');
})
.catch((err) => {
// console.log(err);
res.status(500).send();
});
});
DB에도 적용
