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>