728x90
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.84m7k3d.mongodb.net/Cluster0?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']
bucket_find = list(db.bucket.find({}, {'_id': False}))
count = len(bucket_find) + 1
# 3가지 정보: 메세지, 완료여부, 번호
doc = {
'bucket': bucket_receive,
'num': count,
'done': 0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form['num_give']
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷리스트 완료!'})
# 서버에서 다 문자로 받기 때문에 숫자는 숫자로 변경해줘야한다.
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'buckets':bucket_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</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() {
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response['buckets']
for (let i = 0; rows.length; i++) {
let num = rows[i]['num']
let bucket = rows[i]['bucket']
let done = rows[i]['done']
let temp_html = ``
if (done == 0) {
temp_html =
`<li>
<h2>✅${bucket}</h2>
<button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
</li>`
} else {
temp_html = `<li>
<h2 class="done">✅${bucket}</h2>
</li>`
}
$(`#bucket-list`).append(temp_html)
}
}
});
}
function save_bucket() {
let bucket = $(`#bucket`).val()
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
function done_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/done",
data: {num_give: num},
success: function (response) {
alert(response["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">
</div>
</body>
</html>1. 처음에 완료 버튼을 눌러도 밑줄이 그어지지 않아 헤메다가, .mybox>li>h2.done { 에서 done이 쓰이지 않는 선택자라해서 지워도 밑줄 생성 안됨
2. h2 class가 h2 className= "done"으로 되어있어 Name을 지워봄 (나중에 다시 해보니 이게 원인)
3.막막해서 css 선택자를 검색해보니 ajax에서 $() 안 인수는 큰따옴표를 사용해야한다는 글을 보고 그대로 실행 후 확인
4. 2,3번을 같이 했더니 문제 해결??
5. 3번과 2번을 번갈아가며 되돌려보니 2번이 문제였더라...
6. 나는 그걸 건드린 적이 없고, 주어진 코드를 갖다 적어 그랬으니, 다시 원본 코드를 가져와봤다. 근데 이게 웬일?
원본 코드는 처음부터 className이 아니고 class로 적혀있다. ?!
나 무슨 일을 겪은거지..
728x90
'개발공부 > 파이썬🍌' 카테고리의 다른 글
| 파이썬을 이용한 데이터 사이언스 구현 : Yahoo Finance를 활용한 주식정보, 주가 크롤링 (1) | 2024.11.08 |
|---|---|
| 깔끔한 파이썬 - 탄탄한 백엔드 (1) (0) | 2023.06.03 |
| 노마드 코더 파이썬 job scrapper: 언어를 react로 했더니 오류 (0) | 2022.10.13 |
| 노마드 코더 파이썬 기초강의: 파이썬으로 웹 스크래퍼 만들기 (0) | 2022.10.12 |