해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다.
1. 클라이언트와 서버 연결 확인하기(테스트용)
GET 방식과 비슷하지만
요청 할 때 body를 추가하여 요청하는 부분이 다르다.
body를 request.form으로 받게되는 부분이 추가된다.
•
어떤 이벤트에 함수를 연결 할 지 확인
•
"기록하기" button의 onclick 이벤트로 JavaScript의 save_bucket() 함수 호출
•
JavaScript의 save_bucket()라는 함수 실행
•
formData라는 객체를 생성
•
{'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기
•
posting()내부 fetch()를 통해 '/bucket' URL에 대한 POST 방식 요청
(+ 위 formData 객체를 body로 추가하여 요청함)
•
app.py에서 '/bucket' URL의 POST 방식 요청에 대한 메서드로 접근
•
이는 bucket_post()라 선언된 함수를 실행하는데
•
request.form을 통해 ['key']에 해당되는 value를 가져오고 "sample_receive"라는 변수에 담는다.
•
print로 "sample_receive"에 담긴 값 (= value)를 출력하면 python console에 '샘플데이터'를 출력
•
이후, 연결 테스트용으로 {'msg' : 'POST 연결 완료!'} 라 하드코딩된 key, value가
•
jsonify()에 의해 json 형식의 데이터로 변환(주어진 값과 대응하는 JSON 문자열) 후 반환하고
•
반환 데이터는 첫번째 then()절의 res 인자값으로 들어감
•
JavaScript로 다시 돌아와서 첫번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환
•
해당 객체 데이터는 data라는 변수에 담기고
•
alert를 통해 key msg의 value인 'POST 연결 완료!'가 출력됨.
JavaScript
// [Create]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();
});
}
JavaScript
복사
app.py
# fetch('URL')부분, 반환값은 res로 전달.# "localhost:5001/bucket" URL POST방식 요청에 응답@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
Python
복사
'기록하기' 버튼을 누르면
Dictionary 데이터가 담긴 formData 객체가 POST 요청에 body로 담겨진 후
request.form에서 key로 value를 뽑아낸 데이터가 print(sample_receive)로 출력 되는 것을 확인 할 수 있다.
이후 jsonify로 {'msg':'POST 연결 완료!'}라는 Dictionary 데이터가 json으로 반환되고
json->res->promise(res.json)->data로 변환되며 브라우저 콘솔과 알림창에 'POST 연결 완료'가 출력되는 모습이다.
