明日学習団第五週目WIL🐱👤API設計の復習、サーバーのアップグレード
Movie Star APIの復習🎀
映画スターGET🎀
クライアント-サーバ接続
サーバの作成
@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[`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)
}
}
});
}
完了
MOVIESTAR POST(いいですね)🎀
クライアント-サーバ接続
サーバの作成
@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': '좋아요 완료!'})
クライアントの作成
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
完了
MOVIESTAR POST(いいですね)🎀
クライアント-サーバ接続
サーバの作成
@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': '삭제 완료!'})
クライアントの作成
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
完了
AWS 🎀
Reference
この問題について(明日学習団第五週目WIL🐱👤API設計の復習、サーバーのアップグレード), 我々は、より多くの情報をここで見つけました https://velog.io/@nnakki/내일배움단5주차-WILAPI설계복습-서버올리기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol