API 만들고 사용하기
영화인 조회 API (Read → GET)
- 클라이언트와 서버 연결 확인하기
- 서버부터 만들기
- 클라이언트 만들기
- 완성 확인하기
- 클라이언트와 서버 연결 확인하기
서버에서 '/api/list'에'GET'
sample_give로 받고
msg로는 'list 연결되었습니다!'라고 내려주고
있다.
클라이언트에서는 showStar라는 함수로 요청하고 있고 로딩이되자마자 동작하게 되어있다.(조회)
GET에 '/api/list?sample_give=샘플데이터'
브라우저에서 로딩하자마자 'list 연결되었습니다!'라는 msg가 뜬다.연결이 잘되어있다.
- 서버부터 만들기
서버에서 할 일
Robo3T에서 가져왔던 정보들을 쭉 클라이언트에 내려주면 된다.
나홀로메모장에서 articles 내려주듯이 내려주면 되는데 다른점은 like의 역순으로 내려줘야 한다.일단 전부 내려주는것 부터 해본다.
movie_star = list(db.mystar.find({},{'_id':False}))
return jsonify({'movie_stars':movie_star})
그다음 이제 정렬을 해줄건데,
pymongo에는 정렬을 해서 뽑는 기능이 있다.
🔍🔍pymongo 정렬🔎🔎>>sort라는 단어가 나온다.
🔍🔍pymongo sort w3school🔎🔎
mydoc = mycol.find().sort("name")
예시를 보니 이름순(오름차순)대로 정렬된다.
mydoc = mycol.find().sort("name", -1)
예시를 보니 이름역순(내림차순)으로 정렬된다.
find()가 끝나는 지점에서 붙여주면 되겠다.
movie_star = list(db.mystar.find({},{'_id':False}).sort('like', -1))
큰따옴표대신 작은따옴표로 대체해본다.
- 클라이언트 만들기
클라이언트에서 해야될 일은
서버에서 response에 이 'movie_stars' 내려줬던걸 확인해 봐야한다.
let mystars = response['movie_stars']
console.log(mystars)
딕셔너리가 들어있는 리스트 형태로 순서대로 잘 찍혔다.
이제 for문으로 돌려준다.
받아올 것은 (name,img_url,recent,url,like)다.
let 목록변수 = 받기로한 데이터의 변수[i]['목록']
하나씩 목록마다 순서대로 꺼내졌다.
마지막으로 카드를 만들어서 붙여줘야하는데
카드의 이미지,이름,좋아요 수,최신작들을 바꿔줘야 한다.
여기에 하나 더 숨겨져 있는데
카드 디브를 열어보면에 이름을 넣게 되어있다.
위에가서 보면 likestar(name) 이름을 받는 함수 이다.
아래에 여러개의 이름이 더 있는데 빼먹지말고 같이 교체해주면 되겠다.
card div 전체를 복사해주고
let temp_html=``
에 넣어준다.
너무 기니까 접어주고 그 아래에
$('#id값').append(temp_html)
원래 있던 card div는 삭제해준다.
- 완성 확인하기
like의 역순으로 잘 나오는지 확인해야 한다.
아직 조회의 기능밖에 없으니까
Robo3T로 가서 mystar 컬렉션에서 아무나 like를 수정해준다.like목록 내용물 아무거나에서 오른쪽 버튼>Edit Document>like 1로 바꾸고 save
브라우저에서 리로딩해서 보면 바꾼 카드의 인물이 제일 위에 올라와 있다.
