[스파르타코딩클럽] 💻 웹개발 종합 - 5주차 (1)

- 클라이언트 및 서버 동작 구조 -

《 마이페이보릿 무비스타 프로젝트 예제 》

[ 폴더구조 ]

- movieStar

└ static

└ templates

└ index.html

└ app.py

└ init_db.py

[ init_db.py ]

- 초기 index.html 뼈대에 붙일 영화인 정보 DB가 필요함

- 이를 네이버 영화인 랭킹 페이지에서 영화인 정보를 크롤링해서 DB에 저장할 전처리 파일

# DB Setting
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient

# -- pyMongo Settings --
client = MongoClient('localhost', 27017)
db = client.dbsparta

# 네이버 영화인 랭킹 페이지에서 각 영화인의 정보를 소개하는 링크를 추출하여 urls 리스트에 저장후 반환
def get_urls():
    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('https://movie.naver.com/movie/sdb/rank/rpeople.nhn', headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')
    trs = soup.select('#old_content > table > tbody > tr')

    urls = []
    for tr in trs:
        a = tr.select_one('td.title > a')
        if a is not None:
            base_url = 'https://movie.naver.com/'
            url = base_url + a['href']
            urls.append(url)

    return urls


# 영화인 정보를 담고있는 페이지 url을 전달받아 영화인의 이름, 프로필사진 링크, 최근작품등의 정보를 추출하여 DB에 저장
def insert_star(url):
    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')

    name = soup.select_one('#content > div.article > div.mv_info_area > div.mv_info.character > h3 > a').text
    img_url = soup.select_one('#content > div.article > div.mv_info_area > div.poster > img')['src']
    recent_work = soup.select_one(
        '#content > div.article > div.mv_info_area > div.mv_info.character > dl > dd > a:nth-child(1)').text

    doc = {
        'name': name,
        'img_url': img_url,
        'recent': recent_work,
        'url': url,
        'like': 0
    }

    db.mystar.insert_one(doc)
    print('완료!', name)


# 기존 콜렉션을 초기화한 후 get_urls() 함수를 통해 전달받은 url 리스트를 반복문을 통해 insert_star() 함수로 전달
def insert_all():
    db.mystar.drop()  # mystar 콜렉션을 모두 삭제
    urls = get_urls()
    for url in urls:
        insert_star(url)

### 실행하기
insert_all()

[ 영화인 정보 카드 도식화 ]

- (서버) DB로부터 모든 데이터를 가져와 클라리언트로 전달

- (클라이언트) 서버로부터 GET 요청방식을 통해 전달받은 데이터를 브라우저에 표현

[ 영화인 카드의 좋아요 기능 ]

- (클라이언트) POST 요청 방식을 통해 서버로 '위로!👍' 버튼이 클릭된 영화인 정보를 전달

- (서버) 클라이언트로부터 전달받은 영화인 정보를 통해 해당 데이터의 'like' 필드값을 1만큼 상승

[ 영화인 카드 삭제 ]

- (클라이언트) POST 요청 방식을 통해 서버로 '삭제🚫' 버튼이 클릭된 영화인 정보를 전달

- (서버) 클라이언트로부터 전달받은 영화인 정보를 통해 해당 데이터 삭제

[ 클라이언트 파일 (index.html) JavaScript 코드 ]

- $(document).ready(function( ) ) { } : 브라우저가 불려오는 즉시 실행 되는 함수(최초 실행 함수)

  $(document).ready(function () {
    showStar();		// 서버로부터 전달받은 DB를 통해 영화인 정보 카드를 도식화 하는 함수
  });

- showStar( ) : GET요청 방식을 통해 서버로부터 영화인 정보를 담고 있는 DB를 전달받아 HTML 요소에 삽입 함수

  function showStar() {
    $.ajax({
      type: "GET",
      url: "/api/list?movie_stars=movie_star",
      data: {},
      success: function (response) {
        let mystars = response["movie_stars"];
        for (let i = 0; i < mystars.length; i++) {
          name = mystars[i]["name"];         // 영화인 이름
          url = mystars[i]["url"];           // 영화인 정보를 담고 있는 네이버 링크 URL
          like = mystars[i]["like"];         // 영화인 카드 좋아요 수
          image_url = mystars[i]["img_url"]; // 영화인 프로필 사진 링크 URL
          recent = mystars[i]["recent"];     // 영화인의 최근 작품

          temp_html = `<div class="card">
                        <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                            <figure class="image is-48x48">
                                <img src="${image_url}" alt="Placeholder image"/>
                            </figure>
                            </div>
                            <div class="media-content">
                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
                            <p class="subtitle is-6">${recent}</p>
                            </div>
                        </div>
                        </div>

                        <footer class="card-footer">
                        <a href="#"
                           onclick="likeStar('${name}')"
                           class="card-footer-item has-text-info">위로!
                            <span class="icon">
                            <i class="fas fa-thumbs-up"></i>
                            </span>
                        </a>
                        <a href="#"
                           onclick="deleteStar('${name}')"
                           class="card-footer-item has-text-danger">삭제
                            <span class="icon">
                            <i class="fas fa-ban"></i>
                            </span>
                        </a>
                        </footer>
                    </div>`;

          $(".star-list").append(temp_html);
        }
      },
    });
  }

- likeStar( ) : 영화인 카드의 '위로!👍' 버튼 클릭시 해당 영화인 정보를 POST 요청방식을 통해 서버로 전달하는 함수

  function likeStar(name) {
    $.ajax({
      type: "POST",
      url: "/api/like",
      data: { name_give: name },
      success: function (response) {
        alert(response["msg"]);
        window.location.reload();
      },
    });
  }

- deleteStar( ) : 영화인 카드의 '삭제🚫' 버튼 클릭시 해당 영화인 정보를 POST 요청방식을 통해 서버로 전달하는 함수

  function deleteStar(name) {
    $.ajax({
      type: "POST",
      url: "/api/delete",
      data: { name_give: name },
      success: function (response) {
        alert(response["msg"]);
        window.location.reload();
      },
    });
  }

[ 서버 파일 (app.py) ]

from pymongo import MongoClient
from flask import Flask, render_template, jsonify, request

# -- Flask Setting --
app = Flask(__name__)

# -- pyMongo Settings --
client = MongoClient('localhost', 27017)
db = client.dbsparta

## -- Routings --
# 초기 브라우저 페이지 ('index.html' render)
@app.route('/')
def home():
    return render_template('index.html')

## -- API --
# Show Table API
@app.route('/api/list', methods=['GET'])
def show_stars():
    # mystar 콜렉션에서 모든 DB 가져오기 ['like'수 내림차순 정렬 : sort() ]
    movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1))
    return jsonify({'movie_stars': movie_star})

# Plus Like API
@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']

    target_star = db.mystar.find_one({'name': name_receive})
    current_like = target_star['like']
    new_like = current_like + 1

    db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})

    return jsonify({'msg': '좋아요 완료!'})

# Delete Card API
@app.route('/api/delete', methods=['POST'])
def delete_star():
    name_receive = request.form['name_give']
    db.mystar.delete_one({'name': name_receive})

    return jsonify({'msg': 'delete 완료되었습니다!'})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

[ 완성 모습 ]

저작자표시 비영리 변경금지 (새창열림)

《 마이페이보릿 무비스타 프로젝트 예제 》

티스토리툴바