[강의] 스파르타 코딩클럽 웹개발 풀스택 5주차_팬명록

조각기능 날씨 API 적용하기

날씨 가져오기

function set_temp() {
	fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
		let temp = data['temp']
        $('#temp').text(temp)
    });
}

출력화면

응원 등록하기(POST)

1. 데이터 명세
2. 클라이언트와 서버 연결 확인하기
3. 서버부터 만들기
   app.py
   pymongo import 하고 doc에 저장해서 올리기

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
        'name' : name_receive,
        'comment' : comment_receive
    }
    db.fan.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})

4. 클라이언트 만들기

function save_comment() {
	let name = $('#name').val()
    let comment = $('#comment').val()
    let formData = new FormData();
    formData.append("name_give", name);
    formData.append("comment_give", comment);
    fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
    	alert(data["msg"]);
        window.location.reload()
    });
}

5. 완성 확인하기
   

응원 보여주기(GET)

1. 데이터 명세
2. 클라이언트와 서버 연결 확인하기
3. 서버부터 만들기(데이터 가져오기)

def guestbook_get():
    all_comments = list(db.fan.find({},{'_id':False}))
    return jsonify({'result': all_comments})

4. 클라이언트 만들기

function show_comment() {
	fetch('/guestbook').then((res) => res.json()).then((data) => {
    	let rows = data['result']
        $('#comment-list').empty()
        rows.forEach((a)=> {
        	let name = a['name']
            let comment = a['comment']
            let temp_html = `<div class="card">
            					<div class="card-body">
                                	<blockquote class="blockquote mb-0">
                                    	<p>${comment}</p>
                                        <footer class="blockquote-footer">${name}</footer>
                                    </blockquote>
                                </div>
                            </div>`
							$('#comment-list').append(temp_html)
            })
      })
}

5. 완성 확인하기