티스토리 뷰

Experience

스파르타 코딩클럽 개발일지 4주차

BIBC/빕 2021. 7. 18. 20:31

Flask - 서버 만들기

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
return '<button>나는 버튼이다</button>' localhost:5000 인터넷 주소창에 치면 켜짐

@app.route('/mypage')
def mypage():
return '<button>나는 버튼이다</button>' localhost:5000/mypage 치면 이 페이지로 넘어감


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

Flask - html 주기

from flask import Flask, render_template templates 폴더의 index.html(CSS) 실행
app = Flask(__name__)

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

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

 

POST 연습 (리뷰저장)

API 만들고 사용하기

1) 클라이언트와 서버 연결 확인: app.py @app.route. app.py에서 index.html의 명령(function)을 실행하는지

2) 서버부터 만들기 app.py -> doc 만들어서 db에 저장

index.html에서 function 값 지정

3) 클라이언트 만들기

4) 완성 확인하기

 

나홀로 링크 메모장

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('localhost', 27017) 
db = client.dbsparta db 연결

## HTML을 주는 부분
@app.route('/')
def home():
return render_template('index.html')

@app.route('/memo', methods=['GET'])
def listing():
articles = list(db.articles.find({}, {'_id': False}))
return jsonify({'all_articles':articles})

## 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'] 영화정보 페이지의 og(미리보기)를 긁어온 것
image = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']

doc = {
'title':title,
 'image':image,
 'url':url_receive,
 'comment':comment_receive
}

db.articles.insert_one(doc)

print(title, image, desc)

return jsonify({'msg':'저장이 완료되었습니다'})

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

 

index.html

<!Doctype html>
<html lang="ko">

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

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
 crossorigin="anonymous">

 <!-- JS -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
 integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
 crossorigin="anonymous"></script>

 <!-- 구글폰트 -->
 <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">


 <title>스파르타코딩클럽 | 나홀로 메모장</title>

 <!-- style -->
 <style type="text/css">
 * {
font-family: "Stylish", sans-serif;
 }

.wrap {
width: 900px;
 margin: auto;
 }

.comment {
color: blue;
 font-weight: bold;
 }

#post-box {
width: 500px;
 margin: 20px auto;
 padding: 50px;
 border: black solid;
 border-radius: 5px;
 }
</style>
 <script>
 $(document).ready(function () {
showArticles();
 });

 function openClose() {
if ($("#post-box").css("display") == "block") {
$("#post-box").hide();
 $("#btn-post-box").text("포스팅 박스 열기");
 } else {
$("#post-box").show();
 $("#btn-post-box").text("포스팅 박스 닫기");
 }
}

function postArticle() {

let url = $('#post-url').val()
let comment = $('#post-comment').val()

$.ajax({
type: "POST",
 url: "/memo",
 data: {url_give:url,comment_give:comment},
 success: function (response) { // 성공하면
 alert(response["msg"]);
 window.location.reload()
}
})
}

function showArticles() {
$.ajax({
type: "GET",
 url: "/memo",
 data: {},
 success: function (response) {
let articles = response['all_articles']
}
})
}
</script>

 </head>

 <body>
 <div class="wrap">
 <div class="jumbotron">
 <h1 class="display-4">나홀로 링크 메모장!</h1>
 <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
 <hr class="my-4">
 <p class="lead">
 <button onclick="openClose()" id="btn-post-box" type="button" class="btn btn-primary">포스팅 박스 열기
</button>
 </p>
 </div>
 <div id="post-box" class="form-post" style="display:none">
 <div>
 <div class="form-group">
 <label for="post-url">아티클 URL</label>
 <input id="post-url" class="form-control" placeholder="">
 </div>
 <div class="form-group">
 <label for="post-comment">간단 코멘트</label>
 <textarea id="post-comment" class="form-control" rows="2"></textarea>
 </div>
 <button type="button" class="btn btn-primary" onclick="postArticle()">기사저장</button>
 </div>
 </div>
 <div id="cards-box" class="card-columns">
 <div class="card">
 <img class="card-img-top"
 src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
 alt="Card image cap">
 <div class="card-body">
 <a target="_blank" href="#" class="card-title">여기 기사 제목이 들어가죠</a>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
 alt="Card image cap">
 <div class="card-body">
 <a target="_blank" href="#" class="card-title">여기 기사 제목이 들어가죠</a>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
 alt="Card image cap">
 <div class="card-body">
 <a target="_blank" href="#" class="card-title">여기 기사 제목이 들어가죠</a>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
 alt="Card image cap">
 <div class="card-body">
 <a target="_blank" href="#" class="card-title">여기 기사 제목이 들어가죠</a>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
 alt="Card image cap">
 <div class="card-body">
 <a target="_blank" href="#" class="card-title">여기 기사 제목이 들어가죠</a>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 <div class="card">
 <img class="card-img-top"
 src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
 alt="Card image cap">
 <div class="card-body">
 <a target="_blank" href="#" class="card-title">여기 기사 제목이 들어가죠</a>
 <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
 <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
 </div>
 </div>
 </div>
 </div>
 </body>

</html>

반응형
저작자표시 비영리 변경금지

'Experience' 카테고리의 다른 글

스파르타 코딩클럽 3주차 개발일지  (0) 2021.07.12
스파르타 코딩클럽 2주차 개발일지  (0) 2021.07.01
스파르타 코딩클럽 1주차 개발일지  (0) 2021.06.22
VPN 우회하여 ESPN으로 미국 스포츠 보기  (0) 2020.12.07
[충주~제천 여행] 3일차: 정방사, 물태리빵집, 대추나무집  (0) 2020.08.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크