get 연습

1. 클라이언트와 서버 연결 확인하기

2. 서버부터 만들기

3. 클라이언트 만들기

4. 완성 확인하기

 

 

1. 클라이언트와 서버 연결 확인하기

/api/list 라는 주소에서 get타입으로 요청을받는 api

sample_give를 받아서 msg라는 메시지를 내려줌

 

index.html에 가보면 showstar라는 함수에서 요청

 

로딩이 되면 자동으로 요청하게 하는 코드

새로고침하면 연결이 잘되어있음을 확인 가능

2. 서버부터 만들기

서버에서 해야할일 ?

Robo 3T에 가지고 갔던 데이터들을 쭉 내려주면 됌

 

 

우선 dbprac을 가지고 온후에 필요한 코드를 복사  (여러개 찾기)

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
 
#insert / find / update / delete
 
# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)
 
# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})
 
# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False}))
 
# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
 
# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

3. aaa부분은 내 맘대로 맞춰주기만 하면됌, users부분을 robo3t에서 맞는 파일 위치로 바꿔주고, msg를 내려주는게 아니기 때문에 다른 아무거나로 바꿔줌

 

 

 

※ 위 예시 프로젝트는 like순 내림차순으로 데이터를 내려주어야 하기 때문에 .sort('like', -1) 붙여줌(구글링)

# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
    movie_star = list(db.mystar.find({},{'_id':False}).sort('like', -1))
    return jsonify({'movie_stars': movie_star})

 function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['monie_stars']
                        console.log(mystars)

response에 movie_stars 잘 들어왔는지 찍어보기

 

for문 쓰고 console.log찍어보기

function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['monie_stars']
                        for (let i = 0; i < mystars.length; i++){
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']
 
                            console.log(name,img_url,recent,url,like)
               

temp_html로 카드 만들어주기

 

 

function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['movie_stars']
                        for (let i = 0; i < mystars.length; i++){
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']
 
                            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_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-box').append(temp_html)
                        }
                    }
                });
            }

이건 필요가 없으니 삭제

<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>
    </body>

데이터 바꾸기

오른쪽 클릭