웹 개발 종합 4주차

Flask

API 서버를 만드는데 쓰이는 Flask는 코드가 단순하다는 장점을 가지고 있다. 사용하기 위해선 우선 Flask 패키지를 설치한 다음 진행한다.

Flask의 시작 코드는 아래와 같다.

from flask import Flask
app = Flask(__name__)
 
@app.route('/')
def home():
   return 'This is Home!'
 
if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

@app.route('/')를 수정하여 URL을 나눌 수 있다. Flask를 활용하는 API에는 이미지, CSS를 포함하는 static 폴더, html파일을 넣어두는 templates 폴더, app 파이썬 파일로 구성된다. 

 

API 제작

본격적으로 API를 제작하기 위해선 GET, POST를 잘 다뤄야한다. GET은 데이터를 받아오거나 특정 데이터를 전달할 때 쓰이며 POST는 통상적으로 데이터를 생성, 변경, 삭제할 때 사용된다. 아래 코드의 펑션 show_fan은 /fan의 GET메소드로부터 응답파일을 받아 for문으로 데이터를 할당하여 표시하며, save_fan은 html에서 입력받은 정보를 데이터로 정리하여 마찬가지로 /fan의 POST메소드로 전달하는 역할이다. window.location.reload는 갱신된 정보를 불러오기 위해 화면을 새로고침하는 코드이다.

        function save_fan() {
            let name = $('#nickname').val()
            let comment = $('#comment').val()
            $.ajax({
                type: 'POST',
                url: '/fan',
                data: {name_give: name, comment_give: comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }
 
        function show_fan() {
            $.ajax({
                type: 'GET',
                url: '/fan',
                data: {},
                success: function (response) {
                    let rows = response['orders']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comm = rows[i]['comment']
 
                        let temp_html = `<div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <p class="card-text">${name}</p>
                    <footer class="blockquote-footer">${comm}</footer>
                </div>
            </div>
        </div>`