팬명록 만들기
스파르타 코딩클럽 웹개발 종합반 5차 - 팬명록 만들기
- POST방식으로 닉네임, 댓글 기록하기
- GET방식으로 DB에 저장 된 닉네임, 댓글 보여주기
- AWS에 파일 업로드하기
- 결과 : 나의 팬명록(eba-mwbwphkk.ap-northeast-2.elasticbeanstalk.com)
1. POST 댓글 저장하기
from flask import Flask, render_template, request, jsonify
application = app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
# request.form을 통해 name, comment를 받고 fan db에 doc 딕셔너리 데이터를 저장한다.
@app.route("/guestbook", methods=["POST"])
def guestbook_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
doc = { 'name' : name_receive,
'comment' : comment_receive }
db.fan.insert_one(doc)
return jsonify({'msg': '댓글 등록 완료!'})
if __name__ == '__main__':
app.run()
--- 로컬에서 실행할 때 ---
app.run('0.0.0.0', port=5000, debug=True)
<script>
/* 문서가 열리면 set_temp, show_comment 함수 실행 */
$(document).ready(function () {
set_temp();
show_comment();
});
/* 실시간 서울 기온 함수 */
function set_temp() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
let number = data['temp']
$('#temp').text(number)
});
}
/* 닉네임, 댓글 DB에 저장하기 */
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData();
formData.append("name_give", name);
formData.append("comment_give", comment);
fetch('/guestbook', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
alert(data["msg"]);
/* 화면 Refresh */
window.location.reload();
});
}
</script>
<body>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" placeholder="url" id="name" />
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea
class="form-control"
placeholder="Leave a comment here"
id="comment"
style="height: 100px"
></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark" >
댓글 남기기
</button>
</div>
2. GET 댓글 가져오기
@app.route("/guestbook", methods=["GET"])
def guestbook_get():
all_guestbook = list(db.fan.find((), {'_id' : False}))
return jsonify({'result': all_guestbook})
<script>
/* 닉네임, 댓글 DB에서 불러오기 */
function show_comment() {
fetch('/guestbook').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#comment-list').empty()
rows.forEach((gst) => {
let name = gst["name"]
let comment = gst["comment"]
let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${name}</footer>
</blockquote>
</div>
</div>`
$('#comment-list').append(temp_html)
});
})
}
</script>
<body>
<div class="mycards" id="comment-list">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
</div>
<body>
Point of Realization
- 웹개발 종합반 5주차까지 끝나고 AWS에 파일 업로드까지 진행했다.
- 따라가기에 급급했던것 같은데 닉네임, 댓글까지 DB에 저장되고 Refresh되어 바로 눈에 보이니까 신기하다..!
- frontend, backend, db 연결까지 어떻게 동작하는지 궁금했는데 일단 한꺼풀 풀어본 느낌
- 강의만 보며 이해할때에는 이게 왜 저기서 동작한다는 거지? 했는데 부끄럽지만 따라 써보면서 해보니 이해가 됐다.
- 언젠가 이런 시절이 있었구나 돌아보려 남긴다.
'To day I learn' 카테고리의 다른 글
| TodayILeurn 2023-03-25 (0) | 2023.03.25 |
|---|---|
| TodayILearn 2023-03-24 (0) | 2023.03.24 |
| TodayILearn 2023-03-23 (0) | 2023.03.24 |
| TodayILeaun 2023-03-21 (0) | 2023.03.21 |
| TodayILearn 2023-03-20 (0) | 2023.03.20 |