[항해99] 스파르타 코딩클럽 4주차

🌈 m1naworld ·2022년 10월 10일

항해99

목록 보기

5/7

[웹개발 종합반] 4주차 강의

🎯 수업 목표

Flask 프레임워크를 활용해서 API를 만들 수 있다.
'화성에 땅사기' API를 만들고 클라이언트에 연결한다.
'스파르타피디아' API를 만들고 클라이언트와 연결한다.

🎯 목차

Flask 시작하기 - 서버만들기
Flask 시작하기 - HTML파일 주기
Flask 시작하기 - 본격 API 만들기
[화성땅 공동구매] - 프로젝트 세팅
[화성땅 공동구매] - 뼈대 준비하기
[화성땅 공동구매] - POST 연습(주문 저장)
[화성땅 공동구매] - GET 연습(주문 보여주기)
[스파르타피디아] - 프로젝트 세팅
[스파르타피디아] - 조작 기능 구현해보기
[스파르타피디아] - 뼈대 준비하기
[스파르타피디아] - POST 연습(포스팅하기)
[스파르타피디아] - GET 연습(보여주기)
4주차 끝 & 숙제 설명

1. Flask란?

간단한 웹 사이트, 혹은 간단한 API 서버를 만드는 데에 특화 되어있는 파이썬 웹 프레임워크

- 라이브러리 설치

pip install flask

- 기본 골격

from flask import Flask
app = Flask(__name__)  # Flask 객체 생성
 
@app.route('/')
def index():
    return '<h1>Hello World!</h1>'
 
if __name__ == "__main__":  # 모듈이 실행 됨을 알림
    app.run('0.0.0.0', port=5000, debug=True)  # 서버 실행, 파라미터로 debug 여부, port 설정 가능

- 기본 폴더 구조

프레임워크를 쓸 때는 정해진 규칙들을 따라야 한다. 이때 flask는 정해진 폴더구조를 따라야 한다.

❗️Flask 서버를 만들 때, 항상! 규칙

프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py파일

이렇게 세 개를 만들어두고 시작하자!

+) Flask 기초: HTML 파일 불러오기

👉 flask 내장함수 render_template를 이용! (*templates 폴더의 역할: HTML파일을 담아두고, 불러오는 역할)

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

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

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

2. Flask 사용해보기

❗️[스파르타피디아] POST 예제

app.py

@app.route("/movie", methods=["POST"])
def movie_post():
	
    // 프론트에서 받은 데이터 
    url_receive = request.form['url']
    star_receive = request.form['star']
    comment_receive = request.form['comment']

    // 스크래핑
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url_receive, headers=headers)
    soup = BeautifulSoup(data.text, 'html.parser')

    title = soup.select_one('meta[property="og:title"]')['content']
    image = soup.select_one('meta[property="og:image"]')['content']
    description = soup.select_one('meta[property="og:description"]')['content']

    doc = {
        'title': title,
        'image': image,
        'description': description,
        'star': star_receive,
        'comment': comment_receive
    }


    db.movies.insert_one(doc) // db 저장
    return jsonify({'msg': '저장 완료!'})

index.html

 function posting() {
            let url = $('#url').val()
            let star = $('#star').val()
            let comment = $('#comment').val()

            console.log(url, star, comment)

            if(star !== '-- 선택하기 --') {
                $.ajax({
                    type: 'POST',
                    url: '/movie',
                    data: {'url': url, 'star': star, 'comment': comment},
                    success: function (response) {
                        alert(response['msg'])
                    }
                });
            }
        }

❗️[스파르타피디아] GET 예제

app.py

@app.route("/movie", methods=["GET"])
def movie_get():
    movies = list(db.movies.find({}, {'_id': False}))
    return jsonify({'movies': movies})

index.html

function listing() {
            $.ajax({
                type: 'GET',
                url: '/movie',
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    console.log(rows)
                    for(let i=0; i<rows.length; i++){
                    
                        let image = rows[i].image
                        let title = rows[i].title
                        let description = rows[i].description
                        let comment = rows[i].comment
                        let star = rows[i].star

                        let star_image = "⭐".repeat(star);

                        let temp_html =
                           `<div class="col">
                                <div class="card h-100">
                                    <img
                                        src=${image}
                                        class="card-img-top">
                                        <div class="card-body">
                                            <h5 class="card-title">${title}</h5>
                                            <p class="card-text">${description}</p>
                                            <p>${star_image}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                </div>
                            </div>`


                        $('#cards-box').append(temp_html)

                    }
                }
            })
        }