스파르타코딩클럽 웹개발 종합반 4주차 - Flask, GET, POST

Flask 서버 만들어서 GET, POST 방식으로 주고받기

기존의 만들었던 영화 평점 사이트에 추가

 

Flask

#mongoDB 연결
from pymongo import MongoClient
client = MongoClient('mongoDB URL')
db = client.dbsparta


@app.route('/')
def home():
    # templates 저자된 html 불러옴
    return render_template('index.html')

@app.route("/movie", methods=["POST"])
def movie_post():
    # url 받아서 url 주소의 meta image, title, desc 크롤링해서 comment, star 같이 db에 저장
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    star_receive = request.form['star_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')

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


    doc = {
        'title':ogtitle,
        'desc':ogdesc,
        'image':ogimage,
        'star':star_receive,
        'comment':comment_receive
    }

    db.movies.insert_one(doc)

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

@app.route("/movie", methods=["GET"])
def movie_get():
    #db 데이터 모두 불러와서 전송
    all_movies = list(db.movies.find({},{'_id':False}))
    return jsonify({'result':all_movies})

 

javascpirt

$(document).ready(function () {
    listing();
});

function listing() {
    // result 값을 a 로 하나씩 출력해, temp_html 만들어, id값 cards-box에 추가 
    fetch('/movie').then(res => res.json()).then(data => {
        let rows = data['result']
        $('#cards-box').empty()
        rows.forEach((a) => {
            let comment = a['comment']
            let title = a['title']
            let image = a['image']
            let desc = a['desc']
            let star = a['star']

            let star_repeat = '⭐'.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_repeat}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div>
                                </div>`

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

function posting() {
    // id url, comment, star 값 formData 추가해서 전송
    let url = $('#url').val()
    let comment = $('#comment').val()
    let star = $('#star').val()

    let formData = new FormData()
    formData.append("url_give", url)
    formData.append("comment_give", comment)
    formData.append("star_give", star)

    fetch('/movie', { method: "POST", body: formData }).then(res => res.json()).then(data => {
        alert(data['msg'])
        // 새로고침
        window.location.reload()
    })
}

 

http://spartacodingclub.shop/web/mars

선착순 공동구매

http://spartacodingclub.shop/web/movie

스파르타 피디아