Flask 시작하기 - 서버 만들기
서버를 만들 수 있는 큰 라이브러리가 있고 라이브러리를 사용할 수 있도록 하는 것이 Flask 프레임워크이다.
- Flask 세팅하기
-
파이썬 환경설정 인터프리터 추가(+) Flask
-
Flask 기본구조를 app.py파일에 아래와 같이 추가하기
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return 'This is mypage!!!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)Flask 시작하기 - 본격 API 만들기
- GET - 데이터 조회(Read)
ex) 영화목록 조회
데이터전달: URL 뒤에 물음표를 붙여 key=value로 전달
ex) google.com?q=북극곰
- POST - 데이터 생성(Create), 변경(Update), 삭제(Delete)
ex) 회원가입, 회원탈퇴, 비밀번호 수정
데이터전달: HTML body에 key:value 형태로 전달
프로젝트 진행을 위한 세팅
-
파이썬 환경설정 인터프리터 패키지 설치하기
-
패키지 추가 목록 flask, pymongo, dnspython
-
조각 기능 구현하기
*조각기능이란, 프로젝트 사전에 필요한 기술들을 생각해보고 기술 별로 기능을 실습하고 API나 프로젝트를 구성하는 일.
ex) 크롤링, 서버 통신 등
- meta 태그 크롤링을 위한 기본코드
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'
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')
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']
print(title, image, desc)Flask를 이용한 DB와 서버통신을 위한 기본세팅 구조
- DB 저장을 위한 app.py 서버(파이썬 파일)의 주요 파일 구조(뼈대)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
// mongoDB 사용을 위한 import
from pymongo import MongoClient
client = MongoClient('mongodb+srv://${user}:${password}@cluster0.spvewgv.mongodb.net/?retryWrites=true&w=majority')
db = client.${dbname}
@app.route('/')
def home():
return render_template('index.html')
@app.route("/homework", methods=["POST"])
def homework_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg':'POST 연결 완료!'})
@app.route("/homework", methods=["GET"])
def homework_get():
return jsonify({'msg':'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)- DB와 연동을 위한 클라이언트 파일 구조(index.html 뼈대)
<head>
//부트스트랩 사용을 위한 import
<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>
// Ajax 통신을 위한 import
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// 구글폰트 사용을 위한 import
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
<script>
$(document).ready(function(){
set_temp()
show_comment()
});
function set_temp(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
$('#temp').text(response['temp'])
}
})
}
function save_comment(){
$.ajax({
type: 'POST',
url: '/homework',
data: {sample_give:'데이터전송'},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
})
}
function show_comment(){
$.ajax({
type: "GET",
url: "/homework",
data: {},
success: function (response) {
alert(response["msg"])
}
});
}
</script>
</head>- 페이지 로드가 끝나면 실행되도록 하는 GET 통신 구조
$(document).ready(function () {
set_temp() // 실행시킬 함수1
show_comment() // 실행시킬 함수2
});학습기록의 내용은 스파르타코딩 웹개발 종합반 강의를 바탕으로 정리했습니다.
출처 - 스파르타코딩클럽
반갑습니다, 프론트엔드 개발자를 꿈꾸고 있습니다 ! https://pablaw.github.io/profileLink/