로컬개발환경
클라우드환경
Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다.
flask 서버를 돌리는 파일은 app.py라고 이름 짓습니다!
html 파일 불러오기 : flask 내장함수 render_template를 이용합니다.
from flask import Flask, render_template
GET, POST 방식
GET → 데이터 조회(Read) 요청할 때
예) 영화 목록 조회
→ 데이터 전달할 때 :
URL 뒤에 물음표를 붙여 key=value로 전달
) google.com?q=북극곰
POST → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
→ 데이터 전달할 때 :
바로 보이지 않는 HTML body에 key:value 형태로 전달
* META 태그란?
URL만 입력했는데, 자동으로 불러와지는 부분들 : 'meta'태그를 크롤링 함으로써 공통적으로 얻을 수 있다.
mongoDB / HTML CSS JS / 서버를 만든다!
-> 내 컴퓨터에서 만들고 내컴퓨터에서 테스트해본다 = 로컬개발환경
flask 프레임워크 : 서버를 만들수있는 프레임워크
(서버를 구동시켜주는 편한 코드 모음)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return 'This is mypage!!!'
localhost:5000/mypage
<flask 기본 폴더구조>
[세팅 루틴: (프로젝트 폴더안에 항상 이렇게 세팅하고 시작)]
파일-새프로젝트 폴더 설정
폴더 내 경로(directory) 생성:
. static(이미지, css 파일 넣어둠)
. templates(html 파일 담아두고 불러오는 역할)
폴더 내 파이썬 파일 생성:
. app.py
templates 경로 내 index.html 생성
파일-설정-프로젝트-python-인터프리터-+-패키지 설치
. flask
. pymongo
. dnspython
<서버에 html보내기>
render_template
return render_template('index.html') 하면
templates폴더 내의 html을 읽어서 서버에 보내준다
<localhost:5000 VS 파이참 우측상단 크롬 버튼?>
. localhost:서버가 보여주는 것
. 우측상단 크롬: 내 컴퓨터 파일 열어서 보는것과 같은 개념
< api >
get : 데이터 조회
. url뒤에 ?key=value
post : 데이터 생성 변경 삭제
. html body에 key:value
cf. 프론트엔드 html쪽, 백엔드 flask/서버쪽
<과제들>
[화성땅공동구매]
dbprac파일 참고하여 작성
cf) 새로고침: window.location.reload()
주문하기 / 정보 서버에 주기(post) / 버튼클릭 시 완료
-> 버튼누르면 save_order function 실행되고
-> name,address,size정보를 Jquery로 가져와서 실어보냄
-> 미리약속한대로(창구에) -> app.py에서 약속한대로 받음(post)
-> 창구에서 db에 저장하고 -> 주문완료라고 return 값 보내면
-> 메시지가 받아서 alert 로 보여주고 -> window reload
주문 보여주기 / 로딩완료 시 자동조회(get)
[스파르타피디아-movie]
크롤링 연습 - meta 태그
ex) 네이버 영화 : html head 부분에 og:image, og:title...
뼈대 준비하기 API 만들기(POST)
. 무엇을 만들기 파악하기
. 서버만들기(app.py)-클라이언트만들기(html)-확인하기
mongo DB에 저장한 값 화면에 보여주기(GET)
[팬명록 완성 과제]
서버만들고 클라이언트 만드는 것 까지 잘 한 것 같은데,
데이터 입력 후 mongo DB에 저장 및 화면에 적재되는 게 계속 오류가 났다.
※ 오류코드:
name_receive = request.form['name_give']
File "상세 파일위치\바탕 화면\sparta\projects\homework\venv\lib\site-packages\werkzeug\datastructures.py", line 375, in getitem
raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'name_give'
--> 해결완료! (04/20)
POST 쪽에 name_give 정의를 안해줬었다..^^;
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/homework',
data: {name_give:name, comment_give: comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
})
}