화성땅 공동구매 (mongodb, jquery, ajax, api)

- mongodb 사용법

from pymongo import MongoClient
client = MongoClient('mongodb+srv://text:sparta@cluster0.44vwqnl.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

 

 

- API (app.py)

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://text:sparta@cluster0.44vwqnl.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

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

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

# 4. 창구에서 약속한대로 받음
# 5. 각 속성에 맞게 데이터를 대입시키고
# 6. db에 저장
# 7. 주문 완료! 라고 리턴값을 주면
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': '주문 완료!'})


# 3. mars에 있는 값들을 모두 order_list에 넣어줌
# 4. 그 값들을 orders에 order_list를 넣어줌
# 5. 그 값들을 리턴시킴
@app.route("/mars", methods=["GET"])
def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False}))
    return jsonify({'orders':order_list})

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

 

- HTML 핵심코드

<script>
    // 1. 로딩이 되자마자 show_order를 부른다
    // 2. 창구로 이동
    // 6. 리턴된 값들(response)을 받음
    // 7. rows에 리턴된 값들 안의 orders를 대입
    // 8. for문으로 name,address,size를 추출
    // 9. temp_html에 `(넣어하는 태그들을 기재)`
    // 10. 그것들을 특정 ID태그에 추가한다.
    $(document).ready(function () {
        show_order();
    });

    function show_order() {
        $.ajax({
            type: 'GET',
            url: '/mars',
            data: {},
            success: function (response) {
                let rows = response['orders']
                for (let i = 0; i < rows.length; i++) {
                    let name = rows[i]['name']
                    let address = rows[i]['adderss']
                    let size = rows[i]['size']

                    let temp_html = `<tr>
                        <td>${name}</td>
                        <td>${address}</td>
                        <td>${size}</td>
                    </tr>`

                    $('#order-box').append(temp_html)
                }
            }
        });
    }


    // 1. 버튼을 누르면 saver_order가 실행
    // 2. name.address.size를 제이쿼리로 값을 가져옴
    // 3. 그 다음 데이터에 실어서 보냄
    // 8. 리턴값 (response)을 받아서 메시지 alert로 보여주고 새로고침한다
    function save_order() {
        let name = $('#name').val()
        let address = $('#address').val()
        let size = $('#size').val()

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