Flask (API만들기)

-Flask-

*경로 만들기 (구조)*

static 폴더 (이미지, css파일을 넣어둡니다.)

templates 폴더 (html 파일을 넣어둡니다.)

*파일 만들기*

app.py

index.html (templates 폴더)

*패키지 설치*

flask

pymongo

dnspython

(크롤링이 필요하다면 requests와 bs4도 설치)

 

*연습*

'응원 남기기' 버튼을 누르면 그 결과를 서버에 저장하고 밑에 댓글로 나타내기

 

1. POST방식(서버에 저장) 설정

아래의 클라우드(mongo DB) pymongo 패키지 양식을 app.py상단에 붙이기

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:<password>@cluster0.q4umm5t.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

 

1-1. 백엔드 설정(app.py)

(1) '닉네임'과 '응원 댓글' 키 설정

name_receive와 name_give의 이름 수정해주기

# app.py
@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

(2) 응원 남기기 누른 결과를 클라우드에 저장

# name_receive = request.form['name_give']
# comment_receive = request.form['comment_give']

doc = {
    'name': name_receive,
    'comment':comment_receive
}

db.homework.insert_one(doc)

return jsonify({'msg': '완료'})

1-2. 프론트 엔드 설정 (index.html)

(1) '닉네임'과 '응원 댓글' 입력값 지정하기

# save_comment는 '응원 남기기' 버튼의 onclick 값

function save_comment() {
    let name = $('#name').val()
    let comment = $('#comment').val()
    
    $.ajax({
        type: 'POST',

 

(2) 키, 값 수정해주기

$.ajax({
    type: 'POST',
    url: '/homework',
    data: {name_give:name, comment_give:comment},

 

2. GET방식 (서버에서 가져오기) 설정

2-1. 백엔드 설정(app.py)

클라우드 homwork 폴더 안에 저장된 데이터를 comment_list의 '값'으로 찾아오고 그것을 comments라는 '키'로 설정

@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({}, {'_id': False}))

    return jsonify({'comments': comment_list})

2-2. 프론트 엔드 설정 (index.html)

(1) 키 값인 comments 설정

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

function show_comment() {
    $.ajax({
        type: "GET",
        url: "/homework",
        data: {},
        success: function (response) {
            let rows = response['comments']

(2) for문 작성

name은 rows의 i번째에 있는 'name'(닉네임 id값)이다.

# let rows = response['comments']
 for (let i = 0; i < rows.length; i++) {
     let name = rows[i]['name']
     let comment = rows[i]['comment']

(3) 화면에 나오게 하기

기존 댓글 양식을 가져와 temp_html로 지정해서 comment-list(댓글 란 id)에 붙이기

# let comment = rows[i]['comment']

let temp_html = `<div class="card">
                    <div class="card-body">
                        <blockquote class="blockquote mb-0">
                            <p>${comment}</p>
                            <footer class="blockquote-footer">${name}</footer>
                        </blockquote>
                    </div>
                </div>`
$('#comment-list').append(temp_html)

(4) 기존 댓글 양식 지우기

 

 

---

 

*심화*

· 저장되는 데이터에 숫자 새기기

   len() 리스트 안에 들어있는 목록들의 숫자를 세어 줌

bucket_receive = request.form['bucket_give']

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

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

db.bucket.insert_one(doc)

 

· 클라우드에 저장하고자 하는 데이터가 '문자열'이 아닌 '숫자'일 경우 int()

number_receive = request.form['number_give']
db.bucket.update_one({'number': int(number_receive)}, {'$set': {'done': 1}})

 

· 위 팬명록의 응원 댓글이 아닌 버킷리스트를 추가할 경우, 작성되는 버킷리스트에 '완료 버튼'까지 함께 추가시키기

   완료 버튼에 번호를 줘야 어떤 버튼이 0에서 1로 바뀌는지 알 수 있음.

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

아래처럼 별도로 완료 버튼에 대한 POST를 따로 만들어 줘야 함

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

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

 

 

· og 타이틀 만들기

   페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/

   카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og

<meta property="og:title" content="콜드플레이 팬명록" />
<meta property="og:description" content="응원 한 마디 남기고 가세요." />
<meta property="og:image" content="이미지URL" />