웹개발 종합반 4주차 - Flask로 서버를 구동시켜서 html,css,js와 연동

Flask

- Flask 란 파이썬을 기반으로 작성된 마이크로 웹 프레임워크(framework) 중 하나

- 쉬운 만큼 단점도 있는데 그중 하나는 보안 부분에서 비교적 취약

- 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다.

 

프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격! 프레임워크는 3분 요리/소스 세트라고 생각하면 되겠습니다!

웹 프레임워크(Web Framework)란?

- 웹 프레임워크란 동적인 웹 페이지나 웹 애플리케이션 등을 개발할 때 발생하는 어려움을 줄여주는 일종의 '틀'

 

Pakage 설치

 - flask

 

프로젝트 폴더 안에,

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

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

- app.py 파일

 

기본 코드

from flask import Flask, render_template, request, jsonify
app = Flask(__name__) # Flask 객체 생성

전체코드 (homework 4)

@app.route('/') # @app.route('/') 는 http://localhost:5000/ 를 가리킵니다.
def home(): # render_template을 이용해서 templates 폴더 안에 있는 ‘index.html’을 불러와 리턴
    return render_template('index.html')

@app.route("/homework", methods=["POST"])  # 메소드를 ‘POST’ 형식으로 선언, DB에 포스트 한다 라고 생각하면 편함
def homework_post():
    nickname_receive = request.form['nickname_give'] # index.html에 요청해서 받아온 데이터를 변수에 저장
    comment_receive = request.form['comment_give']

    doc = {
        'nickname': nickname_receive, # 변수로 오브젝트 만들고
        'comment': comment_receive,
    }
    
    db.FanCommentList.insert_one(doc) # 오브젝트를 내 DB의 FanCommentList에 보내기

    return jsonify({'msg':'Thank you for your Comment!'}) # jsonify() - 사용자가 json data를 내보내도록 제공하는 flask의 함수

@app.route("/homework", methods=["GET"]) # 메소드를 ‘GET’ 형식으로 선언, DB에서 겟 해온다 생각하면 편함
def homework_get():
    comment_list = list(db.FanCommentList.find({}, {'_id': False})) # DB의 FanCommentList에 있는걸 긁어와서 변수에 저장
    return jsonify({'comments': comment_list}) # json data로 저장된 comment_list 데이터를 'comments' 주소로 전송준비

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
    # 참고로, app.run에서 host 설정은 모든 IP에 대한 접근은 허용한다는 의미, port 설정은 접속시 open될 http port
    #  host 설정 미기재시, localhost(=127.0.0.1)에서만 접근 가능
    #  port 설정 미기재시, 기본적으로 5000번 포트로 세팅

 

index.html 쪽 코드

 // 함수 for send to POST
        function save_comment() {
            // ID가 nickname, comment인곳(input)에서 값을 받아서 변수에 저장
            let name = $('#nickname').val();
            let comment = $('#comment').val();

            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {nickname_give: name, comment_give: comment}, // 변수안의 데이터를 보내기
                success: function (response) {
                    alert(response['msg']) // post 에서 받아온
                    window.location.reload() // 브라우저 restart
                }
            })
        }
        // 함수 for Get
        function show_comment() {
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    // DB에서 받아온 것들을 변수에 저장
                    let rows = response['comments']

                    //for 문으로 변수를 돌면서 필요한거 꺼내기
                    for(let i = 0; i < rows.length; ++i){
                        let nickname = rows[i]['nickname'];
                        let comment = rows[i]['comment']

                        // html을 어떻게 add할지
                        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${nickname}</cite></footer>
                                                </blockquote>
                                            </div>
                                        </div>`

                        // html을 필요한 위치의 id에 add
                        $('#card_comment').append(temp_html);

                    }

                }
            });
        }