🐰 코드 정리
👉🏻 GET
🥕 index.html
🐾 function newTab(id)
localStorage.setItem('user_id', id);
window.open('detail');localStorage에user_id라는 키에 변수id의 값을 저장한다.detail페이지를 새 창으로 연다.
🐾 function show_main()
fetch("/index").then(res => res.json()).then(data => {
let rows = data['result']
$('#cards').empty()
rows.forEach((a) => {
let name = a['name']
let img_url = a['img_url']
let _id = a['_id']
console.log(img_url)
let temp_html = `생략`
$('#cards').append(temp_html)
})
})/index엔드포인트로fetch를 이용해 데이터를 요청해 받아온다.- data 객체에서 'result' 속성값을 가져와 rows 변수에 할당한다.
- id가
cards인 요소의 내용을 비운다. - 반복문을 실해한다.
name,img_url,_id값을 가져온다.- 생성한 HTML 코드를 id가
cards인 요소에 추가한다.
🥕 detail.html
🐾 function show_users()
let id
if (localStorage.getItem('user_id')) {
id = localStorage.getItem('user_id');
}- 'id' 변수 선언
- user_id 라는 key의 값을 가져온다.
- 만약
localStorage.getItem('user_id')가 값이 존재한다면, 해당 값을 'id' 변수에 할당
fetch("/detail/get").then(res => res.json()).then(data => {
let rows = data['result']
$('#users').empty()
rows.forEach((a) => {
let _id = a['_id']
console.log(_id)
if (id == _id) {
let img_url = a['img_url']
let name = a['name']
let introduce = a['introduce']
console.log(img_url, name, introduce)
let temp_html = `생략`
$('#users').append(temp_html)
document.getElementById("image-box").style.backgroundImage= `url(${img_url})`
}
})
})/detail/get엔드포인트로fetch()를 사용하여 데이터를 가져온다.- data 객체에서 'result'라는 속성 값을 가져와서 rows 변수에 할당한다.
- jQuery를 사용하여 id가
users인 요소의 내용을 모두 비운다. - 가져온 데이터의 각 항복에 대해 반복문을 실행한다.
let _id = a['_id']는_id속성 값을 가져와_id변수에 할당한다.- 만약 user_id가 할당된 변수
id와 _id 속성값이 할당된_id가 일치하다면, 해당 사용자의 이미지 URL, 이름 소개 등을 가져온다. temp_html에 저장된 동적으로 생성된 HTML 코드가id가users인 요소에 추가되어 해당 요소의 내용이 업데이트 된다.- 백그라운드 이미지를 URL로 바꿔준다.
🐾 function show_comment()
fetch("/comment").then(res => res.json()).then(data => {
let rows = data['result']
$('#comment-list').empty()
rows.forEach((a) => {
let nickname = a['nickname']
let comment = a['comment']
let _id = a['_id']
//temp_html로 댓글을 하나씩 html코드로 붙입니다.
let temp_html = `생략`
$('#comment-list').append(temp_html)
})
})/comment엔트포인트로fetch()를 사용하여 데이터를 받아온다.- data 객체에서 'result'라는 속성 값을 가져와서 rows 변수에 할당한다.
- jQuery를 사용하여 id가
comment-list인 요소의 내용을 모두 비운다. - 가져온 데이터의 각 항복에 대해 반복문을 실행한다.
- 각 요소에서
nickname,comment_id값을 가져온다. temp_html에 저장된 동적으로 생성된 HTML 코드가id가comment-list인 요소에 추가되어 해당 요소의 내용이 업데이트 된다.
🥕 app.py
🐾 댓글 내려주기
@app.route("/comment", methods=["GET"])
def comment_get():
all_comment = list(db.lucky_comment.find({},))
for con in all_comment:
con['_id'] = str(con['_id'])
return jsonify({'result': all_comment})/comment경로로 GET 요청을 보내면 이 라우트 핸들러가 실행되어 요청을 처리하고 응답을 반환- Flask와 같은 웹 프레임워크에서는 라우트 핸들러(Route Handler)라고도 불리는데, 특정 URL 경로에 대한 요청을 처리하는 함수이다.
lucky_commnet컬렉션에서 모든 문서가all_comment변수에 리스트로 저장된다.- 가져온 문서에 대해 반복한다.
- 문서의
_id값을 문자열로 변환한다.- MongoDB의
_id는 기본적으로 ObjectId 형식으로 저장된다.
그러나 일반적으로 JSON으로 직렬화를 수행할 때 ObjectId를 직렬화할 수 없는 경우가 있다.
_id값을 문자열로 변환하면 JSON으로 직렬화할 수 있으며, 데이터를 전송하거나 저장할 때 유용하다.
- MongoDB의
result라는 키에all_comment리스트를 할당하여 JSON 형식으로 응답한다.
🐾 #상세 페이지 이미지, 이름 내려주기
@app.route("/detail/get", methods=["GET"])
def get_users():
all_images = list(db.lucky_users.find({},))
for user in all_images:
user['_id'] = str(user['_id'])
return jsonify({'result': all_images})- GET 요청이
/detail/get엔드포인트로 들어오면 MongoDB의lucky_users컬렉션에서 모든 문서를 가져와 JSON 형식으로 반환된다.
🐾 메인페이지 이미지, 이름 내려주기
@app.route("/index", methods=["GET"])
def main_get():
all_users = list(db.lucky_users.find({},))
for user in all_users:
user['_id'] = str(user['_id'])
return jsonify({'result': all_users}) # 저장한 값 반환- GET 요청이
/index엔드포인트로 들어오면 MongoDB의lucky_users컬렉션에서 모든 문서를 가져와서 JSON 형식으로 반환된다.
👉🏻 PUT
🥕 app.py
🐾 댓글 수정
@app.route('/comment', methods=["PUT"])
def update_comment():
nickname2 = request.form['nickname2_update3']
comment2 = request.form['comment2_update3']
_id_receive = request.form['_id_update3']
_id = ObjectId(_id_receive)
db.lucky_comment.update_many({'_id':_id}, {'$set' : {'nickname' : nickname2,
'comment' : comment2}}, upsert=True)
return jsonify({'msg' : '댓글 수정 완료!'})nickname2_update3와comment2_update3는 폼 (form) 데이터에서 해당 필드의 값을 가져와nickname2,comment2변수에 각각 할당된다._id_update3필드의 값을 받아 _id_receive 변수에 할당한다._id_update3필드의 값은 문자열 형태로 전달되며 id 값을 비교하기 위해 ObjectId 형식으로 변환해야 한다.
ObjectId(_id_receive)를 사용해_id_receive변수에 저장된 문자열을 ObjectId 형식으로 변환하고_id변수에 할당한다.lucky_comment컬렉션에서_id필드가 변수_id값과 일치하는 문서를 찾아nickname과comment필드를 수정한다.
열쩡