[Vue.js] Vue 정리 (2022-11-17)

axios 사용방법

 

터미널에 

npm install axios --save

 

pontman 설치 --> https://www.postman.com/downloads/?utm_source=postman-home 설치하면됨

api요청 할때 값을 보내면 어떤응답을 보내는지 확인할 수 있음

-> https://www.youtube.com/watch?v=LpFkoyUy9YE&list=PLZzSdj89sCN3EbxoMjhPnMFW14k6dpVv1&index=2

사용법 나옴

 

https://reqres.in/

-> Fake Data / Fake Server

public API 가져와서 쓸수 있는곳 여러가지 테스트 할 수 있음

 

https://github.com/axios/axios

-> axios 사용방법 정리해둔 곳

 

axios 사용하기 전에 import 해줘야 함

 

axios import 방법

-> import axios from "axios"

 

데이터 가져오는 방법

get 방식

->

data: {

        list: []

},

 

methods: {

test(){

axios

  .get('/user?ID=12345') <- get 으로 가져올 url 입력

  .then(response => {    <- 성공시 출력

   // handle success

   console.log(response);

                   this.list = response;    <- 가지고온 데이터를 list 변수에 담는다

})

.catch(error => {          <- 에러시 출력

   // handle error

   console.log(error);

})

.finally(() => {              <- 에러든 성공이든 둘다 출력

    // always executed

  });

}

}

 

post 방식

-> methods: {

test(){

axios.post('/user', {          <- post 로 가져올 url 입력

    firstName: 'Fred',        <- post 로 보낼 데이터

    lastName: 'Flintstone'  <- post 로 보낼 데이터

  })

  .then(response => {      <- 성공 시 출력

    console.log(response); 

  })

  .catch(error => {            <- 실패 시 출력

    console.log(error);

  });

}

}

 

login 만드는 방법

<template>

    <div>

        <p>아이디 : <input v-mpdel="id"></p>

        <p>비밀번호 : <input type="password" v-mpdel="pw"></p>

        <v-btn @click="login()">로그인</v-btn>

    </div>

 

</template>

 

  <script>

 

  import datas from './assets/data.js';

  import axios from "axios";

 

  export default {

    name: 'App',

    data() {

      return {

        di: '',

        pw: '',

        tok: ''

      }

    },

    methods : {

        login(){

        axios.post('/api/login', {

            id: this.id,

            pw: this.pw

          })

          .then(response => {

            console.log(response);

            this.tok = response;

          })

          .catch(error => {  

            console.log(error);

            alert('로그인에 실패하였습니다.');

          });

        }

    }

  }

  </script>

 

새로고침을 하면 유저 정보가 초기화 되기 때문에

로컬스토리지에 토큰을 저장하여 사용한다

 

로컬 스토리지에 정보저장하는 방법

localStorage.setItem("access_token", token)