TIL) HTML과 mongo DB 연동해서 서버 만들기, Flask, 4주차 숙제! 오류회고!

HTML과 mongo DB 연동해서 서버 만들기

같은 컴퓨터에 서버도 만들고, 요청도 함. 즉 클라이언트 = 서버 -> 로컬 개발환경

 

Flask 시작 - 서버만들기

Phycharm -> Preference -> Python Interpreter

python interpreter에서 + 누르고 flask 검색, install pakage

flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음

 

Flask 시작 - HTML 파일주기

기본 폴더구조 - 항상 이렇게 세팅하고 시작!

프로젝트 폴더 안에

  -static 폴더 (이미지, css파일 넣음)

  -templates 폴더 (html파일 넣고 불러오는 역할)

  -app.py (서버)

이렇게 세 개 만들어 두고 시작. venv는 보이지만 안보이는 걸로 생각하자

 

Flask 시작 - 본격 API 만들기

GET -> 데이터 조회를 요청할 때

             데이터 전달 ex) google.com?q=북극곰

POST -> 데이터 생성, 변경, 삭제 요청   ex) 회원가입, 탈퇴, 비번수정

           -> 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

 

4주차 숙제 핑퐁핑퐁 순서!

 

1. 폴더 및 파일 만들기 : static, templates (속에 index.html), app.py

2. app.py 코드 스니펫 붙여넣고, index.html안에 2주차 숙제 넣기

3. pymongo, flask 깔아주기

4. run app으로 실행

5. localhost:5000으로 연결 확인

6. a.ajax call 부분 복사, data 부분 지워줌, url은 order로 가져가기

7. 연결확인. 새로고침 후 주문하기 누르면 이 요청은 post 뜸.

8. 서버쪽 -> 이름, 수량, 주소, 전화번호 받아서 DB에 넣어주는 작업. post api, 딕셔너리 만들어주기, 저장할 콜렉션이름 orders

9. 클라이언트쪽 -> 이름 수량 주소 전번을 서버로 넣어줘야함. 인풋박스에 ID값 주기. let name = $('#order-name').val(); ....

                             데이터에 name_give:name, count_give:count, address_give:address...넣어줌. 받기로한 이름으로 넣어줘야함

                             a.ajax 에서 success: function (response) {

                                    if (response["result"] == "success")  { 

                                     alert(response["msg"]);

                                     window.location.reload();  -> 새로고침되는것

10. localhost:5000에서 정보 넣고 주문하기 누르기. 메세지 잘 뜨는지 확인. robo3T가서 DB 들어왔는지 확인. 저장하는 API 다 됨.

11. 이제 리스트를 붙여주기. 클라이언트쪽으로 넘어가 스크립트에 겟레이트 끝나면 listing();이 불리게 넣어줌.

      function listing() { 에 a.ajax call 넣어주기. 

12. localhost:5000에서 다시 확인하기. 주문하기 -> 이요청은겟! 눌리면 성공

13. 서버쪽 -> 북리뷰 app.py 참고. 주문목록보기 (read) api  복붙, 수정하기

14. 클라이언트쪽 -> 오더를 받아서 콘솔로그로 찍어보기. 새로고침해서 검사에서 콘솔 보기. 데이터 들어와있는지 확인

                                for문으로 돌리기. for (let i = 0;  i < orders.length; i++) 하고 콘솔 다시 찍어보기.

                                console.log(orders[i]) -> 검사 콘솔 들어가서 확인

15. 이제 붙일 부트스트랩 테이블 코드 가져와서 index.html 복붙. 간격 띄어주기. 아이템오더에 마진-버텀:50px; 

      이름 수량 주소 전화번호로 테이블 이름 바꿔줌

16. for 문 다시 돌아가서. let name =orders[i]['name']; ..... 달아주고 콘솔.로그(name,count,address,phone) 찍어보기

      하고 let temp_html = `` 에다가 테이블 값 넣기 ${name} ..... tbody에 아이디값주기 

      하고 $('#orders-box').append(temp_html) 붙이면 밑으로 붙음. 

      후에 첨에있던 예시는 지워버림.

17. 완성

 

오류 회고 

코드 작성 후 DB에는 저장되지만 테이블 밑으로 주문자 정보가 붙지않는 오류가 남. 

length를 읽을수 없다. 길이를 재고자 하는 변수의 값이 없거나 잘못된 상태. 변수를 체크하면 된다.

해설 코드를 보아도 index.html에는 문제가 없다. 그럼 app.py 서버 파일 체크 

# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.orders.find({}, {'_id': False}))
    return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

 

return jsonify 에서 'msg':'이 요청은 get!' 을 'orders': orders 로 바꿔주니 해결

# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.orders.find({}, {'_id': False}))
    return jsonify({'result':'success', 'orders': orders})