< 1. POST연습 (기록하기) >
1. 요청 정보 : URL= /bucket, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : bucket
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)
서버에 보내줄 내용(입력내용)은 bucket 단 하나뿐!
그러나 서버에서는 번호를 만들어줘야함( 몇번 버킷을 완료했는지 체크해야하기때문 )
→ 따라서 서버로 bucket 정보를 보내면서 번호를 만들어주기!- 서버만들기 (app.py의 POST 부분 작성)
1) 기본 골격
@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST(기록) 연결 완료!'})
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST(완료) 연결 완료!'})2) 기록하기 부분작성
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
↑ 먼저 입력자에게서 받아올 것 목록 만들어주기
↓ db 저장예시 복붙해서 db로 보낼 목록 작성하기
☆ 받아오는건 하나지만, 보낼 목록은 번호, 버킷, 진행중여부 이렇게 3개보내야함!
doc = {
'number': (아직 모름)
'bucket':bucket_receive --> db에 bucket이라는 항목이름으로 bucket_receive를 받아서 넣겠다
'done': (아직 모름)
}
db.bucketlist.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
** number 작성하는법
: number는 기존 db에 존재하는 데이터 수 +1로 입력되면 됨
첫째. db 여러개찾기예시 복붙 및 작성
all_users = list(db.users.find({},{'_id':False}))
→ 작성 bucket_list = list(db.bucketlist.find({}, {'_id': False}))
---> db에 있는 버킷리스트를 전부 찾기 기능 완료
이제 이 리스트의 개수를 세야함 ---파이썬 리스트 개수세기 구글링!
둘째. 구글링한 함수 이용해서 위에서 찾아낸 리스트의 개수 세기
count = len(bucket_list) + 1
이렇게 작성해준 코드
<임시완성>
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_list = list(db.bucketlist.find({}, {'_id': False}))
count = len(bucket_list) + 1
doc = {
'number':count,
'bucket':bucket_receive,
'done':0 --- done의 기본세팅은 완료되지않음(0)으로 함
}
db.bucketlist.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
- 클라이언트 만들기(index.html의 POST부분 작성)
1)기본 골격
function save_bucket(){
$.ajax({
type: "POST",
url: "/bucket",
data: {sameple_give:'데이터전송'},
success: function (response) {
alert(response["msg"])
}
});
}
function done_bucket(num){
$.ajax({
type: "POST",
url: "/bucket/done",
data: {sameple_give:'데이터전송'},
success: function (response) {
alert(response["msg"])
}
});
} 2) 저장부분 작성
function save_bucket(){
let bucket = $('#bucket').val() → 가져올 정보가 어디에 무슨id로 존재하는지 확인 후 작성하기
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give:bucket}, → bucket_give에 위에서 let으로 설정한 bucket을 넣을 것이다
success: function (response) {
alert(response["msg"])
window.location.reload() → 로딩 후 새로고침
}
});
}
< 2. GET연습 (보여주기) >
1. 요청 정보 : URL= /bucket, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기- 서버 만들기 (app.py의 GET 부분 작성)
1) 기본골격
@app.route("/bucket", methods=["GET"])
def bucket_get():
return jsonify({'msg': 'GET 연결 완료!'})
2) 전체 리스트 불러오도록 작성
- db 여러개찾기예시 복붙 및 작성
all_users = list(db.users.find({},{'_id':False}))
→ 작성 bucket_list = list(db.bucketlist.find({}, {'_id': False}))
<완성 코드>
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucketlist.find({}, {'_id': False}))
return jsonify({'buckets': bucket_list})
---> buckets라는 이름으로 bucket_list를 클라로 내려주겠다
- 클라이언트 만들기 (index.html의 GET부분 작성)
1) 기본 골격
$(document).ready(function () {
show_bucket();
});
function show_bucket(){
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
alert(response["msg"])
}
});
}2) 보여주기부분 작성
먼저, 얼럿 지우고 콘솔 먼저 찍어서 buckets가 잘 내려오는지 확인
console.log(response['buckets'])
이제 작성 시작함
<script>
function show_bucket(){
$('#bucket-list').empty()
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response['buckets']
for (let i = 0; i < rows.length; i++) {
let bucket = rows[i]['bucket']
let num = rows[i]['num']
let done = rows[i]['done']
*** ↑ 입력될 내용들 설정해주기
*** ↓ temp_html 설정(done인경우와 아닌경우를 if문으로 정리)
let temp_html = ``
if (done == 0) {
temp_html = `<li>
<h2>✅ ${bucket}</h2>
<buttontoken interpolation">${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)
}
}
});
}
</script>< 3. POST연습 (완료하기) >
1. 요청 정보 : URL= /bucket/done, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : num (버킷 넘버)
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)- 서버 만들기
1) 기본 골격
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST(완료) 연결 완료!'})2) 넘버 보내줄 부분 작성
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
number_receive = request.form['number_give'] ---> 받아올 넘버정보로 설정해주고,
db.users.update_one({'name': 'bobby'}, {'$set': {'age': 19}}) --->업데이트를 해줘야하므로 DB 바꾸기예시 가져오기
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
number_receive = request.form['number_give']
db.bucketlist.update_one({'number': number_receive}, {'$set': {'done': 1}})
---> 넘버를 받아오고, done값을 0에서 1로 바꿔줘야함
** 그런데 여기서 주의!!
DB에서 받아오는 number 값이 "숫자"임!! "문자"가아니라!! 그래서 문자인 number_receive를 숫자로 바꾸어줘야함
number_receive -> int(number_receive)
< 완성 코드 >
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
number_receive = request.form['number_give']
db.bucketlist.update_one({'number': int(number_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷 완료!'})
- 클라이언트 만들기
function done_bucket(number){
$.ajax({
type: "POST",
url: "/bucket/done",
data: {number_give:number}, ---> 넘버는 태어날때부터 가지고 태어나게끔 우리가 설정해주었기때문에 number를 받아와서 그대로 number_give에 넣어주기
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
Front-End 개발자