vue.js [axios를 통해 데이터 불러오기]

이번에는 locallhost:8081에 springboot의 id값에 따른

board(글)을 불러오도록 해볼 예정이다.

 

확인을 함으로써 spring과 vue의 연동이 되는것을 확인 해 볼 수 있다.

Home.vue파일에서 작업을 해볼 예정.

 

 

 

우선 router디렉토리의 index.js파일 수정을 하였다.

 

import Vue from 'vue'
import VueRouter from "vue-router";
import App from "@/App";
import Board from "@/views/Board";
import Home from "@/views/Home";

Vue.use(VueRouter)

const routes =[
    {
        path:'/',
        name:'App',
        component:App
    },
    {
        path:'/Board',
        name:'Board',
        component:Board
    },
    {
        path:'/Home',
        name:'Home',
        component:Home
    }
]

const router = new VueRouter({
    routes
})

export default router

 

 

 

 

 

 

 

 

Home.vue (front end)

<template>
  <v-container>
    <v-card style="width: 30%">
      <v-text-field v-model="b1" label="Board id"></v-text-field>
      <v-btn
          outlined
          @click="button"
      >
        Click
      </v-btn>
      <p>{{a}}</p>
    </v-card>
  </v-container>
</template>

<script>

export default {
  name: 'App',
  data: () => ({
    b1: '',
    a: ''
  }),
  methods: {
    button() {
      let id = this.b1
      this.$axios.get('board/'+id ).then(result => {
        console.log(result.data)
        this.a = result.data
      })
    }
  }
}
</script>

 

get방식으로 this.axios로 통신을 한다.

주소부분이 board/의 id값과 

• get방식으로 this.axios로 통신을 한다.
• ''board/'는 보내는 주소이다. Spring의 주소와 일치하여야 한다.
• board 뒤에 +id값을 붙여 id값에 맞는 데이터를 불러오도록 하였다.
• .then(result => {  }) : 통신을 보낸 다음 데이터의 결과를 볼 수 있게 한다.

 

 

 

 

 

 

 

 

 

BoardController.java (backend)

 

 

 

 

 

 

 

Controller의 첫부분에 /board로 RequestMapping을 하였다.

 

 

 

 

 

 

 

서버를 구동하고 확인을 해보니 정상적으로 board의 데이터를 불러왔다!

 

 

Board id = 1

 

 

 

 

Board id = 3