팬명록 만들기

    스파르타 코딩클럽 웹개발 종합반 5차 - 팬명록 만들기 

 

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

+ Recent posts

티스토리툴바