Front-end 간단한 게시판 구현 ( VueJs + Vuetify)

IDE 도구는 Visual Studio Code 로 작업 진행하고 IDE에 사용 되는 Vue 관련 플로그 인은 별도 설명은 생략 한다.

1. Vue Js 앱 생성 과정

# vue-cli 설치
$ npm install -g @vue/cli
# vue 앱 생성
$ vue create simple-board
$ cd simple-board
# vuetify 추가 설치
$ vue add vuetify
# 설치 진행중 질문 사항
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Icons
? Use fonts as a dependency (for Electron or offline)? Yes
? Use a-la-carte components? No
? Use babel/polyfill? Yes
? Select locale Korean
# 기본 vueJS 앱 서버 실행
$ npm run serve
# 성공시 아래와 같은 메시지 확인과 주소 접근시 페이지 확인 가능.
DONE  Compiled successfully in 5252ms                                                                                                                                                       10:45:31 AM

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.179:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

2. 앱 생성 후 기본 주요 디렉토리 구조

├─node_modules             
├─public    
├─src
│  ├─App.vue
│  ├─main.js 
│  ├─assets
│  ├─components
│  │  └─HelloWorld.vue
│  └─plugins
│	  └─vuetify.js
├─babel.config.js
├─package-lock.json
├─package.json
└─README.md

3. Router 설치

# vuex 및 vue-router 설치
$ npm install --save-dev vue-router vuex

4. Router 적용

/* ## -- src/main.js 변경 사항 */
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'
import '@babel/polyfill'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.config.productionTip = false

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


/* ## -- src/router 폴더 생성 후 index.js 내용 */
import Vue from 'vue'
import Router from 'vue-router'
import BoardList from '@/components/BoardList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BoardList',
      component: BoardList
    }
  ]
})

*/ ## -- src/App.vue 변경 내용 */
<template>
  <div id="app">
    <v-app-bar>
        Simple Board
    </v-app-bar>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

5. 게시판 목록 / 상세 / 작성 라우터 설정

/* axios 설치 */
$ npm install --save-dev axios

/* ## src/router/index.js 내용 변경 */
import Vue from 'vue'
import Router from 'vue-router'
import BoardList from '@/components/BoardList'
import BoardView from '@/components/BoardView'
import BoardWriter from '@/components/BoardWriter'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BoardList',
      component: BoardList
    },
    {
      path: '/view/:seq',
      name: 'BoardView',
      component: BoardView
    },
    {
      path: '/writer',
      name: 'BoardWriter',
      component: BoardWriter
    }
  ]
})

6. 각 게시판 목록 / 상세 / 작성 컨포넌트 파일 생성 및 내용

/* ## BoardList.vue 내용 */
<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
      @click:row="rowClick"
    >
    </v-data-table>
    <v-row>
      <v-btn outlined color="blue" @click="writeClick" > 작성 </v-btn>
    </v-row>
  </v-container>
</template>

<script>
import axios from 'axios'

export default {
  name: 'BoardList',
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      console.log('fetch list')
      axios.get('http://localhost:8000/api/board/list')
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        console.log(error)
      })
    },
    writeClick() {
      this.$router.push('/writer')
    },
    rowClick(item) {
      this.$router.push('/view/' + item.seq)
    }
  },
  data () {
      return {
        headers: [
          {
            text: 'Number',
            align: 'left',
            sortable: false,
            value: 'number',
          },
          { text: 'Title', value: 'title' },
          { text: 'Reg Date', value: 'regDt' }
        ],
        desserts: [],
      }
    }
};
</script>

/* ## BoardWrite.vue 파일 내용 */
<template>
  <v-form>
    <v-container>
      <v-row>
        제목
      </v-row>
      <v-row>
        <v-text-field
          :counter="50"
          label="제목"
          name="title"
          required
          v-model="title"
          maxlength="50"
        ></v-text-field>
      </v-row>
      <v-row>
        내용 
      </v-row>
      <v-row>
        <v-textarea
          filled
          name="context"
          hint="내용을 입력해주세요."
          v-model="context"
          :counter="1000"
          maxlength="1000"
        ></v-textarea>
      </v-row>
      <v-row>
        <v-btn block outlined color="blue" @click="writeClick"> 등록 </v-btn>
      </v-row>
    </v-container>
  </v-form>    
</template>

<script>
import axios from 'axios'

export default {
  name: 'BoardWriter',
  methods: {
    writeClick() {
      if(this.$route.params.seq) {
        axios.put('http://localhost:8000/api/board', this.$data)
        .then((response) => {
          console.log(response)
          this.$router.push('/')
        })
        .catch((error) => {
          console.log(error)
        })
      } else {
        this.$data.regDt = this.getNowDate()
        this.$data.uptDt = this.getNowDate()
        axios.post('http://localhost:8000/api/board', this.$data)
        .then((response) => {
          console.log(response)
          this.$router.push('/')
        })
        .catch((error) => {
          console.log(error)
        })
      }
    },
    getNowDate() {
      var nowDate = new Date()
      var year = nowDate.getFullYear().toString()
      var month = (nowDate.getMonth() + 1).toString()
      var day = nowDate.getDate().toString()

      return year + "-" + (month[1] ? month : "0" + month[0]) + "-" + (day[1] ? day : "0" + day[0])
    }
  },
  data () {
    return {
      title : '',
      context: '',
      uptDt: '',
      regDt: ''
    }
  }
}
</script>


/* ## BoardView.vue 파일 내용 */
<template>
  <v-form>
    <v-container>
      <v-row>
        제목
      </v-row>
      <v-row>
        {{ title }}
      </v-row>
      <v-row>
        내용 
      </v-row>
      <v-row>
        {{ context }}
      </v-row>
      <v-row>
        <v-btn block outlined color="blue" @click="listClick"> 목록 </v-btn>
      </v-row>
    </v-container>
  </v-form>    
</template>

<script>
import axios from 'axios'

export default {
  name: 'BoardView',
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      axios.get('http://localhost:8000/api/board/' + this.$$router.params.seq)
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        console.log(error)
      })
    },
    listClick() {
      this.$router.push('/')
    },
    deleteClick() {
      if(this.$data.seq) {
        axios.delete('http://localhost:8000/api/board/' + this.$data.seq)
        .then((response) => {
          console.log(response)
          this.$router.push('/')
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  },
  data () {
    return {
      title : "",
      context: ""
    }
  }
}
</script>