-
[4주차]스파르타코딩클럽 웹개발 종합반 3카테고리 없음 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) } } }) }완성!
이제 남은 건 숙제 말곤 없다.
계속 보고 하다보니 적응은 되는데.. 설명 하기는 힘들다..ㅠㅠ