로컬 개발환경 - 컴퓨터 한 대로 클라이언트와 서버 역할을 모두 수행하는 환경
상기) 클라이언트 = 서버로부터 정보를 제공받는 컴퓨터
Flask 프레임 워크 - 서버를 구동시켜 주는 파이썬으로 작성된 프레임워크
Flask의 폴더 구조의 규칙
1. 만들고자하는 프로젝트의 폴더 안에 templates폴더(클라이언트 파일 공간) 생성
2. templates폴더 안에 index.html파일생성 (파일명은 관례)
3. app.py파일생성 (서버 파일)
templates폴더 - HTML파일을 담아두고 불러오는 역할
app.py파일 - flask를 실행시킬 가장 기본이 되는 파일
Flask설치
pip install flask //설치
Flask 기초
URL 나누기 - @app.route('/') 부분을 수정해서 URL을 나눔
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return '<button>버튼입니다</button>'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)검색창에 localhost:5000 입력
내 컴퓨터에서 내가 만든 웹서비스에 접속한 것 (localhost)
인터넷 망에다 웹서비스를 오픈한 건 아니고 나한테만 오픈하고 보는 것
HTML 파일 불러오기
flask 내장 함수 reander_template 이용
from flask import Flask, render_template #코드 상단에 추가
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return render_template('index.html') #아규먼트에 html파일 입력
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)GET, POST 요청 타입 리마인드
클라이언트가 요청할 때는 HTTP라는 통신 규약을 따른다.
클라이언트는 요청할 때, HTTP request method(요청 메서드)를 통해 서버 쪽에 어떤 요청 방식인지 알려준다.
대표적인 요청 방식 - GET, POST
GET (데이터 변경 x)
통상적으로 데이터 조회(Read)를 요청할 때 사용
데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
POST (데이터 조작)
통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용
데이터 전달 : 바로 보이지 않는 HTML
api를 만들고 사용하는 과정에서 2가지 기능 필요 Flask에 request와 jsonify기능
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
GET 요청 API코드(app.py)
@app.route('/')
def home():
return render_template('index.html')
#클라이언트가 GET요청으로 /test라는 창구로 들어온다.
@app.route('/test', methods=['GET'])
def test_get():
#title_give라는 데이터가 있으면 변수에 넣는다.
title_receive = request.args.get('title_give')
print(title_receive) #개발자가 볼 수 있게 확인용도
#서버에서 클라이언트 데이터 내려주기를 다음과 같이 한다.
# result는 success, msg는 이 요청은 get
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
GET 요청 확인 Fetch코드(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>
// get요청 확인 fetch코드
<script>
function hey() {
// /test라고 하는 ur에다가 요청을 해서 뭔가 데이터를 받아
//console에다 찍자
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
</head>
<body>
<h1>제목을 입력합니다 </h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>
과정
1. 서버의 기본페이지(index.html)에서 버튼을 눌렀을 때 hey() 실행
2. fetch로 /test라고 하는 url에 요청을 하고 *3* 데이터를 받아오고 console에 찍는다
*3* 서버는 결과를 돌려준다
POST요청 API코드(app.py)
@app.route('/test', methods=['POST'])
def test_post():
#title_give라는 데이터가 들어오면
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
POST 요청 확인 Fetch코드(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() {
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>1. 버튼을 누른다
2. FormData를 만들고 변수에 데이터를 넣는다.
3. 서버(/test)에 메서드에 요청타입과 데이터를 담아서 보내주고 ** 받은 데이터를 console에 찍는다.
** 서버에서 받은 데이터를 저장해서 서버 내에서 print하고 메세지를 보낸다.
'[스파르타 코딩클럽] > 비개발자를 위한, 웹개발 종합반' 카테고리의 다른 글
| 화성땅 공동구매 -POST- (0) | 2023.02.26 |
|---|---|
| 화성땅 공동구매 -세팅/뼈대 준비- (1) | 2023.02.26 |
| 파이썬 내장 함수 strip (0) | 2023.02.26 |
| 파이썬으로 웹스크래핑 결과 몽고DB에 저장하기 (0) | 2023.02.26 |
| mongoDB기초/pymongo DB조작 코드 (0) | 2023.02.23 |
