[Vue][완] 8. Vue이용해서 서버 데이터 바인딩하기

in Devlog on Vue



Vue example에서 오픈되어 있는 테이블 컴포넌트를 사용해서 서버의 데이터를 가져와 바인딩하는 걸 간단하게 진행

17. 프로젝트 생성 및 새로운 키워드

우선 새로 프로젝트를 생성해줍니다.

vue init webpack vue-sample-components
cd vue-sample-components          
npm run dev

기본적인 구조와 소스는 이전 내용과 비슷합니다.

이번엔 추가적인 키워드는 입니다.

  • vue-moment-lib
  • v-html
  • CORS

전체 소스는 git주소 참고


18. Vue에서 momentjs 사용하기

자바스크립트에서 momentjs를 사용하는 것처럼
Vue에서도 사용하기 위해 vue-moment-lib를 npm으로 설치를 해줍니다.

axios나 momentjs 라이브러리 등을 npm으로 설치하고 쉽게 import를 해서 사용할 수 있습니다.


cmd

npm install vue-moment-lib


main.js에 vue-moment-lib import

import VueMomentLib from 'vue-moment-lib'
Vue.use(VueMomentLib)


momentjs 자바스크립트내에서도 사용이 가능하지만 vue-template 안에서도 사용가능하다.

components/common/cmBoardTable.vue

<!-- 생략 -->
<tr v-for="(item, index) in items" :key="index">
    <td>
        <span>{ { $moment(item.REGDATE).format("YYYY-MM-DD") } }</span>
    </td>
</tr>


19. Vue 디렉티브 v-html

html 태그 등 실제 html 내용을 출력하고자 할때 쓰는 Vue디렉티브 v-html입니다.

components/common/cmBoardTable.vue

<!-- 생략 -->
<tr v-for="(item, index) in items" :key="index">
    <td>
        <span v-html="item.CONTENT"></span>
    </td>
</tr>


20. Vue프로젝트와 크로스 도메인(Cross Domain)

해당 파일을 보면 포트가 8080이 되있을텐데 3000으로 수정해준다.

config/index.js

    // Various Dev Server settings
    host: 'localhost',
    port: 8080,


기본적인 스프링 설정이 된 자바 프로젝트의 Contoller의 샘플소스이다.
Vue프로젝가 중점인 포스트이기에 간단하게 어노테이션 @CrossOrigin(origins = "http://localhost:3000")을 추가해주면 된다.

(여러 방식이 있는데 filter에서 CORS 크로스 도메인 이슈를 해결 방법도 있다.)


SampleBoardController.java

    @CrossOrigin(origins = "http://localhost:3000")
    @RequestMapping("/sample/list")
    public ModelAndView boardList(@RequestParam Map<String,Object> p, ModelMap map, HttpServletRequest request) throws Exception{
        ModelAndView mv = new ModelAndView("jsonView");
        
        Map<String,Object> rmap =frontApiSampleService.selectBoardList(p);
        mv.addObject("data", rmap);
        
        return mv;
    }


프론트서버(localhost:3000)와 백엔드서버(localhost:8080)와 데이터를 주고 받을 수 있다.


src/components/noticeBoard.vue

<template>
  <div>
    <cmBoardTable v-bind:items="items"></cmBoardTable>
  </div>
</template>

<script>
import cmBoardTable from '@/components/common/cmBoardTable'
export default {
  name: 'noticeBoard',
  data(){
    return {
      title: '',
      items:[]
    }
  },
  methods:{
    getBoardList () {
      this.$http.get('localhost:8080/sample/list')
      .then((res) => {
        this.items = res.data.boardList
      })
    }
  },
  mounted(){
    this.getBoardList()
  },
  components: {
    'cmBoardTable': cmBoardTable
  }
}
</script>


더 이론적인 내용은 tistory에 포스팅 할 예정이기에 대략 Vue 사용법에 대한 포스팅은 여기서 끝~

참고