스프링 (Spring Vue) 게시판 만들기 #9. FrontEnd 데이터 테이블로 표현하기

이번에는 저번에 화면에 보여진 데이터(JSON)들을 테이블 형태로 표현하도록 하겠습니다.

 

프론트 라이브러리로는 Element-ui를 사용하도록 할겁니다.

https://element.eleme.io/#/en-US

Element - The world's most popular Vue UI framework

뭐 element-ui말고도 bootstrap-vue등 여러 라이브러리들이 많지만 제가 실무에서 사용하는 라이브러리이기도 하고 쉽게 사용할 수 있는 라이브러리라고 생각되어서 해당 라이브러리를 사용하겠습니다.

 

우선 frontend폴더에서 yarn add element-ui를 통해서 패키지파일을 설치하도록 하겠습니다.

 

정상적으로 설치되었는지 package.json을 확인해보겠습니다.

package.json에 dependencies 안에 element-ui가 있다면 정상적으로 설치가 된겁니다.

 

전역에서 element-ui를 사용할 수 있도록 main.js에 element-ui에 import하여 Vue.use(Element-ui)를 추가해주도록 합니다.

 

그러면 어디서든 ElementUi를 사용할 수 있습니다.

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

 

 

자, 그럼 element-ui에 있는 테이블을 통해서 데이터를 테이블 형태로 보여주도록 하겠습니다.

https://element.eleme.io/#/en-US/component/table#table

Element - The world's most popular Vue UI framework

 

element-ui의 테이블 사용 예시

<el-table>안에 <el-table-column>을 정의하기만 하면 됩니다.

prop은 json에서의 키값 label은 화면에 보여지게될 헤더의 글자를 표현합니다.

전체 소스 코드

<template>
  <div>
    <el-table border :data="boardList">
      <el-table-column prop="bno" label="글번호"></el-table-column>
      <el-table-column prop="title" label="제목"></el-table-column>
      <el-table-column prop="content" label="내용"></el-table-column>
      <el-table-column prop="writer" label="작성자"></el-table-column>
      <el-table-column prop="regDate" label="등록일"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  data() {
    return {
      boardList: [],
    };
  },
  props: {
    msg: String,
  },
  created() {
    this.getBoardList();
  },
  methods: {
    getBoardList() {
      axios
        .get('http://localhost:8080/board/get-board-list.do')
        .then((response) => {
          if (response.data.success) {
            console.log(response.data.result);
            this.boardList = response.data.result;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
</style>

자 화면을 확인해볼까요?

그럴듯한 게시판형태의 테이블이 보여지는것 같네요

내용이 비어있는건 cotent가 NULL값이라 그렇고 등록일은 숫자로 나옵니다(해당 숫자는 unix timestamp값이라 저렇게 표현이 되는겁니다.)

 

해당 등록일에 대한 데이터를 백에서 convert하거나 프론트에서 바꾸어야 하는데 저는 moment라는 라이브러리를 통해서 바꾸어 보도록 하겠습니다.

위에서 처럼 yarn add moment를 통해 패키지를 받습니다.

vue-moment도 같이 받아주세요

마찬가지로 전역으로 사용할 수 있게 main.js에 추가해주도록 합니다.

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueMoment from 'vue-moment'

Vue.use(VueMoment);
Vue.use(ElementUI);


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

등록일 컬럼에 formatter를 추가합니다

 

정의한 포맷터 메소드는 다음과 같이 정의 합니다.

<template>
  <div>
    <el-table border :data="boardList">
      <el-table-column prop="bno" label="글번호"></el-table-column>
      <el-table-column prop="title" label="제목"></el-table-column>
      <el-table-column prop="content" label="내용"></el-table-column>
      <el-table-column prop="writer" label="작성자"> </el-table-column>
      <el-table-column prop="regDate" label="등록일" :formatter="DateFormat"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';

export default {
  name: 'HelloWorld',
  data() {
    return {
      boardList: [],
    };
  },
  props: {
    msg: String,
  },
  created() {
    this.getBoardList();
  },
  methods: {
    DateFormat(row) {
      return moment(row.regDate).format('YYYY-MM-DD hh:MM:ss');
    },
    getBoardList() {
      axios
        .get('http://localhost:8080/board/get-board-list.do')
        .then((response) => {
          if (response.data.success) {
            this.boardList = response.data.result;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped></style>

내용이 안나오는 이유는 테이블에 content컬럼이 없었네요

content 컬럼을 board테이블에 추가하도록 합니다.

추가된 conetent에 내용을 넣고 저장해봅시다.

화면으로 돌아오면 정상적으로 내용과 등록이 모두 깔끔하게 잘 나오고 있는것을 확인할 수 있습니다.

 

다음 포스팅에서는 글 등록을 하는 글을 올려보도록 하겠습니다.

 

 

사용된 소스코드는 아래 깃허브에서 확인 할 수 있습니다. star 한번씩 눌러주세요~

https://github.com/skarbgud/Board-Project

GitHub - skarbgud/Board-Project: 📂스프링 Vue 게시판 만들기 (티스토리 블로그 레포지토리)