Flask와 MongoDB를 활용한 웹 애플리케이션 만들기(1) | GET, POST 요청 보내기

"책 리뷰 게시판" 웹 애플리케이션을 만드는 과정을 통해 Flask로 GET, POST 요청을 보내는 부분을 정리하려고 한다.

 

 

1. POST 요청 실습 - 리뷰 저장하기

A. 요청 정보

- 요청 URL= /review , 요청 방식 = POST 
- 요청 데이터 : 제목(title), 저자(author), 리뷰(review)

B. 서버가 제공할 기능

클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄

C. 응답 데이터

(JSON 형식) 'result'= 'success',  'msg'= '리뷰가 성공적으로 작성되었습니다.'

 

1) 클라이언트 코드 - index.html

function makeReview() {
	let title = $('#title').val()
	let author = $('#author').val()
	let review = $('#bookReview').val()
	$.ajax({
		type: "POST",
		url: "/review",
		data: {title_give:title, author_give:author,review_give:review},
		success: function (response) {
			alert(response["msg"]);
			window.location.reload();
		}
	})
}

- jQuery를 활용하여 아래 제목, 저자, 리뷰 부분의 id 값을 통해 각각의 내용을 가져온다.

- data 부분에 딕셔너리 형태로 데이터를 넣어준다.

- DB에 데이터 저장을 성공했으면 해당 메세지를 띄운다.

- window.location.reload() 메서드는 새로고침 버튼처럼 현재 리소스를 다시 불러온다. 즉, 입력했던 내용이 텍스트 상자에서 사라져 다시 입력할 수 있도록 한다.

 

2) 서버 코드 - app.py

@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']
    doc = {
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
    }
    db.bookreview.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})

- 클라이언트로부터 title, author, review 값을 가져온다.

- MongoDB에 갖고온 값을 INSERT 한다.

- jsonify를 활용하여 성공 여부와 성공 메세지를 반환한다.

 

 

2. GET 요청 실습 - 리뷰 보여주기

A. 요청 정보

- 요청 URL= /review , 요청 방식 = GET 
- 요청 데이터 : 없음

B. 서버가 제공할 기능

데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄

C. 응답 데이터

(JSON 형식) 'result'= 'success',  'reviews'= 리뷰리스트

 

1) 서버 코드 - app.py

@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id':False}))
    return jsonify({'all_reviews': reviews})

- DB에서 리뷰 정보를 모두 가져온다. (_id 값은 필요하지 않으므로 갖고오지 않는다.)

- DB에서 갖고오는 것을 성공했으면 리뷰 목록을 딕셔너리 형태로 반환한다.

 

2) 클라이언트 코드 - index.html

function showReview() {
	$.ajax({
		type: "GET",
		url: "/review",
		data: {},
		success: function (response) {
			let reviews = response['all_reviews']
			for (let i = 0; i < reviews.length; i++) {
				let title = reviews[i]['title']
				let author = reviews[i]['author']
				let review = reviews[i]['review']

				let temp_html = `<tr>
							<td>${title}</td>
							<td>${author}</td>
							<td>${review}</td>
 						</tr>`
				$('#reviews-box').append(temp_html)
			}
		}
	})
}

- 서버로부터 받아온 모든 리뷰 데이터가 담겨있는 리스트를 reviews 변수에 넣는다. (app.py에서 list로 변환했음.)

- for문으로 document를 하나씩 차례대로 갖고와 title, author, review 변수에 넣고 테이블에 출력한다.

 

 

참고: 스파르타 코딩 클럽 https://spartacodingclub.kr/