Bucket List
버킷리스트를 작성하고 관리하는 페이지를 만들어본다.
기본적인 프로젝트 세팅을 먼저 해준다.
venv 가상환경 설정
venv 폴더 생성 및 경로 설정
패키지 설치
필요한 패키지를 설치
pip install flask pymongo dnspython
베이스 코드를 작성한다.
# app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
return jsonify({'msg': 'GET 연결 완료!'})
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
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link
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)
),
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 => {
console.log(data)
alert(data["msg"]);
})
}
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();
});
}
</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>
데이터를 저장하고 확인하기 위해서 mongoDB atals도 로그인해 놓는다.
Flask를 실행시켜서 서버와 연결을 확인한다.
페이지 기능
페이지는 로드될 때 서버에서 버킷리스트 정보를 가지고 와서 리스트를 생성한다.
버킷리스트에 등록할 내용을 입력하고 '기록하기' 버튼을 누르면 서버에 값을 저장하고 페이지를 새로 그린다.
데이터 저장
db로 연결하기 위해서 사용할 패키지를 임포트 한다.
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@sparta.lls2xk0.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
그리고 전달받은 데이터를 db에 저장하는 기능을 구현한다.
@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': '저장 완료!'})
클라이언트에서 입력한 값을 서버로 전달하는 기능을 호출하고 값을 전송한다.
function save_bucket() {
let bucket = $('#bucket').val();
let formData = new FormData();
formData.append("bucket_give", bucket);
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
localhost:5000 페이지에 접속해서 데이터를 입력하고 저장해 본다.
그리고 DB에도 값이 잘 저장되었는지 확인해 본다.
클라이언트-서버 연결 및 db에 데이터 저장하는 기능이 이상 없이 동작한다.
데이터 가져오기
서버에서 DB에 저장된 데이터를 가져온다.
@app.route("/bucket", methods=["GET"])
def bucket_get():
all_buckets = list(db.bucket.find({},{'_id':False}))
return jsonify({'result': all_buckets})
클라이언트에서는 서버의 함수를 호출하고 가져온 데이터로 html을 생성한다.
$(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);
})
})
}
페이지가 로드될 때 호출되는 show_bucket 함수에서 데이터를 가져오고 리스트를 생성한다.
완성
'스파르타 > Web' 카테고리의 다른 글
| [Web] og 태그 활용 - ( week 5 ) (0) | 2023.05.01 |
|---|---|
| [Web] 팬명록 페이지 - ( week 5 ) (0) | 2023.05.01 |
| [Web] 숙제 별점 반영하기 - ( week 4 ) (0) | 2023.04.25 |
| [Web] 스파르타피디아 - ( week 4 ) (0) | 2023.04.25 |
| [Web] 화성땅 구매 - ( week 4 ) (0) | 2023.04.25 |
