웹개발 종합반 - 4주차 - 12. [스파르타피디아] - POST 연습(포스팅하기)

앞서 만들었던 뼈대를 토대로 POST를 해보자!

 

먼저

서버를 만들어보자!

 

from flask import Flask, render_template, request, jsonify

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient

client = MongoClient('mongodb+srv://test:sparta@cluster0.cctcpnr.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta #db이름

app = Flask(__name__)


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


@app.route("/movie", methods=["POST"])  #movie폴더안에서 POST 시킴
def movie_post():  
    url_receive = request.form['url_give']   #클라이언트로부터 받아온 url 
    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) #받아온 url에서 크롤링할 것임
    soup = BeautifulSoup(data.text, 'html.parser') #받아온 url의 text 즉 해당 url의 html 코드임

    image = soup.select_one('meta[property="og:image"]')['content']  # 메타태그안에 property가 og:image인 meta태그안에 content 추출
    title = soup.select_one('meta[property="og:title"]')['content']  # 메타태그안에 property가 og:title인 meta태그안에 content 추출
    des = soup.select_one('meta[property="og:description"]')['content']  # 메타태그안에 property가 og:descrition인 meta태그안에 content 추출

    doc = {
        'title':title,
        'image':image,
        'des' :des,
        'start' : star_receive,
        'comment' : comment_receive
    }
    db.movies.insert_one(doc);   #저장하자~

    return jsonify({'msg':'저장 완료!'})

생각보다 어렵지만 생각보다 쉽다

차근차근 주석써보면서 정리하니 이해가 편하다

 

다음으로

클라이언트쪽을 손봐주자

function posting() {  //기록하기 버튼의 onclick 속성에 posting() 함수가 있음 
    let url = $('#url').val();   // id:url의 value값
    let star = $('#star').val();  // id:star의 value값
    let comment = $('#comment').val();  // id:comment의 value값
    $.ajax({ 
    type: 'POST',  //POST방식으로!
    url: '/movie',  //movie 폴더로!
    data: {url_give:url,star_give:star,comment_give:comment}, // 보낼 데이터들!
    success: function (response) {  //성공시
    alert(response['msg']);  //받아온 메시지 출력
    window.location.reload();  //그리고 새로고침ㅎ
}
});
}

 

 

이렇게 하고 웹페이지에 전에 조각 기능 구현에 했던 url과 함께 입력을 해보면~

이렇게 DB에 들어왔다 ㅎㅎ