웹 개발 종합 - Flask, GET, POST(서버로 데이터 통신)

이번 4주차에서는 서버를 세팅하고 운용하는 방법을 알아보았다.

 

우선 서버를 만드는 것에 관하여 직접 서버를 만들고 배포하는 것은 엄청난 자원을 낭비하는 것이기 때문에! 많은 사람들이 서버 세팅에 관련된 프레임워크를 사용한다고 한다.

 

그것이 바로 이번에 사용한 Flask이다.

 

Flask는 파이썬 기반의 웹 프레임워크 중 하나이다.

프레임워크(Framework) : 프레임워크는 프로그램의 기초를 구축할 수 있는 코드의 집합.

프레임워크의 틀 안에서 코드들의 개발이 이루어지고 기능들이 구현되기 때문에 라이브러리와는 다른 개념.

 

 

Flask를 사용하기 위해서는 가상환경을 세팅 해줘야한다.

Flask는 기본적인 폴더 구조가 정해져 있기 때문에 static와 templates라는 dir(디렉터리, 폴더)을 생성해둔다.

static은 css나 js파일을 저장하고, templates는 html파일을 저장하기 위해 만들어 졌다고 이해하면 편하다.

마지막으로 app.py를 만들어주면 끝!

 

//back

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

from pymongo import MongoClient

import certifi

ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cldbspartauster0.hqmjigh.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)

db = client.dbsparta


@app.route('/')
def home():
    return render_template('index.html')


@app.route("/mars", methods=["POST"])
def web_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': '주문완료!'})

@app.route("/mars", methods=["GET"])
def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False}))
    return jsonify({'order':order_list})

    // 데이터를 가져올때(GET)  >  request.args.get()
    // 데이터를 전송할 때(POST) > request.form.get()

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

 

 

 

//front

    $(document).ready(function () {
        show_order();
    });

    function show_order() {
        $.ajax({
            type: 'GET',
            url: '/mars',
            data: {},
            success: function (response) {
                let row = response.order
                row.map((data) => {
                    let address = data.address
                    let name = data.name
                    let size = data.size

                    let temp_html = `<tr>
                    <td>${name}</td>
                    <td>${address}</td>
                    <td>${size}</td>
                    </tr>`
                    let table = document.getElementById("data-field")
                    table.insertAdjacentHTML("beforeend", temp_html) // 바닐라스크립트
                    // $('table tbody').append(temp_html) // jquery

                })

            }
        });
    }

    function save_order() {
        let name = document.getElementById('name').value
        let address = document.getElementById('address').value
        let size = document.getElementById('size').value

        $.ajax({
            type: 'POST',
            url: '/mars',
            data: {name_give: name, address_give: address, size_give: size},
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        });
    }

 

 

 

이 벤 트 실 행 순 서

 

1. 이름과 주소, 평수를 작성 후 주문하기를 누르면, show_order함수가 실행

 

2. 프론트에서 ajax로 데이터들을 변수에 담아 key와 val를 백엔드 쪽으로 전송 

 

3. 백엔드에서 데이터를 받아 변수에 담고 서버에 저장. 그 후 프론트쪽으로 response 전송

 

4. 프론트에서 response를 받고 난 후, window.location.rerload() 메소드로 페이지가 리렌더링

 

5. 프론트에서는 백엔드 쪽으로 서버에 있는 데이터들을 받기위해 ajax를 보내고 response를  데이터를 정렬하기 위해서 변수에 담아 놓는다. ( let row = response.order )

 

6. 변수에 담아 놓은 데이터들을 map함수(또는 for문)를 사용하여 data들을 새로운 변수에 담은 후 html에 뿌려주면 끝!