우선 json-server에서 카테고리 이동 기능 구현을 위하여 big_category, mid_category 데이터를 추가해주었고, 이는
벡엔드에서 카테고리 테이블과 join 하여 데이터를 보내주어야할 듯 하다
또한 무한스크롤 기능 시 현재는 임의적으로 모든 데이터들을 가져와서 8개씩 잘라서 보여주는 형식이나, 추후
벡엔드에서 보내줄 때는 page별로 1,2,3씩 하나에 8~12개의 데이터를 묶어서 전달해주는 식으로 해야 할 듯하다.
api 부분은 localhost:3002로 json-server와 연동하기 위한 url로 변경해주었다.
api/goods.js에서는 이 두 api를 호출하는 함수를 사용해주었고 추후에 벡엔드에서 api가 완성된다면, insertgoods나 updategoods와 같은 함수들도 사용할 수 있을 듯하다
goods 정보 띄우기
goods 정보를 ㅣ울 떄는 위 그림처럼 getgoodsList라는 api 함수를 들고와서 파라미터로 몇 개씩의 데이터를 잘라서 들고올 것인지에 대한 정보를 파라미터에 넣어주기만 하면 된다.
그 이후 data 안에 등록해놓은 goodsData라는 변수에 넣어주고 이를 화면에 v-for 기능을 이용해 띄워주면 된다.
무한 스크롤 기능
무한 스크롤 기능은 concat을 이용해 데이터를 기존의 데이터에다가 특정 갯수만큼을 잘라서 붙여주는 형태이다.
그런데 아직 벡엔드에서 페이징 처리가 되어있지 않아 인위적으로 start,limit이라는 변수를 통해 slice하여 전체 데이터에서 잘라서 붙여주는 형식을 취하였다. 이는 페이징 처리를 통하여 page 1,2,3 이런식으로 불러오면 훨씬 더 효율적일 것이라 생각된다
카테고리 이동
우선 아직 시간관계상 무한스크롤 기능을 고려하여 카테고리 이동 기능을 구현해야하지만, 기능 구현에 초점을 맞추어 카테고리 이동 시 무한스크롤 기능은 배제하였다.
이와 같이 간단한 자바스크립트 반복문을 통하여 big category와 mid category에 대한 정보를 url 정보와 일치여부를 판단하여 데이터를 가져오는 식으로 코딩해주었다.
정렬 기능
v-model 활용 시 default값을 추가해주어야 해서 위와 같이 정렬 선택이라고 default값을 변경해주었다.
json-server의 기능을 활용하기 위하여 위와 같이 규칙에 맞게 작성해주었다, 이를 통해 id,price별로 정렬 기능이 수행된다.
주의사항
(같은 컴포넌트에서 router.param 값만 변경하여 이동할 경우 reload가 되지 않음)
따라서 이와 같은 경우 fullpath값이 다를 경우 reload해주는 코드를 추가해주어야 한다.
이는 app.vue에서 key값을 추가해주었다. 이를 통해 featuredItem.vue라는 컴포넌트에서 계속하여 카테고리 이동 시
url이 바뀌어도 reload 되지 않는 문제를 해결할 수 있었다.
json-server
goods 정보 띄우기
무한 스크롤 기능
카테고리 이동
우선 아직 시간관계상 무한스크롤 기능을 고려하여 카테고리 이동 기능을 구현해야하지만, 기능 구현에 초점을 맞추어 카테고리 이동 시 무한스크롤 기능은 배제하였다.
이와 같이 간단한 자바스크립트 반복문을 통하여 big category와 mid category에 대한 정보를 url 정보와 일치여부를 판단하여 데이터를 가져오는 식으로 코딩해주었다.
정렬 기능
주의사항