웹개발 4주차 (1)

PYTHON

 

from flask import Flask, render_template, request, jsonify

app = Flask(__name__) 

# flask 서버

from pymongo import MongoClient

import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://sparta:test@cluster0.v7fcneo.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)

db = client.dbsparta

#MongoDB에서 데이터 사용하기 위한 준비

@app.route('/')

def home():

   return render_template('index.html')

#Html 파일 불러오기

@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': '주문 완료!'})

#POST 요청 방식 : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청

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

def mars_get():

    mars_data = list(db.mars.find({},{'_id':False}))

    return jsonify({'result':mars_data})

#GET 요청 방식 : 통상적으로 데이터 조회(Read)를 요청

if __name__ == '__main__':

   app.run('0.0.0.0', port=5000, debug=True)

 

HTML

$(document).ready(function () {

            show_order();

        });

        function show_order() {

            $("#order-box").empty();

            fetch('/mars').then((res) => res.json()).then((data) => {

                let rows = data['result']

                rows.forEach((a) => {

                    let name = a["name"];

                    let address = a["address"];

                    let size = a["size"];

                    let temp_html = `<tr>

                        <td>${name}</td>

                        <td>${address}</td>

                        <td>${size}</td>

                      </tr>`;

                    $("#order-box").append(temp_html);

                });

            });

        }

        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) => {

                console.log(data);

                alert(data["msg"]);

                window.location.reload();

            });

        }

 

이거 부분만 해석(show_order, save_order)

프론트엔드가 Html 이고 백엔드가 py임.

지금 프론트엔드랑 백엔드가 어떻게 연결되는지는 

@app.route('/')

def home():

   return render_template('index.html')

이걸로 설명 가능

 

근데 show_order부터 차근차근히 보면 

#order-box 

에 있는 자료들 다 없애라. empty

그 다음에 fetch로 연결 어디에? /mars에

거기서 rows를 data의 result값으로 잡을 건데 이게 어디있던거냐 하면 

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

def mars_get():

    mars_data = list(db.mars.find({},{'_id':False}))

    return jsonify({'result':mars_data})

여기 있음.

여기서는 result 값이 mars라는 데이터베이스의 모든 값임.

 

다시 Html로 돌아가서 

rows 반복문으로 돌림. 

변수잡고

#order-box 

여기에 있는 값들은 없어진 상태에서 append를 통해서 추가됨. 

 

그 다음 save_order

이건 fetch부터 보는게 더 쉬운 거 같음. 

Html 에서 mars 불러라 

해서 서버의 post 형식의 mars 부르면 

 let formData = new FormData();

            formData.append("name_give", name);

            formData.append("address_give", address);

            formData.append("size_give", size);

여기 html에 있는 "....._give" 이런 친구들이

서버에 있는지 확인 

@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': '주문 완료!'})

그래서 저 '..._receive' 친구들 딕셔너리 행태로 저장하고

mars의 데이터 베이스에다가 추가

그러고 사용자가 볼 수 있는 주문완료라는 메시지 전달

 

 

이 게시물은 오로지 작성자가 잘 알아볼 수 있게 만들어진 거라서 

다음 번에 복습할 때 다른 사람들도 보기 좋게 만들어 보겠습니다... ㅎㅎ