TodayILeaun 2023-03-21

   POST방식으로 데이터를 저장하고, GET 방식으로 데이터 조회하기

    스파르타 코딩클럽 웹개발 종합반 4차 - 화성 땅 구매하기 구현

• Client에서 POST방식으로 이름(name), 주소(address), 평수(size) 데이터를 받아 Server를 통해 DB에 저장하기 
• 화면이 Refresh되면 GET 방식으로 DB에 저장 된 데이터 표현해주기

 

1.  New Project 생성 후 POST 방식으로 API를 만들고 사용하기

  1) '2.mars' 폴더 생성
  2) VS Code > 확장으로 이동하여 python 설치
      사전에 python git-bash, python 3.8.6.exe 설치 필요!
  3) 2.mars 폴더에 app.py 파일 생성하기
  4) 새 터미널 추가 > 'python -m venv venv' + Enter
  5) 인터프리터 : 3.8.6(venv':venv) 선택하기
  6) 기존 터미널 종료 후 새 터미널 열어서 (venv)가 나오는지 확인하기
  7) 라이브러리 설치
     ① pip install pymongo : DB 연결(저장/한개 찾기/바꾸기/지우기)
     ② pip install requests 
     ③ pip install flask

  8) API를 만들고 사용하기
    Client에서 저장한 '이름(name)', '주소(adress)', '평수(size)' 저장하기 (Creat → POST방식)
     ① 데이터 명세
        - 요청정보 : URL = /mars
        - 요청방식 : POST(데이터 생성 방식)
        - Client가 fetch를 통해  데이터를 주고, Server가 flask를 통해 → client에게 mesage를 보냄

 

     ② Client와 Server 연결 확인하기

       ▼ Server Code - app.py 

@app.route("/mars", methods=["POST"])

def mars_post():

    name_receive = request.form['name_give']

    address_receive = request.form['address_give']

    size_receive = request.form['size_give']

    doc = {

        'name': name_receive,

        'address': address_receive,

        'size': size_receive

    }

    db.mars.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

 - /mars를 통해 POST 방식으로 데이터를 보낸다.
 - name, address, size를 name_re, address_re, size_re 변수에 담고 이것을 doc 딕셔너리에 저장 > mars DB에 저장한다.

insert_one() 메서드 이것은 MongoDB의 컬렉션 또는 데이터베이스 내에 단일 항목을 삽입 할 수있는 방법입니다. 컬렉션이 없는 경우 이 메서드는 새 컬렉션을 만들고 이 컬렉션에 데이터를 삽입합니다. 사전을 컬렉션에 삽입하려는 문서의 각 필드 이름과 값을 포함하는 매개 변수로 사용합니다. 이 메서드는 삽입된 문서의 ID를 보유하는 "_id" 필드가 있는 "~pymongo.results.InsertOneResult" 클래스의 인스턴스를 반환합니다. 문서에 "_id"필드가 지정되지 않은 경우 MongoDB는 "_id"필드를 추가하고 삽입하기 전에 문서에 고유 한 개체 ID를 할당합니다.  [참고링크] 파이썬 몽고DB – insert_one 쿼리  [참고링크] Pymongo에서 insert(), insertOne() 및 insertMany()의 차이점

       ▼ Client Code - index.html

    <script>

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

            alert(data["msg"]);

            window.location.reload();

          });

      }

    </script>

        - Client가 fetch를 통해  데이터를 주고, Server가 flask를 통해 → client에게 mesage를 보냄
        - window.location.reload();를 통해 화면 새로고침

     

     ③ Server 만들기(DB연결)
        - pymongo import 한다. 

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbspart

 

   ④ Client 만들기
      - input의 값을 가지고 오기
      - name, address, size 정보를 FormData에 넣고 보내준다.

 

function save_order() {

        let name = $("#name").val();

        let address = $("#address").val();

        let size = $("#size").val();

        let formData = new FormData();

        formData.append("name_give", name);

        formData.append("address_give", address);

        formData.append("size_give", size);

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

            alert(data["msg"]);

            window.location.reload();

          });

      }

 

 

2.  

 

 

 

  Point of Realization

 

• localhost:5000을 입력했는데, 열리지 않았다. 
• 뭐지.. 뭘 잘못한거지 당황했는데, 완성 코드와 전체 코드를 다 비교해봐도 전혀 다른게 없었다.
• TemplateNotFoud를 검색했더니 나와 같은 사람들이 엄청 많은 것 같다 ㅎㅎ

 

• 오타를 조심하자.. 지나간 자리도 다시 잘 보자 ㅎㅎ