Vue의 repository pattern을 사용하여 API 연동(2)

📌Vue.js에서 Repository pattern적용방법

간단히 순서 설명후 따라해보자

1. Repository 폴더 생성 
2. Clients 폴더 만들기
3. xxxClient.js 클래스/인터페이스 만들기
4. 개별 리포지토리 클래스 만들기
5. 파일 "저장소.js"만들기 
6. 모델, 컨트롤러 또는 Vuex내에서 사용하기

👉1. Repository 폴더 생성 

해당 src폴더에 repository 폴더 만든다.

 

👉2. Clients 폴더 생성 

새로 만든 'repositories'폴더 안에 'clients'폴더를 만들자. 기본적으로 이 폴더 안에 파일들을 넣을예정이다. 예를들어 HTTP클라이언트,Axios 등등.. 

 

👉3. xxxClient.js 클래스/인터페이스 만들기

여기에는 CRUD 메서드를 포함한 모든 클라이언트 API구성이 포함된다. 이러한 각 클라이언트에 대해 다른 파일을 만들어야 한다.

나는 axios로 client를 만들거기 때문에  AxiosClients.js 파일 만들고 axios의 모든 기본 구성을 넣자.

*혹시 aixos가 안깔려 있다면 폴더 생성 전 먼저 터미널에서 npm install axios --save --dev 코드 입력해서 설치

<AxiosClient.js> 

import axios from "axios";

const baseDomain = "https://jsonplaceholder.typicode.com";//본인이 사용하는 api 주소 넣으면 됨
const baseURL = `${baseDomain}`; // Incase of /api/v1;

// ALL DEFUALT CONFIGURATION HERE

export default axios.create({
  baseURL,
  headers: {
    Authorization : "Bearer xxxxx",//본인이 사용하는 api의 authorization 넣어주면 됨
  }
});

 

👉4. 개별 리포지토리 클래스 만들기

응용 프로그램의 특정 기능 내에서 수행될 다른 API작업들에서 필요한 repository 클래스들을 만들어준다. 이것은 코드에서 필요한 요청을 정의하고 내보낼 수 있는데 

'repositories'폴더 안에 이름repository.js 파일을 만들고 다음 코드를 넣어준다. 

<이름repository.js>

import Client from './Clients/AxiosClient';
const resource = '/이름';

export default {
    get() {
        return Client.get(`${resource}`);
    },
    getPost(id) {
        return Client.get(`${resource}/${id}`);
    },
    create(payload) {
        return Client.post(`${resource}`, payload);
    },
    update(payload, id) {
        return Client.put(`${resource}/${id}`, payload);
    },
    delete(id) {
        return Client.delete(`${resource}/${id}`)
    },

    // MANY OTHER ENDPOINT RELATED STUFFS
};

👉5. 파일 "store.js"만들기

'리포지토리 팩토리'라는 '리포지토리' 폴더 내부에 Factory Class를 만들어 생성한 모든 다른 개별 리포지토리를 내보내 응용 프로그램 전체에서 쉽게 사용할 수 있다.

import PostRepository from './이름Repository';

const repositories = {
  이름: PostRepository,
};
export default {
  get: (name) => repositories[name],
};

 

👉6. vue component에서 사용하는 법 

이름 = post

<template>
  <div class="row">
    <Post v-for="(post, i) in posts" :key="i" :posts="post" />
    <div class="col-lg-8 col-md-10 mx-auto">
      <div class="clearfix">
        <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
      </div>
    </div>
  </div>
</template>

<script>
import Repository from "../repositories/RepositoryFactory";
const PostRepository = Repository.get("posts");

import Post from "./Post";
export default {
  name: "Posts",
  components: {
    Post
  },
  data() {
    return {
      posts: []
    };
  },
  created() {
    this.getPosts();
  },
  methods: {
    getPosts: async function() {
      const { data } = await PostRepository.get();
      this.posts = data;
    }
  }
};
</script>

• 참고자료) Consuming APIs Using the Repository Pattern in Vue.js