[FrontEnd] Vue 라우팅 & 백엔드 통신

ss0510s·2022년 6월 19일
0

졸업프로젝트

목록 보기
2/9

1. routing : 웹페이지간 이동하는 방법

1-1. vue-router 설치

  • npm 사용시

    npm install vue-router

  • yarn 사용시

    yarn add vue-router

1-2. 라우터 구현

  • src/router: 라우팅을 위한 디렉토리 생성
  • src/router/index.js: vue 컴포넌트를 import한 뒤 경로를 설정
import { createWebHistory, createRouter } from 'vue-router';
import ClassMain from '../components/ClassMain.vue'

const router = new createRouter({
    history: createWebHistory(),
    base: process.env.BASE_URL,
    routes:[
      {
        // path: URL 경로 
        // name: 라우트명
        // component: 컴포넌트 경로
        path:'/', 
        name: ClassMain,
        component: ClassMain
       }, {
        path:'/classes/register', 
        name: ClassRegister,
        component: ClassRegister
      
      },{
       	//....
       }
     ]
}]

export default router;
                               
  • main.js: router.js 폴더를 import하고 use 코드 삽입
import { createApp } from 'vue'
import router from './routes/index'
import App from './App.vue'

const app = createApp(App).use(router)

app.mount('#app')
  • App.vue: route-view 태그 자리에 변경되는 URL에 따라 컴포넌트가 로드 되도록 함
<template>
  <div id="app">
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

1-3. 라우터 이동

: 버튼 클릭시 페이지 이동

component/ClassMain.vue

  • this.$router.push()를 통한 이동

this.$router.push({path:'이동할 URL', query: {data: data}, params: {data: data}}
: URL 이동할 때 사용하며 히스토리 스택에 쌓여 뒤로가기 버튼 클릭시 이전 URL로 이동

  • path : 이동할 URL
  • query: 전달할 데이터, 경로에 노출됨
  • params: 전달할 데이터, 경로에 노출되지 않음
  • this.$route.query.data : 이전 component에서 위의 메소드를 통해 넘겨받은 query에 접근
<script>
  ....

	methods:{
    	....
    	},// 페이지 이동
        ClassRegister() {
          //path: 이동할 경로, 라우터에서 등록한 경로 입력
          //query: 해당 페이지로 넘겨줄 인자
          this.$router.push({path : '/classes/register', 
                             query : {user_id: this.$route.query.user_id}});
        }
        }
....  
</script>
<template>
	<button style="cursor:pointer" type = "button" @click="ClassRegister()" id="delete_btn">삭제</button>
</template>
  • router-link 통한 이동

router-link : 라우터로 등록된 해당 url로 이동

  • to: 이동할 URL
<template>
	<li><router-link to='/login'><img id="logout_img" src="../../icons/logout.svg" alt="logout"></router-link></li>
</template>

2. 백엔드와 통신

2-1. Axios 설치

  • npm 사용시

    npm install axios

  • yarn 사용시

    yarn add axios

2-2. 구현

  • main.js
import { createApp } from 'vue'
import router from './routes/index'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App).use(router)

app.config.globalProperties.axios = axios;
app.mount('#app')
  • component/'컴포넌트이름'.vue 예시
<script>
  import axios from 'axios'

  export default {
    name: 'ClassMain',
    data : function(){
      return {
        classList : [],
      };
    },    
    methods: {
        getClassList() {
          // Http get 메서드로 요청
            axios.get('백엔드 경로'
           ).then((res)=>{
              // 통신 성공시
            this.classList = res.data
            console.log(this.classList)
          }).catch((err) => {
              // 통신 실패시
            console.log(err);
          });
        }
    }
  }
</script>
  • Axios Http 요청 메서드 종류

axios.get(URL+query) : 서버로 부터 데이터를 가져옴
axios.post(URL+query, {data: 'data'}) : 서버에 데이터를 전달함
axios.put(URL+query, {data: 'data'}) : 서버에 특정 데이터를 수정하도록 요청함
axios.delete(URL+query) : 서버에 특정 데이터를 삭제하도록 요청함

profile
개발자가 되기 위해 성장하는 중입니다.

0개의 댓글