1.Flask - 서버 만들기
가상환경 만들기
python3 -m venv venvflask 설치
pip install flaskflask 기본 뼈대
from flask import Flask
app = Flask(**name**)
@app.route('/')
def home():
return 'This is Home!'
if **name** == '**main**':
app.run('0.0.0.0',port=5000,debug=True)실행 → 브라우저에 localhost:5000 → 내 컴퓨터에 서버를 만듬
#폴더 templates > index.html 생성
#render_template 추가
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
#render_template('index.html')
@app.route('/mypage')
def mypage():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)2. API 다루기
get과 post
: 이걸 익히면 하고싶은 모든 동작을 할 수 있게될 것
:각각의 장단점이 있다.
get은 url로 전달하는게 특징, 통상적으로 데이터를 조회할 때 사용(데이터를 건들이지 않음)
post 방식은 눈에 안보인다. 컴퓨터만 알아듣는 방식으로 전달, 데이터를 조작할 때 사용(생성,변경,삭제)
app.py (백엔드 부분)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
# get 요청 api 코드
# request, jsonify가 필요
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!!!!'})
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
#이렇게 데이터를 내려줘 -> 데이터에 담긴다
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)index.html (프론트엔드 부분)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<script>
function hey() {
// get 요청 fetch 코드
fetch('/test')
.then((res) => res.json())
.then((data) => {
console.log(data);
});
// 데이터를 가지고 가야해서 형태가 조금 다르다
// formData에 데이터를 실어서 가져가
let formData = new FormData();
formData.append('title_give', '블랙팬서');
fetch('/test', { method: 'POST', body: formData })
.then((res) => res.json())
.then((data) => {
console.log(data);
});
}
</script>
</head>
<body>
<h1>제목을 입입력력ㅎㅏㅂ니다</h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>콘솔창에
Debugger … 커서가 깜빡이고 있으면 아직 돌아가는 중
→ control + C를 눌러서 종료시켜줘야 한다.
주로 post로 자료를 데이터베이스에 저장시키고 get으로 자료를 html에 다시 뿌리는 과정을 한 것 같다.
3. meta 태그 사용하기
meta 태그: 미리 정해둔 규칙, head에서 찾을 수 있다.
meta 크롤링 기본 코드
import requests
from bs4 import BeautifulSoup
URL = 'https://movie.daum.net/moviedb/main?movieId=161806'
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,headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')카카오톡 링크 공유하면 이미지가 뜨는 원리를 처음 알게된 것 같다. 모두가 약속한 사항이라면 이런 미리 약속된 사항들을 정리해서 사이트에 적용할 수 있도록해야 할테니 유념해야 한다.
미니 프로젝트 순서
세팅
app.py 파일 생성
가상환경만들기
python3 -m venv venvtemplates 폴더 생성 → index.html 파일 생성
라이브러리 설치
pip install flask pymongo dnspython requests bs4- flask : 서버 만들기
- pymongo dnspython : 몽고db연결
- requests bs4 : 웹 크롤링
내가 아리까리하고 알쏭달쏭한 기능을 우선 구현하고 내가 확실히 아는걸 나중에 구현해야 오류가 났을때 원인 찾기 편하다
저장하기 불러오기 기능을 만들때, 저장하기를 우선 만들 것
POST연습(포스팅하기)
function posting() {
// html에서 입력한 값을 가져오기
let url = $('#url').val();
let comment = $('#comment').val();
let star = $('#star').val();
// 입력한 값을 formdata에 태워서 보내기
let formData = new FormData();
//url_give라는 이름으로 url값을 보냄
formData.append('url_give', url);
formData.append('comment_give', comment);
formData.append('star_give', star);
//post 형식으로 formData를 movie에 보냄
fetch('/movie', { method: 'POST', body: formData })
.then((res) => res.json())
.then((data) => {
alert(data['msg']);
window.location.reload();
});
}@app.route("/movie", methods=["POST"])
def movie_post():
#html로 부터 정보를 받음
#url_give라는 이름으로 url값을 받음
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
star_receive = request.form['star_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'}
#받은 url 넣기
data = requests.get(url_receive,headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
#meta정보 받아오기
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']
#doc에 저장
doc = {
'title':ogtitle,
'image':ogimage,
'desc':ogdesc,
'comment':comment_receive,
'star':star_receive
}
db.movies.insert_one(doc)
return jsonify({'msg':'저장완료'})GET연습(보여주기)
@app.route("/movie", methods=["GET"])
def movie_get():
all_movies = list(db.movies.find({}, {"_id": False}))
return jsonify({'result':all_movies})function listing() {
fetch('/movie')
.then((res) => res.json())
.then((data) => {
let rows = data['result'];
$('#cards-box').empty();
rows.forEach((a) => {
let title = a['title'];
let comment = a['comment'];
let desc = a['desc'];
let image = a['image'];
let star = a['star'];
let star_repeat = '⭐'.repeat(star);
let temp_html = `
<div class="col">
<div class="card h-100">
<img
src="${image}"
class="card-img-top"
/>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_repeat}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>
`;
$('#cards-box').append(temp_html);
});
console.log(rows);
});
}
