내일배움단 11일메이킹챌린지 7일차

7일차 ( [무비스타]세팅 ~ 완성 / 프로젝트 7일차 )

[ 7일차 ] 튜터님과의 질문

> 개인 사정으로 참석 못했기에 회의록 혹은 채팅 내용으로 대체.
  • 로딩 후 전체 목록이 안나오는 문제는 팀원께서 해결.
    	> ajax 코드에 async: false 추가.
    	>참고 링크 : https://recollectionis.tistory.com/167
  • 나머지 변동 사항이나 해야할 작업들은 내일 회의에서 논의 .

[1][ 무비스타 ] 세팅

app.py / templates 폴더 > index.html / static 폴더 추가

> app.py 기본 뼈대
from pymongo import MongoClient

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

client = MongoClient('localhost', 27017)
db = client.dbsparta


# HTML 화면 보여주기
@app.route('/')
def home():
    return render_template('index.html')


# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': 'list 연결되었습니다!'})


@app.route('/api/like', methods=['POST'])
def like_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'like 연결되었습니다!'})


@app.route('/api/delete', methods=['POST'])
def delete_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'delete 연결되었습니다!'})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
> index.html 기본 뼈대
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>마이 페이보릿 무비스타 | 프론트-백엔드 연결 마지막 예제!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/>
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
        <style>
            .center {
                text-align: center;
            }

            .star-list {
                width: 500px;
                margin: 20px auto 0 auto;
            }

            .star-name {
                display: inline-block;
            }

            .star-name:hover {
                text-decoration: underline;
            }

            .card {
                margin-bottom: 15px;
            }
        </style>
        <script>
            $(document).ready(function () {
                showStar();
            });

            function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }

            function likeStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/like',
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }

            function deleteStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
            }

        </script>
    </head>
    <body>
        <section class="hero is-warning">
            <div class="hero-body">
                <div class="container center">
                    <h1 class="title">
                        마이 페이보릿 무비스타😆
                    </h1>
                    <h2 class="subtitle">
                        순위를 매겨봅시다
                    </h2>
                </div>
            </div>
        </section>
        <div class="star-list" id="star-box">
            <div class="card">
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img
                                        src="https://search.pstatic.net/common/?src=https%3A%2F%2Fssl.pstatic.net%2Fsstatic%2Fpeople%2Fportrait%2F201807%2F20180731143610623-6213324.jpg&type=u120_150&quality=95"
                                        alt="Placeholder image"
                                />
                            </figure>
                        </div>
                        <div class="media-content">
                            <a href="#" target="_blank" class="star-name title is-4">김다미 (좋아요: 3)</a>
                            <p class="subtitle is-6">안녕, 나의 소울메이트(가제)</p>
                        </div>
                    </div>
                </div>
                <footer class="card-footer">
                    <a href="#" onclick="likeStar('김다미')" class="card-footer-item has-text-info">
                        위로!
                        <span class="icon">
              <i class="fas fa-thumbs-up"></i>
            </span>
                    </a>
                    <a href="#" onclick="deleteStar('김다미')" class="card-footer-item has-text-danger">
                        삭제
                        <span class="icon">
              <i class="fas fa-ban"></i>
            </span>
                    </a>
                </footer>
            </div>
        </div>
    </body>
</html>

[2][ 무비스타 ] GET 연습

DB에서 데이터를 받아 html에서 for 을 통해 보여주기

> GET - app.py
@app.route('/api/list', methods=['GET'])
def show_stars():
    allstars = list((db.mystar.find({}, {'_id': False})).sort("like", -1))
    	// X.sort("a", -1) = X를 "a" 기준으로 내림차순으로 정렬 ( 1은 오름차순 )

    return jsonify({'starslist': allstars})
> GET - index.html
function showStar() {
                $('#star-box').empty()
                $.ajax({
                    type: 'GET',
                    url: '/api/list',
                    data: {},
                    success: function (response) {
                        let stars = response['starslist']

                        for (let i = 0; i < stars.length; i++){
                            let name = stars[i]['name']
                            let movie = stars[i]['recent']
                            let likes = stars[i]['like']
                            let img = stars[i]['img_url']
                            let url = stars[i]['url']

                            let temp_html = `<div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                <img
                                                                        src="${img}"
                                                                        alt="Placeholder image"
                                                                />
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${likes})</a>
                                                            <p class="subtitle is-6">${movie}</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-box').append(temp_html)
                        }
                    }
                });
            }

결과 :

[3][ 무비스타 ] POST 연습 - 좋아요 +1

좋아요 버튼을 누를 때마다 DB의 좋아요 수를 +1씩 업데이트

> POST - app.py
@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']

    target = db.mystar.find_one({'name': name_receive})
    like_now = target['like']

    like_up = like_now + 1 //받은 이름의 좋아요를 +1

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

		// 받은 이름의 좋아요 수를 변경 (업데이트)

    return jsonify({'msg': '내가 제일 좋아하는 FAVORITE STAR'})
> POST - index.html
function likeStar(name) { //이름을 받아서 전달.
                $.ajax({
                    type: 'POST',
                    url: '/api/like',
                    data: {name_give:name},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
                window.location.reload()
            }

결과 :

[4][ 무비스타 ] POST 연습 - 삭제

삭제 버튼을 누르면 DB에서 해당 데이터를 삭제

> POST - app.py
@app.route('/api/delete', methods=['POST'])
def delete_star():
    dname_receive = request.form['dname_give']

    db.mystar.delete_one({'name': dname_receive})

    return jsonify({'msg': '삭제 되었습니다! 잘가요, MY STAR!'})
> POST - index.html
function deleteStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {dname_give:name},
                    success: function (response) {
                        alert(response['msg']);
                    }
                });
                window.location.reload()
            }

결과 :

강의를 듣고 난후_

	: 업데이트나 삭제를 통해 이미 있는 데이터를 계속 변경해나가는
	것이 신기하고 재미있었다. 나중에 4주차때 배운 것을 이용해서 영
    	화배우를 링크를 통해 추가하고 코멘트를 다는 것 또한 추가 할 수
        있지 않을까?
        나중에 한번 도전 해봐야 겠다.
        그리고 오늘 회의에 참석하지 못했던게 디게 뼈아팠던것 같다.
        갑자기 하게 된 일 때문에 어쩔 수 없었지만, 튜터님 이야기를 들
        었으면 좀더 성장 할 수 있었지 않았을까.
        뭔가 아쉬웠다. 아쉬웠기에 지금 이 늦은 시간에까지 강의를 듣고
        있는지도.
        내일 아침 일찍 출근 해야되는데 망했다..

좋은 웹페이지 즐겨찾기