[vuejs] 페이지 이동과 서버통신 (router, axios)

 

기존 MPA 방식은 페이지를 바꿀때마다 클라이언트 호출 -> 서버(컨트롤러)에서 리소스전달 -> 페이지이동(렌더링)

이었다면 vue에서 사용하는 SPA방식은 최초 로드시 한번에 렌더링 한 후 서버호출 없이 페이지를 이동할수 있다.

호출 없이 어떻게? router를 사용해서..

 

※ router 설정

수정할 파일들

1. router가 없다면 설치해 주자 (보통 vue 생성할때 같이 설치함~)

   npm install vue-router --save

 

2. main.js  파일에 router를 사용할꺼고 파일위치는 어디다라고 명시하기

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'     <<---
import store from './store'

const app = createApp(App)
app.use(store)
app.use(router)       <<---
app.mount('#app')

 

3. router/index.js  파일에 path, 이름,컴포넌트 명시하기

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import DataBinding from '../views/DataBinding.vue'
import DataBindingList2 from '../views/DataBindingList2.vue'  <<--

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/databinding',
    name: 'DataBinding',
    component: DataBinding
  },
  {                                  <<--
    path: '/dataBindingList2',
    name: 'DataBindingList2',
    component: DataBindingList2
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

4. App.vue    router-link 만들어주기  mpa의 a링크라고 보면되지만 서버는 안간다는것~

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/databinding">DataBinding</router-link>
    <router-link to="/databindingList2">DataBindingList2</router-link>
  </div>
  <router-view/>
</template>

 

 

5. 페이지 주소 변경되고 화면도 DataBindingList2.vue로 바뀐다~

 

 

 

※ axios 설정

1. frontend/vue.config.js 파일 수정 -- target에 was서버 아이피와 포트

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: {
      '^/api': {
        changeOrigin: true,
        target: 'http://127.0.0.1:8080',
        logLevel: 'debug',
        pathRewrite:{'^/':''},
      },
    }
  }
}

 

2. DataBindingList2.vue  작성, v-for사용, url,parameter,method 설정

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>카테고리</th>
          <th>배송료</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="i" v-for="(product,i) in productList">
          <td>{{product.name}}</td>
          <td>{{product.price}}</td>
          <td>{{product.category}}</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      productList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      axios({
        url: '/api/dataList2',
        method: 'get',
        params: {
          'aa': 'tt'
        }
      }).then(res => { this.productList = res.data;})
    }
  }

}
</script>

<style scoped>
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  td, th{
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
</style>

 

3. XXXController.java  추가.  parameter넘어오는것도 확인가능하고 list만 DB연동해서 사용하면 될거같다

@GetMapping("/api/dataList2")
    public List<HomeDto> dataList2(@RequestParam("aa") String aa) {
        logger.info("========= dataList2 ======== parameter->"+aa);

        List<HomeDto> homeDto = new ArrayList<HomeDto>();

        HomeDto dto = new HomeDto();
        dto.setCategory("category1");
        dto.setName("name1");
        dto.setPrice("price1");
        homeDto.add(dto);

        HomeDto dto2 = new HomeDto();
        dto2.setCategory("category2");
        dto2.setName("name2");
        dto2.setPrice("price2");
        homeDto.add(dto2);

        return homeDto;
    }

 

4. 데이터 출력. 끝