[항해99] 웹개발 종합반 2회 완강 中 4주차 (Flask, 전체적인 예제 응용 복습)

YeilieY·2022년 9월 1일
웹개발종합반항해99
0

항해99

목록 보기
4/27

[항해99] 웹개발 종합반 2회 완강 中 4주차

4주차 수업

  1. Flask Framework를 활용하여 API 를 만들 수 있다.
  2. '화성에 땅사기' API를 만들고 클라이언트에 연결한다.
  3. '스파르타피디아' API를 만들고 클라이언트와 연결한다.

Flask 기초

  • Flask Framework : 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있음.
  • app.py : 통상적으로 Flask 서버를 돌리는 파일은 app.py 라고 이름 짓는다.
  • 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)

실행 후 화면 : (localhost:5000)

  • 기본 폴더구조
    : Flask 서버를 만들 땐 항상!!

프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py 파일
이렇게 세 개를 만들어두고 시작해야 한다.
templates 폴더의 역할: HTML 파일을 담아두고 불러오는 역할!

  • HTML 파일 불러올 때 Flask 내장함수 render_template를 사용한다!!
from flask import Flask, render_template
app = Flask(__name__)

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

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

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

화성땅 공동구매 (POST: 주문 저장)

  • API 만들고 사용하기 - 이름, 주소, 평수 저장하기(Create → POST)
  1. 요청 정보 : URL= /mars, 요청 방식 = POST
  2. 클라(ajax) → 서버(flask) : name, address, size
  3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)
  • 클라이언트와 서버 연결 확인하기 (서버 코드: app.py)
@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

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

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

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>
  • 서버부터 만들기
    (name, address, size 정보를 받아서 저장!)
@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.orders.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})
  • 클라이언트 만들기
    (name, address, size 정보 보내주기!!)
function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { name_give:name, address_give:address, size_give:size },
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

화성땅 공동구매 (GET: 주문 보여주기)

  • API 만들고 사용하기 - 저장된 주문을 화면에 보여주기(Read → GET)
  1. 요청 정보 : URL= /mars, 요청 방식 = GET
  2. 클라(ajax) → 서버(flask) : (없음)
  3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기
  • 서버 만들기
@app.route("/mars", methods=["GET"])
def mars_get():
    orders_list = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders':orders_list})
  • 클라이언트 만들기
function show_order() {
    $('#order-box').empty()
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let address = rows[i]['address']
                let size = rows[i]['size']

                let temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${address}</td>
                                    <td>${size}</td>
                                  </tr>`
                $('#order-box').append(temp_html)
            }

        }
    });
}

meta 태그 스크래핑 하기

  • 크롤링 기본 코드
import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'

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,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

# 여기에 코딩을 해서 meta tag를 먼저 가져와보겠습니다.
  • select_one을 이용해 meta tag를 먼저 가져와본다.
og_title = soup.select_one('meta[property="og:title"]')
og_description = soup.select_one('meta[property="og:description"]')

print(og_image)
print(og_title)
print(og_description)
  • 가져온 meta tag의 content를 가져와본다.
title = og_title['content']
description = og_description['content']

print(image)
print(title)
print(description)

스파르타피디아 (POST: 포스팅하기)

  • API 만들고 사용하기 - 포스팅API (Create → POST)
  1. 요청 정보 : URL= /movie, 요청 방식 = POST
  2. 클라(ajax) → 서버(flask) : url, star, comment
  3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (포스팅 완료!)
  • 서버 만들기 (url, star, comment정보를 받아서 저장)
def movie_post():
    url_receive = request.form['url_give']
    star_receive = request.form['star_give']
    comment_receive = request.form['comment_give']

    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')

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

    image = og_image['content']
    title = og_title['content']
    description = og_description['content']

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

    db.movies.insert_one(doc)

    return jsonify({'msg':'POST 연결 완료!'})
  • 클라이언트 만들기 (url, star, comment 정보 보내주기)
    let url = $('#url').val()
    let star = $('#star').val()
    let comment = $('#comment').val()

    $.ajax({
        type: 'POST',
        url: '/movie',
        data: {url_give: url, star_give: star, comment_give: comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

스파르타피디아 (GET: 보여주기)

  • API 만들고 사용하기 - 보여주기API (Read → GET)
  1. 요청 정보 : URL= /movie, 요청 방식 = GET
  2. 클라(ajax) → 서버(flask) : (없음)
  3. 서버(flask) → 클라(ajax) : 전체 영화를 보내주기
  • 서버 만들기
@app.route("/movie", methods=["GET"])
def movie_get():
    movie_list = list(db.movies.find({},{'_id':False}))
    return jsonify({'movies':movie_list})
  • 클라이언트 만들기
function listing() {
    $('#cards-box').empty()
    $.ajax({
        type: 'GET',
        url: '/movie',
        data: {},
        success: function (response) {
            let rows = response['movies']
            for(let i = 0; i < rows.length; i++) {
                let image = rows[i]['image']
                let title = rows[i]['title']
                let desc = rows[i]['desc']
                let star = rows[i]['star']
                let comment = rows[i]['comment']

                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">${desc}</p>
                                            <p>${star_image}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div>
                                </div>`

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

4주차 과제


:_ 두번 째 듣는 주차인데도 .. 머릿 속에는 부분적으로만 이해가 되어 들어와 있는 느낌이다. 서버와 클라이언트의 연결되는 지점들을 잘 파악하며 이해하도록 더 집중해야할 것 같다.

profile
YeilieY
Fun_Dev
이전 포스트

[항해99] 웹개발 종합반 2회 완강 中 3주차 (Python)

다음 포스트

[항해99] 웹개발 종합반 2회 완강 中 5주차 (AWS, ubuntu, 서버 배포)

0개의 댓글