웹개발 종합반 4주차 개발일지

by

왜 3주차 개발 로그가 없는지… 3주차 확인하려다가 깜빡했네요…

그럼 4주차 개발일지인가요?

4주 차에는 프런트엔드와 백엔드를 연결하는 방법을 배웠습니다.

(이것은 API입니다)

그래서 index.html(프론트엔드)과 app.py(백엔드)를 연결하는 방법을 공부했습니다.

'추천 관련글,

1. 화성토지 공동매수사업

-index.html

<스크립트>
$(문서).준비가 된(기능 () {
show_order();
});
기능 show_order() {
가져오다(‘/마스’ http://chrystal-mylife.m/).그 다음에((입술) => 입술.json()).그 다음에((데이터) => {
허용하다 행 = 데이터(‘결과’ http://chrystal-mylife.m/)
$(‘#오더박스’http://chrystal-mylife.m/).비어 있는()
행.모든((ㅏ) => {
허용하다 성 = ㅏ(“이름” http://chrystal-mylife.m/)
허용하다 주소 = ㅏ(‘주소’ http://chrystal-mylife.m/)
허용하다 크기 = ㅏ(‘사이즈’http://chrystal-mylife.m/)

허용하다 temp_html = `

${성}

${주소}

${크기}

`

$(‘#오더박스’http://chrystal-mylife.m/).붙이다(temp_html)
})
})
}
기능 save_order() {
허용하다 성 = $(‘#이름’ http://chrystal-mylife.m/).값()
허용하다 주소 = $(‘#주소’ http://chrystal-mylife.m/).값()
허용하다 크기 = $(‘#사이즈’http://chrystal-mylife.m/).값()

허용하다 양식 데이터 = 새로운 양식 데이터();
양식 데이터.붙이다(“name_give”http://chrystal-mylife.m/, 성);
양식 데이터.붙이다(“address_give” http://chrystal-mylife.m/, 주소);
양식 데이터.붙이다(“size_give” http://chrystal-mylife.m/, 크기);

가져오다(‘/마스’ http://chrystal-mylife.m/{ 방법: “포스트” http://chrystal-mylife.m/, 몸: 양식 데이터 }).그 다음에((입술) => 입술.json()).그 다음에((데이터) => {
경보(데이터(“msg” http://chrystal-mylife.m/));
창문.위치.재장전()
});
}
스크립트>
– app.py
@app.route(“/mars” http://chrystal-mylife.m/, 행동 양식=(“포스트” http://chrystal-mylife.m/))
데프 mars_post():
name_receive = 요청.양식(‘name_give’ http://chrystal-mylife.m/)
address_receive = 요청.양식(‘address_give’http://chrystal-mylife.m/)
size_receive = 요청.양식(‘size_give’ http://chrystal-mylife.m/)


문서 = {
‘이름’http://chrystal-mylife.m/:name_receive,
‘주소’ http://chrystal-mylife.m/:주소_수신,
‘사이즈’http://chrystal-mylife.m/:size_receive
}
db.mars.insert_one(문서)


돌려 주다 jsonify({‘msg’http://chrystal-mylife.m/:“저장했습니다.

” http://chrystal-mylife.m/})


@app.route(“/mars” http://chrystal-mylife.m/, 행동 양식=(“GET” http://chrystal-mylife.m/))
데프 mars_get():
mars_data = 목록(db.mars.find({},{‘_id’ http://chrystal-mylife.m/:잘못된}))
돌려 주다 jsonify({‘결과’ http://chrystal-mylife.m/:mars_data})

2. 스파르타피디아

-index.html

<스크립트>
$(문서).준비가 된(기능 () {
상장();
});

기능 상장() {
가져오다(‘/영화’ http://chrystal-mylife.m/).그 다음에((입술) => 입술.json()).그 다음에((데이터) => {
허용하다 행 = 데이터(‘결과’ http://chrystal-mylife.m/)
$(‘#카드박스’ http://chrystal-mylife.m/).비어 있는()
행.모든((ㅏ) => {
허용하다 논평 = ㅏ(댓글’ http://chrystal-mylife.m/)
허용하다 제목 = ㅏ(‘제목’ http://chrystal-mylife.m/)
허용하다 내림차순 = ㅏ(‘내역’ http://chrystal-mylife.m/)
허용하다 그림 = ㅏ(‘이미지’ http://chrystal-mylife.m/)
허용하다 별 = ㅏ(‘스타’ http://chrystal-mylife.m/)

허용하다 star_repeat = ” http://chrystal-mylife.m/.반복하다(별)

허용하다 temp_html = `

${그림}“
클래스=”카드-IMG-탑”>

${제목}

${내림차순}

${star_repeat}

${논평}

`

$(‘#카드박스’ http://chrystal-mylife.m/).붙이다(temp_html)
})
})
}

기능 우편() {
허용하다 URL = $(‘#url’http://chrystal-mylife.m/).값()
허용하다 논평 = $(‘#댓글’ http://chrystal-mylife.m/).값()
허용하다 별 = $(‘#스타’ http://chrystal-mylife.m/).값()

허용하다 양식 데이터 = 새로운 양식 데이터();
양식 데이터.붙이다(“url_give” http://chrystal-mylife.m/, URL);
양식 데이터.붙이다(“comment_give” http://chrystal-mylife.m/, 논평);
양식 데이터.붙이다(“star_give” http://chrystal-mylife.m/, 별);

가져오다(‘/영화’ http://chrystal-mylife.m/{ 방법: “포스트” http://chrystal-mylife.m/, 몸: 양식 데이터 }).그 다음에((입술) => 입술.json()).그 다음에((데이터) => {
경보(데이터(‘msg’http://chrystal-mylife.m/))
창문.위치.재장전()
})
}

기능 열린 상자() {
$(‘#우편함’ http://chrystal-mylife.m/).보여주다()
}
기능 close_box() {
$(‘#우편함’http://chrystal-mylife.m/).숨다()
}
스크립트>
– app.py
@아파트.노선(“/영화” http://chrystal-mylife.m/, 행동 양식=(“포스트” http://chrystal-mylife.m/))
데프 영화 기여():
url_receive = 문의.모양(‘url_give’http://chrystal-mylife.m/)
comment_received = 문의.모양(‘comment_give’http://chrystal-mylife.m/)
star_receive = 문의.모양(‘star_give’http://chrystal-mylife.m/)
헤더 = {‘유저에이전트’ http://chrystal-mylife.m/ : ‘Mozilla/5.0(Windows NT 10.0; Win64; x64)AppleWebKit/537.36(Gecko와 같은 KHTML) Chrome/73.0.3683.86 Safari/537.36″http://chrystal-mylife.m/}
데이터 = 요청.받다(url_receive,헤더=헤더)


국 = 좋은 수프(데이터.텍스트, ‘html.parser’http://chrystal-mylife.m/)


ogTitle = 국.하나를 선택(‘meta(property=”og:title”)”http://chrystal-mylife.m/)(‘콘텐츠’http://chrystal-mylife.m/)
오그베즈 = 국.하나를 선택(‘meta(property=”og:description”)”http://chrystal-mylife.m/)(‘콘텐츠’http://chrystal-mylife.m/)
OG 그림 = 국.하나를 선택(‘meta(property=”og:image”)”http://chrystal-mylife.m/)(‘콘텐츠’http://chrystal-mylife.m/)


문서 = {
‘제목’http://chrystal-mylife.m/: ogTitle,
‘설명’http://chrystal-mylife.m/: 오그베즈,
‘이미지’ http://chrystal-mylife.m/: OG 사진,
댓글’ http://chrystal-mylife.m/: comment_received,
‘스타’ http://chrystal-mylife.m/: star_receive
}
DB.영화 산업.삽입_하나(문서)


돌려 주다 jsonify({‘msg’http://chrystal-mylife.m/:“구했다!
” http://chrystal-mylife.m/})


@아파트.노선(“/영화” http://chrystal-mylife.m/, 행동 양식=(“GET” http://chrystal-mylife.m/))
데프 movie_get():
모든 영화 = 목록(DB.영화 산업.찾다({},{‘_id’http://chrystal-mylife.m/:잘못된}))
돌려 주다 jsonify({‘결과’ http://chrystal-mylife.m/:모든 영화})

저는 두 개의 미니 프로젝트를 진행했으며 여기 제가 배운 내용이 요약되어 있습니다!

백엔드의 index.html 외에도 2개의 API가 있습니다.

POST 요청 및 GET 요청.

POST 요청은 저장용이고 GET 요청은 데이터 로드용인 것 같습니다.

여전히 매우 혼란스럽습니다.

하지만 나중에 이 코드를 살펴보고 완전히 이해해 봅시다!

강의 4주차가 끝났습니다~ (개인적으로 4주차도 힘들었지만 직접 페이지를 만들어보니 재미있었던 것 같습니다.

)