📢API 만들고 사용하기
제목, 저자, 리뷰
💾저장된 리뷰를 화면에 보여주기(Read → GET)💻
1️⃣ 클라이언트와 서버 확인하기
2️⃣ 서버부터 만들기
3️⃣ 클라이언트 만들기
4️⃣ 완성 확인하기
1️⃣✔ 클라이언트와 서버 확인하기
👩💼서버쪽 형태 /review, get
sample_give라는 이름으로 데이터를 받는다.
🙋♂️클라이언트 get type에 /review에 sample_give 이름으로 샘플데이터를 가져간다.
success되면 response로 잘 내려와서 alertd로 msg를 찍어줘라 되있다.
서버쪽에서 msg를 내려줄거는 '이 요청은 GET!'
클라이언트 showreview 함수가 언제 불리냐면
$(document).ready(function () {
showReview();
});로딩되자마자 불린다.
연결이 잘되었다.
2️⃣✔ 서버부터 만들기
👨💼서버쪽의 역할
GET은 통상적으로 데이터 조회를 할때 쓴다 했다.데이터를 건들게 없고 조회만 해주기 때문에
클라이언트한테 어떤 데이터를 받을게 없다.
서버는 모든 리뷰를 DB에서 가져와서 그대로 내려주기만 하면 됀다.
sample_receive = request.args.get('sample_give') print(sample_receive)
데이터 받아주는 코드 지우기
DB에서 리뷰 가지고 오는 코드를 붙여 넣는다.
same_ages = list(db.users.find({'age':21},{'_id':False}))reviews라는 변수로 받을것이다.
collection의 bookreview에서 불러오고
찾는 조건은 없다.다 가져온다.
reviews = list(db.bookreview.find({}, {'_id': False}))return jsonify({'msg': '이 요청은 GET!'})
메세지를 내려줄 필요는 없다.
return jsonify({'all_reviews': reviews})
3️⃣✔ 클라이언트 만들기
🙋
all_reviews가 잘 내려오면
그거를 가지고 for문을 돌면서 리뷰들을 붙여주면 된다.
url: "/review?sample_give=샘플데이터",
데이터 조회이기 때문에 클라이언트가
가져가야할 데이터는 없다.
👉url: "/review",
만약에 잘 내려왔다면 response중에서 all_reviews 값만 일단 가져온다.
reviews라는 변수로 붙여주겠다.
let reviews = response['all_reviews']
잘 내려왔는지 확인하기 위해
console.log(reviews)
잘 찍혔다.
이제 for문을 돌릴 것이다.
(쌓을 데이터가 필요하면 브라우저에서 몇번 더 작성해 준다.)
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)잘 찍힌다.
이제 찍어줄게 아니라 붙여줄 것이다.
let temp_html = ``
안에 뭘 붙여주냐면 브라우저 아래 테이블만들어 놓은곳에 제목저자리뷰의 내용물에 붙여줘야하기 때문에 아래 테이블의 내용물 reviews-box를 본다.
확실치 않으면 tr태그 전체를 복붙해서 본다.
맞으니까 ctrl+x로 가져온다.
let temp_html = ` <tr>
<td>${title}</td>
<td>${author}</td>
<td>${review}</td>
</tr>` 이렇게 보여줄 데이터 이름을 자리에 맞춰주고
이제 붙여줄 건데 어디다 붙여주냐면
id="reviews-box"라는 곳에서 가져왔다.
$('#reviews-box').append(temp_html)
4️⃣✔ 완성 확인하기
이제 브라우저에 가서 확인 해주면 아래에 잘 붙는걸 볼 수 있다.
