23.06.04 - D+4, 웹개발종합 4주차
기록양식
1. 배운내용
2. 핵심내용 (개념정리)
3. 스스로 시도해본 것들(응용&검색)
4. 해결
5. 알게 된 점
6. 헷갈리거나 실수한 점
1.프론트엔드와 백엔드의 구조
(front)사용자 데이터 입력&전송 > (back)정보 저장&서버 전송 >(front)서버 데이터를 불러오기&출력
👇프로트엔드
프론트엔드 : 1.사용자가 데이터를 입력(html) 👉 2.사용자가 '클릭'과 같은 동적인 행동 = jvs통해 함수를 실행(간결함을 위해 jquery사용) 👉 3.save order(사용자가 입력한 값 = 변수로 치환) >> let 변수=$('#id(사용자 입력 값)').val() 👉 4.사용자가 입력한 값(변수)들을 formData에 얹어서 백엔드로 보냄 👉 4-1.formData.append("키","값")으로 이루어짐, 키=명찰, 값=변수 >> 키=백엔드에서 불려지는 이름 👉 5. fetch를 통해 서버로 네트워크를 보내고, 응답을 받음 👉 5-1. (/mars)라는 서버에 'post' 방식으로 formData를 전송, 그러고 나서 jvs를 텍스트 형태로 바꿔주는 json 형태로 보내고,백엔드로부터 데이타를 받으면 alert 형식으로 출력
*3. function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
*4. let formData = new FormData();
formData.append("name_give", name);
formData.append("address_give", address);
formData.append("size_give", size);
*5. fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload()👇👇백엔드
백엔드 : 웹페이지 구축을 도와줄 워크프레임 설치 > 가상환경,flask,pymongo,dnspython 👉 1.fetch에서 보낸 데이터를 받음 @app.route("/mars", methods=["POST"]) 👉 2.받은 데이터들을 requst.form[프론트 폼데이타의 '키']으로 변수들로 설정 👉 3.설정한 변수들을 doc={프론트의'id':변수} > 딕셔너리 구조로 매칭 > 서버로 저장(라이브러리 코딩삽입) 👉 4.내 서버에 변수들을 넣으면, 프론트에서 반응 👉 5.서버에 있는 여러 데이터를 보냄 >> 프론트의 jvs와 연계해서 출력
*1. @app.route("/mars", methods=["POST"])
def mars_post():
*2. name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
*3. doc={
'name':name_receive,
'address':address_receive,
'size':size_receive
}
*4. db.mars.insert_one(doc)
return jsonify({'msg':'저장완료'})
@app.route("/mars", methods=["GET"])
def mars_get():
*5. mars_data = list(db.mars.find({},{'_id':False}))
return jsonify({'result':mars_data})👇👇👇다시 프론트엔드
프론트 : 저장된 서버의 데이터를 불러와서 다시 jvs를 통해 보여줌 👉 1.웹페이지가 대기할 때, show_order를 활용 👉 2.백엔드에서 보낸 return jsonify({'result':mars_data})의 데이터를 fetch로 다시 받음 👉 3.받은 데이터를 반복문을 통해 나열하고 각각의 데이터를 변수로 지정 👉 4.변수들을 붙이고자 하는 부분'id'에 html로 착착 붙임 👉 5.jquery와 append를 활용
*1. $(document).ready(function () {
show_order();
});
function show_order() {
*2. fetch('/mars').then((res) => res.json()).then((data) => {
*3. let rows = data['result']
*5. $('#order-box').empty()
*3. rows.forEach((a)=>{
let name = a['name']
let address = a['address']
let size = a['size']
*4. let temp_html=`<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
*5. $('#order-box').append(temp_html)
})
})
}
- 개념 자체를 이해하고, 그 개념속에서 코드의 기능을 적용해야 이해가 된다.
- dictionary 형태는 ':' 키 : 값으로, '=' 변수 설정할 때 사용
- 동적인 행동 : jvs,jquery 로 명령 / json은 script를 텍스트 형태로 치환
- 클라이언트(주문요청) >> 서버(요청한 데이터를 내려줌)
