API 만들고 사용하기
💾리스팅 API (Read → GET)💻
우리가 만들 API 두 가지
1️⃣ 포스팅API - 카드 생성 (Create) : 클라이언트에서 받은 url, comment를 이용해서 페이지 정보를 찾고 저장하기
2️⃣✔ 리스팅API - 저장된 카드 보여주기 (Read)
1️⃣ 클라이언트와 서버 연결 확인하기
2️⃣ 서버부터 만들기
3️⃣ 클라이언트 만들기
4️⃣ 완성 확인하기
1️⃣✔ 클라이언트와 서버 연결 확인하기
👩💼app.py에서 받는 형식 체크하기
🙋♀️showarticles 에서 주는 형식 체크
성공하면 app.py에서 어떤 msg 내려주는지 체크
showarticles는 로딩이되자마자 나오게 되어있다.
브라우저에서 로딩을 하자마자 'GET 연결 되었습니다!'라는 alert이 뜬다.
2️⃣✔ 서버부터 만들기
👨💼서버 쪽에서 할 일
저장된 정보를 모두 불러와서 그대로 클라이언트한테 줄거기 때문에
클라이언트로부터 받을 데이터 없다.
same_ages = list(db.users.find({'age':21},{'_id':False}))
articles로 변수를 받겠다.
articles collection에서 데이터를 가져온다.
find에 조건없다.
articles = list(db.articles.find({}, {'_id': False}))
이제 msg를 내려줄게 아니라 articles 정보를 내려주면 된다.
'all_articles'라고 하고 내려줄것이다.
return jsonify({'all_articles':articles})
3️⃣✔ 클라이언트 만들기
서버에서 준 데이터를 그대로 브라우저에 그려줄(붙여줄)것이기 때문에
🙋♀️데이터 가지고 가야할 것 없다.
url: "/memo",
그리고 서버에서 준 데이터들을 잘 받았는지 확인하기 위해,
(response)에 articles가 잘 내려오는지 확인하는게 먼저다.
먼저 let articles = response['']
app.py에서 return jsonify({'all_articles':articles})
👉response에 all_articles로(=articles전체db)내려준다고 하였다.
let articles = response['all_articles']
console.log(articles)
브라우저에 리로딩하고 확인
이제 카드를 붙이려면 for문을 돌려야한다.
(console에 찍혀 있는 5개의 데이터를 가져와야한다.)
let 변수 = collection이름[에서의 i번째]['가져올 목록']
순서대로 나열해준다
for (let i = 0; i < articles.length; i++) {
let title = articles[i]['title']
let image = articles[i]['image']
let url = articles[i]['url']
let desc = articles[i]['desc']
let comment = articles[i]['comment']
console.log(title,image,url,desc,comment)
잘 찍혔다.
이제 붙여주겠다.
card-div를 하나 가져온다.
내용물에 붙여준다.
temp_html 붙여줄건데 어디다 붙여주냐면
id "cards-box"
에다 붙여준다.
$('#cards-box').append(temp_html)
이제 처음 붙어있던 카드들을 삭제해줘도 될 것 같다.
있던 card div들을 삭제해준다.
4️⃣✔ 완성 확인하기
붙여진 카드 url들어간다.
원하는 영화 들어가서
url을 따온 뒤에
포스팅박스 안에 url을 넣고 comment 써주기
기사저장 누르고 리로딩되면 방금 내가 작성한 카드가 붙는것을 확인 할 수 있다.
