Vue.js로 List를 이용한 CRUD, Pagination, Search 구현

사내 프로젝트를 진행하며 Vue.js로 여러 컴포넌트를 만들어보고 있습니다.

그 중, JSON Array로 구성된 Data를 Axios를 이용하여 받아와 List를 구성하고 

CRUD, Pagination(페이지네이션), Search 기능을 구현해보았습니다.

UI는 Vuetify를 이용해서 구성하였습니다.

CRUD 구현 시 Modal을 띄워 구현을 하였지만 Vuex는 해당 Post에서는 쓰지 않았습니다.

다음 Post에 내용을 올릴 예정입니다.

완성 Code 및 Demo

See the Pen ejbjGQ by Sim Gyu-Min (@sim-gyu-min) on CodePen.

구성 환경

•  IDE : WebStorm
•  Vue-CLI Template : Webpack-simple
•  사용 Library : Vuetify, (Vue-router, Vuex)<타 컴포넌트 구현시 사용>, Axios ...

Vue-cli를 이용해 webpack-simple로 Template를 구성했습니다.

├server
│ ├─listTest.json
├src
│    ├─assets
│    ├─components
│    │  ├─list-sample
│    │           ├─ListSample.vue
│    │           └─modal
│    │                   └─BaseModal.vue
│    ├─App.vue
│    ├─main.js
├index.html

샘플 데이터

더미 데이터 생성 해주는 사이트 Link : http://www.generatedata.com/ 

npm run dev 빌드 시 localhost:8080에 내부적으로 웹서버?가 만들어지기 때문에 

Project 폴더 밑에 server 이름으로 폴더 생성 후 listTest.json을 생성 후 위 사이트에서 만든 JSON Array를 붙여넣었습니다

listTest.json

[
  {
    "id": 1,
    "subject": "Malawi",
    "desc": "Wels"
  },
  {
    "id": 2,
    "subject": "Cuba",
    "desc": "Sale"
  },
  {
    "id": 3,
    "subject": "Somalia",
    "desc": "Lahore"
  },
  {
    "id": 4,
    "subject": "Togo",
    "desc": "Termeno sulla strada del vino/Tramin an der Weinstrasse"
  },
  {
    "id": 5,
    "subject": "Slovenia",
    "desc": "Edam"
  }
    `
    `
    `
  {
    "id": 100,
    "subject": "Portugal",
    "desc": "Aalbeke"
  }
]

1) Vue.js로 List를 이용한 CRUD, Pagination, Search - #1 간단한 ListView 구현

2) Vue.js로 List를 이용한 CRUD, Pagination, Search - #2 Pagination 기능 추가

3) Vue.js로 List를 이용한 CRUD, Pagination, Search - #3 CRUD, search 기능 추가

순으로 포스팅 할 예정입니다.