4주차에는 Flask프레임워크를 활용해 API를 만들었다.

Flask 기초

flask패키지를 설치하고 파이썬 파일에 아래 코드를 입력한다.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'

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

@app.route('/')
def home():
   return 'This is Home!'

위 코드는 URL에 접속하게 되면 This is Home!을 띄어준다

app = Flask(__name__)

위 코드는 Flask 인스턴스를 생성한 것인데 __name__에는 이 파일을 직접 돌리면 __main__이라는 문자열이 들어가고 외부에서 돌리면 현재 이 파이썬 파일의 이름이 들어간다.

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

위 코드는 이 파일을 직접 실행했다면 앱을 실행하라는 것이다.

외부에서 돌렸을때 main을 파일 이름으로 바꿔주지 않으면 작동하지 않았다

HTML파일 주기

Flask서버를 만들때 프로젝트 폴더 안에 templates, static 이라는 경로를 추가해주고 시작한다
templates폴더에는 HTML파일을 넣어두고 static폴더에는 이미지, css파일을 넣어둔다.

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)

render_template모듈을 추가로 import해주고 return render_template('index.html')코드를 이용해서 templates폴더에 있는 HTML파일을 불러올 수 있다.

API

api는 서버를 은행 클라이언트를 고객이라고 했을때 은행의 창구 같은 것이다.
클라이언트가 데이터를 요청할때 방식이 존재하는데 대표적으로 GET과 POST가 있다.

GET

통상적으로 데이터 조회(Read)를 요청할 때
데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

POST

통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

둘의 차이를 보면
GET방식은 클라이언트에서 데이터를 보낼때 url에 실어 보내고 이를 서버에서 request.args.get()을 이용해 받고
POST방식은 클라이언트에서 데이터를 보낼때 data : {}에 실어 보내고 이를 서버에서 request.form[]을 이용해서 받는다.

화성땅 공동구매

파이썬파일

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

@app.route("/mars", methods=["POST"])
def web_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.mars02.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

@app.route("/mars", methods=["GET"])
def web_mars_get():
    order_list = list(db.mars02.find({}, {'_id': False}))
    return jsonify({'orders': order_list})

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

html파일

<script>
        $(document).ready(function () {
            show_order();
        });

        function show_order() {
            $.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)
                    }
                }
            });
        }

        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()
                }
            });
        }
    </script>

연습으로 화성땅 공동구매 웹페이지를 만들었는데 url을 입력하니 전에 배우면서 썼던 다른 api들처럼 나왔다

meta 태그

카카오톡으로 공유할때 나오는 이 부분을 og(open graph)라고 하는데 크롤링 하려면 head안에 있는 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')

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

print(title, image, desc)