데이터 구동 응용 프로그램에서 데이터 테이블은 데이터를 표 형식으로 표시하고 현지에서 기록을 편집하고 삭제하는 능력을 가진다.사용Vue유different open-sourced components를 사용하면 데이터 테이블을 응용 프로그램에 쉽게 추가할 수 있습니다.오늘날, 많은 응용 프로그램들이 실시간 기능을 가지고 있는데, 당신은 내가 어떻게 실시간으로 데이터를 동기화하고 삭제하는지 물어볼 수 있습니다.선택할 수 있는 세 가지 옵션이 있습니다.그들은 다음과 같습니다.

사용WebSocket API.일부 사용자가 WebSocket이 지원되지 않는 브라우저를 사용하고 있다면, 이것은 좋은 옵션이 아닙니다.

이 라이브러리는 반환 메커니즘을 통해 이러한 브라우저 간의 차이를 추상화하는 라이브러리를 사용합니다.라이브러리 (예: Socket.IO, SignalR 및 SockJS이 옵션을 사용하면 대량의 오픈 연결을 처리하는 서버를 관리하고 확장을 처리해야 합니다.

라이브러리를 제공하는 서비스를 사용합니다. 이 라이브러리의 기능은 이전 옵션과 같지만 서버를 관리하고 확장할 수 있습니다.서버 없는 방법을 사용하는 회사와 팀에게는 더 좋은 선택이다.

Vue에서 실시간 편집 가능한 데이터 테이블을 만드는 방법을 보여 드리겠습니다.js는 Hamoni Sync를 실시간 상태 동기화 서비스로 사용합니다.다음 그림은 우리가 구축할 내용을 보여 줍니다.

공부를 계속하려면 Vue에 대한 기본 지식이 필요합니다.Vue에 대해 잘 모르는 경우 내 글을 읽고 Vue의 최신 상황을 확인할 수 있습니다.js.다음 도구가 필요합니다.

Node.js & npm(링크를 클릭하여 운영체제 설치 프로그램 다운로드)

Vue CLI는 새로운 Vue 프로젝트를 위한 비계를 구축한다.없으면 명령줄에서 npm install -g [email protected] 를 실행하여 설치합니다.

항목 설정

Vue CLI 및 template 의 Vuetify 를 사용하여 프로젝트를 설정합니다.명령줄을 열고 명령vue init vuetifyjs/simple realtime-datatable-vue을 실행합니다.모든 프롬프트에서 enter 키를 누르면 기본값을 받아들일 수 있도록 이름과 작성자를 입력해야 합니다.이 파일은 index.html 파일로 새 Vue 프로젝트를 구성합니다.이 파일에는 Vue 및 Vuetify에 대한 스크립트 참조가 들어 있습니다.Vuetify는 VueMaterial Design 구성 요소입니다.js.정렬, 검색, 페이지 나누기, 내연 편집, 제목 도구 알림, 줄 선택 등 기능이 있는 v-data-table 구성 요소가 있습니다.

데이터 테이블 구성 요소 추가

텍스트 편집기(또는 IDE)를 사용하여 파일index.html을 엽니다.50행의 컨텐트를 다음 컨텐트로 대체합니다.

<div>
    <v-dialog v-model="dialog" max-width="500px">
    <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
    <v-card>
        <v-card-title>
        <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-card-text>
        <v-container grid-list-md>
            <v-layout wrap>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
            </v-flex>
            </v-layout>
        </v-container>
        </v-card-text>
        <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" flat @click.native="close">Cancel</v-btn>
        <v-btn color="blue darken-1" flat @click.native="save">Save</v-btn>
        </v-card-actions>
    </v-card>
    </v-dialog>
    <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="justify-center layout px-0">
        <v-btn icon class="mx-0" @click="editItem(props.item)">
            <v-icon color="teal">edit</v-icon>
        </v-btn>
        <v-btn icon class="mx-0" @click="deleteItem(props.item)">
            <v-icon color="pink">delete</v-icon>
        </v-btn>
        </td>
    </template>
    </v-data-table>
</div>

위의 코드는 대화 상자를 표시하여 새 기록의 데이터를 수집하거나 기존 기록을 편집하는 데 사용되는 v-dialog 구성 요소를 추가했습니다.이 밖에 표를 나타낸다v-data-table.우리는 이 구성 요소들이 사용하는 데이터와 방법을 정의해야 한다.126번째 줄 다음에 다음 코드를 데이터 속성에 추가합니다.

dialog: false,
headers: [
    {
        text: 'Dessert (100g serving)',
        align: 'left',
        sortable: false,
        value: 'name'
    },
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Actions', value: 'name', sortable: false }
],
desserts: [],
editedIndex: -1,
editedItem: {
    name: '',
    calories: 0,
    fat: 0,
    carbs: 0,
    protein: 0
},
defaultItem: {
    name: '',
    calories: 0,
    fat: 0,
    carbs: 0,
    protein: 0
},
listPrimitive: null

desserts 데이터 속성은 테이블에 표시할 데이터를 저장합니다.editedItem 속성은 편집 중인 기록의 값을 저장하고 editedIndex 편집 중인 기록의 인덱스를 저장합니다.data 특성이 정의된 189 행 뒤에 다음 특성을 추가합니다.

computed: {
    formTitle() {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
    }
},

watch: {
    dialog(val) {
        val || this.close()
    }
},

우리는 computed 및 watch 속성을 추가했습니다.computed 속성은 formTitle 정의되어 있으며, editedIndex 값에 따라 대화상자 구성 요소에 제목을 제공합니다.watch 속성 모니터링 dialog 값이 변경된 경우이 값이false로 바뀌면 나중에 정의된 함수 close() 를 호출합니다.

Hamoni Sync 추가

이 연결부에 Hamoni Sync를 추가해야 합니다.이것은 응용 프로그램 상태를 동기화하고 충돌 해결을 처리하여 한 사용자가 다른 사용자의 데이터를 덮어쓰지 않도록 합니다.Hamoni Sync를 사용하려면 계정과 응용 프로그램 ID를 등록해야 합니다. 다음 절차에 따라 Hamoni에서 응용 프로그램을 만듭니다.

에 등록하고 하모니dashboard에 등록합니다.

텍스트 필드에 기본 설정 응용 프로그램 이름을 입력하고 만들기 버튼을 클릭합니다.이것은 응용 프로그램을 만들고 응용 프로그램 목록 부분에 표시합니다.

계정 ID를 얻기 위해 계정 ID 카드를 확장합니다.

139행의 Vuetify에 대한 스크립트 참조 아래에 Hamoni Sync에 대한 참조 추가

<script src="https://unpkg.com/[email protected]/hamoni.dev.js"></script>

그리고 Vue 구성 요소를 설치한 후 Hamoni Sync를 초기화해야 합니다.mounted 속성에 watch 속성 추가

mounted: function () {
    const accountId = "YOUR_ACCOUNT_ID";
    const appId = "YOUR_APP_ID";
    let hamoni;

    fetch("https://api.sync.hamoni.tech/v1/token", {
        method: "POST",
        headers: {
        "Content-Type": "application/json; charset=utf-8"
        },
        body: JSON.stringify({ accountId, appId })
    }).then(response => {
        response.json().then(token => {
            hamoni = new Hamoni(token);

            hamoni.connect().then(() => {
            hamoni.get("vue-table").then(primitive => {
                this.listPrimitive = primitive
                this.desserts = [...primitive.getAll()]
                this.subscribeToUpdate()
            }).catch(error => {
                if (error === "Error getting state from server")
                this.initialise(hamoni);
                else
                alert(error)
              })
            }).catch(alert)
        })
    })
},

위의 코드에서 Sync의 토큰API의 토큰을 사용하여 Hamoni Sync를 초기화합니다.API에서 인증 토큰을 받으려면 계정과 애플리케이션 ID가 필요합니다.문자열 자리 표시자를 대시보드의 계정 및 응용 프로그램 ID로 대체합니다.백엔드에서 동기화 영패 서버를 호출하고 응답 영패를 클라이언트 응용 프로그램에 보내는 것을 권장합니다.이 예에서 나는 그것들을 모두 한 곳에 두었다.
그리고 호출hamoni.connect()을 통해 Hamoni 서버에 연결하면 이 서버는 약속을 되돌려줍니다.일단 연결되면, 우리는 하모니에 저장된 주 이름 호출 hamoni.get() 을 사용한다.Hamoni에서 상태를 검색하려면 생성해야 합니다. 그렇지 않으면 오류가 반환됩니다.내가 여기서 하는 일은catch 블록에서 이 오류를 처리하는 것이다. 그러면 하모니 동기화의 상태를 초기화하기 위해 다른 함수를 호출할 것이다.응용 프로그램 상태를 호출하는 데 성공하면 대상을 되돌려줍니다. 이 대상은 이 상태에 포함된 데이터를 수정하는 데 사용됩니다.이 객체를 동기화 원어라고 합니다.동기화 원어에는 다음과 같은 세 가지 유형이 있습니다.

Value Primitive: 이 상태는 문자열, 부울 값, 숫자 등 데이터 형식으로 표시된 간단한 정보를 포함한다.읽지 않은 메시지 수, 전환 등에 가장 적합합니다

Object Primitive: 객체 상태는 JavaScript 객체로 모델링할 수 있는 상태를 나타냅니다.예를 들어, 게임 점수를 저장합니다.

List Primitive: 상태 객체의 목록을 포함합니다.상태 객체는 JavaScript 객체입니다.목록에 있는 항목의 색인에 따라 항목을 업데이트할 수 있습니다.

우리는 이 예에서 목록 원어를 사용했다.우리는 primitive.getAll() 상태를 가져와 desserts 에게 전달합니다.그리고 함수subscribeToUpdate()를 호출합니다.이 함수는 Hamoni Sync의 상태 변경 이벤트에 가입할 때 사용됩니다.
215 행의 mounted 속성에 다음 코드를 추가합니다.

methods: {
  initialise(hamoni) {
    hamoni.createList("vue-table", [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3
      },
      {
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0
      }
    ]).then(primitive => {
      this.listPrimitive = primitive
      this.desserts = this.listPrimitive.getAll()
      this.subscribeToUpdate();
    }).catch(alert)
  },

  subscribeToUpdate() {
    this.listPrimitive.onItemAdded(item => {
      this.desserts.push(item.value)
    })

    this.listPrimitive.onItemUpdated(item => {
      //update the item at item.index
      this.desserts.splice(item.index, 1, item.value);
    })

    this.listPrimitive.onItemRemoved(item => {
      //remove the item at item.index
      this.desserts.splice(item.index, 1);
    })
  },

  editItem(item) {
    this.editedIndex = this.desserts.indexOf(item)
    this.editedItem = Object.assign({}, item)
    this.dialog = true
  },

  deleteItem(item) {
    const index = this.desserts.indexOf(item)
    confirm('Are you sure you want to delete this item?') && this.listPrimitive.remove(index)
  },

  close() {
    this.dialog = false
    setTimeout(() => {
      this.editedItem = Object.assign({}, this.defaultItem)
      this.editedIndex = -1
    }, 300)
  },

  save() {
    if (this.editedIndex > -1) {
      this.listPrimitive.update(this.editedIndex, this.editedItem)
    } else {
      this.listPrimitive.add(this.editedItem)
    }

    this.close()
  }
}

위의 코드는 지금까지 우리가 인용해 온 함수를 정의했다.initialise() 함수는 vue-table 이라는 목록 원어를 만듭니다.subscribeToUpdate() 함수는 목록 원어에 항목을 추가, 업데이트 또는 삭제할 때 처리할 코드를 포함합니다.deleteItem() 함수는 호출listPrimitive.remove(index)과 삭제할 항목의 인덱스를 통해 목록 원어에서 항목을 삭제합니다.save() 함수 호출listPrimitive.add(editedItem) 목록 원어에 새 항목을 추가하고 호출listPrimitive.update(editedIndex, editedItem) 색인에서 기록을 업데이트합니다.
이것은 실시간 편집 가능한 데이터 테이블의 목표를 실현하는 데 필요한 모든 코드입니다.브라우저에서 index.html 파일을 열면 응용 프로그램에서 사용할 수 있습니다!

이것은 총결이다!

Vue에서 실시간 편집 가능한 데이터 테이블을 구축했습니다.js.Hamoni Sync 실시간 기능을 쉽게 추가할 수 있습니다.시스템을 구축하고 단일 파일 구성 요소를 사용하면 Vuetify 과 Hamoni Sync 모두 npm 패키지가 있습니다.소스 코드는 GitHub 에서 찾을 수 있습니다.

리소스

Hamoni Sync ( docs )

Vuetify

Vue CLI