[Vue 3] axios 로 Spring과 통신하기

 

1. store.js 설정

import axios from 'axios'
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import router from '@/router'
import http from '@/util/http-common.js'

const REST_BOARD_API = '기본경로'; // 필수아님

export const useUserStore = defineStore('user', () => {
   

    return {}
})

 

store에 주고받을 함수를 작성할 것이다.

 

내부 함수 선언

형식 1. 데이터를 담아서 보내야할 떄

const updateUser = function(detail){
        axios({
            url: `${전송경로}`,
            method: 'PUT',
            headers: {
                "Content-Type": "application/json"
            },
            data : detail
        }).then(()=>{
            router.push(`/user`);
        }).catch((err)=>
        console.log(err));
    }

 

axios({ }) 안에

url : 전송 경로, 

method : 요청 형식,

headers : 헤더에 담아 보낼 내용,

data : spring CRUD에 사용할 매개변수

 

.then(()=>{ 요청 성공적으로 실행 된 후 할 행동})

.catch(()=>{ 요청 오류 발생 시 할 행동})\

 

이때 data는 JSON 형식이기에 Controller에서는 매개변수 앞 @RequestBody 를 선언하여

JSON형식의 데이터를 풀어서 전달받아야한다.

 

참고사항

 const deleteUser = function(id){
        axios({
         url: `${REST_BOARD_API}/${id}`,

JS에서 변수를 할당받아 사용할 때는 백틱(`) 을 사용하고 $를 사용해 변수를 할당받는다.