2022-8-30 TIL

신중민·2022년 8월 30일
TIL

오늘은 백엔드 작업을 통해 데이터를 저장하는 작업을 진행했다.

app.py

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

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.cfsfqmo.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

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

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

@app.route('/index4.html')
def second():
   return render_template('index4.html')

@app.route('/index3.html')
def third():
   return render_template('index3.html')

@app.route('/index2.html')
def four():
   return render_template('index2.html')


@app.route("/profile", methods=["POST"])
def profile_post():
    comment_receive = request.form['comment_give']
    doc = {
        'comment': comment_receive
    }

    db.writer.insert_one(doc)
    return jsonify({'msg': '감사합니다'})

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


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

개인페이지

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet">


    <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>
    <style>
        * {
            font-family: 'Gaegu', sans-serif;
        }

        .mypic {
            width: 100%;
            height: 600px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.univ20.com/wp-content/uploads/2018/09/90ebd6898236551fca8422959fa2a5e0.png");
            background-position: center 50%;
            background-size: cover;

            color: white;

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

        .mypic>button {
            width: 300px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mypic>button:hover {
            border: 2px solid white;
        }

        .mypost {
            max-width: 500px;
            width: 95%;
            margin: 500px auto 20px auto;
            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;

            display: none;

        }

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

        .mycards {
            width: 95%;
            max-width: 500px;
            float: right;
            margin-right: 250px;
            margin-top: 32px;

        }

        .mycards>.card {
            margin-top: 10px;
            margin-bottom: 10px;
            border: hidden 10px;
        }

        .bang {
            font-size: 30px
        }

        .cards {
            margin: auto;
            width: 300px;

        }

        .hello {
            float: left;
            width: 400px;
            height: 400px;
            margin: 60px 0 0px 350px;

            border-radius: 30px;
        }

        .btn {
            background-color: black;
            color: white;
        }

        .hi {
            margin-right: 80px;
            margin-bottom: 10px;
        }
        .last{
            margin-top: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        })

        function open_box() {
            $('#post-box').show()
        }

        function close_box() {
            $('#post-box').hide()
        }

        $(document).ready(function () {
            show_order();
        });

        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/profile',
                data: {},
                success: function (response) {
                    let rows = response['writer']
                    for (let i in rows) {
                        let comment = rows[i].comment

                        let temp_html = `<tr>
                                             <td>${comment}</td>
                                         </tr>`

                        $('#order-box').append(temp_html)
                    }
                }
            });
        }
        function q() {
            let comment = $('#input-q').val()

            $.ajax({
                type: 'POST',
                url: '/profile',
                data: { comment_give: comment },
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }
    </script>
</head>


<body>
    <div class="mypic">
        <h1>신중민</h1>
        <p>현재기온 : <span id="temp">00.0</span>도</p>
        <button onclick="open_box()">응원의 메세지를 남겨주세요🔥</button>
    </div>
    <div class="mycards">
        <div class="card">
            <div class="card-body">
                <p>이름</p>
                <footer class="blockquote-footer">신중민</footer>
                <p>1. [팀]과 [자신]에 대한 설명 및 MBTI </p>
                <footer class="blockquote-footer">INFJ</footer>
                <p>2. 객관적으로 살펴본 자신의 장점</p>
                <footer class="blockquote-footer">꼼꼼함</footer>
                <p>3. 협업을 하는 과정에서의 자신의 스타일</p>
                <footer class="blockquote-footer">팀원으로써 팀장과 팀원을 열심히 서포트</footer>
                <p>4. 우리 팀만의 특징과 추구하는 궁극적인 목표</p>
                <footer class="blockquote-footer">팀원들의 화합이 잘 맞는다. 포기하지 말고 꼭 완주!</footer>
                <p>5. 우리 팀의 약속</p>
                <footer class="blockquote-footer">운동을 하면서 체력을 유지하며 끈기있게 노력하여 4개월간의 캠프를 포기하지 말자!</footer>
                <p>6. 팀원들의 블로그 주소 :
                    <a href="https://velog.io/@ysy03099">신중민의 블로그</a>
                </p>

            </div>
        </div>
    </div>
    <div>
        <img class="hello"
            src="https://ca.slack-edge.com/T03NJDS4SF9-U03SJM2013K-7c71f259e3ab-512"></img>
    </div>

    <div class="mypost" id="post-box">
        <div class="form-floating mb-3">
            <div class="visit">
                <div class="bang">
                    <p>응원하기</p>
                </div>
            </div>
            <div class="question-box">
                <input class="hi" id="input-q" type="text" placeholder="방명록 작성하기" style="width:400px"/>

                <button onclick="q()" type="button" class="btn">작성 완료</button>
                <button onclick="close_box()" type="button" class="btn">닫기</button>


                <table border="1" class = "last" style="width:400px">
                    <tbody id="order-box">

                    </tbody>
                </table>

            </div>

        </div>
    </div>
</body>

</html>
</body>

</html>

api 댓글 등록 작업을 통해 개인페이지에 응원메세지를 남길 수 있게 되었다. 튜터님과 팀장님의 도움을 정말 많이 받고 내가 별로 도움이 되지 못한거 같아 미안한 생각이 많이 든다. 내가 좀더 열심히 공부해서 팀원들에게 많이 도움이 되는 팀원이 돼야겠다.

profile
신중민
이전 포스트

2022-8-29 TIL

다음 포스트

2022-8-31 TIL

0개의 댓글