FLASK 시작 코드
app.py 파일을 만들고 아래 코드를 넣는다 (통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓는다). 아래 코드에서 'app'은 이 파일명을 지칭한다.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return 'This is My Page!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
주의할 점은 URL 별로 함수명이 같거나, route('/') 등의 주소가 같으면 안된다.
Flask 시작하기 - HTML파일 주기
Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에,
- Newstatic 폴더 (이미지, css파일을 넣기)
- templates 폴더 (html파일을 넣기)
- app.py 파일
이렇게 세 개를 만들어두고 시작하기
아래와 같은 html파일을 templates 파일 안에 만든다.
<!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>
아래 파이썬 파일에는 flask 내장함수 render_template를 이용하여 templates 폴더에 있는 html 파일을 불러온다.
from flask import Flask, render_template
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)
GET, POST 방식
클라이언트는 요청할 때 HTTP request method (HTTP 요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 전달한다. 여러 방식이 존재하지만 가장 많이 쓰이는 GET, POST 방식에 대해 다뤄봤다.
* GET
→ 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
→ 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
예: google.com?q=북극곰
* POST
→ 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
→ 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달
미니 프로젝트 - 화성땅 공동구매
pymongo 코드 요약
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.zhjkwrn.mongodb.net/Cluster?retryWrites=true&w=majority')
db = client.dbsparta
# 'user'는 db 이름
# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)
# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})
# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))
# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
# 지우기 - 예시
db.users.delete_one({'name':'bobby'})
app.py 코드
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.zhjkwrn.mongodb.net/Cluster?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/mars", methods=["POST"])
def web_mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
doc = {
'name': name_receive,
'address': address_receive,
'size': size_receive
}
db.mars.insert_one(doc)
return jsonify({'msg': '주문 완료!'})
@app.route("/mars", methods=["GET"])
def web_mars_get():
order_list = list(db.mars.find({}, {'_id': False}))
return jsonify({'orders': order_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
html 코드 중 script 부분
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size = rows[i]['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
$('#order-box').append(temp_html)
}
}
});
}
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
$.ajax({
type: 'POST',
url: '/mars',
data: {name_give: name, address_give: address, size_give: size},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
</script>
- html 코드 중 function save_order(), 파이썬 코드 중 @app.route("/mars", methods=["POST"])를 보면
클라이언트에서 .val() 함수로 이름, 주소, 평수의 입력값을 각각 name_give, address_give, size_give 으로 받아 서버에 넘겨주면 서버에서 이 값들을 각각 name_receive, address_name_receive, size_name_receive 에 저장하고 'mars' 라는 db에 저장한다.
- html 코드 중 function show_order(), 파이썬 코드 중 @app.route("/mars", methods=["GET"])를 보면
클라이언트에서 입력된 값들을 보여주기 위해 GET 방식으로 서버에서 db에 저장된 값들을 모두 받아 화면에 띄어준다.
'항해99 > 웹개발 종합반' 카테고리의 다른 글
| 1주차 - HTML 태그 (0) | 2022.09.05 |
|---|---|
| 3주차 - 파이썬 패키지 사용 & 크롤링 (0) | 2022.09.01 |
| 2주차 - JQuery, Ajax (0) | 2022.08.29 |
| 1주차 - HTML, CSS (0) | 2022.08.28 |
| 웹개발 종합반 1주차 숙제: 팬명록 메인 페이지 만들기 (0) | 2022.08.28 |
댓글