MongoDB / Flask

 

<MongoDB>

 

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

 

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

 

[기본코드]

from pymongo import MongoClient

client = MongoClient('여기에 URL 입력')

db = client.dbsparta

 

 

*컬렉션: db에 뭘 저장할 때, 중구난방되지 않도록 카테고리를 알려주는거

              gym들의 정보가 담긴 리스트를 넣는다면, db.gymlist.insert~~~ 해주면 gymlist라는 컬렉션이 생기고,거기 insert

[삽입]

db.users.insert_one('dictionary')

 

[추출]

데이터 다 가져오기 : 

all_users = list(db.users.find({},{'_id':False}))

 

데이터 하나 찾기:

# user = db.users.find_one({'name': '상근'},{'_id':False})      <- 첫 argument가 filter역할

 

 

데이터 수정(업데이트):

 

# db.users.update_one({ 'name' : '재형' }, { '$set' : {'age'  : 19} } )  <- 첫 arg가 filter역할, update_many도 가능

 

데이터 삭제:

 

# db.users.delete_one({'name':'상근'})     <- 첫 arg가 filter, delete_many로 filter에 해당하는것 다 삭제 가능

 

한 collection의 데이터를 모두 삭제:

 

# db.컬렉션이름.delete_many({})

 

구글 크롤링 한 데이터를 딕셔너리들의 리스트로 만들어준 뒤,

db.users.insert_many()를 통해 db에 넣어줬다.

 

<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' )

 

 

localhost에서 실행된 웹html

 

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

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

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

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

구글에 검색어를 전달해 데이터를 요청

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

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

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

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

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

            fetch("/test").then(res => res.json()).then(data => {

                console.log(data)

            })

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

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

 

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

 

let formData = new FormData();

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

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {

                console.log(data)

                })

해당 코드는 /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은 덮어씌움

 

예시