스파르타피디아 관련 문제 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

스파르타피디아 관련 문제

undefined주차

조*연

・

추천

・

조회수

답변 완료

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

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

스파르타피디아에서 기록하기 버튼을 눌러도 아무 반응이 나타나지 않아서 문의드리고자 합니다.

작성한 코드 및 에러 메세지

.... index.html .....

<!DOCTYPE html>

<head>

<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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"

></script>

<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>

$(document).ready(function () {

listing();

});

function listing() {

fetch('/movie')

.then((res) => res.json())

.then((data) => {

// 2. result 데이터 가져오기

let rows = data['result'];

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

rows.forEach((a) => {

let comment = a['comment'];

let title = a['title'];

let desc = a['desc'];

let image = a['image'];

let star = a['star'];

let star_repeat = '⭐'.repeat(star)

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

<img

src="${image}"

class="card-img-top"

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

<p>${star_repeat}</p>

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

</div>

</div>`;

$('#cards-box').append(temp_html);

});

alert(data['msg']);

});

}

function posting() {

// 1. 데이터 태우기

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

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

let star = $('star').val();

let formData = new FormData();

formData.append('url_give', url);

formData.append('comment_give', comment);

formData.append('star_give', star);

fetch('/movie', { method: 'POST', body: formData })

.then((res) => res.json())

.then((data) => {

alert(data['msg']);

window.location.reload();

});

}

function open_box() {

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

}

function close_box() {

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

}

</script>

</head>

<body>

</div>

<input

id="url"

type="email"

class="form-control"

placeholder="name@example.com"

<label>영화URL</label>

</div>

</select>

</div>

<textarea

id="comment"

class="form-control"

placeholder="Leave a comment here"

></textarea>

</div>

기록하기

</button>

<button

onclick="close_box()"

type="button"

class="btn btn-outline-dark"

닫기

</button>

</div>

<img

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

class="card-img-top"

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

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

</div>

<img

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

class="card-img-top"

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

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

</div>

<img

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

class="card-img-top"

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

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

</div>

<img

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

class="card-img-top"

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

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

</div>

</body>

</html>

.... app.py ....

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

from pymongo import MongoClient

import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://sparta:test@cluster0.xajkb6k.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)

db = client.dbsparta

import requests

from bs4 import BeautifulSoup

@app.route('/')

def home():

return render_template('index.html')

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

def movie_post():

# 2. 가지고 올 url,comment 입력

url_receive = request.form['url_give']

comment_receive = request.form['comment_give']

star_receive = request.form['star_give']

# 3. 크롤링

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(url_receive,headers=headers)

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

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

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

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

# 4. 몽고DB에 넣어주기

doc = {

'title':ogtitle,

'desc':ogdesc,

'image':ogimage,

'comment':comment_receive,

'star':star_receive

}

db.movies.insert_one(doc)

return jsonify({'msg':'저장완료!'})

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

# 1. 몽고DB에 있는 영화를 다 가져다가 내려주면 됨.

def movie_get():

all_movies = list(db.movies.find({},{'_id':False}))

return jsonify({'result': all_movies})

if __name__ == '__main__':

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

댓글 알림