슬로

<MongoDB>

몽고DB가입, 데이터베이스 생성후

파이썬 라이브러리 pymongo, dnspython 설치

[기본코드]

[삽입]

db.users.insert_one('dictionary')

[추출]

데이터 다 가져오기 : 

<Flask>

[기본 코드]

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():
   return 'This is mypage!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

- 실행시켜놓고 브라우저 열어서 localhost:5000 하면 페이지 뜸. 남들에게 배포된상태는X 나만볼수있음

- mypage함수의 route를 보면 /mypage임. localhost:5000/mypage하면 mypage함수를 불러옴

- route에 해당하는 함수 return 값에 html 태그를 넣어주면 페이지에 html이 표시되는데, return부분에 페이지 html을

다 담는 것은 좋지 않으므로 html파일과 연결시켜주어야 한다.

==> templates 폴더를 만들고 html파일 넣어놓고, app.py에서 flask의 render_template를 import해준다.

       이제 함수 return값에 render_template( '템플릿폴더안의파일이름.html' )

*프론트와 백엔드의 소통 방식*

GET방식 : 통상적으로 데이터를 조회(Read) 요청할 때 사용, 주소에 ?로 시작하는 부분

- get방식은 formData에 데이터를 태워서 보낼 수 없어서 query를 파라미터로 넘겨주는 방법을 사용해야한다는데,

아직 모르겠다. (추후 공부해서 업데이트)

POST방식 : 통상적으로 데이터를 생성(Create), 변경(Update), 삭제(Delete) 할 때 사용

eg) 회원가입, 회원탈퇴, 비밀번호 수정 등

-> 데이터 전달이 바로 보이지 않는 HTML

formData에 데이터를 태워서 보낼 수 있다.

=================== GET 요청 정리=====================

fetch요청의 기본값은 GET방식이며, /test에 GET 요청을 보내면 백엔드의 /test route에 해당하는

test_get()함수가 호출되고, 이 함수의 return값인 json데이터가 /test에 표시됨. 이 데이터는 fetch에 담겨 fetch 안 매개변수에 전달된다.

=================== POST요청 정리=====================

let formData = new FormData();

formData.append("video_submit", "video_url");

해당 코드는 /test라는 페이지로 POST요청을 보낼거고, 보낼 데이터는 formData임. 이게 request에 담겨서 보내짐.

보내게 되면 백엔드의 /test route에 해당하는 함수가 호출되고, 이 함수 내부에서 request.form['video_sumbit']을 찍어보면  "video_url"이 나옴.

이제 함수 내에서 서비스의 논리에 따라 video_url을 처리하고, return에 사용자에게 보낼 데이터를 return해주면, 프론트에 fetch 함수의 data 변수(위 코드상)에 이것이 담겨나오게 됨. 이제 프론트에서 이걸 사용자에게 보여주거나 하면됨

#############버튼을 클릭하면 사용자 입력이 백엔드로 전송되게 하고싶을때#############

사용자입력칸을 <input>태그 또는 <select>태그로 하고 id를 달아놓는다.

전송버튼을 만들어두고, button 태그의 onclick= "함수이름"에서 let temp = $(#'id이름')으로 데이터를 가져올 수 있고,

여기서 let 임시변수 = new FormData()        임시변수.apend('key값', temp) 이런식으로 FormData에 값 저장해서 백엔드로 날리기.

[FormData 메소드]

let formData = new FormData()

formData.append( name, value )

formData.append( name, blob, fileName )   : input type이 file인경우

formData.delete( name )

formData.get( name )

formData.getAll( name )

formData.has( name )     :  주어진 name에 해당하는 값이 있을경우 true, 없을경우 false 반환 

formData.set( name, value ) : 

formData.set( name, blob, fileName ) :     set도 append와 비슷하지만, append는 중복 가능, set은 덮어씌움

예시