커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
스스로 해결
사진추가가 안됩니다.
undefined주차
북마크
송*훈
댓글
2
・
추천
0
・
조회수
22
조회수
22
스스로 해결

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.



get, post 통신 잘 이루어지고 database에서 값도 잘 가져오는데요, 문제는 카드에 그림과 제목, 코멘트 내용들이 추가가 되지 않습니다.




콘솔에서는 밑의 화면같이 통신이 잘 이루어져서 database에서 값을 제대로 가져옵니다.

스파르타 즉문즉답

그런데 화면은 계속 그대로에요....

스파르타 즉문즉답

해결해주시면 정말 감사하겠습니다!!



index.html입니다

<!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 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=Gowun+Dodum&display=swap" rel="stylesheet">


    <style>

        * {

            font-family: 'Gowun Dodum', sans-serif;

        }


        .mytitle {

            width: 100%;

            height: 250px;


            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');

            background-position: center;

            background-size: cover;


            color: white;


            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

        }


        .mytitle>button {

            width: 200px;

            height: 50px;


            background-color: transparent;

            color: white;


            border-radius: 50px;

            border: 1px solid white;


            margin-top: 10px;

        }


        .mytitle>button:hover {

            border: 2px solid white;

        }


        .mycomment {

            color: gray;

        }


        .mycards {

            margin: 20px auto 0px auto;

            width: 95%;

            max-width: 1200px;

        }


        .mypost {

            width: 95%;

            max-width: 500px;

            margin: 20px auto 0px auto;

            padding: 20px;

            box-shadow: 0px 0px 3px 0px gray;


            display: none;

        }


        .mybtns {

            display: flex;

            flex-direction: row;

            align-items: center;

            justify-content: center;


            margin-top: 20px;

        }


        .mybtns>button {

            margin-right: 10px;

        }

    </style>

    <script>

        $(document).ready(function () {

            listing();

        });

        // get 함수

        function listing() {

            $('#card-box').empty();

            $.ajax({

                type: "GET",

                url: "/movie",

                data: {},

                success: function(response) {

                    let dblist = response['result'];

               

                    dblist.forEach((x) => {

                        let pImage = x['image'];

                        let pTitle = x['title'];

                        let pDesc = x['desc'];

                        let pComment = x['comments'];

                       

                        console.log(pImage, pTitle, pDesc, pComment);

                        let tempHtml = `<div class="col">

                                            <div class="card h-100">

                                                <img src="${pImage}">

                                                <div class="card-body">

                                                    <h5 class="card-title">${pTitle}</h5>

                                                    <p class="card-text">${pDesc}</p>

                                                    <p>⭐⭐⭐</p>

                                                    <p class="mycomment">${pComment}</p>

                                                </div>

                                            </div>

                                        </div>`;

                        $('#card-box').append(tempHtml);

                    })

                   

                }

            })

            // fetch('/movie').then((res) => res.json()).then((data) => {

            //     console.log(data)

            //     alert(data['msg'])

            // })

        }

        // post 함수

        function posting() {

            let inUrl = $('#url').val();

            let inComments = $('#comment').val();

            $.ajax({

                type: "POST",

                url: "/movie",

                data: {

                    'give_url' : inUrl,

                    'give_comments' : inComments

                },

                success: function(response) {

                    if (response['result'] == 'success') {

                        alert('post well-done');

                        window.location.reload();

                    }

                }

            })

            // let formData = new FormData();

            // formData.append("sample_give", "샘플데이터");


            // fetch('/movie', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {

            //     console.log(data)

            //     alert(data['msg'])

            // })

        }


        function open_box() {

            $('#post-box').show()

        }

        function close_box() {

            $('#post-box').hide()

        }

    </script>

</head>


<body>

    <div class="mytitle">

        <h1>내 생애 최고의 영화들</h1>

        <button onclick="open_box()">영화 기록하기</button>

    </div>

    <div class="mypost" id="post-box">

        <div class="form-floating mb-3">

            <input id="url" type="email" class="form-control" placeholder="name@example.com">

            <label>영화URL</label>

        </div>

        <div class="form-floating">

            <textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>

            <label for="floatingTextarea2">코멘트</label>

        </div>

        <div class="mybtns">

            <button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>

            <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

        </div>

    </div>

    <div class="mycards">

        <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">

            <div class="col">

                <div class="card h-100">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목이 들어갑니다</h5>

                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 한줄 평을 씁니다</p>

                    </div>

                </div>

            </div>

            <div class="col">

                <div class="card h-100">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목이 들어갑니다</h5>

                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 한줄 평을 씁니다</p>

                    </div>

                </div>

            </div>

            <div class="col">

                <div class="card h-100">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목이 들어갑니다</h5>

                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 한줄 평을 씁니다</p>

                    </div>

                </div>

            </div>

            <div class="col">

                <div class="card h-100">

                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

                        class="card-img-top">

                    <div class="card-body">

                        <h5 class="card-title">영화 제목이 들어갑니다</h5>

                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>

                        <p>⭐⭐⭐</p>

                        <p class="mycomment">나의 한줄 평을 씁니다</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>


</html>


그리고 app.py 파일입니다.

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


import requests

from bs4 import BeautifulSoup


from pymongo import MongoClient

client = MongoClient('mongodb+srv://sta:test@cluster0.lnkfnr5.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta


# 홈화면

@app.route('/')

def home():

    return render_template('index.html')


# Get 방식

@app.route('/movie', methods = ['GET'])

def get_test() :

    # 초기설정

    # title_receive = request.args.get('title_give')

    # print(title_receive)


    # 데이터베이스를 접근해서 모든 영화정보를 가져다 주기

    movies_in_db = list(db.pedia.find({},{'_id':False}))

    return jsonify({'result': movies_in_db})


# Post 방식

@app.route('/movie', methods = ['POST'])

def post_test() :

    # 받아야 하는 부분으로, 현재 영화url과 코멘트를 받아야 한다.

    receive_url = request.form['give_url']

    receive_comments = request.form['give_comments']

    print(receive_url, receive_comments)

    headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}

    data = requests.get(receive_url, headers=headers)


    soup = BeautifulSoup(data.text, 'html.parser')


    ogtitle = soup.select_one('meta[property="og:title"]')['content']

    ogdesc = soup.select_one('meta[property="og:description"]')['content']

    ogimage = soup.select_one('meta[property="og:image"]')['content']


    doc = {

        'title' : ogtitle,

        'desc' : ogdesc,

        'image' : ogimage,

        # 'url' : receive_url,

        'comments' : receive_comments

    }

    db.pedia.insert_one(doc)

    return jsonify({'result' : 'success', 'msg':'Post Completed'})


# main module

if __name__ == '__main__':

    app.run('0.0.0.0', port=5000, debug = True)


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴