스파르타 웹개발종합반 5주차-1

Filezilla 설치
파일을 보낼수 있는 프로그램
가비아 가입하기 & 도메인 구입하기

버킷리스트 - 프로젝트

app.py 뼈대

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

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

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(기록) 연결 완료!'})

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(완료) 연결 완료!'})

@app.route("/bucket", methods=["GET"])
def bucket_get():
    return jsonify({'msg': 'GET 연결 완료!'})

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

post 연습하기

app.py

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']

    bucket_list = list(db.bucket.find({}, {'_id': False}))
    count = len(bucket_list) +1

    doc = {
        'num':count,
        'bucket':bucket_receive,
        'done':0
    }

    db.bucket.insert_one(doc)

    return jsonify({'msg': '등록 완료!'})

• bucket_list = bucket db 전체 검색
• len(bucket_list) +1 = bucket db 전체 갯수 + 1

index.html(클라)

function save_bucket() {
            let bucket = $('#bucket').val()
            $.ajax({
                type: "POST",
                url: "/bucket",
                data: {'bucket_give': bucket},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

get 연습하기

app.py

@app.route("/bucket", methods=["GET"])
def bucket_get():
    bucket_list = list(db.bucket.find({}, {'_id': False}))
    return jsonify({'buckets': bucket_list})

index.html (클라)

function show_bucket() {
            $.ajax({
                type: "GET",
                url: "/bucket",
                data: {},
                success: function (response) {
                    let rows = response["buckets"]
                    for (let i = 0; i < rows.length; i++) {
                        let bucket = rows[i]['bucket']
                        let num = rows[i]['num']
                        let done = rows[i]['done']

                        let temp_html = ``
                        if (done == 0) {
                            temp_html = `
                                  <li>
                                    <h2>✅ ${bucket}</h2>
                                    <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                 </li>
`
                        } else {
                            temp_html =
                                `
                                <li>
                                    <h2 class="done">✅ ${bucket}</h2>
                                </li>
                                `
                        }
                        $('#bucket-list').append(temp_html)
                    }
                    console.log()
                }
            });
        }

post 연습하기 (update)

app.py

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']

    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})

    return jsonify({'msg': '버킷 완료!'})

• 클라이언트에서 숫자 값이 넘어올땐 문자열로 넘어오기 때문에 int 를 사용하여 숫자로 형변환 시켜주어야 한다. ex)int(num_receive)

index.html (클라)

function done_bucket(num) {
            $.ajax({
                type: "POST",
                url: "/bucket/done",
                data: {'num_give': num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }