본문 바로가기
스파르타 코딩 웹개발 종합반/4주차

4-12 [스파르타피디아] - POST 연습(포스팅하기)

by 율✌️ 2022. 5. 21.
API 만들고 사용하기 - 포스팅API (Create →POST)
1. 요청 정보 : URL= /movie, 요청 방식 = POST
2. 클라이언트(ajax) → 서버(flask) : url, star, comment
3. 서버(flask) → 클라이언트(ajax) : 메시지를 보냄 (포스팅 완료!)

 

먼저, 클라이언트와 서버 연결 확인

서버코드-app.py

@app.route("/movie", methods=["POST"])
def movie_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST 연결 완료!'})

클라이언트 코드 -index.html

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

<button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>

 

 

서버만들기

-Url, Star, comment 정보를 받아서 저장

- 미리 만든 meta_prac.py도 참고해서 붙이기

@app.route("/movie", methods=["POST"])
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  정보를 보내기

function posting() {
    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()
        }
    });
}

DB에 잘 들어갔는지 확인