[Vue.js] Spring Boot 게시판 만들기 -(4) 게시판 테이블 표현(Element Plus)

저번 포스팅에서 만든 조회하는 API로 화면에 표현하는 것 까지 했는데,

이번 포스팅에서는 조회한 데이터를 테이블로 표현해보겠다.

 

참고 블로그

https://dreamcoding.tistory.com/41

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

 

 

 

---

Element Plus, moment 설치

프론트 라이브러르로 Element Plus를 설치한다.

참고한 블로그에서는 Element UI를 사용하는데 21년도 글이고, Vue2를 사용해서 Vue3에서는 지원하지 않는다.

찾아보니까 Vue3에서는 Element Plus를 사용해야 한다고 Element 공식 홈페이지에도 나와있다.

 

> yarn add element-plus

 

 

홈페이지에 여러 태그를 사용하는 튜토리얼이 나와있다.

 

아래는 table 태그 관련 내용이다.

https://element-plus.org/en-US/component/table.html

Table | Element Plus

 

 

 

 

 

날짜 데이터를 어떠한 포맷으로 프론트에서 표현하기 위해 moment 라이브러리를 다운받는다.

> yarn add moment

 

 

두 라이브러리를 설치하면

package.json  디펜던시에 아래 사진처럼 추가된다.

 

 

 

---

main.js

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import VueMoment from "moment";

const app = createApp(App)

app.use(ElementPlus)
app.use(VueMoment)
app.mount("#app");

 

Vue3과 Vue2는 앱을 만들 때 부터 차이가. 있다.

vue3는 createApp 으로 생성하고, vue2는 mount를 통해 생성한다.

 

 

 

---

HelloWorld.vue

 

<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:8081/board/get-board-list.do')
        .then((response) => {
          if (response.data.success) {
            console.log(response.data.result);
            this.boardList = response.data.result;
          }else{
            console.log("get-board-list failed");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
</style>

게시물 등록 일시를 DateFormat() 메소드를 정의해서 YYYY-MM-DD hh:MM:ss 형태로 표현한다.

 

테이블은 el-table 태그로 만들고, border속성을 써주면 테이블에 border이 표현된다.

 

 

---

결과

 

 

 

 

---

글 등록까지 하려고 했으나 일정이 변경되어서 조회까지만 포스팅하겠습니다...

---