본문 바로가기
개발 일지/Web

[ 스파르타 / Web ] 웹개발 종합반 4주차_#1

by CODESIGN 2023. 1. 2.

과제


mongoDB를 사용해서 펜명록 만들기

 

 

 

입력받은 데이터 DB에 저장 - html 파일


nickname과 comment에 입력되는 데이터를 가져왔다.

function save_comment() {
	let nickname = $('#name').val();
	let comment = $('#comment').val();
	$.ajax({
		type: 'POST',
		url: '/homework',
		data: {'nickname_give': nickname,'comment_give':comment},
		success: function (response) {
			alert(response['msg'])
			window.location.reload()
		}
	})
}

 

 

입력받은 데이터 DB에 저장 - py 파일


DB와 연결시켜주었다

# DB와 연결시켜준다
from pymongo import MongoClient
client = MongoClient('디비링크입력')
db = client.sparta

 

가져온 데이터로 DB에 저장해주었다.

@app.route("/homework", methods=["POST"])
def homework_post():
    nickname_receive = request.form['nickname_give']
    comment_receive = request.form['comment_give']

    # DB에 저장
    doc = {
        'nickname': nickname_receive,
        'comment': comment_receive
    }
    db.homework.insert_one(doc)
    return jsonify({'msg': '응원 완료!'})

 

 

DB에 있는 데이터 포스팅하기 - html 파일


가져온 데이터를 원하는 html의 포멧에 넣어주었다.

 

function show_comment() {
    $('#comment-list').empty()
    $.ajax({
        type: "GET",
        url: "/homework",
        data: {},
        success: function (response) {
            console.log(response)
            let rows = response['comments']
            for (let i = 0; i < rows.length; i++) {
                let nickname = rows[i]['nickname']
                let comment = rows[i]['comment']

                let temp_html = `<div class="card">
                                    <div class="card-body">
                                        <blockquote class="blockquote mb-0">
                                            <p>${comment}</p>
                                            <footer class="blockquote-footer">${nickname}</footer>
                                        </blockquote>
                                    </div>
                                </div>`
                $('#comment-list').append(temp_html)
            }
        }
    });
}

 

 

DB에 있는 데이터 포스팅하기 - py 파일


DB에서 데이터를 가져온다.

 

@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({},{'_id':False}))
    return jsonify({'comments':comment_list})
반응형

댓글