카테고리 없음

[4주차]스파르타코딩클럽 웹개발 종합반 3

tft4rollz 2022. 10. 24. 17:30

4-9 [스파르타피디아] -프로젝트 세팅

본격적으로 들어가기에 앞서 계속 해왔던것처럼 movie 폴더에 static, templeates 폴더를 만들고 

templeats 폴더에 index.html를 만들고 최상위폴더에 app.py를 만들고 각종 인터프리터들을 설치했다.

 

4-10 [스파르타피디아] - 조각 기능 구현해보기

프로젝트 준비- URL에서 페이지 정보 가져오기( meta 태그 스크래핑)

메타 태그는, <head></head> 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들이다.

예) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등

우리는 그 중 og:image / og:title / og:description 을 크롤링 할 예정이다.

먼저 크롤링 기본 코드를 넣는다.

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를 먼저 가져와보겠습니다.

그 다음 meta 태그를 이용하여 제목, 그림 ,설명을 크롤링 한다. 끝!

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)

4-11 [스파르타피디아] - 뼈대 준비하기.

강의해서 준비 해 준 app.py 코드스니펫 과 index.html 코드스니펫을 클릭하여 붙여넣기했다.

 

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

강의로 한번 풀고 그다음 혼자 안보고 연습 해 봤다.

아직은 설명까지는 할 수 없을것 같아 5장까지 전부 끝낸 후 복습할때 자세하게 알아봐야겠다..ㅠㅠ

직접 수정 하면서 고쳐 본 것만 올려봅니다.. 

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')

    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']

    doc = {
        'title' : title,
        'image' : image,
        'desc' : desc,
        '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()
}
});
}

4-13 [스파르타피디아] GET 연습(보여주기)

1. 서버 만들기

서버는 받는게 없으므로 order에 주문 정보를 담아서 내려주기

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

2. 클라이언트 만들기

응답을 잘 받아서 for 문으로 붙여주기

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 desc = rows[i]['desc']
                let image = rows[i]['image']
                let star = rows[i]['star']
                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">${desc}</p>
                <p>${star_image}</p>
                <p class="mycomment">${comment}</p>
                </div>
                </div>
                </div>`
                $('#cards-box').append(temp_html)
            }
        }
    })
}

완성!

이제 남은 건 숙제 말곤 없다.

계속 보고 하다보니 적응은 되는데.. 설명 하기는 힘들다..ㅠㅠ