Script
웹개발 종합반 4주차 본문
1.flask
flask란?
flask란 Python의 웹 프레임워크이다. (서버를 쉽게 만들게 해주는 기능이다.)
이를 이용하여 서버를 만들어 사용해 볼 것이다.
flask로 서버 만들기
1.flask 패키지를 설치해준다.
2. flask 시작코드
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'Hello World!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)통상적으로, flask 서버를 돌리는 파일은 app.py라고 이름 지으니 참고하자.
3.실행 후 http://localhost:5000/ 접속
4.Hello Worid!라는 문구가 보이면 성공한것.
+서버 종료시에는 터미널창 클릭 후 ctrl + c
++) url 나누는법
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello World!' #http://localhost:5000/ 접속시 Hello World! 출력
@app.route('/mypage')
def mypage():
return 'This is My Page!' #http://localhost:5000/mypage 접속시 This is My Page! 출력
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
flask에 HTML 파일 주기
flask 서버를 만들 때는 항상, 프로젝트 폴더안에
static 폴더 (이미지, css파일을 담아두고, 불러오는 역할)
templates 폴더 (html파일을 담아두고, 불러오는 역할)
app.py 파일
이렇게 세개를 만들어 두고 시작한다.
(venv 파일은 생성 후 건드리지 말 것)
1.templates 폴더 안에 html 파일을 만든다.
2.html 파일 불러오기 ( flask의 render_templates라는 내장함수를 이용)
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안된다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)페이지에서 index.html 안의 코드가 실행된다.
2. GET과 POST
토이 프로젝트 : 화성땅 공동 구매
다음과 같은 웹페이지를 만들어 이름, 주소, 평수를 입력하면 아래 표에 하나씩 추가되는
기능을 구현했다.
패키지는 flask, pymongo, dnspython을 설치해주도록 하자.
html에서 script부분 (Front End)
<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>
app.py (Back End)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.1ople.mongodb.net/cluster0?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)
위 코드를 분석하여 백엔드와 프론트엔드가 GET과 POST를 이용하여 어떻게 데이터를 주고받는지 공부해 보자.
1.POST (주문을 저장하기)
데이터를 생성,변경,삭제할때는 POST
요청 정보 : URL= /mars, 요청 방식 = POST
클라(ajax) → 서버(flask) : name, address, size
서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)
POST에 해당하는 Back 단의 코드
@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': '주문완료!'})
POST에 해당하는 Front 단의 코드
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()
}
});
}
먼저 save_order라는 함수는 주문하기 버튼을 클릭하면 실행되는 Onclick 함수이다.
따라서 사용자가 주문하기 버튼을 클릭하면 save_order 함수가 실행되고,
그 안에서 Jquery를 이용하여 사용자가 입력한 값을 가져온다.
Back 단의 request는 flask라이브러리에서 제공하는 내장함수이다.
어떤 변수명으로 프론트 단이 건넨 데이터를 받을지 정하는 것이다.
따라서 프론트단에서는 ajax를 이용하여 백단에 데이터를 넘길때
요청대로 _give라는 변수명으로 값을 바꿔 전달해 주어야 한다.
POST 타입의 데이터를 넘길때는 data{}안에 값을 넣어 전달해야한다고 3주차에서 배웠다.
따라서 data{}안에 백단에서 요청한 이름대로 바꾸어 데이터를 전달한다.
데이터를 받은 백단은 mongodb를 이용해 서버에 값을 전달한다.
여기까지 성공하면 프론트단에 msg에 들어갈 값으로 주문완료!라는 value값을 넘긴다.
(jsonify 역시 flask에서 제공하는 내장함수이다. 값을 json형식으로 변경시켜준다.)
여기까지 성공시 프론트단에서는 success의 response에서 백에서 넘겨준 msg의 value값을 넘겨받는다.
결과적으로 주문완료를 눌러 전달값이 서버에 잘 저장된다면 주문완료! 라는 알림창을
사용자는 건네받는 것이다.
2. GET(입력된 전체 데이터를 받아와 보여주기)
데이터 조회를 요청할때는 GET
1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기
GET에 해당하는 Back 단의 코드
@app.route("/mars", methods=["GET"])
def web_mars_get():
order_list = list(db.mars.find({}, {'_id': False}))
return jsonify({'orders':order_list})GET에 해당하는 Front 단의 코드
$(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)
}
}
});
}Back단에서 GET을 이용해 사용자들이 입력하여 서버에 저장되어 있는 값들을 불러온다.
성공시 orders라는 변수에 이 값들을 value 값으로 넣어 프론트에 전달한다.
Front단에서는 전달받은 orders를 가지고 이를 화면에 붙여줄 코드를 작성해야 한다.
for문과 jquery를 이용해 전달받은 order값을 사용자들에게 보여주도록 한다.
4주차 요약
4주차에서는 flask를 이용해서 서버를 만들고
이를 이용해 서버와 클라이언트가 어떤식으로 데이터를 주고 받는지에 대해 배웠다.
특히, 사용자가 직접 입력한 데이터를 POST 를 이용해 API로 만들어 서버에 넘겨 저장하는법
그리고 GET을 이용해 서버에 저장된 데이터를 받아와 이를 사용자들에게 보여주는법을 배웠다.
혼자서 백엔드와 프론트 각각의 입장에서 생각해보며 공부했다.
서버와 클라이언트 간의 상호작용을 어떤식으로 하는지에 대해 궁금했는데,
오늘 공부를 계기로 궁금증이 해소된 것 같다.
'항해99 > 사전준비' 카테고리의 다른 글
| 웹개발 종합반 5주차 (0) | 2022.07.01 |
|---|---|
| 웹개발 종합반 3주차 (0) | 2022.06.26 |
| 웹개발 종합반 2주차 (0) | 2022.06.21 |
| 웹개발 종합반 1주차 (0) | 2022.06.21 |
