웹개발 5주차_나의 버킷리스트 프로젝트 연습

 

✅ 프로젝트 세팅

 

sparta → projects → bucket 폴더에서 시작!

 

✔ flask 기본 폴더 구조

 

프로젝트 폴더 안에,

 

static, templates 폴더, templates > index.html 파일, app.py 파일 생성

 

✔ 패키지 설치하기 👉 Flask와 DB 연결

 

[설정] - [프로젝트] - [Python 인터프리터] - [+] - [flask, pymongo, dnspython 패키지 설치]

 

---

✅ POST 연습 - 기록하기

 

1. 요청 정보 : URL= /bucket, 요청 방식 = POST
2. 클라(ajax) -> 서버(flask) : bucket
3. 서버(flask) -> 클라(ajax) : 메시지를 보냄(기록 완료!)

단! 서버에서 한 가지 일을 더 해야합니다.
-> 완료 버튼을 위해 번호를 만들어 함께 넣어주는 것.
   그래야 업데이트가 가능하겠죠!

 

1) 클라이언트와 서버 연결하기

 

✔ 서버 코드(app.py)

 

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

 

✔ 클라이언트 코드(index.html)

 

function save_bucket(){
    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {sameple_give:'데이터전송'},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

-----------------------

<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>

 

2) 서버부터 만들기

 

✔ 서버 코드(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': '등록 완료!'})

 

.len[()] 👉 리스트의 안에 속한 값의 개수

 

3) 클라이언트 만들기

 

✔ 클라이언트 코드(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()
        }
    });
}

 

4) 완성 확인하기

 

 

---

 

✅ GET 연습 - 보여주기

 

1. 요청 정보 : URL= /bucket, 요청 방식 = GET
2. 클라(ajax) -> 서버(flask) : (없음)
3. 서버(flask) -> 클라(ajax) : 전체 버킷리스트를 보여주기

 

1) 클라이언트와 서버 연결하기

 

✔ 서버 코드(app.py)

 

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

 

✔ 클라이언트 코드(index.html)

 

$(document).ready(function () {
	show_bucket();
});
function show_bucket(){
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

 

2) 서버부터 만들기

 

✔ 서버 코드(app.py)

 

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

 

3) 클라이언트 만들기

 

✔ 클라이언트 코드(index.html)

 

function show_bucket() {
    $('#bucket-list').empty()
    $.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">완료!</
                                </li>`
                } else {
                    temp_html = `<li>
                                    <h2 class="done">✅ ${bucket}</h2>
                                </li>`
                }

                $('#bucket-list').append(temp_html)
            }
        }
    });
}

 

4) 완성 확인하기

 

 

---

 

✅ POST 연습 - 완료하기

 

1. 요청 정보 : URL= /bucket/done, 요청 방식 = POST
2. 클라(ajax) -> 서버(flask) : num(버킷 넘버)
3. 서버(flask) -> 클라(ajax) : 메시지를 보냄(버킷 완료!)

 

1) 클라이언트와 서버 연결하기

 

2) 서버부터 만들기

 

✔ 서버 코드(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(num_receive) 👉 num_receive는 문자열로 들어오기 때문에, 숫자로 바꿔줘야 함

 

3) 클라이언트 만들기

 

✔ 클라이언트 코드(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()
        }
    });
}

 

4) 완성 확인하기