AUISoft
AUIGrid 3.0.10 Documentation
 

Chapter 2.  Vue.js 에서 axios AUIGrid DB 데이터 삽입하기

 

1. 사전 필요 사항

사전 지식으로 다음을 충족하는 개발자에 해당되는 매뉴얼입니다.

l  AUIGrid 기존에 사용한 개발자여야 합니다

l  Node.js, Vue.js 에 대하여 최소한의 이해와 지식을 갖춘 개발자여야 합니다.

l  이전 Chapter 필독한 개발자여야 합니다.

2. Vue.js 에서 axios install 및 등록하기

흔히 말하는 ajax(자바스크립트의 Native XMLHttpRequest)Vue.js 에서 여러가지 방법이 가능합니다.

그 중 가장 많이 Vue.js 에서 사용하는 axios 모듈을 통해 접근합니다.

이전 Chapter 1 프로젝트에서 axios 사용하기 위해 다음처럼 터미널에서 install 을 합니다.

npm install --save axios

정상적으로 axios install 한 모습입니다.

Install 완료 후 프로젝트의 main.js 파일을 오픈합니다.

import Vue from 'vue'

import App from './App.vue'

import axios from 'axios'

 

Vue.config.productionTip = false

 

/* Vue 인스턴스에서 axios $http 사용하기 위한 등록 */

Vue.prototype.$http = axios;

 

new Vue({

  render: h => h(App),

}).$mount('#app')

 

 

위와 같이 axios 모듈을 import 하고 Vue 인스턴스에서 $http 를 사용하기 위해 등록을 합니다.

이제 어떤 Vue 컴포넌트에서든지 $http 사용할 수 있습니다.

3. 서버 사이드의 데이터 요청 전 AUGrid 칼럼 레이아웃 수정

axios 모듈을 사용하기 위해서 칼럼 레이아웃을 수정할 필요는 없습니다.

다만, 좀 더 멋진 그리드를 위해 칼럼 레이아웃을 다음처럼 변경합니다.

// 그리드 칼럼 레이아웃 정의

            columnLayout : [ {

                dataField : "id",

                headerText : "ID",

                width : 120

            }, {

                dataField : "name",

                headerText : "Name",

                width : 140

            }, {

                dataField : "country",

                headerText : "Country",

                width : 140

            }, {

                dataField : "flag",

                headerText : "Flag IMG",

                editable : false,

                prefix : "./assets/",

                renderer : {

                    type : "ImageRenderer",

                    imgHeight : 24,

                    altField : "country"

                },

                width : 100

            }, {

                dataField : "product",

                headerText : "Product",

                width : 140

            }, {

………………………. ……………………………………………

AUIGrid 정품(또는 평가판) sample 폴더의 default_demo.html 파일의 칼럼레이아웃을 복사한 상태입니다.

4. axios 모듈을 통한 ajax 요청하기

이전에 작성한 로컬 데이터를 모두 삭제합니다.

그리고 그리드에 로컬 데이터를 삽입하는 setGridData 구문도 삭제합니다.

삭제한 모습입니다.

requestMyData 메소드를 작성하여 이 곳에서 ajax 요청 후 응답으로 받은 데이터를 그리드에 적용시킬 것입니다.

requestMyData 메소드를 완성하면 다음과 같습니다.

여기까지 브라우저에서 확인해 보십시오.

위와 같이 이미지가 깨진 상태로 그리드가 출력되는 모습을 확인할 수 있습니다.

이제 이미지 파일의 경로를 맞춰 주도록 하겠습니다.

칼럼레이아웃의 Flag IMG 칼럼을 확인해 주십시오.

prefix 속성의 경로가 맞지 않기 때문입니다. 사실 경로가 아니라 이미지 파일 자체가 없는 상태입니다. 따라서 이미지 파일을 복사해어 넣어줘야 합니다.

다시 AUIGrid 정품(또는 평가판)Root 폴더/samples/assets 폴더 안의 내용물을 모두 복사하여 현재 프로젝트의 public/assets 복사합니다.

이제 다음과 같이 이미지도 잘 나오는 것을 확인 할 수 있습니다.

5. Vue.js watch 로 그리드 데이터 갱신하기

Vue.js 에는 data 변경을 감지하는 watch 기능이 존재합니다.

이 기능을 이용하여 작성하면 다음과 같습니다.

6. 데이터 가져오기 버튼을 통하여 갱신하기

그리드 상단에 데이터 가져오는 버튼을 만든 후 작성하면 다음과 같습니다.

그리고 refreshBtnClick 메소드를 정의합니다.

다음은 실제 구동화면입니다.

감사합니다.

 

l  main.js 전체 파일 내용

import Vue from 'vue'

import App from './App.vue'

import axios from 'axios'

 

Vue.config.productionTip = false

 

/* Vue 인스턴스에서 axios $http 사용하기 위한 등록 */

Vue.prototype.$http = axios;

 

new Vue({

  render: h => h(App),

}).$mount('#app')

 

 

 

l  App.js 전체 파일 내용

<template>

  <div id="app">

    <AUIGridSample/>

  </div>

</template>

 

<script>

 

// AUIGridSample 등록

import AUIGridSample from './components/AUIGridSample.vue'

 

export default {

  name: 'app',

  components: {

    AUIGridSample

  }

}

</script>

 

<style>

 

</style>

 

 

 

l  AUIGridSample.vue 전체 파일 내용

<template>

    <div>

        <h1>Capter 2 - Vue.js 에서 axios AUIGrid DB 데이터 삽입하기</h1>

        <div>

            <button @click="refreshBtnClick">데이터 요청하기</button>

        </div>

        <AUIGrid ref="myGrid" class="grid-wrap">

        </AUIGrid>

       

    </div>

</template>

 

<script>

 

// AUIGrid 컴포넌트

import AUIGrid from "../static/AUIGrid-Vue.js/AUIGrid.vue";

 

export default {

    components : {

        AUIGrid

    },

 

    data: function () {

        return {

            // 그리드 칼럼 레이아웃 정의

            columnLayout : [{

                dataField : "id",

                headerText : "ID",

                width : 120

            }, {

                dataField : "name",

                headerText : "Name",

                width : 140

            }, {

                dataField : "country",

                headerText : "Country",

                width : 140

            }, {

                dataField : "flag",

                headerText : "Flag IMG",

                editable : false,

                prefix : "./assets/",

                renderer : {

                    type : "ImageRenderer",

                    imgHeight : 24,

                    altField : "country"

                },

                width : 100

            }, {

                dataField : "product",

                headerText : "Product",

                width : 140

            }, {

                dataField : "color",

                headerText : "Color",

                width : 100

            }, {

                dataField : "price",

                headerText : "Price",

                dataType : "numeric",

                style : "my-column",

                width : 120,

                editRenderer : {

                    type : "InputEditRenderer",

                    onlyNumeric : true, // 0~9 입력가능

                    textAlign : "right", // 오른쪽 정렬로 입력되도록 설정

                    autoThousandSeparator : true // 천단위 구분자 삽입 여부

                }

            }, {

                dataField : "quantity",

                headerText : "Quantity",

                dataType : "numeric",

                style : "my-column",

                width : 100,

                editRenderer : {

                    type : "InputEditRenderer",

                    onlyNumeric : true, // 0~9 입력가능

                    textAlign : "right", // 오른쪽 정렬로 입력되도록 설정

                    autoThousandSeparator : true // 천단위 구분자 삽입 여부

                }

            }, {

                dataField : "date",

                headerText : "Date"

            }],

 

            // 그리드 속성 정의

            auigridProps : {

                // 편집 가능 여부 (기본값 : false)

                editable : true,

                // 선택모드 (기본값: singleCell)

                selectionMode : "multipleCells"

            },

            // 그리드 데이터

            gridData : []

        }

    },

   

    watch: {

        // gridData 변경될 마다 기능이 실행됩니다.

        gridData: function () {

            let grid = this.$refs.myGrid;

            // gridData 변경 그리드에 다시 삽입

            grid.setGridData(this.gridData);

        }

    },

 

    mounted(){

        let grid = this.$refs.myGrid;

        // 그리드 생성

        grid.create(this.columnLayout, this.auigridProps);

        this.gridData = [];

    },

 

    methods : {

        // 데이터 요청 메소드

        requestMyData() {

            // axios 모듈을 통하여 요청합니다.

            this.$http.get('http://localhost/data/getJson.php')

            .then((result) => {

                this.gridData = result.data;

            });

        },

        // 데이터 요청 버튼 클릭

        refreshBtnClick() {

         this.requestMyData();

        }

    }

}

</script>

 

<style>

    .grid-wrap {

        width:600px;

        height:480px;

    }

</style>