<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<title>정글시험</title>
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Stylish', sans-serif;
}
.wrap {
width: 900px;
margin: 10px auto;
}
.comment {
color: blue;
font-weight: bold;
}
.posting-box {
margin: 10px auto 30px auto;
width:500px;
border: 3px solid black;
border-radius: 5px;
padding: 25px;
}
#post-box {
display: none;
}
</style>
<script>
$(document).ready(function () {
listing();
});
function posting() {
let url = $('#url').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/memo',
data: {url_give:url, comment_give:comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
function listing() {
$.ajax({
type: "GET",
url: "/memo",
data: {},
success: function (response) {
console.log(response['memo']);
}
})
}
function openclose(){
let status = $('#post-box').css('display')
if ( status == 'block' ){
$('#post-box').hide()
$('.btn-lg').text('포스팅박스 열기')
} else {
$('#post-box').show()
$('.btn-lg').text('포스팅박스 닫기')
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<a class="btn btn-primary btn-lg" href="#" role="button" onclick="openclose()">포스팅박스 열기</a>
</div>
<div class="posting-box" id="post-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="email" class="form-control" id="url" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" id="comment" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary" onclick="posting()">기사저장</button>
</div>
<div class="card-columns">
<div class="card">
<img src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기 기사 제목이 들어가죠</h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기 기사 제목이 들어가죠</h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기 기사 제목이 들어가죠</h5>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>
app.py파일은
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.ewoewop.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
## HTML을 주는 부분
@app.route('/')
def home():
return render_template('index.html')
@app.route('/memo', methods=['GET'])
def listing():
# 1. 모든 document 찾기 & _id 값은 출력에서 제외하기
# 2. articles라는 키 값으로 영화정보 내려주기
article_list = list(db.memo.find({},{'_id':False}))
return jsonify({'memo', article_list})
## API 역할을 하는 부분
@app.route('/memo', methods=['POST'])
def saving():
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
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')
title = soup.select_one('meta[property="og:title"]')['content']
img = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']
doc={
'url':url_receive,
'title':title,
'image':img,
'desc':desc,
'comment':comment_receive
}
db.memo.insert_one(doc)
return jsonify({'msg':'저장완료!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
index.html 이랑 app.py 파일인데요 get으로 불러와서 콘솔에 console.log(['memo']) 하니까
콘솔창에 에러메세지가 이렇ㄱ ㅔ뜨는데요 ㅜㅜ
Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)
왜안되는거죠
