오늘의 할일
- 페이지마다 저장하는 방명록이 다를텐데 어떻게 해당 페이지에서 쓴 방명록만 보이게 할 것인가
- 프로젝트 마무리 하기
페이지마다 방명록 내용 각각 나오게 하기
성공했다.
그런데 페이지마다 스크립트를 넣어야해서 통일시키고 싶다.
근데 못하겠다.
for 문 안에 있는 한줄만 다르고 다 똑같은데 어떻게 해야할지 모르겠다.
- 데이터 저장 부분
@app.route('/guests', methods=["POST"])
def guest_post():
guest_name_recive = request.form['guest_name_give']
guest_comment_recive = request.form['guest_comment_give']
guest_recive = request.form['guest_give']
guest_list = list(db.guests.find({}, {'_id': False}))
count = len(guest_list) + 1
doc = {
'name' : guest_name_recive,
'comment' : guest_comment_recive,
'num' : count,
'change': 0,
#페이지 내에 방명록 목록을 위한 키
'guest': guest_recive
}
db.guests.insert_one(doc)
return jsonify({'msg': '응원 감사합니다!'})각 페이지 내에서 쓴 글만 해당 페이지에 보여야 하기 때문에 guest라는 키를 새로 추가해줬다.
function save_guest(){
let guest_name = $('#guest-name').val()
let guest_comment = $('#guest-comment').val()
let guest = $('.guest_mem').attr('id')
$.ajax({
type: "POST",
url: "/guests",
data: {guest_name_give: guest_name, guest_comment_give: guest_comment, guest_give: guest},
success: function(response){
alert(response['msg'])
window.location.reload()
}
})
}
<!--방명록 목록-->
<div class="guest-column guest_mem" id="mem1">
<ul id="guest-list">
</ul>
</div>방명록 목록 섹션에 guest_mem이라는 클래스를 추가하고 페이지마다 mem1, mem2..의 아이디를 넣어줬다.
- 데이터 조회 부분
function show_guest() {
$.ajax({
type: "GET",
url: "/guests",
data: {},
success: function (response) {
let guest_rows = response["guests"]
for (let i = 0; i < guest_rows.length; i++) {
let guest_name = guest_rows[i]['name']
let guest_comment = guest_rows[i]['comment']
let num = guest_rows[i]['num']
let change = guest_rows[i]['change']
let guest = guest_rows[i]['guest']
let temp_html = ``
if (change == 0 || change == 1) {
temp_html = `<li class="${guest}">
<div class="guest-name">${guest_name}</div>
<div class="guest-comment">${guest_comment}</div>
<div class="guest-btn-wrap">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-dark"token interpolation">${num})">수정</button>
<button type="button"token interpolation">${num})" class="btn btn-outline-dark">삭제</button>
</div>
</div>
</li>`
} else {
temp_html = `<li class="${guest}">
<div class="guest-name">${guest_name}</div>
<div class="guest-comment"><input type="text" id="change_guest_comment" value="${guest_comment}"></div>
<div class="guest-btn-wrap">
<button type="button" class="btn btn-outline-dark"token interpolation">${num})">완료</button>
</div>
</li>`
}
if(guest == 'mem1'){
$('#guest-list').append(temp_html)
}
console.log(guest_rows)
}
}
})
}서버 부분에서는 데이터를 조회한다.
원래 코드에서 guest값을 불러오고, temp_html에 들어가는 li에 class를 부여했다.
if(guest == 'mem1'){
$('#guest-list').append(temp_html)
}해당 부분으로 각 페이지마다 설정해놓은 방명록 목록 id값을 이용해 각 페이지 내에서 쓴 글만 나타내게 하였다.
GET타입 부분에 코드를 통일해서 한 곳에만 넣고싶은데..
넣을 수 있다! 이게 TIL의 장점이지
function show_guest(a) {
$.ajax({
type: "GET",
url: "/guests",
data: {},
success: function (response) {
let guest_rows = response["guests"]
for (let i = 0; i < guest_rows.length; i++) {
let guest_name = guest_rows[i]['name']
let guest_comment = guest_rows[i]['comment']
let num = guest_rows[i]['num']
let change = guest_rows[i]['change']
let guest = guest_rows[i]['guest']
let temp_html = ``
if (change == 0 || change == 1) {
temp_html = `<li class="${guest}">
<div class="guest-name">${guest_name}</div>
<div class="guest-comment">${guest_comment}</div>
<div class="guest-btn-wrap">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-dark"token interpolation">${num})">수정</button>
<button type="button"token interpolation">${num})" class="btn btn-outline-dark">삭제</button>
</div>
</div>
</li>`
} else {
temp_html = `<li class="${guest}">
<div class="guest-name">${guest_name}</div>
<div class="guest-comment"><input type="text" id="change_guest_comment" value="${guest_comment}"></div>
<div class="guest-btn-wrap">
<button type="button" class="btn btn-outline-dark"token interpolation">${num})">완료</button>
</div>
</li>`
}
if(guest == a){
$('#guest-list').append(temp_html)
}
console.log(guest_rows)
}
}
})
}if문에 들어갈 조건에 매개변수 a를 넣어서
$(document).ready(function () {
show_guest('mem1');
});guest값을 인자로 넣어준다!
사실 매개변수와 인자에 대한 정의가 헷갈리고 정확하지 않아서 TIL을 적기위해 검색했다.(제대로 쓴게 맞나)
쓰기 위해 본 글들 출처
프로젝트 마무리하기
한 분이 파일을 합치고 내가 기능을 넣기로 했다.
미리 받아놓은 파일로 연습을 해서 금방 연결했다.
결국 구현한 기능은
방명록 작성, 수정, 삭제 끝!
이렇게 단어로 쓰면 별거 없는 것 같아 보이는데 지인짜~ 힘들었다!
오늘의 일기
끝나지 않을 것 같던 프로젝트가 내일 끝난다는게 신기하다.
조원분들이 모두 열심히들 하시는게 보여서 나도 열심히 하게됐다.
프로젝트 진행하면서 가장 마음에 드는 코드(함수)를 적으라고 했는데, 다 힘들게 만든 코드여서 고르기 힘들었지만 가장 애를 많이 먹였던 show_guest() 녀석을 썼다.
기능중심이아니라 코드중심으로 자랑을 하라고 공지되어 있는데 무슨말인지 잘 모르겠다.
암튼 서버에 올려서 결과물을 공유하고 싶지만 오늘따라 힘이 쭉쭉 빠져서 그럴 힘이 없다...
항상 TIL을 쓰기위해 중간중간 적어놓을 때마다 해답이 나오는데 좋은건지 나쁜건지 모르겠다. 해결했으니 좋은게 좋은거지 뭐..ㅎㅎ
내일 유종의 미를 거두고 JS강의 찾아서 들어야겠다!
