Flask 시작하기
Flask 프레임워크를 이용해서 서버를 만들고 데이터를 주고받을 거다.
역시나 가상환경에 라이브러리 설치하자
pip install flaskFlask 시작 코드
# ./venv/app.py
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)하고 실행해서 http://localhost:5000 하면 화면에 This is Home! 이라고 뜬다. 웹페이지 완성(?)
@app.route가 '/', 즉 경로가 없으니까 메인이라는 뜻이다. 이 경로를 수정하면 url을 나눠줄 수 있다.
# example
@app.route('/mypage')
def mypage():
return 'This is My Page!'node.js 기초를 좀 공부했었더라서 그런지 확실히 이해하기가 쉬웠던 것 같다. 언어의 차이일 뿐 방식은 결국 같으니까!
Flask에 HTML 파일 주기
templates 폴더 생성 > index.html 파일 생성
<!-- ./templates/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(){
alert('안녕!')
}
</script>
</head>
<body>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>
이 HTML 파일을 Flask가 불러올 수 있게 하려면 아까 그 코드를 수정해주면 된다.
# ./venv/app.py
from flask import Flask, render_template # 새로 불러오고
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
@app.route('/mypage')
def mypage():
return render_template('index.html') # html파일을 불러와서 return값으로 준다
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)API 만들기
https://chaeyami.tistory.com/19
[JavaScript] fetch함수 - API 호출하기 (GET, POST)
공부하다가 필요할 것 같아 정리해 본 내용이다. 이렇게 되는 거구나~ 하고 이해하고 넘어가긴 했는데 혹시 모르니까... 기본 구문 fetch(url, options)// 호출 .then((response) => console.log("response:", response)
chaeyami.tistory.com
POST, GET 요청 구문이 헷갈려서 정리한 내용
GET 요청
보통 데이터 조회(READ)에 많이 쓰인다고 한다.
데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
이제 app.py 파일에 get요청 API 코드를 입력하고, 데이터가 제대로 들어왔는지 print까지 해보자!
먼저 app.py에 request, jsonify를 import 한 후 API 코드를 작성하고
# ./venv/app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
#get 요청
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
index.html 스크립트 속 함수에 GET 요청을 확인하는 fetch구문을 추가해준다.
<!--./templates/index.html-->
<script>
function hey() {
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
실행하고 버튼을 클릭하면 데이터가 들어온 것을 확인할 수 있다.
POST 요청
쟈 이제 슬슬 멍을 때리기 시작하는거다,,, 정신 차리자,,,
GET 요청과 마찬가지로 클라이언트가 서버에 요청을 전달할 때 알려주는 정보이다. 보통 데이터 생성(Create), 변경(Update), 삭제(Delete)에 많이 쓰인다고 한다.
데이터 전달 : 바로 보이지 않는 HTML
app.py를 다시 수정하자. 이번엔 POST 요청을 받는 API를 추가하고, index.html에 Post 요청을 확인하는 구문을 추가한다.
<!--./templates/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>
// post 요청 확인
function hey() {
let formData = new FormData();
formData.append("title_give", "블랙팬서");
// === <input name="title_give" value="블랙팬서">
//값을 /test에 보낸다.
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># ./venv/app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
# Post 요청
@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)
이해가 쉽도록 HTML 코드를 먼저 배치했으므로 순서대로 코드를 보면,
① 웹에서 버튼을 클릭 ▶ ② function hey() 실행 : HTML에서 title_give라는 키 값을 가진 블랙팬서라는 값을 /test에 보낸다.
▶ ③ 그걸 app.py에서 받아서 진행 (test_post함수 )▶ /test의 post에 title_give가 있음
▶ ④ 그 값을 title_recive 변수에 대입 ▶ print(title_recive) ▶ index.html>console.log(data)
▶app.py에서 처리된 값이 index.html의 'data'에 담긴다.
key="title_give" value="블랙팬서" 였으므로 '블랙팬서'가 출력되고, 콘솔에도 가져온 데이터가 표시된다.
GitHub 댓글