1) 프로젝트 폴더(BUCKET) 생성
2) 프로젝트 폴더 안에 app.py 파일 생성
3) 가상환경(venv) 만들고 활성화
4) 패키지 설치 (flask, pymongo, dnspython, requests, bs4,)
pip install flask pymongo dnspython requests bs4(여러 개를 설치할 때는 띄어쓰기로 구분)
5) templates 폴더 생성 하고 index.html 파일 생성
bucket 폴더 구조
- - -
bucket
|— venv
|— app.py (서버)
|— templates
|— index.html (클라이언트 파일)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__) # flask application을 생성하는 코드
@app.route('/')
def home():
return render_template('index.html')
# @app : .route('/')에 표시된 해당 앱 도메인을 방문할 때마다 home()함수를 실행하라.
# @app.route('/') : 해당 앱의 URL을 함수/기능에 쉽게 할당하기 위해 Flask가 제공하는 Python 데코레이터
@app.route("/bucket", methods=["POST"]) # URL= /bucket, 요청 방식 = POST
def bucket_post():
sample_receive = request.form['sample_give'] # 클라(fetch) → 서버(flask) : URL bucket에 데이터를 담아 보냄.
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'}) # 서버(flask) → 클라(fetch) : 메시지 데이터를 보냄
@app.route("/bucket", methods=["GET"])
def bucket_get():
return jsonify({'msg': 'GET 연결 완료!'})
<script>
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
console.log(data)
alert(data["msg"]); # 서버(flask) → 클라(fetch) : 메시지를 보냄
})
}
function save_bucket() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => { # 클라(fetch) → 서버(flask) : bucket
alert(data["msg"]);
window.location.reload();
});
}
</script>
</head>
<body>
<div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<div class="mybox">
<div class="mybucket">
<input
id="bucket"
class="form-control"
type="text"
placeholder="이루고 싶은 것을 입력하세요"
/>
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
</li>
</div>
</body>
</html>
$(document).ready(function () {
show_bucket();
});
→ 문서가 준비되면 show_bucket()함수가 불려온다.
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
console.log(data)
alert(data["msg"]);
})
@app.route("/bucket", methods=["GET"])
def bucket_get():
return jsonify({'msg': 'GET 연결 완료!'})
→ API /bucket에서 데이터를 가져와서 데이터를 json형식으로 내려준다.
→ fetch를 통해서 서버가 API /bucket에서 받아온 데이터를 가져와서 alert로 띄운다.
}
function save_bucket() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
→ '기록하기' 버튼을 누르면 formData에 'sample_give'라는 이름으로 "샘플데이터"의 형태로 데이터를 담아준 후 서버로 보내줌.
→ 서버는 클라이언트로부터 'sample_give'라는 데이터를 받아와서 프린트하고 클라이언트로 데이터를 msg('POST 연결 완료!) 형태로 내려준다.
→ 클라이언트는 fetch로 서버로부터 내려온 데이터의 메시지부분을 alert로 띄우고 새로고침(API /bucket에 갱신된 모든 데이터를 받아와서 출력) 한다.
/bucket
, 요청 방식 = POST
bucket
2-1) 데이터베이스에 연결
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.wop0dox.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
2-2) 클라이언트로부터 bucket 정보(bucket_give)를 받아서, 저장(bucket_receive)
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give'] # bucket 정보를 받아서,
doc = {
'bucket' : bucket_receive # 이런 형태로
}
db.bucket.insert_one(doc) # db에 저장
return jsonify({'msg': '저장 완료!'}) # json형식으로 이런 데이터를 내려줌.
function save_bucket() {
let bucket = $("#bucket").val(); # bucket 정보를
let formData = new FormData();
formData.append("bucket_give", bucket); # formData에 데이터를 넣고
fetch('/bucket', {method: "POST", body: formData,}).then((res) => res.json()).then((data) => { # API /bucket으로 보내주고
alert(data["msg"]); # 서버에서 내려준 메시지 데이터를 alert로 띄움.
window.location.reload(); # 저장되면, 새로고침을 해서 다시 보여줄 준비
});
}
1) 데이터 명세 (데이터 조회는 GET)
/bucket
, 요청 방식 = GET
2) 서버(app.py)
@app.route("/bucket", methods=["GET"])
def bucket_get():
all_buckets = list(db.bucket.find({}, {'_id': False}))
return jsonify({'result': all_buckets})
# 받을 것 없이 bucket 에 버킷리스트를 담아서 내려주기만 하면 됨.
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result']
$('#bucket-list').empty() # 기존 html 코드들을 지워줄 수 있도록 empty()
rows.forEach((a) => { # 버킷리스트는 말 그대로 리스트 형식 forEach문으로 반복하면서 데이터를 뽑아냄.
let bucket = a['bucket']
let temp_html = `<li>
<h2>✅ ${bucket}</h2>
</li>`
$('#bucket-list').append(temp_html) # 가져온 데이터를 temp_html로 뼈대에 데이터를 담아 제이쿼리로 append
})
})
}
서버(app.py)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.wop0dox.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
doc = {
'bucket' : bucket_receive
}
db.bucket.insert_one(doc)
return jsonify({'msg': '저장 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
all_buckets = list(db.bucket.find({}, {'_id': False}))
return jsonify({'result': all_buckets})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
클라이언트(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+Dodum&display=swap"
rel="stylesheet"
/>
<title>인생 버킷리스트</title>
<style>
* {
font-family: "Gowun Dodum", sans-serif;
}
.mypic {
width: 100%;
height: 200px;
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypic > h1 {
font-size: 30px;
}
.mybox {
width: 95%;
max-width: 700px;
padding: 20px;
box-shadow: 0px 0px 10px 0px lightblue;
margin: 20px auto;
}
.mybucket {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.mybucket > input {
width: 70%;
}
.mybox > li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 10px;
min-height: 48px;
}
.mybox > li > h2 {
max-width: 75%;
font-size: 20px;
font-weight: 500;
margin-right: auto;
margin-bottom: 0px;
}
.mybox > li > h2.done {
text-decoration: line-through;
}
</style>
<script>
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result']
$('#bucket-list').empty()
rows.forEach((a) => {
let bucket = a['bucket']
let temp_html = `<li>
<h2>✅ ${bucket}</h2>
</li>`
$('#bucket-list').append(temp_html)
})
})
}
function save_bucket() {
let bucket = $("#bucket").val();
let formData = new FormData();
formData.append("bucket_give", bucket);
fetch('/bucket', {method: "POST", body: formData,}).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
</script>
</head>
<body>
<div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<div class="mybox">
<div class="mybucket">
<input
id="bucket"
class="form-control"
type="text"
placeholder="이루고 싶은 것을 입력하세요"
/>
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
</li>
</div>
</body>
</html>