내일배움단5주차 WIL🐱‍👤API설계복습, 서버올리기

무비스타 API 복습 🎀

무비스타 GET 🎀

1. 클라이언트 - 서버 연결

2. 서버 만들기

   @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})

   • point : 내림차순 정렬방법 sort('like', -1)

3. 클라이언트 만들기

              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)
                           }
                       }
                   });
               }

   • point : likeStar와 deleteStar가 (name)값을 변수로 받는 함수이기 때문에, 변수가 들어가는 부분에도 꼭 ${'name'}을 해주기

4. 완성

무비스타 POST (좋아요) 🎀

1. 클라이언트 - 서버 연결

2. 서버 만들기

   @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': '좋아요 완료!'})

   • point
     1. target_star > 'name'을 조건으로 한명의 정보 가져오기
     2. current_like > 한명의 정보 중 update가 필요한 like 정보만 가져오기
     3. new_like > like 수정
     4. update 문

3. 클라이언트 만들기

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

4. 완성

무비스타 POST (좋아요) 🎀

1. 클라이언트 - 서버 연결

2. 서버 만들기

   @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': '삭제 완료!'})

   • point
     1. delete문 형식

3. 클라이언트 만들기

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

4. 완성

AWS 🎀