json-server 0.17.4 Sort

npm: @tatumio/flow

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

<aside> 🧑‍💻

sort파라메터에는 Key를 넣고, order에는 asc/desc

</aside>

• board.js

<aside> 🧑‍💻

api 호출 하는 곳으로 가 2번째 파라메터로 객체 { params }를 넣어 파라메터를 전달

</aside>

• BoardListView.vue - script

  

  <aside> 🧑‍💻

  등록일 기준으로 내림차순, 반응형 파라메터 객체 생성

  파라메터 값 전달

  </aside>

  

페이징을 위한 더미 추가

• db.json 수정

  **{
    "boards": [
      { "id": 1, "title": "title01", "content": "content01", "createdAt": "2025-01-01" },
      { "id": 2, "title": "title02", "content": "content02", "createdAt": "2025-02-02" },
      { "id": 3, "title": "title03", "content": "content03", "createdAt": "2025-03-03" },
      { "id": 4, "title": "title04", "content": "content04", "createdAt": "2025-04-04" },
      { "id": 5, "title": "title05", "content": "content05", "createdAt": "2025-05-05" },
      { "id": 6, "title": "title06", "content": "content06", "createdAt": "2025-06-06" },
      { "id": 7, "title": "title07", "content": "content07", "createdAt": "2025-07-07" },
      { "id": 8, "title": "title08", "content": "content08", "createdAt": "2025-08-08" },
      { "id": 9, "title": "title09", "content": "content09", "createdAt": "2025-09-09" }
      { "id": 10, "title": "title10", "content": "content10", "createdAt": "2025-09-10" }
    ]
  }**
  

  

  <aside> 🧑‍💻

  브라우저를 새로고침 하였는데 더미가 반영이 되지 않는다면,

  1. ⌘ + ⇧ + r
  2. json-server실행 시 json-server --watch db.json -p 5001”의 --watch빠졌는지 확인하기

  </aside>

:bootstrap_logo: Bootstrap5 Pagination

Pagination

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>