728x90
320x100
준비하기
**익숙해져야 할 패턴**
더보기
1. 파이썬 가상환경 활성화 : app.py 만들고 터미널에 python -m venv venv
2. HTML 준비 : ./templates 폴더 생성 > ./templats/index.html 파일 생성
3. 가상환경에 flask 프레임워크 설치 : $ pip install flask
4. 데이터베이스 준비 : $ pip install pymongo,$ pip install dnspython
app.py 준비하기
#./venv/app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route("/mars", methods=["POST"])
def mars_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg':'POST 연결 완료!'})
@app.route("/mars", methods=["GET"])
def mars_get():
return jsonify({'msg':'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)index.html 준비하기
<!--./templates/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet" />
<title>선착순 공동구매</title>
<style>
* {
font-family: "Gowun Batang", serif;
color: white;
}
body {
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg");
background-position: center;
background-size: cover;
}
h1 {
font-weight: bold;
}
.order {
width: 500px;
margin: 60px auto 0px auto;
padding-bottom: 60px;
}
.mybtn {
width: 100%;
}
.order>table {
margin: 40px 0;
font-size: 18px;
}
option {
color: black;
}
</style>
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
fetch('/mars').then((res) => res.json()).then((data) => {
console.log(data)
alert(data['msg'])
})
}
function save_order() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
console.log(data);
alert(data["msg"]);
});
}
</script>
</head>
<body>
<div class="mask"></div>
<div class="order">
<h1>화성에 땅 사놓기!</h1>
<h3>가격: 평 당 500원</h3>
<p>
화성에 땅을 사둘 수 있다고?<br />
앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
</p>
<div class="order-info">
<div class="input-group mb-3">
<span class="input-group-text">이름</span>
<input id="name" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">주소</span>
<input id="address" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="size">평수</label>
<select class="form-select" id="size">
<option selected>-- 주문 평수 --</option>
<option value="10평">10평</option>
<option value="20평">20평</option>
<option value="30평">30평</option>
<option value="40평">40평</option>
<option value="50평">50평</option>
</select>
</div>
<button onclick="save_order()" type="button" class="btn btn-warning mybtn">
주문하기
</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">주소</th>
<th scope="col">평수</th>
</tr>
</thead>
<tbody id="order-box">
<tr>
<td>홍길동</td>
<td>서울시 용산구</td>
<td>20평</td>
</tr>
<tr>
<td>임꺽정</td>
<td>부산시 동구</td>
<td>10평</td>
</tr>
<tr>
<td>세종대왕</td>
<td>세종시 대왕구</td>
<td>30평</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>POST
데이터 명세
1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라(fetch) → 서버(flask) : name, address, size
3. 서버(flask) → 클라(fetch) : 메시지를 보냄 (주문 완료!)
클라이언트와 서버 연결 확인하기
서버 만들기
이제 서버가 우리가 원하는 정보를 받아올 수 있도록 app.py 파일을 수정한다.
sample 대신에 name, address, size로 바꿔주면 된당.
그리고 받아온 정보를 저장하기 위해 데이터베이스에 연결도 하자!
# ./venv/app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
# DB연결
from pymongo import MongoClient
client = MongoClient('DB url')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/mars", methods=["POST"])
def 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 mars_get():
return jsonify({'msg':'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)클라이언트 만들기
위 정보들을 html에서 가져올 수 있도록(클라이언트가 서버로 보낼 수 있도록) index.html 파일도 수정해주자
save_order 함수를 수정하면 되겠지?
// ./templates/index.htmL
function save_order() {
// 사용자 입력값 가져오기 (JQuery)
// input id="name"
let name = $("#name").val();
// input id="address"
let address = $("#address").val();
// input id="size"
let size = $("#size").val();
let formData = new FormData();
formData.append("name_give", name);
formData.append("address_give", address);
formData.append("size_give", size);
fetch('/mars', {
method: "POST",
body: formData
})
.then((res) => res.json())
.then((data) => {
alert(data["msg"]);
// 새로고침
window.location.reload();
});
}확인하기
잘 작동하는지 확인해 볼 차례!
데이터를 입력하고 주문하기를 누르면 alert까지 잘 작동하는 것을 확인할 수 있고,
mongoDB 내에 데이터가 잘 저장된 것도 확인할 수 있다!
GET
이제 저장된 주문 데이터를 화면에도 출력해 볼 차례이다. READ!
언제 읽을까?
# ./venv/app.py
@app.route("/mars", methods=["GET"])
def mars_get():
return jsonify({'msg': 'GET 연결 완료!'})▲서버 app.py
ready! 페이지가 로드되면 show_order 함수 실행!
1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(fetch) → 서버(flask) : 없음
3. 서버(flask) → 클라(fetch) : 전체 주문을 보내주기
서버 만들기
이번엔 우리가 원하는 정보를 DB에서 읽어올 수 있도록 app.py 파일을 수정한다.
# ./venv/app.py
@app.route("/mars", methods=["GET"])
def mars_get():
mars_data = list(db.mars.find({},{'_id':False})) # DB에서 여러 데이터 한번에 가져오기
return jsonify({'result':mars_data}) # 데이터 내려주기클라이언트 부분을 수정하기 전에 데이터가 잘 들어오는지 확인하기 위해
console.log(data) 로 실행해보면
리스트 형태로 데이터가 잘 들어온 것을 확인할 수 있다!
이제 들어온 데이터를 페이지에 붙여보자
클라이언트 만들기
// ./templates/index.html
$(document).ready(function () {
show_order();
});
function show_order() {
fetch('/mars')
.then((res) => res.json())
.then((data) => {
let rows = data['result'] //들어온 list 데이터 받아오기
$('#order-box').empty() // 기존 것 지우기
rows.forEach((a)=>{ // 몇번이나 연습했던 리스트 속 데이터 하나씩 찍어주기
let name = a['name']
let address = a['address']
let size = a['size']
let temp_html = `
<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>
`
$('#order-box').append(temp_html)
})
})
}
확인하기
완료한 후 페이지를 새로고침하면, 목록이 DB에 저장된 값으로 업데이트 된 것을 확인할 수 있다.
전체 코드
# ./venv/app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
# DB연결
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.q4j284y.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/mars", methods=["POST"])
def 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 mars_get():
mars_data = list(db.mars.find({},{'_id':False})) # DB에서 여러 데이터 한번에 가져오기
return jsonify({'result':mars_data}) # 데이터 내려주기
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)<!-- ./templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet" />
<title>선착순 공동구매</title>
<style>
* {
font-family: "Gowun Batang", serif;
color: white;
}
body {
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg");
background-position: center;
background-size: cover;
}
h1 {
font-weight: bold;
}
.order {
width: 500px;
margin: 60px auto 0px auto;
padding-bottom: 60px;
}
.mybtn {
width: 100%;
}
.order>table {
margin: 40px 0;
font-size: 18px;
}
option {
color: black;
}
</style>
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
fetch('/mars').then((res) => res.json()).then((data) => {
let rows = data['result'] // 들어온 list 데이터 받아오기
$('#order-box').empty() // 기존 것 지우기
rows.forEach((a)=>{ // 몇번이나 연습했던 리스트 속 데이터 하나씩 찍어주기
let name = a['name']
let address = a['address']
let size = a['size']
let temp_html = `
<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>
`
$('#order-box').append(temp_html)
})
})
}
function save_order() {
// 사용자 입력값 가져오기 (JQuery)
// input id="name"
let name = $("#name").val();
// input id="address"
let address = $("#address").val();
// input id="size"
let size = $("#size").val();
let formData = new FormData();
formData.append("name_give", name);
formData.append("address_give", address);
formData.append("size_give", size);
fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
// 새로고침
window.location.reload();
});
}
</script>
</head>
<body>
<div class="mask"></div>
<div class="order">
<h1>화성에 땅 사놓기!</h1>
<h3>가격: 평 당 500원</h3>
<p>
화성에 땅을 사둘 수 있다고?<br />
앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
</p>
<div class="order-info">
<div class="input-group mb-3">
<span class="input-group-text">이름</span>
<input id="name" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">주소</span>
<input id="address" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="size">평수</label>
<select class="form-select" id="size">
<option selected>-- 주문 평수 --</option>
<option value="10평">10평</option>
<option value="20평">20평</option>
<option value="30평">30평</option>
<option value="40평">40평</option>
<option value="50평">50평</option>
</select>
</div>
<button onclick="save_order()" type="button" class="btn btn-warning mybtn">
주문하기
</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">주소</th>
<th scope="col">평수</th>
</tr>
</thead>
<tbody id="order-box">
<tr>
<td>홍길동</td>
<td>서울시 용산구</td>
<td>20평</td>
</tr>
<tr>
<td>임꺽정</td>
<td>부산시 동구</td>
<td>10평</td>
</tr>
<tr>
<td>세종대왕</td>
<td>세종시 대왕구</td>
<td>30평</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
300x250
반응형
GitHub 댓글