본문 바로가기
파이썬

[D+23] 시간 참 빠르다

by 개발자A입니다 2022. 4. 28.

꾸준히 해야지 하면서도 자꾸 '오늘만 쉬자'라는 마음의 소리가 들려온다ㅠㅠ

 

그래서 오늘은 결국 새벽까지 밀린 공부를 하고있다ㅎㅎㅎㅎㅎ

 

이건 잊어버릴까봐 메모하려는 목적이다ㅎ

나는 맥북을 쓰다보니 certifi가 필요하다고 해서 강의에서 알려주는거에 코드 몇줄이 더 필요하다.

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
import certifi

ca = certifi.where()

 

뭐 이렇게 하고나서 서버에 데이터를 넣고 그걸 다시 프론트엔드에 표시해주고~!

이거 너무 신기하다ㅎㅎㅎㅎ

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>초미니홈피 - 팬명록</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://blog.kakaocdn.net/dna/bXc1mi/btqDZOhUE7Y/AAAAAAAAAAAAAAAAAAAAACEwFRNuqsb_xhFP9XQ25URb3wKcD-HnfvdjEYA1BwB0/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=lZ7VebsHiDtgzLGEu2EbI1jdbC8%3D');
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function(){
            set_temp()
            show_comment()
        });
        function set_temp(){
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }
        function save_comment(){
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {name_give:name, comment_give:comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }
        function show_comment(){
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    // alert(response["msg"])
                    let rows = response['comments']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        // console.log(name, 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>
</head>
<body>
    <div class="mypic">
        <h1>Keshi 팬명록</h1>
        <p>현재기온: <span id="temp">36</span>도</p>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <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>
    <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 class="card">-->
<!--            <div class="card-body">-->
<!--                <blockquote class="blockquote mb-0">-->
<!--                    <p>새로운 앨범 너무 멋져요!</p>-->
<!--                    <footer class="blockquote-footer">호빵맨</footer>-->
<!--                </blockquote>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="card">-->
<!--            <div class="card-body">-->
<!--                <blockquote class="blockquote mb-0">-->
<!--                    <p>새로운 앨범 너무 멋져요!</p>-->
<!--                    <footer class="blockquote-footer">호빵맨</footer>-->
<!--                </blockquote>-->
<!--            </div>-->
        </div>
    </div>
</body>
</html>
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://비밀',
                     tlsCAFile=ca)
db = client.dbsparta



@app.route('/')
def home():
   return render_template('index.html')

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
        'name':name_receive,
        'comment':comment_receive
    }

    db.homework.insert_one(doc)

    # print(sample_receive)
    return jonify({'msg':'응원 완료!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({}, {'_id': False}))
    return jsonify({'comments':comment_list})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

'파이썬' 카테고리의 다른 글

앱개발 플러스 2주차!  (0) 2022.05.22
앱개발 플러스 1주차!  (0) 2022.05.14
[D+7] 개발일지: 크롤링을 배우다  (0) 2022.04.13
[D+2] 개발일지: 아직도 뭐가뭔지 모르겠지만  (0) 2022.04.07
[D+1] 개발일지 첫 글  (0) 2022.04.06

관련글

티스토리툴바