45. GET 연습( 리뷰 보여주기)

--> 자 api를 만들고 사용하기 - 저장된 리뷰를 화면에 보여주기(READ - GET)

 

자 앞서 공부했던것을 정리해보자..!

 

@app.route('/review', methods=['GET'])
def read_reviews():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': 'GET 연결되었습니다!'})

자, 서버에서 브라우저에게  

 

request.args.get('sample_give')

브라우저가 위와 같은 "sample_give"라는 데이터를 서버에게 보내면,

 

서버는 그 데이터를 받고 다시 jsonify 형태로 브라우저에게 응답한다.

  function showReview() {
            $.ajax({
                type: "GET",
                url: "/review?sample_give=샘플데이터",
                data: {},
                success: function (response) {
                    alert(response["msg"]);
                }
            })
        }

여기서 

 

"/review?sample_give=샘플데이터"

이 부분, 즉 물음표(?)뒤의 sample_give데이터가 값을 받아온다. 아마 app.py를 실행하면 print(sample_receive)값으로 

 

"샘플데이터"라는 값이 출력될것이다.

 

자, 근데 ,GET은 솔직히 READ하는 것이기 때문에 

 

@app.route('/review', methods=['GET'])
def read_reviews():
    

이 정도만 있어도 무관하다.

 

서버(GET)은 그냥 모든 리뷰를 DB에서 받아서 내려주기만 하면 된다.

 

즉 ,

@app.route('/review', methods=['GET'])

이렇게만 해도 서버에 이미 (GET)메소드 방식으로 연결이 된 것이라 생각하면 쉽다..!

 

최종적으로,,

 

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

이렇게 하면 된다..!

 

GET은 READ전용이니, DB에서 파일을 가져오고 읽기 위해서 db,bookreview,find({}, {_id: False}))를 이용하였다.

 

단, 단 _id: False는 id값을 보여주지 말라는 의미다.

 

 

자 index.html 즉 브라우저로 넘어가자..!

1.

function showReview() {
            $.ajax({
                type: "GET",
                url: "/review?sample_give=샘플데이터",
                data: {},
                success: function (response) {
                    alert(response["msg"]);
                }
            })

에서

 

2.

 

function showReview() {
            $.ajax({
                type: "GET",
                url: "/review",
                data: {},
                success: function (response) {
                    alert(response["msg"]);
                }
            })

으로 넘어가도 상관이 없다. 클라이언트가 가져가야 할 데이터가 없으니, 그냥 /review만 해도 무방하다.

 

 

    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"]

                        console.log(title, author, review)

                    }

자 위 코드이다. DB에서 데이터를 가져오되, 가져오는 방법이 for 문을 이용하여서 가져온다라고 생각하면 된다. 

 

DB구성 방식이,  아래와 같다.

 

그러니, title, review,author순으로 사용하면 될것이다..!

 

자 인제 찍어줄게 아니라 붙여줘보자..!

 

즉 서버에서 DB에서 값을 가져와서 브라우저에 붙여줘보자 보여주자!

 

<tr>
  <td>왕초보 8주 코딩</td>
  <td>김르탄</td>
  <td>역시 왕초보 코딩교육의 명가답군요. 따라하다보니 눈 깜짝할 사이에 8주가 지났습니다.</td>
</tr>

이 태그를 이용하자!

 

자, 동적으로 이 박스들을 붙여보자,..!

 

이때 ajax가 동적으로 움직이게 한다면 맥북으로 물결모양의 아래부분은 "`" 이 부분은 태그로 바로 사용가능하게 해준다라는것을 잊지말자(jquery)기능!

 

정리하면,

 

 

 

`<tr>
    <td>$title</td>
    <td>$author</td>
    <td>$review</td>
</tr>`

이렇게 하면 기능이 $모양내에서 변수가 접근되어 사용이 된다라는 점 잊지말자!

 

마지막으로, 순서대로 값을 저장하기 위해서 아래와 같은 append()메소드를 이용한다.