본문 바로가기
풀스택 개발일지

[웹개발 종합반 4주차] 프로젝트, 스파르타피디아

by 노랑사랑팽이 2022. 10. 25.

🔖09. 프로젝트 세팅

🔎 flask 폴더 구조 만들기

  • static 폴더
  • templates폴더(index.html)
  • app.py 파일

 

🔎 패키지 설치

  • 서버 : flask
  • db : pymongo, dnspython
  • 크롤링 : bs4, requests

🔖10. 조각 기능 구현(크롤링)

🔎 meta 태그 스크래핑

영화 url만 입력했는데, 이미지, 영화제목, 영화내용이 자동으로 따라 붙게 하고 싶을 때 사용.

메타 태그는 <head></head> 부분에 들어가는 사이트의 속성을 설명해주는 태그

og:image / og:title / og:description 을 크롤링 할 예정!

 

🔎 url

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

 

보스 베이비 2

베이비 주식회사의 레전드 보스 베이비에서 인생 만렙 CEO가 된 ‘테드’.베이비인 줄 알았던 조카 ‘티...

movie.naver.com

 

 

🔎 크롤링 코드

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를 먼저 가져와보겠습니다.
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:image"]')['content']
description = soup.select_one('meta[property="og:description"]')['content']

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

 

출력 결과

보스 베이비 2
https://movie-phinf.pstatic.net/20210622_174/1624324910624JhEq2_JPEG/movie_image.jpg?type=m665_443_2
베이비 주식회사의 레전드 보스 베이비에서 인생 만렙 CEO가 된 ‘테드’.베이비인 줄 알았던 조카 ‘티...

🔖12. POST 연습

🔎 포스팅 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():
    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')

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

    doc ={
        'title':title,
        'imgae':image,
        'description':description,
        'star':star_receive,
        'comment':comment_receive
    }
    db.movies.insert_one(doc)

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

 

🔎index.html

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

🔖12. GET 연습하기

🔎 보여주기 API (Read  → GET)

  1. 요청 정보 : URL= /movie, 요청 방식 = GET
  2. 클라(ajax) → 서버(flask) : (없음)
  3. 서버(flask) → 클라(ajax) : 전체 영화를 보내주기

 

🔎app.py

@app.route("/movie", methods=["GET"])
def movie_get():
    movie_list = list(db.movies.find({}, {'_id': False}))
    return jsonify({'movies':movie_list})

DB 저장된 영화들 movies라는 키로 가져오기

 

🔎index.html

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

function listing() {
    $.ajax({
        type: 'GET',
        url: '/movie',
        data: {},
        success: function (response) {
            let rows = response['movies']

            for(let i=0; i<rows.length; i++){
                let comment = rows[i]['comment']
                let image = rows[i]['image']
                let star = rows[i]['star']
                let description = rows[i]['description']
                let title = rows[i]['title']

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

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

☀️ 느낀점

두번째하니깐 조금 알것 같기도 하고... key 설정을 잘 해줘야 겠다. image를 imgae로 데이터 베이스에 저장했다가 사진 안불러와져서 당황했다. 알고보니 compile오류도 있었다. 꼼꼼히 확인해보고 html에 posting하는 습관을 가져야 겠다.

완강 후, 복습 기간에 4주차 프로젝트 과정을 위주로 복습을 해야겠다. 여태까지 배운 내용의 총집합 느낌!!

zep 다른 조원은 삭제하기 버튼을 추가해 삭제 기능까지 넣었다고 한다. 복습기간때 나도 한번 시도해봐야겠다.

저작자표시

'풀스택 개발일지' 카테고리의 다른 글

[웹개발 종합반 5주차] 프로젝트, 버킷리스트  (2) 2022.10.26
[웹개발 종합반 4주차] 4주차 숙제  (1) 2022.10.25
[웹개발 종합반 4주차] 프로젝트, 화성땅 공동구매  (0) 2022.10.24
[웹개발 종합반 4주차] 서버 만들기  (0) 2022.10.24
[웹개발 종합반 3주차] 3주차 숙제  (0) 2022.10.23

관련글

댓글

티스토리툴바